GWT将FlowPanel视为HTML上下文-为什么？

我正在尝试做一些非常简单的事情，使用uiBinder创建一个基于div的布局。布局的中心是两个标签、一些文本框和一个图像。我期望的输出是：

           ____________________
 Label 1   | box 1            |
           --------------------
           ____________________
 Label 2   | box 2            |
           --------------------
                      _________
 Label 3              |       |
 Label 4              | image |
                      ---------

由于标签和图像是GWT小部件，我不能直接使用div，所以我使用FlowPanel。FLowPanel的文档表明它可以包含小部件。但是，当我编译下面的代码时，它会抛出错误

在HTML上下文中不允许使用：<g:Label addStyleNames='{res.css.actionPanelText}'>（：10）

拜托，有人能指出我在哪里装傻吗

谢谢，Richard

<ui:with field='res' type='com.this.that.wf.portal.flip.client.ui.Resources' />
<FlowPanel>
  <FlowPanel addStyleNames="{res.css.itemDetailsInput}">
    <FlowPanel addStyleNames="{res.css.itemDetailsInputCol1}">
      <g:Label>Label 1</g:Label>
      <g:Label>Label 2</g:Label>
    </FlowPanel>
    <FlowPanel addStyleNames="{res.css.itemDetailsInputCol2}">
      <g:TextBox ui:field="Box1"></g:TextBox>
      <g:TextBox ui:field="Box2"></g:TextBox>
    </FlowPanel>
  </FlowPanel>
  <FlowPanel addStyleNames="{res.css.itemDetailsOutput}">
    <FlowPanel addStyleNames="{res.css.itemDetailsOutputCol1}">
      <g:Label>Label 3</g:Label>
      <g:Label>Label 4</g:Label>
    </FlowPanel>
    <FlowPanel addStyleNames="{res.css.itemDetailsOutputCol2}">
      <g:Image url="http://www.someimage.com/generic.jpg"
               ui:field="itemImage"
               title="Item" altText="My alt"/>
    </FlowPanel>
  </FlowPanel>
</FlowPanel>

---

这就是Flow panel的用途

流程面板的说明符合is

---

如果你使用多个流动面板或水平面板和流动面板的组合，你可以很容易地得到预期的结果。

我真是个白痴。花了几个小时看了这段代码后，我意识到我错过了“FrowPanel”前面的“g:”

我最初使用的是垂直面板和水平面板，但GWT文档表明这些面板不推荐使用，我应该使用flow面板。

    .itemDetailsInput {
    display: table;
    width: 500px;
    margin: 5px;
    width: 100%;
    padding: 3px 5px 3px 5px;
  }

  .itemDetailsInputCol1{
    display: table-cell;
    width: 20%;
    padding: 1em;
    position: relative;
    left: auto;
  }

  .itemDetailsInputCol2 {
    width: 80%;
    display: table-cell;
    padding: 1em;
    position: relative;
  }

  .itemDetailsOutput {
    display: table;
    width: 500px;
    margin: 5px;
    width: 100%;
    padding: 3px 5px 3px 5px;
  }

  .itemDetailsOutputCol1{
    display: table-cell;
    width: 60%;
    padding: 1em;
    position: relative;
    left: auto;
  }

  .itemDetailsOutputCol2 {
    width: 40%;
    display: table-cell;
    padding: 1em;
    position: relative;
  }

A panel that formats its child widgets using the default HTML layout behavior.