Java 如何在GWT2.0中使用DockLayoutPanel和UiBinder布局小部件？

我试图使用UiBinder在GWT2.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>

标题
页脚
你好

---

浏览器仅在左上角渲染标题。我怎样才能达到我想要的布局？在使用GWT布局面板之前，您似乎需要了解更多的CSS，但这有点违背了使用它创建UI的目的。

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

新引入的布局面板的使用确实令人困惑。有一种方法可以使布局占据整个客户区。除了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);

---

这对我来说是可行的，没有拉斐罗所建议的任何一种方法

DockLayoutPanel上的Javadoc示例使用192作为West的宽度。这是错误的-作者可能认为他使用的是PX，但他使用的是EM。因此，如果你缩小，你会看到中心离右边很远

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

---

另外，忘了提到在entrypoint类中添加DockLayout时应该使用RootLayoutPanel-不要使用RootPanel。

谢谢您的尝试。如果您检查发送给客户机的代码，您可以看到其他元素也在那里。我相信CSS布局是不正确的，但我不知道足够多的CSS来调试它。我同意这可能是一个CSS错误，但看到我们两人都没有真正使用CSS（我只是使用默认设置），这似乎是一个GWT错误。你可能想在GWT发布网站（）上打开一个bug，看看@RaphaelO的答案：doing a Window.setMargin（“0”）；在将DockLayoutPanel实例添加到RootLayoutPanel之前，似乎可以做到这一点。我不知道RootLayoutPanel是否存在。一旦我改为使用它而不是RootPanel，一切都会按预期进行。您在控制台中是否收到任何错误？你能试着用javadocs的例子（加上我对West width的修正）看看这是否有效吗？现在可以了。没有控制台错误。问题是我使用的是RootPanel而不是RootLayoutPanel。谢谢。我应该更好地阅读文档。他们把它列在那里：我也有同样的问题。是的，RootLayoutPanel是关键。这对我的情况很有帮助，尽管我不得不对我的特殊情况做一些调整，因为我的UI组件使用了一个单独的类。“接口DockLayoutUiBinder扩展{}”

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