FlowPanel与HTMLPanel在GWT中的UiBinder

Question

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

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>

编辑:我知道它们在呈现时生成相同的，我想知道是否有理由使用一种风格而另一种风格。

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

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

与

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

谢谢。

UiBinder - HTMLPanel对div是一个非常类似的问题，但询问使用div还是HTMLPanel。

Answer 1

实际上，他们会在你的案例中呈现相同的- div。除非开始向FlowPanel添加更多元素，否则没有区别。

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

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

例如，您不能用FlowPanel做这样的技巧。

Answer 2

我最近读过标签第一GWT编程。在我看来，他描述的技术将允许您更好地控制页面的最终呈现，同时保持GWT的优势。

我认为FlowPanel和HTMLPanel之间的二分法并不是真正正确的问题。相反，最好认识到它们是为不同的事物而设计的。

HTMLPanel比FlowPanel的能力强得多。当您需要动态添加和删除嵌入在某些自定义html中的小部件时，请使用HTMLPanel。如果您只想让一些小部件在页面上与正常的html流(比如一些文本和图片)对齐，可以使用FlowPanel。

我个人的建议是，用最简单的方法去做你需要做的事情。

Answer 3

我推荐第二个例子。如果可能的话，您应该更喜欢使用普通的HTML标记，比如"div“，而不是"FlowPanel”这样的小部件，因为有一个未使用的逻辑小部件的开销很大。

首先，这看起来似乎微不足道，但它为您节省了很多麻烦(内存泄漏、gquery操作、.)当你要处理很多事情的时候。