FlowPanel vs HTMLPanel in GWT UiBinder

Question

When using UiBinder, what is the preferred way to create 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 that they create the same html when rendering, I wonder if there is an excuse for using one style over another.

javadocs says that FlowPanel is the easiest panel, but at what point the use of HTMLPanel becomes preferred. eg.

 <FlowPanel> <FlowPanel> <Widget> </FlowPanel> <FlowPanel> <Widget> </FlowPanel> </FlowPanel> 

against.

 <HTMLPanel> <div> <Widget> </div> <div> <Widget> </div> </HTMLPanel> 

Thanks.

UiBinder - HTMLPanel vs. div is a pretty similar question, but asks for the use of div and HTMLPanel.

Answer 1

In fact, they will do the same in your case - div. It makes no difference if you don't start adding more elements to the FlowPanel.

Here you can try the FlowPanel behavior: http://examples.roughian.com/index.htm#Panels~FlowPanel

You should use the HTMLPanel in cases where you need to write your own HTML code on the page. This allows you to write HTML code inside an HTMLPanel tag.

For example, you cannot do such a trick with FlowPanel.

Answer 2

I recently read Tags First GWT Programming . It seems to me that the technique described by him will allow you to better control the final visualization of your page, while preserving the advantages of GWT.

I think the dichotomy you ask between FlowPanel and HTMLPanel is not really the right question. Instead, it’s best to admit that they are designed for different things.

HTMLPanel is capable of much more than FlowPanel. When you need to dynamically add and remove widgets embedded in some kind of custom html, use the HTMLPanel. If you just want some widgets to fit on the page with a regular html stream (like some text and images), use the FlowPanel.

My personal advice is to use the simplest thing that can do what you need.

Answer 3

I recommend the second example. If possible, you should use a regular HTML tag such as a "div" above widgets such as a "FlowPanel" because of the overhead of having an unused logical widget.

This may seem trivial first, but it will save you a lot of headache (memory leaks, gquery operations, ...) when you have to deal with a lot of items.