Home/ Questions/Q 7079125
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T06:37:58+00:00

When using UiBinder what is the preferred method of creating a simple layout like

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0