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.

Solution 1

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.

Solution 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 layout = uiBinder.createAndBindUi(this);
    // Make sure we use the whole client area
    Window.setMargin("0px");

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

Comments

[Cesar]

Thanks for trying it out. If you inspect the code that is sent to the client you can see the other elements are there. I believe it's the CSS layout that is incorrect, but I don't know enough CSS to debug it.

[Carnell]

I agree that it is probablly a CSS bug but seeing how neither of us really did anything with the CSS (I just used the defaults) it seems that this is a GWT bug. You may wanna open a bug on he GWT issue site (code.google.com/p/google-web-toolkit/issues/list)

[Cesar]

I wasn't aware of RootLayoutPanel existance. Once I changed to using it instead of RootPanel, everything works as expected.

[BK.]

Are you getting any errors in the console? Could you try using the javadocs example (with my correction to West width) to see if that works?

[Cesar]

It's working now. No console errors. The problem was that I was using RootPanel instead of RootLayoutPanel.

[WhyNotHugo]

This helped in my case, though I had to make some adjustments to my particular case, since i'm using a separate class for my UI component. "interface DockLayoutUiBinder extends <DockLayoutPanel, TheEntryPointChildClass> {}" <-- Using "DockLayoutPanel" here was the really important part that helped in my case.

[abhijeet nigoskar]

thanks..I should have better read the documentation. They list it there: code.google.com/webtoolkit/doc/latest/…

[stephen]

I was having this same issue. Yes, RootLayoutPanel is the key.

[l3dx]

RootLayoutPanel! I've also been struggling with this. Thanks!

[Ted M. Young]

Check out @RaphaelO's answer: doing a Window.setMargin("0"); before adding the DockLayoutPanel instance to the RootLayoutPanel seems to do the trick.

[jebrick]

Thank you for this answer. This was driving me crazy.