GWT uibinder - how to specify such a simple layout?

Question

I'm using GWT 2.5.1 with uibinder xml for specifying ui layouts.

Being a newbie in this, can't figure out how to specify even a simple layout:

i-want-this

I want the [Somelabel:] and [Button] to take the minimal required place, and [Textbox] to occupy the rest. Tried different approaches: placing them to HorizontalPanel, FlowPanel, even DockLayoutPanel. None of them satisfy my requirements: HorizontalPanel just divides parent container to three equal parts, FlowPanel gives no respect to element width, DockLayoutPanel wants me to manually calculate and specify the width of [Somelabel:] and [Button] and still doesn't work at all.

That is the basic ui layout task and I can't believe that GWT does not have a way to specify what I want without manual pixelwidth calculation. Most different UI tools have the simple way to specify it.

this lays them in equal cells:

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

horizontal-panel

this lays them in a weird way (whether "float: left" specified for label or not; whether "float: right" specified for button or not):

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

flow-panel

this wants me to specify pixels but doesn't even display them:

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

[no image because it doesn't display anything]

I'm kinda stuck because the only kind-of-working xml is the HorizontalPanel one and it does not do what I want.

UP: added screenshots and tried "float:" css styles (which didn't change anything).

UP2: got the picture I wanted using LayoutPanel and specifying pixelwidth of each layer.

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

But the xml looks ugly, forces me to calculate pixels manually, and to specify each width in two places. Can I somehow leave the pixelwidth calculations to framework and just specify "place it there and give it minimum place it wants"?

Onkar Onkar · Accepted Answer · 2014-01-13T05:20:38

If you refer to the GWT docs [here][1] it mentions your exact problem. Try using FlowPanel with float : left CSS property as specified.

EDIT : This worked for me

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

GWT uibinder - how to specify such a simple layout?

1 Answers