如何在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.