FlowPanel vs. HTMLPanel in GWT UiBinder - gwt

Question

When using UiBinder what is the preferred method of creating a simple layout like this?
FlowPanel:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:style>
.outer {
display: table;
height: 100%;
width: 100%;
}
.inner {
background: #DDD;
display: table-cell;
vertical-align: middle;
}
</ui:style>
<g:FlowPanel styleName="{style.outer}">
<g:FlowPanel styleName="{style.inner}">
<g:Label ui:field="someLabel"/>
</g:FlowPanel>
</g:FlowPanel>
</ui:UiBinder>
HTMLPanel:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:style>
.outer {
display: table;
height: 100%;
width: 100%;
}
.inner {
background: #DDD;
display: table-cell;
vertical-align: middle;
}
</ui:style>
<g:HTMLPanel styleName="{style.outer}">
<div class="{style.inner}">
<g:Label ui:field="someLabel"/>
</div>
</g:HTMLPanel>
</ui:UiBinder>
Edit: I know they produce the same html when rendering, I'm wondering if there is any justification for using one style over the other.
The javadocs say that the FlowPanel is the simplest panel, but at what point does using an HTMLPanel become preferable. e.g.
<FlowPanel>
<FlowPanel>
<Widget>
</FlowPanel>
<FlowPanel>
<Widget>
</FlowPanel>
</FlowPanel>
vs.
<HTMLPanel>
<div>
<Widget>
</div>
<div>
<Widget>
</div>
</HTMLPanel>
Thanks.
UiBinder - HTMLPanel vs. div is a fairly similar question but asks about using a div vs. a HTMLPanel.

Answer 1

Actually they will render same in your case - div. There is no difference unless you start adding more elements to FlowPanel.
You can try FlowPanel behaviour here:
http://examples.roughian.com/index.htm#Panels~FlowPanel
You should use HTMLPanel in cases when you need to write your own custom HTML code on the page. It allows to write HTML code inside of HTMLPanel tag.
For example you can't do such trick with FlowPanel.

Answer 2

I recently read Tags First GWT Programming. It seems to me, that the technique he describes would allow you to have much better control over the ultimate rendering of your page, while maintaining the advantages of GWT.
I think the dichotomy that you're asking about between FlowPanel and HTMLPanel isn't really the right question. Instead, it is best to recognize that they're meant for different things.
HTMLPanel is capable of a lot more than FlowPanel is. When you need to dynamically add and remove widgets that are embedded in some custom html, use an HTMLPanel. If you just want some widgets to align together on the page with normal html flow (like some text and pictures) use a FlowPanel.
My personal advice would be to use the simplest thing that can do what you need it to.

Answer 3

I recommend the second example. If possible you should prefer using a plain HTML tag such as "div" over a widget such as "FlowPanel" because of the overhead having an unused logical widget.
This may seems trivial first but it saves you a lot of headache (memory leaks, gquery operations, ...) when you have to deal with a lot of items.