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，检索其根并直接将其添加到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的北部分中的数据。但是当我搜索页面时（在Mac上使用firefox和safari），其他元素被找到但是它们没有显示在任何地方。看起来这个面板和UiBinder可能存在错误。

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

3 个答案: