How do I wrap a StackLayoutPanel in a DecoratorPanel using UiBinder?

Question

Hello Everyone :-)

After having successfully built a non-trivial UI programmatically using GWT, I am trying to recreate the same UI using UiBinder. I have never used any kind of declarative UI system before and although I am making progress and can see the benefits of such an approach, I am failing to get a DecoratorPanel to wrap a StackLayoutPanel correctly.

StackNavigator.java

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

public class StackNavigator extends Composite {

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

    interface StackNavigatorUiBinder extends UiBinder<Widget, StackNavigator> {}

    public StackNavigator() {
        initWidget(uiBinder.createAndBindUi(this));
    }

}  

StackNavigator.ui.xml

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"&gt;
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:bandmates="urn:import:org.redboffin.bandmates.client">

    <ui:style>  
        .gwt-DecoratorPanel {
            width: 200px;
            height: 200px;
        }
        .gwt-DecoratorPanel .middleCenter {
            height: 100%;
            width: 100%;
        }
    </ui:style>

    <g:DecoratorPanel>
        <g:StackLayoutPanel unit='PX'>
            <g:stack>
                <g:header size='20'>Item One</g:header>
                <g:Label>TODO : Item One List Widget</g:Label>
            </g:stack>
            <g:stack>
                <g:header size='20'>Item Two</g:header>
                <g:Label>TODO : Item Two List Widget</g:Label>
            </g:stack>
             <g:stack>
                <g:header size='20'>Item Three</g:header>
                <g:Label>TODO : Item Three List Widget</g:Label>
            </g:stack>
        </g:StackLayoutPanel> 
    </g:DecoratorPanel>

</ui:UiBinder>

Without being wrapped in the DecoratorPanel, the StackLayoutPanel displays and functions as expected. When wrapped in the DecoratorPanel, the StackLayoutPanel cannot be seen. In its place is a tiny blue circle, which I am guessing is the DecoratorPanel's corner graphics bunched together tightly. This is why I have tried to set a width and height on the DecoratorPanel and set the middle area to 100% as suggested in the GWT API.

It doesn't do what I expect so I must be misunderstanding something here. Can anyone help?

Thank you :-)

Answer 1

LayoutPanels don't work well if they are not contained in something that ProvidesResize, essentially another LayoutPanel of some kind. DecoratorPanel is not a LayoutPanel and isn't meant to contain one.

This problem would still occur without UiBinder, it's not an issue with how you are declaring it.