如何在GWT 2.0中使用DockLayoutPanel和UiBinder布局小部件？

layout java gwt uibinder

2022-09-03 04:56:17

我试图使用UiBinder在GWT 2.0下获得一个简单的布局。我试图获得的布局是模仿Java的BorderLayout的布局，您可以在其中指定北，南，东，西和中心方向的不同面板;为此，我正在使用DockLayoutPanel。我想得到一个页眉和页脚，两者都有固定的宽度。剩余的视口空间将被分配给 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>

浏览器仅在左上角呈现 HEADER。如何实现我正在寻找的布局？在使用GWT布局面板之前，似乎您必须了解更多的CSS，但这违背了使用它创建UI的目的。

答案 1

这对我来说没有任何RaphaelO建议的黑客攻击。

DockLayoutPanel 上的 Javadoc 示例使用 192 作为 West 的宽度。这是错误的 - 作者可能认为他在使用PX，但他使用的是EM。因此，如果缩小，您会看到中心位于最右侧。

您是否检查过使用标准模式？这是 DockLayoutPanel 所必需的。

另外，忘记提到当您在入口点类中添加DockLayout时，您应该使用RootLayoutPanel - 不要使用RootPanel。

答案 2

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

在 EntryPoint 类中，将带有批注的 UiBinder 定义添加到 ui.xml 文件中，该文件声明了布局：

@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);
 }