GWT UiBinder 中的 FlowPanel 与 HTMLPanel答案

【问题标题】：FlowPanel vs. HTMLPanel in GWT UiBinderGWT UiBinder 中的 FlowPanel 与 HTMLPanel
【发布时间】：2012-02-14 20:25:45
【问题描述】：

在使用 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。

【问题讨论】：

标签： gwt uibinder

【解决方案1】：

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

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

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

例如，你不能用 FlowPanel 做这样的伎俩。

【讨论】：

除了它们的渲染方式，尤其是在这样一个简单的情况下，选择一个而不是另一个有优点还是缺点？
您可以简单地自行检查 - 在 firefox 上启动 firebug 或在 chrome 中启动开发人员工具来检查这些元素。我已经尝试过了，发现它们都呈现为 div 标签。所以我假设你不必担心副作用，而可以只关注代码的可读性和可维护性。

【解决方案2】：

我最近阅读了Tags First GWT Programming。在我看来，他描述的技术可以让您更好地控制页面的最终呈现，同时保持 GWT 的优势。

我认为您在 FlowPanel 和 HTMLPanel 之间提出的二分法并不是真正正确的问题。相反，最好认识到它们适用于不同的事物。

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

我的个人建议是使用最简单的方法来满足您的需求。

【讨论】：

【解决方案3】：

我推荐第二个例子。如果可能，您应该更喜欢使用纯 HTML 标记（例如“div”）而不是小部件（例如“FlowPanel”），因为具有未使用的逻辑小部件的开销。

这可能看起来微不足道，但当您必须处理大量项目时，它可以为您省去很多麻烦（内存泄漏、gquery 操作等）。

【讨论】：