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.

score 30 · Accepted Answer · answered Dec 22 '09 at 13:45

30

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.

answered Dec 22 '09 at 13:45

BK.

316
2
2

8

I wasn't aware of RootLayoutPanel existance. Once I changed to using it instead of RootPanel, everything works as expected. – Cesar Dec 22 '09 at 14:52
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? – BK. Dec 22 '09 at 14:52
3

It's working now. No console errors. The problem was that I was using RootPanel instead of RootLayoutPanel. – Cesar Dec 22 '09 at 15:51
1

thanks..I should have better read the documentation. They list it there: http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels – Juri Feb 19 '10 at 15:28
I was having this same issue. Yes, RootLayoutPanel is the key. – Dusty Campbell Nov 18 '10 at 21:55
RootLayoutPanel! I've also been struggling with this. Thanks! – l3dx Mar 15 '11 at 10:04
Thank you for this answer. This was driving me crazy. – jebrick Feb 05 '19 at 16:18

score 2 · Answer 2 · edited Jan 17 '12 at 00:18

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

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 {}" <-- Using "DockLayoutPanel" here was the really important part that helped in my case. — WhyNotHugo, Jan 04 '10 at 01:20

score 0 · Answer 3 · answered Dec 21 '09 at 06:20

0

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.

answered Dec 21 '09 at 06:20

Carnell

749
6
10

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. – Cesar Dec 21 '09 at 14:12
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 (http://code.google.com/p/google-web-toolkit/issues/list) – Carnell Dec 21 '09 at 16:40
Check out @RaphaelO's answer: doing a Window.setMargin("0"); before adding the DockLayoutPanel instance to the RootLayoutPanel seems to do the trick. – Ted M. Young Jan 16 '12 at 23:32

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

3 Answers3