FlowPanel vs. HTMLPanel in GWT UiBinder

dting picture dting · Jan 20, 2012 · Viewed 16.1k times · Source

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

Igor Konoplyanko picture Igor Konoplyanko · Jan 20, 2012

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.