Bug 366352 - HTML Component is always left aligned when drag & drop component from Web page Editor
Summary: HTML Component is always left aligned when drag & drop component from Web pag...
Status: NEW
Alias: None
Product: Java Server Faces
Classification: WebTools
Component: UI (show other bugs)
Version: unspecified   Edit
Hardware: PC Windows XP
: P3 enhancement (vote)
Target Milestone: Future   Edit
Assignee: Ian Trimble CLA
QA Contact:
URL:
Whiteboard:
Keywords: helpwanted
Depends on:
Blocks:
 
Reported: 2011-12-12 01:17 EST by chavi CLA
Modified: 2012-04-24 19:18 EDT (History)
2 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description chavi CLA 2011-12-12 01:17:07 EST
Build Identifier:  20100917-0705

I have created a html file inside Dynamic project.I open this file in Web page Editor.When i drag & drop component from palette,its always left aligned.If i drop my component in mid of editor,it does not placed over that position & moved to left aligned.What is the cause of this.I am not able to create html page as per my layout positioning.

Reproducible: Always

Steps to Reproduce:
1.Create HTML file inside dynamic page.Open with Web page editor.
2.Drag & drop html content from palette.
3.Component is always left aligned
Comment 1 Raghunathan Srinivasan CLA 2012-01-05 12:45:46 EST
Not planned for Juno. We will appreciate a patch to address this issue.
Comment 2 chavi CLA 2012-01-06 01:11:51 EST
Thanks for reply...
It means in upcoming Eclipse Juno,this issue is not going to resolved or is there any possibility to provide some solution so that at least it will not move to left position & would remain where it is dragged.



