Question

在使用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>

如果没有包装在DecoratorPanel中，StackLayoutPanel会按预期显示和运行。当包装在DecoratorPanel中时，无法看到StackLayoutPanel。在它的位置是一个很小的蓝色圆圈，我猜测是DecoratorPanel的角落图形紧紧地聚集在一起。这就是为什么我试图在DecoratorPanel上设置宽度和高度，并按照GWT API中的建议将中间区域设置为100％。

它没有达到我的期望，所以我必须在这里误解一些东西。有人可以帮忙吗？

谢谢： - ）

Answer 1

如果LayoutPanels不包含在ProvideResize的内容中，则它不能正常工作，本质上是另一种LayoutPanel。 DecoratorPanel不是LayoutPanel，也不包含一个。

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

Answer 2

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

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

<强>更新

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

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

如何使用UiBinder将StackLayoutPanel包装在DecoratorPanel中？

2 个答案: