FlowPanel vs. HTMLPanel in GWT UiBinder

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.

Cellist

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.

Endostosis

In addition to how they render, especially in a simple case like this, are there advantages or disadvantages for choosing one over the other? – Cellist

You can simply check it by yourself - launch firebug on firefox or developer tool in chrome to inspect theese elements. I have tried it and figured out that they render both as div tag. So I assume you don't have to worry about side effects, and can concentrate only about your code readabiliy and maintability. – Endostosis

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.

Enjoyable

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.

Resonance