Comment puis-je envelopper un StackLayoutPanel dans un DecoratorPanel en utilisant UiBinder?

Question

Après avoir construit avec succès une interface utilisateur non trivial par programme en utilisant GWT, je suis en train de recréer la même interface utilisateur en utilisant UiBinder. Je ne l'ai jamais utilisé tout type de système d'assurance chômage déclarative avant et même si je fais des progrès et peut voir les avantages d'une telle approche, je ne pas obtenir un DecoratorPanel pour envelopper un StackLayoutPanel correctement.

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>

Sans être enveloppé dans le DecoratorPanel, les écrans et les fonctions StackLayoutPanel comme prévu. Lorsque enveloppé dans le DecoratorPanel, le StackLayoutPanel ne peut pas être vu. A sa place, est un cercle bleu minuscule, que je devine est les graphiques de coin du DecoratorPanel tassent bien. Voilà pourquoi j'ai essayé de définir une largeur et la hauteur sur la DecoratorPanel et définir la zone centrale à 100% comme suggéré dans l'API GWT.

Il ne fait pas ce que je pense donc je dois être malentendu quelque chose. Quelqu'un peut-il aider?

Merci: -)

Answer 1

LayoutPanels ne fonctionnent pas bien si elles ne sont pas contenus dans quelque chose qui ProvidesResize, essentiellement une autre LayoutPanel quelconque. DecoratorPanel n'est pas un LayoutPanel et ne vise pas à contenir un.

Ce problème se produirait toujours sans UiBinder, ce n'est pas un problème avec la façon dont vous le déclarer.

Answer 2

Essayer cette DecoratorLayoutPanel classe, ce qui est une implémentation de DecoratorPanel que sous-classes LayoutPanel. Il est donc compatible avec le cadre de LayoutPanel (contrairement DecoratorPanel), et devrait envelopper votre StackLayoutPanel correctement.

(DISCLAIMER:. Le code est librement donné et n'a aucune restriction de licence Il est hébergé sur mon blog http://hkwebentrepreneurs.com , qui est un organisme sans but lucratif blog.)

Mise à jour:

A titre d'explication, cette classe DecoratorLayoutPanel imite la DecoratorPanel de GWT en ajoutant 9 widgets à lui-même et les disposer dans une grille de 3x3. Les 8 widgets les plus externes sont de style CSS en utilisant les coins arrondis de DecoratorPanel, avec une taille par défaut de 5px. Le seul widget central est extensible et est utilisé pour maintenir la teneur en LayoutPanel.

L'avantage est que vous obtenez le même effet arrondi les coins du DecoratorPanel, tout en étant en mesure d'ajouter un LayoutPanel comme un enfant et l'avoir dimensionné pour adapter automatiquement.