Come posso avvolgere uno StackLayoutPanel in un DecoratorPanel utilizzando UiBinder?

Question

Dopo aver costruito con successo un'interfaccia utente non banale di programmazione utilizzando GWT, sto cercando di ricreare la stessa interfaccia utente utilizzando UiBinder. Non ho mai usato alcun tipo di interfaccia utente del sistema dichiarativo prima e anche se sto facendo progressi e riesco a vedere i benefici di un tale approccio, sto riuscendo a ottenere un DecoratorPanel per avvolgere correttamente uno StackLayoutPanel.

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>

Senza essere avvolta nel DecoratorPanel, i display e funzioni StackLayoutPanel come previsto. Quando avvolto in DecoratorPanel, lo StackLayoutPanel non può essere visto. Al suo posto è un cerchio blu molto piccolo, che sto indovinando è la grafica del DecoratorPanel angolo raggruppati insieme ermeticamente. Ecco perché ho cercato di impostare una larghezza e un'altezza sul DecoratorPanel e impostare l'area centrale al 100%, come suggerito nelle API GWT.

Non fa quello che mi aspetto quindi devo essere equivoco qualcosa qui. Chiunque può aiutare?

Grazie: -)

Answer 1

LayoutPanels non funzionano bene se non sono contenuti in qualcosa che ProvidesResize, essenzialmente un'altra LayoutPanel di qualche tipo. DecoratorPanel non è un LayoutPanel e non è destinato a contenere uno.

Il problema sarebbe ancora avvenire senza UiBinder, non è un problema di come si sta dichiarandolo.

Answer 2

DecoratorLayoutPanel classe, che è un'implementazione di DecoratorPanel che sottoclassi LayoutPanel. E 'quindi compatibile con il quadro LayoutPanel (a differenza DecoratorPanel), e dovrebbe avvolgere il vostro StackLayoutPanel correttamente.

(NOTA BENE:. Il codice viene donato liberamente, e non ha restrizioni di licenza E 'ospitato sul mio blog http://hkwebentrepreneurs.com , che è un blog non a scopo di lucro).

UPDATE:

A titolo di spiegazione, DecoratorLayoutPanel questo imita classe DecoratorPanel di GWT aggiungendo 9 widget per sé e disporli in una griglia 3x3. Gli 8 widget più esterne sono stile CSS utilizzando angoli arrotondati del DecoratorPanel, con una dimensione predefinita di 5px. Il widget di una centrale è espandibile e viene utilizzato per contenere il contenuto LayoutPanel.

Il vantaggio è che si ottiene lo stesso effetto arrotondati angoli del DecoratorPanel, pur essendo in grado di aggiungere qualsiasi LayoutPanel come un bambino e averlo dimensionato automaticamente per adattarsi.