0

在使用 GWT 以编程方式成功构建了一个重要的 UI 之后，我正在尝试使用 UiBinder 重新创建相同的 UI。我以前从未使用过任何类型的声明性 UI 系统，尽管我正在取得进展并且可以看到这种方法的好处，但我无法让 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 中所建议的那样。

它没有达到我的预期，所以我一定是在这里误解了一些东西。任何人都可以帮忙吗？

谢谢 ：-）

4

2 回答 2

4

如果 LayoutPanel 不包含在提供调整大小的东西中，那么它们就不能很好地工作，本质上是某种类型的另一个 LayoutPanel。DecoratorPanel 不是 LayoutPanel，也不意味着包含一个。

如果没有 UiBinder，这个问题仍然会发生，这不是你如何声明它的问题。

于 2010-01-06T22:47:16.183 回答
2

试试这个DecoratorLayoutPanel类，它是DecoratorPanel那个子类的实现LayoutPanel。因此，它与LayoutPanel框架兼容（与 不同DecoratorPanel），并且应该正确包装您的StackLayoutPanel。

（免责声明：代码是免费捐赠的，没有许可证限制。它托管在我的博客http://hkwebentrepreneurs.com上，这是一个非营利性的博客。）

更新：

作为解释，这个类通过向自身添加 9 个小部件并将它们排列成一个 3x3 网格来DecoratorLayoutPanel模仿 GWT 。DecoratorPanel最外面的 8 个小部件是 CSS 样式，使用DecoratorPanel的圆角，默认大小为 5px。一个中央小部件是可扩展的，用于保存LayoutPanel内容。

好处是您可以获得与 相同的圆角效果DecoratorPanel，同时能够添加任何LayoutPanel作为子项并自动调整大小以适合。

于 2012-01-01T17:50:35.760 回答