GWT uibinder - как указать такой простой макет?

Question

Я использую GWT 2.5.1 с uibinder xml для указания макетов ui.

Будучи новичком в этом, не могу понять, как указать даже простой макет:

Я хочу [Somelabel:] и [Кнопка] принять минимально необходимое место, и [Текстовое поле], чтобы занять остальное. Пробовали разные подходы: помещали их в HorizontalPanel, FlowPanel, даже DockLayoutPanel. Ни один из них не удовлетворяет моим требованиям: HorizontalPanel просто делит родительский контейнер на три равные части, FlowPanel не учитывает ширину элемента, DockLayoutPanel хочет, чтобы я вручную вычислил и задал ширину [Somelabel:] и [Button] и все еще не работает вообще.

Это основная задача компоновки ui, и я не могу поверить, что GWT не имеет способа указать, что я хочу, без вычисления расчёта пикселей вручную. У большинства различных инструментов пользовательского интерфейса есть простой способ указать его.

это кладет их в равных клетках:

<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 - это HorizontalPanel, и он не делает то, что я хочу.

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 Недвижимость в соответствии с указанным.

EDIT: Это работало для меня

Ui-Binder

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