GWT - docklayout panel in UiBinder

Question

I need to implement a DockLayoutPanel in UiBinder. I knew that we can use < g:north> < g:west> and so on in UiBinder to do the same thing as what DockLayoutPanel.addNorth(), DockLayoutPanel.addWest() do.

My question is that, is there anything in Uibinder, which can do the same thing as DockLayoutPanel.insertNorth(), DockLayoutPanel.insertWest()?

Also, are there any official documents that I can search the Uibinder commands so that I can know what I can use for uibinder?

Thanks.

score 2 · Answer 1 · answered Oct 05 '12 at 18:34

Here is what you are looking for:

<g:FlowPanel>
    <g:DockLayoutPanel ui:field="myPanel">
        <g:west size="300">
            <g:VerticalPanel ui:field="mySideBar" />
        </g:west>
        <g:center>
            <g:VerticalPanel ui:field="myMainPanel" />
        </g:center>
    </g:DockLayoutPanel>
</g:FlowPanel>

score 0 · Answer 2 · answered Oct 05 '12 at 18:57

There are no "commands" in Ui:Binder. You can specify the layout using widgets and HTML, and you can set various attributes for your widgets (like class, width, height, text, title, value, etc.). But you can't tell Ui:Binder to insert a widget in one situation and not to insert it in another, for example. You do it in your app code.

Boris Brudnoy · Accepted Answer · 2012-10-06T01:21:50.480

Both add*() and insert*() methods of the DockLayoutPanel are for programmatic runtime addition of sub-panels. UiBinder doesn't do "the same thing" as those methods. Your work directly with UiBinder happens during design time only.

UiBinder is a static layout tool, a "snapshot" of your widget immediately after initialization, a way to describe what the positioning of elements relative to each other is at first.

The widgets you specify using UiBinder can be programmatically manipulated after initialization. Suppose you've specified the following layout:

 <g:DockLayoutPanel ui:field="myDockPanel">
    <g:north size="100">
        <g:Label ui:field="northernLabel">I am far north</g:Label>
    </g:north>
    <g:center>
        <g:Label ui:field="centerLabel">Center Stage</g:Label>
    </g:center>
</g:DockLayoutPanel>

In the code running after your view initializes you can now go:

myDockPanel.insertNorth(new Label("I am even farther north!"), 100.0, northernLabel);

Also, are there any official documents that I can search the Uibinder commands so that I can know what I can use for uibinder?

Google Dev Guide section on declarative layout with UiBinder is as official as you can get, AFAIK.

GWT - docklayout panel in UiBinder

3 Answers3