代码之家 › 专栏 › 技术社区 › Cesar

如何在GWT2.0中使用DocklayOutpanel和UIBinder来布局小部件?

uibinder layout gwt java

Cesar · 技术社区 · 15 年前

我尝试使用uibinder在GWT2.0下得到一个简单的布局。我试图得到的布局是模仿Java的边框布局,在那里你可以在北、南、东、西和中心方向指定不同的面板,因为我使用的是DokLayOutPoad。我想要一个固定宽度的页眉和页脚。剩余的视区空间将被分配给DocklayOutpanel中心插槽的小部件占用。

当前的.ui.xml文件是:

<g:DockLayoutPanel unit='EM'>
    <g:north size='2'>
        <g:HTML>HEADER</g:HTML> 
    </g:north>

    <g:south size='2'>
        <g:HTML>FOOTER</g:HTML> 
    </g:south>

    <g:center>
        <g:HTML>
            <div id='loginform'>Hello!</div>
        </g:HTML>
    </g:center>
</g:DockLayoutPanel>

浏览器只在左上角显示标题。如何实现我要查找的布局?似乎在使用GWT布局面板之前,您需要了解更多的CSS,但这会破坏使用它创建UI的目的。

3 回复 | 直到 13 年前

BK. 15 年前

这对我很有用,拉斐罗建议的黑客都没有。

docklayoutpanel上的javadoc示例使用192作为west的宽度。这是错误的-作者可能以为他在使用px,但他在使用em。所以如果缩小,你会看到中心在右边很远。

您检查过使用标准模式吗?这对于DocklayOutpanel是必需的。

另外,忘记了在入口点类中添加docklayout时应该使用rootlayoutpanel——不要使用rootpanel。

Ted M. Young 13 年前

新引入的布局面板的使用确实非常混乱。有一种方法可以使布局占据整个客户区。除了UI.XML文件之外,它还需要一点Java代码。

在EntryPoint类中,向声明布局的ui.xml文件添加带有注释的uibinder定义:

@UiTemplate("LayoutDeclarationFile.ui.xml")
interface DockLayoutUiBinder extends
        UiBinder<DockLayoutPanel, TheEntryPointChildClass> {
}

private static DockLayoutUiBinder uiBinder = GWT
        .create(DockLayoutUiBinder.class);

在onmoduleLoad函数中,实例化uibinder,检索其根并直接将其添加到dom:

public void onModuleLoad() {
    DockLayoutPanel layout = uiBinder.createAndBindUi(this);
    // Make sure we use the whole client area
    Window.setMargin("0px");

    // Add the panel to the DOM
    RootLayoutPanel.get().add(layout);
 }

Carnell 15 年前

我尝试了您的代码块以及javadoc页面上的示例块 DockLayoutPanel 我也得到了类似的结果。只有中的数据北方显示DocklayOutpanel的部分。但是,当我搜索页面(在Mac上使用Firefox和Safari)时,会发现其他元素,但它们不会显示在任何地方。似乎这个面板和uibinder有一个bug。