GWT將FlowPanel作爲HTML上下文處理 - 爲什麼？

我想做一些很簡單的事情，使用uiBinder創建一個基於div的佈局。在佈局的中心有幾個標籤，一些文本框和一個圖像。我期望的輸出是：GWT將FlowPanel作爲HTML上下文處理 - 爲什麼？

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

由於標籤和圖像的GWT窗口小部件，我不能直接使用DIV，所以我用FlowPanel代替。 FLowPanel的文檔表明它可以包含小部件。然而，當我編譯代碼下方引發錯誤

在HTML上下文不允許：& LTG：標籤addStyleNames = '{} res.css.actionPanelText'>（：10）

請問，有人可以指出我愚蠢的地方嗎？

謝謝，理查德

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

我的CSS是這樣的：

.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; 
    }

來源

2013-10-03 Richard George

那流板的目的。

流量面板的描述爲每docs是

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

您可以輕鬆地得到您預期的結果，如果你使用多個流板或水平面板的組合和流量小組（一個或多個）。

來源

2013-10-04 04:03:39

我最初使用VerticalPanels和HorizontalPanels，但GWT文檔表明這些面板已被棄用，我應該使用流動面板。 –

我確實是一個白癡。花了幾個小時看了這段代碼之後，我意識到我錯過了'FrowPanel'前面的'g：'。

來源

2013-10-04 15:58:33

GWT將FlowPanel作爲HTML上下文處理 - 爲什麼？

回答

相關問題