How to layout widgets using DockLayoutPanel and UiBinder in GWT 2.0?

Question

I'm trying to get a simple layout working under GWT 2.0 using UiBinder. The layout I'm trying to get is one that mimic Java's BorderLayout in where you can specify different panels in the north, south, east, west and center directions; for that I'm using DockLayoutPanel. I would like to get a header and footer, both with fixed width. The remaining viewport space would be occupied by the widget assigned to the DockLayoutPanel center slot.

The current .ui.xml file I've got is:

<g:DockLayoutPanel unit='EM'>
    <g:north size='2'>
        <g:HTML>HEADER</g:HTML> 
    </g:north>

    <g:south size='2'>
        <g:HTML>FOOTER</g:HTML> 
    </g:south>

    <g:center>
        <g:HTML>
            <div id='loginform'>Hello!</div>
        </g:HTML>
    </g:center>
</g:DockLayoutPanel>

The browser only renders HEADER at the top left corner. How can I achieve the layout I'm looking for? It seems that there's more CSS you've got to know before you can use GWT layout panels, but that kind of defeats the purpose of creating the UI with it.

Answer 1

I tried your code block as well as the the sample block on the javadoc page for DockLayoutPanel and I am getting similar results. Only the data in the North section of the DockLayoutPanel seems to be displayed. However when i search the page (using firefox and safari on Mac) the other elements are found but they are not showing anywhere. Seems like there might be a bug with this panel and the UiBinder.

Answer 2

The use of the newly introduced Layout Panels is indeed quite confusing. There is a way to make the layout occupies the whole client area. It requires a little bit of Java code in addition to the ui.xml file.

In your EntryPoint class, add a UiBinder definition with a annotation to the ui.xml file which declares the layout:

@UiTemplate("LayoutDeclarationFile.ui.xml")
interface DockLayoutUiBinder extends
  UiBinder<DockLayoutPanel, TheEntryPointChildClass> {
}

private static DockLayoutUiBinder uiBinder = GWT
  .create(DockLayoutUiBinder.class);

in the onModuleLoad function, instantiate the UiBinder, retrieves its root and directly add it to the DOM:

public void onModuleLoad() {
    DockLayoutPanel root = uiBinder.createAndBindUi(this);
    // Make sure we use the whole client area
    Window.setMargin("0px");

    // Add the panel to the DOM
    RootLayoutPanel.get().add(layout);
 }

Answer 3

This works for me with none of the hacks suggested by RaphaelO.

The Javadoc example on the DockLayoutPanel uses 192 as the width for West. This is wrong - the author probably thought he was using PX, but he was using EM. So if you zoom out, you'll see that Center is far to the right.

Have you checked your using Standards Mode? This is required for the DockLayoutPanel.

Also, forgot to mention that you should use RootLayoutPanel when you add the DockLayout in your entrypoint class - don't use RootPanel.