(In reply to comment #1)
> Not planned for Juno. We will appreciate a patch to address this issue.
Comment 3 Ian Trimble CLA 2012-01-06 17:20:46 EST
The Web Page Editor attempts to most closely resemble how a browser will lay the page out, hence the left alignment. There is a Web Page Editor preference to allow divs to be positioned absolutely (which is generally how absolute positioning is done in a web page).

It's also not clear to me exactly what enhancement is being requested. Suppose the editor allowed things to be dropped in absolute positions - we'd have to start wrapping components in absolutely-positioned divs to get the same result at runtime in the browser, that is, we'd have to generate extra source around the dropped components to try to emulate the designed layout at runtime. To date, our approach has been to leave absolute positioning to the page author. Automatic absolute positioning would be a considerable change to the design-time layout engine.

We currently don't have the resources to work on layout, so we are unable to reasonably target the requested enhancement for Juno.

There is almost always a possibility of providing some solution, but at this point it'd have to come in the form of a contributed patch, along with sufficient JUnit tests to provide a high level of confidence that layout is as stable as it ever was.
Comment 4 chavi CLA 2012-01-17 05:19:27 EST
Thanks for providing feedback.I have changed the positioning of div to absolute but still if i drag & drop component to Design page,Its dropping left aligned only.
Apart from this i am analyzing source code of jst page designer and i found that  component is dropped to absolute positioning but its doing some calculation internally which makes it to drop left aligned.
Can you please tell me that where you are setting its positioning in source code  & setting its layout?


(In reply to comment #3)
> The Web Page Editor attempts to most closely resemble how a browser will lay
> the page out, hence the left alignment. There is a Web Page Editor preference
> to allow divs to be positioned absolutely (which is generally how absolute
> positioning is done in a web page).
> 
> It's also not clear to me exactly what enhancement is being requested. Suppose
> the editor allowed things to be dropped in absolute positions - we'd have to
> start wrapping components in absolutely-positioned divs to get the same result
> at runtime in the browser, that is, we'd have to generate extra source around
> the dropped components to try to emulate the designed layout at runtime. To
> date, our approach has been to leave absolute positioning to the page author.
> Automatic absolute positioning would be a considerable change to the
> design-time layout engine.
> 
> We currently don't have the resources to work on layout, so we are unable to
> reasonably target the requested enhancement for Juno.
> 
> There is almost always a possibility of providing some solution, but at this
> point it'd have to come in the form of a contributed patch, along with
> sufficient JUnit tests to provide a high level of confidence that layout is as
> stable as it ever was.
Comment 5 Ian Trimble CLA 2012-01-17 11:51:19 EST
(In reply to comment #4)
> Thanks for providing feedback.I have changed the positioning of div to absolute
> but still if i drag & drop component to Design page,Its dropping left aligned
> only.

If you want to use absolute positioning of DIV elements, this setting will try to respect where you position them. It won't cause anything dropped from the palette to position anywhere other than to the left, as always. To do that, you'll have to absolutely position a DIV element and add content to that.

> Apart from this i am analyzing source code of jst page designer and i found
> that  component is dropped to absolute positioning but its doing some
> calculation internally which makes it to drop left aligned.
> Can you please tell me that where you are setting its positioning in source
> code  & setting its layout?

Google for such things as "DHTML" and "DIV absolute positioning", and you'll see how things are absolutely positioned.
Comment 6 chavi CLA 2012-02-03 01:15:23 EST
Thanks for your feedback..
I have downloaded the code of JST pagedesigner.The location which i am getting is i think after manipulation of absolute positioning.i am getting this position with runcostomizer [DOMRefPosition: (after input@[154, 175] (<input type="submit">))]
Can you please tell me in which API you are getting absolute positioning which is provided by GEF.
Can you please share design architecture document of Web Page Editor.
Thanks in advance..



(In reply to comment #5)
> (In reply to comment #4)
> > Thanks for providing feedback.I have changed the positioning of div to absolute
> > but still if i drag & drop component to Design page,Its dropping left aligned
> > only.
> 
> If you want to use absolute positioning of DIV elements, this setting will try
> to respect where you position them. It won't cause anything dropped from the
> palette to position anywhere other than to the left, as always. To do that,
> you'll have to absolutely position a DIV element and add content to that.
> 
> > Apart from this i am analyzing source code of jst page designer and i found
> > that  component is dropped to absolute positioning but its doing some
> > calculation internally which makes it to drop left aligned.
> > Can you please tell me that where you are setting its positioning in source
> > code  & setting its layout?
> 
> Google for such things as "DHTML" and "DIV absolute positioning", and you'll
> see how things are absolutely positioned.
Comment 7 Ian Trimble CLA 2012-02-03 14:52:19 EST
(In reply to comment #6)
> Can you please tell me in which API you are getting absolute positioning which
> is provided by GEF.

I'd start by looking at CSSLayout.isAbsolutePosition() and search for references that use this method, and drill down from there.

> Can you please share design architecture document of Web Page Editor.

All of our work, inclduing design documentation, is in CVS at dev.eclipse.org:/cvsroot/webtools/org.eclipse.jsf. The Web Page Editor was originally contributed by Sybase, and I am not sure if design documentation came with it. If we have any, it's in CVS, though.

 - Ian
Comment 8 chavi CLA 2012-02-07 06:27:06 EST
Thanks Ian,
I have drilled down through this method references but still i am not able to get original drop position of components.Can you please tell me some other way to achieve it?

(In reply to comment #7)
> (In reply to comment #6)
> > Can you please tell me in which API you are getting absolute positioning which
> > is provided by GEF.
> 
> I'd start by looking at CSSLayout.isAbsolutePosition() and search for
> references that use this method, and drill down from there.
> 
> > Can you please share design architecture document of Web Page Editor.
> 
> All of our work, inclduing design documentation, is in CVS at
> dev.eclipse.org:/cvsroot/webtools/org.eclipse.jsf. The Web Page Editor was
> originally contributed by Sybase, and I am not sure if design documentation
> came with it. If we have any, it's in CVS, though.
> 
>  - Ian
Comment 9 Ian Trimble CLA 2012-02-08 19:37:16 EST
It's not at all clear to me from where you are trying to access the drop location, so I am finding it difficult to advise you how to get that location. We grab the location at the time of drop using org.eclipse.gef.tools.AbstractTool.getLocation(), in case that helps at all.

I'm also not understanding your intended goal. The Web Page Editor will render absolutely-positioned div elements if the preference is enabled. This preference does not in any way affect dropping an item on the canvas. We try to render as close as reasonable to what will be produced at runtime; rendering a button (for example) at the exact location it was dropped on the canvas is not at all useful if that's not what the browser will display.

 - Ian
Comment 10 Ian Trimble CLA 2012-02-08 20:03:12 EST
(In reply to comment #6)
> The location which i am getting
> is i think after manipulation of absolute positioning.i am getting this
> position with runcostomizer [DOMRefPosition: (after input@[154, 175] (<input
> type="submit">))]

OK, I think I'm beginning to understand. That position is not a GEF co-ordinate at all, it is a position in the DOM to an org.w3c.dom.Node. Basically, it is where in the source document tree the item is being dropped.
Comment 11 chavi CLA 2012-02-09 05:16:07 EST
Thanks Ian,
Actually i have created a plugin project and added org.eclipse.jst.pagedesigner as a dependency.I am getting dom position by overriding runcustomizer but i want to access original posion of the component.
I tried to access by org.eclipse.gef.tools.AbstractTool.getLocation() but its giving me (0,0)location.May be its not getting accessed at appropriate position.Can you please tell me that which method i should override so that i can get exact position.
Thanks again for helping me.


(In reply to comment #10)
> (In reply to comment #6)
> > The location which i am getting
> > is i think after manipulation of absolute positioning.i am getting this
> > position with runcostomizer [DOMRefPosition: (after input@[154, 175] (<input
> > type="submit">))]
> 
> OK, I think I'm beginning to understand. That position is not a GEF co-ordinate
> at all, it is a position in the DOM to an org.w3c.dom.Node. Basically, it is
> where in the source document tree the item is being dropped.
Comment 12 Ian Trimble CLA 2012-02-09 13:47:29 EST
(In reply to comment #11)
> Actually i have created a plugin project and added org.eclipse.jst.pagedesigner
> as a dependency.I am getting dom position by overriding runcustomizer but i
> want to access original posion of the component.
> I tried to access by org.eclipse.gef.tools.AbstractTool.getLocation() but its
> giving me (0,0)location.May be its not getting accessed at appropriate
> position.Can you please tell me that which method i should override so that i
> can get exact position.

If you're using extension points, there is nothing that will give you access to the GEF drop co-ordinate. We'd need a specific use case in order to know what the appropriate API/ext-pt would be.

Or are you rewriting the Web Page Editor code itself? If that's the case, I would have to know more about from what area of code you are trying to get the drop location to help you understand how to determine the GEF co-ordinate.

Understanding what you are trying to do would be a great help at this point - I think we've strayed away from the initial bug report.

For the record, there actually is no bug here. You can work with DHTML today to develop absolutely-positioned web page content. There is no intention to make palette items drop at absolute positions automatically, this can be done by first configuring a div and then dropping items into it.

 - Ian
Comment 13 chavi CLA 2012-02-10 06:49:12 EST
Thanks Ian,
As per your suggestion i have set absolute positioning in Preferences & then wrote this code :
<div style="height: 196px;position: absolute; width: 916px">
Correct me if i am wrong.
Then i dropped my component inside it which generates following code.
<div style="height: 196px;position: absolute; width: 916px"><form></form><form style="height: 274px; "><input type="submit"><input type="submit"><input type="submit"><input
	type="submit"><input type="submit"></form></div>
Its positioning these component absolute but still its getting left aligned when i drag & drop component from palette.Please tell me is it the desired scenario or am i doing something wrong?
Thanks again


(In reply to comment #12)
> (In reply to comment #11)
> > Actually i have created a plugin project and added org.eclipse.jst.pagedesigner
> > as a dependency.I am getting dom position by overriding runcustomizer but i
> > want to access original posion of the component.
> > I tried to access by org.eclipse.gef.tools.AbstractTool.getLocation() but its
> > giving me (0,0)location.May be its not getting accessed at appropriate
> > position.Can you please tell me that which method i should override so that i
> > can get exact position.
> 
> If you're using extension points, there is nothing that will give you access to
> the GEF drop co-ordinate. We'd need a specific use case in order to know what
> the appropriate API/ext-pt would be.
> 
> Or are you rewriting the Web Page Editor code itself? If that's the case, I
> would have to know more about from what area of code you are trying to get the
> drop location to help you understand how to determine the GEF co-ordinate.
> 
> Understanding what you are trying to do would be a great help at this point - I
> think we've strayed away from the initial bug report.
> 
> For the record, there actually is no bug here. You can work with DHTML today to
> develop absolutely-positioned web page content. There is no intention to make
> palette items drop at absolute positions automatically, this can be done by
> first configuring a div and then dropping items into it.
> 
>  - Ian
Comment 14 Ian Trimble CLA 2012-02-10 14:52:00 EST
You can only position the div elements absolutely, as per HTML itself. You cannot position an input element (for example). Try adding the CSS properties "top:100px;left:100px;" to your style attribute to see the div change position.

When you drop from the palette, all elements will flow as they do naturally in the browser (typically from left to right, top to bottom). If you drop into an absolutely-positioned div, they will still flow left to right, top to bottom, but the div itself can be positioned anywhere. To get all elements appearing exactly where you want to see them, you would have to wrap each and every one in its own div element. The danger of doing this is that different browsers on different operating systems will display elements with different sizes and such, and so your positioning may have a negative affect; what looks good in one browser might look terrible in another.

Back to the Web Page Editor, though - within any container, what you drop will flow from left to right, top to bottom, as they will in the browser at runtime. To answer your question, I don't think you're doing anything wrong, I think you are expecting Visual Basic-like functionality for designing web pages, and you won't get that with the Web Page Editor. (We'd have to wrap everything you dropped in an absolutely-positioned div, just as you can do manually.)
Comment 15 chavi CLA 2012-04-24 03:33:55 EDT

(In reply to comment #14)

Actually i have added my custom component category in Palette in WPE,Now i wanted to generate code for my custom component but i am not able to find the mechanism through which code is getting generated & how figures are synchronized with generated code.How DOM is playing role in code generation mechanism?
I have asked this question of Forum also but no help.

Thanks in advance

> You can only position the div elements absolutely, as per HTML itself. You
> cannot position an input element (for example). Try adding the CSS properties
> "top:100px;left:100px;" to your style attribute to see the div change position.
> 
> When you drop from the palette, all elements will flow as they do naturally in
> the browser (typically from left to right, top to bottom). If you drop into an
> absolutely-positioned div, they will still flow left to right, top to bottom,
> but the div itself can be positioned anywhere. To get all elements appearing
> exactly where you want to see them, you would have to wrap each and every one
> in its own div element. The danger of doing this is that different browsers on
> different operating systems will display elements with different sizes and
> such, and so your positioning may have a negative affect; what looks good in
> one browser might look terrible in another.
> 
> Back to the Web Page Editor, though - within any container, what you drop will
> flow from left to right, top to bottom, as they will in the browser at runtime.
> To answer your question, I don't think you're doing anything wrong, I think you
> are expecting Visual Basic-like functionality for designing web pages, and you
> won't get that with the Web Page Editor. (We'd have to wrap everything you
> dropped in an absolutely-positioned div, just as you can do manually.)
Comment 16 Ian Trimble CLA 2012-04-24 19:18:05 EDT
This isn't an appropriate place for a development discussion, but here are some quick pointers that may be of help (if I understand your requirements correctly).

In the Eclipse Help system, view the following two topics:
 - JavaServer Faces Tooling Developer Guide
    - Tutorials
       - Providing Design-Time Tag Metadata
 - JavaServer Faces Tooling Developer Guide
    - Programmer's Guide
       - Design-Time Tag Metadata Operations

Also, in the org.eclipse.jst.pagedesigner.jsf.ui plugin, take a look at the following metadata implementations:
 - metadata/jsf_core_dti.xml
 - metadata/jsf_html_dti.xml