Как мне обернуть 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>
Не будучи обернутой в DecoratorPanel, StackLayoutPanel отображается и функционирует должным образом.Когда он заключен в DecoratorPanel, StackLayoutPanel не видна.На его месте находится крошечный синий круг, который, как я предполагаю, представляет собой плотно сгруппированную угловую графику DecoratorPanel.Вот почему я попытался установить ширину и высоту на DecoratorPanel и установить среднюю область равной 100%, как предложено в GWT API.
Это не делает того, чего я ожидаю, так что я, должно быть, здесь что-то недопонимаю.Кто-нибудь может помочь?
Спасибо вам :-)
Решение
LayoutPanels не работают хорошо, если они не содержатся в чем-то, что обеспечивает меньший размер, по сути, в другой LayoutPanel какого-либо рода.DecoratorPanel не является LayoutPanel и не предназначена для его размещения.
Эта проблема все равно возникла бы без UiBinder, это не проблема с тем, как вы ее объявляете.
Другие советы
Попробуй это Панель управления декоратором класс, который является реализацией DecoratorPanel
эти подклассы LayoutPanel
.Таким образом, он совместим с LayoutPanel
фреймворк (в отличие от DecoratorPanel
), и следует обернуть ваш StackLayoutPanel
правильно.
(ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ:код предоставляется бесплатно и не имеет лицензионных ограничений.Он размещен в моем блоге http://hkwebentrepreneurs.com, который является некоммерческим блогом.)
Обновить:
В качестве объяснения, это DecoratorLayoutPanel
класс имитирует GWT's DecoratorPanel
добавив к себе 9 виджетов и расположив их в виде сетки 3x3.8 самых внешних виджетов выполнены в стиле CSS с использованием DecoratorPanel
закругленные углы, размер по умолчанию 5 пикселей.Виджет one central является расширяемым и используется для хранения LayoutPanel
Содержание.
Преимущество заключается в том, что вы получаете тот же эффект закругленных углов, что и DecoratorPanel
, имея возможность добавлять любые LayoutPanel
в детстве и автоматически подгонял его по размеру.