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

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">
<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 :-开发者_如何学编程)

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.

Try this DecoratorLayoutPanel class, which is an implementation of DecoratorPanel that subclasses LayoutPanel. It is therefore compatible with the LayoutPanel framework (unlike DecoratorPanel), and should wrap your StackLayoutPanel correctly.

(DISCLAIMER: the code is donated freely, and has no license restrictions. It is hosted on my blog http://hkwebentrepreneurs.com, which is a not-for-profit blog.)

UPDATE:

By way of explanation, this DecoratorLayoutPanel class mimics GWT's DecoratorPanel by adding 9 widgets to itself and arranging them into a 3x3 grid. The 8 outermost widgets are CSS-styled using DecoratorPanel's rounded corners, with a default size of 5px. The one central widget is expandable and is used to hold the LayoutPanel content.

The benefit is that you get the same rounded-corners effect of the DecoratorPanel, while being able to add any LayoutPanel as a child and having it automatically sized to fit.