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

Question

我正在尝试使用 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 的目的。

Answer 1

这对我有用，没有 RaphaelO 建议的任何技巧。

DockLayoutPanel 上的 Javadoc 示例使用 192 作为 West 的宽度。这是错误的——作者可能认为他使用的是 PX，但他使用的是 EM。所以如果你缩小，你会看到中心在最右边。

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

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

Answer 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，取回它的root，直接添加到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);
 }

Answer 3

我尝试了您的代码块以及 DockLayoutPanel 的 javadoc 页面上的示例块，我得到了类似的结果。似乎只显示了 DockLayoutPanel 的 North 部分中的数据。但是，当我搜索页面（在 Mac 上使用 firefox 和 safari）时，会找到其他元素，但它们没有显示在任何地方。似乎这个面板和 UiBinder 可能存在错误。