GWT uibinder - 如何指定這樣一個簡單的佈局？

Question

我使用GWT 2.5.1與uibinder xml來指定UI佈局。

存在於這個新手，無法弄清楚如何指定甚至一個簡單的佈局：

我想要的[Somelabel：]和[按鈕]採取必需的最少的地方，和[文本框]佔據其餘部分。嘗試了不同的方法：將它們放置到Horizo​​ntalPanel，FlowPanel，甚至是DockLayoutPanel。沒有一個滿足我的要求：Horizo​​ntalPanel只是將父容器分成三個相等部分，FlowPanel不尊重元素寬度，DockLayoutPanel希望我手動計算並指定[Somelabel：]和[Button]的寬度，但仍然不起作用在所有。

這是基本的UI佈局任務，我不相信GWT沒有一種方法來指定我想要的，而無需手動像素寬度計算。大多數不同的UI工具都有指定它的簡單方法。

此規定它們在等於細胞：

<g:HorizontalPanel width="100%"> 
     <g:Label>Somelabel:</g:Label> 
     <g:TextBox ui:field="someTextBox"/> 
     <g:Button ui:field="someButton" text="Button"/> 
    </g:HorizontalPanel> 

此規定他們在一個奇怪的方式（是否「浮動：左」爲標籤或沒有指定;「浮動：右」是否指定爲按鈕或不）：

<g:FlowPanel width="100%"> 
     <g:Label>Somelabel:</g:Label> 
     <g:TextBox ui:field="someTextBox"/> 
     <g:Button ui:field="someButton" text="Button"/> 
    </g:FlowPanel> 

這要我指定像素，但竟然不顯示它們：

<g:DockLayoutPanel width="100%" height="90"> 
     <g:east size="30"><g:Label>Somelabel:</g:Label></g:east> 
     <g:center><g:TextBox ui:field="someTextBox"/></g:center> 
     <g:west size="50"><g:Button ui:field="someButton" text="Button"/></g:west> 
    </g:DockLayoutPanel> 

[無圖像，因爲它不顯示任何內容]

我有點卡住，因爲只有一種 - 的 - 工作xml是Horizo​​ntalPanel的一個，它不會做我想要的。

UP：添加了屏幕截圖並嘗試「float：」css樣式（它沒有改變任何東西）。

UP2：得到了我想要的圖片，使用LayoutPanel並指定每個圖層的像素寬度。

<g:LayoutPanel width="100%" height="40px"> 
     <g:layer width="100px" left="0"> 
      <g:Label>Somelabel:</g:Label> 
     </g:layer> 
     <g:layer left="100px" right="200px"> 
      <g:TextBox ui:field="someTextBox"/> 
     </g:layer> 
     <g:layer width="200px" right="0"> 
      <g:Button ui:field="someButton" text="Button"/> 
     </g:layer> 
    </g:LayoutPanel> 

但是，這個xml看起來很醜，迫使我手動計算像素，並在兩個地方指定每個寬度。我可以以某種方式將像素寬度計算留給框架，並且只需指定「將它放置在那裏並將其放到最小位置」？

Answer 1

如果您參考GWT文檔[這裏] [1]，它會提到您確切的問題。按照指定，嘗試使用FlowPanel和float : leftCSS屬性。

編輯： 這爲我工作

UI的粘結劑

<g:FlowPanel width="100%" addStyleNames="myTable"> 
    <g:FlowPanel addStyleNames="myTableRow"> 
     <g:Label addStyleNames="myTableLabel">Somelabel:</g:Label> 
     <g:FlowPanel width="100%" addStyleNames="myTableCell"> 
      <g:TextBox ui:field="someTextBox" addStyleNames="myTableInput"/> 
     </g:FlowPanel> 
     <g:Button ui:field="someButton" text="Button" addStyleNames="myTableButton"/> 
    </g:FlowPanel> 
</g:FlowPanel> 

CSS：

.myTable { 
    display: table; 
    width: 100%; 

} 

.myTableRow { 
    display: table-row; 
} 

.myTableLabel { 
    display: table-cell; 
} 

.myTableCell { 
    display: table-cell; 
    width: 100%; 
} 

.myTableInput { 
width: 100%;  
} 

.myTableButton { 
    display: table-cell; 
}