gwt - GWT UiBinder 中的 FlowPanel 与 HTMLPanel

Question

使用 UiBinder 时，创建这样的简单布局的首选方法是什么？

流程面板:

<!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>

HTML面板:

<!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>

编辑:我知道它们在渲染时会生成相同的 html，我想知道使用一种样式而不是另一种样式是否有任何理由。

javadocs 说 FlowPanel 是最简单的面板，但是在什么时候使用 HTMLPanel 变得更可取。例如

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

对比

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

谢谢。

UiBinder - HTMLPanel vs. div是一个相当相似的问题，但询问使用 div 与 HTMLPanel。

Answer 1

实际上，在您的情况下，它们会呈现相同的效果 - div。除非您开始向 FlowPanel 添加更多元素，否则没有区别。

您可以在此处尝试 FlowPanel 行为:
http://examples.roughian.com/index.htm#Panels~FlowPanel

当您需要在页面上编写自己的自定义 HTML 代码时，您应该使用 HTMLPanel。它允许在 HTMLPanel 标签内编写 HTML 代码。

例如，你不能用 FlowPanel 做这样的把戏。