¿Cómo envuelvo un StackLayoutPanel en un DecoratorPanel usando UiBinder?

Question

Después de haber construido con éxito una interfaz de usuario no trivial programación utilizando GWT, estoy tratando de recrear la misma interfaz de usuario mediante UiBinder. Nunca he utilizado cualquier tipo de sistema de interfaz de usuario declarativa antes y aunque yo estoy haciendo progresos y puedo ver los beneficios de este enfoque, estoy de no poder conseguir un DecoratorPanel para envolver un StackLayoutPanel correctamente.

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>

Sin estar envuelto en la DecoratorPanel, las pantallas y funciones StackLayoutPanel como se esperaba. Cuando se envuelve en el DecoratorPanel, la StackLayoutPanel no puede ser visto. En su lugar es un pequeño círculo azul, que estoy adivinando es gráficos de las esquinas de la DecoratorPanel agrupados juntos firmemente. Esta es la razón por He tratado de establecer un ancho y la altura en la DecoratorPanel y establecer la zona media a 100% como se sugiere en la API GWT.

No hace lo que espero lo que debe ser mal entendido algo aquí. ¿Alguien puede ayudar?

Gracias: -)

Answer 1

LayoutPanels no funcionan bien si no están contenidas en algo que ProvidesResize, esencialmente otra LayoutPanel de algún tipo. DecoratorPanel no es un LayoutPanel y no está destinado a contener uno.

Este problema sería aún ocurrir sin UiBinder, no es un problema con la forma en que se está declarando a él.

Answer 2

Probar href="http://www.hkwebentrepreneurs.com/2011/08/gwt-decoratorlayoutpanel.html" rel="nofollow"> DecoratorLayoutPanel clase DecoratorPanel que subclases LayoutPanel. Por tanto, es compatible con el marco LayoutPanel (a diferencia de DecoratorPanel), y debe envolver su StackLayoutPanel correctamente.

(RENUNCIA:. El código es donado libremente, y no tiene restricciones de licencia Se alojado en mi blog http://hkwebentrepreneurs.com , que es un blog sin fines de lucro.)

ACTUALIZACIÓN:

A modo de explicación, DecoratorLayoutPanel esta clase imita DecoratorPanel de GWT mediante la adición de 9 widgets para sí mismo y organizándolos en una cuadrícula de 3x3. Las 8 widgets de más exteriores son CSS-labrado usando esquinas redondeadas de DecoratorPanel, con un tamaño predeterminado de 5px. La un widget central es expandible y se utiliza para mantener el contenido LayoutPanel.

La ventaja es que se obtiene el mismo efecto redondeado las esquinas de la DecoratorPanel, además de poder añadir cualquier LayoutPanel como un niño y hacer que se dimensiona para ajustarse automáticamente.