Как обернуть StackLayoutPanel в DecoratorPanel с помощью UiBinder?

После успешного создания нетривиального пользовательского интерфейса программным путем с использованием GWT я пытаюсь воссоздать тот же пользовательский интерфейс с помощью UiBinder. Я никогда раньше не использовал какую-либо декларативную систему пользовательского интерфейса, и хотя я делаю успехи и вижу преимущества такого подхода, мне не удается заставить DecoratorPanel правильно обернуть 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>

StackLayoutPanel отображается и функционирует должным образом без включения в DecoratorPanel. При включении в DecoratorPanel панель StackLayoutPanel не видна. На его месте крошечный синий круг, который, как я предполагаю, представляет собой угловую графику DecoratorPanel, плотно сгруппированную вместе. Вот почему я попытался установить ширину и высоту на DecoratorPanel и установить среднюю область на 100%, как это предлагается в GWT API.

Это не делает то, что я ожидаю, поэтому я должен что-то неправильно понять. Кто-нибудь может помочь?

Спасибо :-)


gwt uibinder
person Darren    schedule 06.01.2010    source источник

Ответы (2)


arrow_upward
4
arrow_downward

LayoutPanels не работают должным образом, если они не содержатся в чем-то, что ProvidesResize, по сути, в другом каком-то LayoutPanel. DecoratorPanel не является LayoutPanel и не должен его содержать.

Эта проблема по-прежнему будет возникать без UiBinder, проблема не в том, как вы ее объявляете.

person Matt Moriarity    schedule 06.01.2010
comment
Спасибо, что разъяснили это для меня Мэтт - person Darren; 07.01.2010

arrow_upward
2
arrow_downward

Попробуйте этот класс DecoratorLayoutPanel, который является реализацией DecoratorPanel, который является подклассом LayoutPanel. Поэтому он совместим с фреймворком LayoutPanel (в отличие от DecoratorPanel) и должен правильно обертывать StackLayoutPanel.

(ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: код предоставляется бесплатно и не имеет лицензионных ограничений. Он размещен в моем блоге http://hkwebentrepreneurs.com, который является некоммерческим блогом.)

ОБНОВЛЕНИЕ:

В качестве пояснения, этот класс DecoratorLayoutPanel имитирует DecoratorPanel GWT, добавляя к себе 9 виджетов и размещая их в сетке 3x3. 8 крайних виджетов оформлены в стиле CSS с использованием закругленных углов DecoratorPanel с размером по умолчанию 5 пикселей. Один центральный виджет является расширяемым и используется для хранения содержимого LayoutPanel.

Преимущество заключается в том, что вы получаете тот же эффект закругленных углов, что и DecoratorPanel, при этом вы можете добавить любой LayoutPanel в качестве дочернего элемента и автоматически изменить его размер.

person Francis    schedule 01.01.2012