GWT Layout is puzzling

4
votes

I'm fighting to understand the weird behavior of GWT Layout Panels. I'm wondering how GWT translate Layout logic into javascript and html. sometimes we don't get the expected Layout . something under the cover is done by GWT compiler. the GWT documentation is not clear enough on how Layout is performed under the cover. is there some good books or tutorials that explains well the GWT Layout issues?

thanks.

1
gwtlayout
@jason:for example when i add tow panels to a HorizontalPanel i see they are layed out one on the east and one on the west. If i use FlowPanel to add these two Panels they stack over each other. these are kinds of GWT UI oddities that i experienced. I want to layout many panels horizontally and want them to be aligned in the right by each other while the last Panel should fill all remaining available horizontal space. by simply adding Panels to a Parent HorizontalPanel i don't get my expected layout . how can i sort out this example i mentioned? thanks - othman

1 Answers

6
votes

I don't know about good books or tutorials but here's a little information that may be helpful.

First, as you may know there's a big difference between the FooPanels and the FooLayoutPanels. These are two different sets of panels that are based on different layout mechanisms. The Layout Panels are the new stuff that seems to be suited better for layouts that have hard-coded sizes, Google Wave style. The older FooPanels (VerticalPanel, etc.) are based on HTML tables mostly.

FlowPanel - this is simply something that outputs your widgets as successive HTML elements in a single DIV. As documented: "A panel that formats its child widgets using the default HTML layout behavior".

DockLayoutPanel - Looking at the code shows that it hard-codes the sizes of the different regions according to what you specify in the children (north, east, etc.)

Finally - my experience has led me to abandon all usage of the Layout Panel system and rely only on HTML and CSS wherever I can. This means using HTMLPanel + UiBinder mostly and sometimes FlowPanel, rarely also some of the other panels.

Trying to understand and battle the Layout Panel system to do things that are not the "default case" was a waste of time. I'm not saying it's the best thing to do, but I just couldn't get the kind of control I wanted without this - especially with regard to elements that should automatically expand vertically. If you haven't already, take note of this from the GWT documentation about Layout Panels:

The panels described above are best used for defining your application's outer structure — that is, the parts that are the least "document-like". You should continue to use basic widgets and HTML structure for those parts for which the HTML/CSS layout algorithm works well. In particular, consider using UiBinder templates to directly use HTML wherever that makes sense.