Wie wickeln wir einen StackLayoutPanel in einem DecoratorPanel mit UiBinder?

Question

Nach dem erfolgreich eine nicht-trivialen UI programmatisch mit GWT gebaut zu haben, versuche ich, die gleiche Benutzeroberfläche mit UiBinder neu zu erstellen. Ich habe nie irgendeine Art von deklarative UI-System vor, und obwohl ich Fortschritte mache und können die Vorteile eines solchen Ansatzes sehen, die ich andernfalls eine DecoratorPanel bekommen eine StackLayoutPanel richtig zu wickeln.

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>

Ohne in der DecoratorPanel gewickelt sind, wobei die StackLayoutPanel Anzeigen und Funktionen wie erwartet. Wenn in den DecoratorPanel gewickelt, kann die StackLayoutPanel nicht zu sehen. An seiner Stelle ist ein kleiner blauer Kreis, die ich vermute, bin die Ecke Grafiken gebündelten eng zusammen des DecoratorPanel ist. Aus diesem Grund habe ich versucht, eine Breite und Höhe auf der DecoratorPanel gesetzt und den mittleren Bereich auf 100% gesetzt, wie in der GWT-API vorgeschlagen.

Es ist nicht das tun, was ich erwarte, so muss ich hier etwas Missverständnis. Kann mir jemand helfen?

Danke: -)

Answer 1

LayoutPanels nicht gut funktionieren, wenn sie nicht in etwas enthalten sind, die ProvidesResize, im Wesentlichen eine andere LayoutPanel irgendeiner Art. DecoratorPanel ist kein LayoutPanel und soll nicht eins enthalten.

Dieses Problem nach wie vor ohne UiBinder auftreten würde, ist es kein Problem mit, wie Sie es deklarieren.

Answer 2

Versuchen Sie, diese DecoratorLayoutPanel -Klasse, die eine Implementierung von DecoratorPanel ist, dass Subklassen LayoutPanel. Es ist daher kompatibel mit dem LayoutPanel Rahmen (im Gegensatz zu DecoratorPanel) und soll Ihre StackLayoutPanel richtig wickeln.

(HAFTUNGSAUSSCHLUSS:. Der Code frei gespendet und hat keine Lizenzbeschränkungen Es ist auf meinem Blog gehostet http://hkwebentrepreneurs.com , die ein nicht-for-Profit-Blog.)

UPDATE:

Als Erklärung dies DecoratorLayoutPanel Klasse imitiert GWT DecoratorPanel durch Zugabe von 9 Widgets selbst und in ein 3x3 Raster angeordnet werden. Die 8 äußersten widgets sind CSS-Stil DecoratorPanel der abgerundeten Ecken verwendet wird, mit einer Standardgröße von 5px. Die eine zentrale Widget ist erweiterbar und verwendet wird, um den Inhalt LayoutPanel zu halten.

Der Vorteil ist, dass Sie die gleiche abgerundete Ecken Wirkung des DecoratorPanel erhalten, während in der Lage, jeden LayoutPanel als Kind hinzuzufügen, und nachdem er automatisch paßt so bemessen ist.