如何使用UiBinder的一个DecoratorPanel包装一个StackLayoutPanel？

StackOverflow https://stackoverflow.com/questions/2013169

  •  19-09-2019
  •  | 
  •  

题

在已经成功建立了一个不平凡的UI以编程方式使用GWT，我试图重新使用UiBinder的相同的用户界面。我从来没有使用过任何形式的声明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的宽度和高度，并设置中间区域为100％作为GWT API中所建议。

有没有做什么，我希望，所以我必须在这里误解的东西。谁能帮助？

感谢您： - ）

有帮助吗？

解决方案

如果他们没有的东西包含LayoutPanels不起作用清楚，ProvidesResize，基本上另一个某种LayoutPanel。 DecoratorPanel不是LayoutPanel并且不意味着包含一个。

仍然会发生不UiBinder的这个问题，这是不是你如何宣布它的问题。

其他提示

尝试此 DecoratorLayoutPanel 类，它是DecoratorPanel的一个实现，它子类LayoutPanel。因此，与LayoutPanel框架（不像DecoratorPanel）兼容，应该正确包装你StackLayoutPanel。

（声明：该代码可自由捐献，且无许可限制它托管在我的博客 http://hkwebentrepreneurs.com 时，这是一种不以营利为目的博客。）

<强>更新

作为解释，这DecoratorLayoutPanel类模仿GWT的DecoratorPanel通过添加9只小部件本身和它们排列成3×3的网格。 8只最外面的小部件的CSS风格使用DecoratorPanel的圆角，与5px的默认大小。所述一个中央窗口部件是可膨胀的，并用于容纳内容LayoutPanel

的好处是，你得到的DecoratorPanel同样倒圆的边角效果，同时能够添加任何LayoutPanel作为一个孩子，并具有自动尺寸适合。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top