Java 如何在 GWT 2.0 中使用 DockLayoutPanel 和 UiBinder 布局小部件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1938132/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to layout widgets using DockLayoutPanel and UiBinder in GWT 2.0?
提问by Cesar
I'm trying to get a simple layout working under GWT 2.0 using UiBinder. The layout I'm trying to get is one that mimic Java's BorderLayout in where you can specify different panels in the north, south, east, west and center directions; for that I'm using DockLayoutPanel. I would like to get a header and footer, both with fixed width. The remaining viewport space would be occupied by the widget assigned to the DockLayoutPanel center slot.
我正在尝试使用 UiBinder 在 GWT 2.0 下获得一个简单的布局。我试图获得的布局是一种模仿 Java 的 BorderLayout 的布局，您可以在其中指定北、南、东、西和中心方向的不同面板；为此，我正在使用 DockLayoutPanel。我想得到一个页眉和页脚，两者都具有固定宽度。剩余的视口空间将由分配给 DockLayoutPanel 中心插槽的小部件占用。
The current .ui.xml file I've got is:
我得到的当前 .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>
The browser only renders HEADER at the top left corner. How can I achieve the layout I'm looking for? It seems that there's more CSS you've got to know before you can use GWT layout panels, but that kind of defeats the purpose of creating the UI with it.
浏览器只在左上角呈现 HEADER。我怎样才能实现我正在寻找的布局？在您可以使用 GWT 布局面板之前，您似乎需要了解更多的 CSS，但这违背了使用它创建 UI 的目的。
采纳答案by BK.
This works for me with none of the hacks suggested by RaphaelO.
这对我有用，没有 RaphaelO 建议的黑客攻击。
The Javadoc example on the DockLayoutPanel uses 192 as the width for West. This is wrong - the author probably thought he was using PX, but he was using EM. So if you zoom out, you'll see that Center is far to the right.
DockLayoutPanel 上的 Javadoc 示例使用 192 作为 West 的宽度。这是错误的 - 作者可能认为他在使用 PX，但他在使用 EM。所以如果你缩小，你会看到中心在右边。
Have you checked your using Standards Mode? This is required for the DockLayoutPanel.
您是否检查过使用标准模式？这是 DockLayoutPanel 所必需的。
Also, forgot to mention that you should use RootLayoutPanel when you add the DockLayout in your entrypoint class - don't use RootPanel.
另外，忘了提到在入口点类中添加 DockLayout 时应该使用 RootLayoutPanel - 不要使用 RootPanel。
回答by Carnell
I tried your code block as well as the the sample block on the javadoc page for DockLayoutPaneland I am getting similar results. Only the data in the Northsection of the DockLayoutPanel seems to be displayed. However when i search the page (using firefox and safari on Mac) the other elements are found but they are not showing anywhere. Seems like there might be a bug with this panel and the UiBinder.
我尝试了你的代码块以及DockLayoutPanel的 javadoc 页面上的示例块，我得到了类似的结果。似乎只显示了 DockLayoutPanel北段的数据。但是，当我搜索页面（在 Mac 上使用 firefox 和 safari）时，找到了其他元素，但它们没有显示在任何地方。似乎此面板和 UiBinder 可能存在错误。
回答by RaphaelO
The use of the newly introduced Layout Panels is indeed quite confusing. There is a way to make the layout occupies the whole client area. It requires a little bit of Java code in addition to the ui.xml file.
新引入的布局面板的使用确实令人困惑。有一种方法可以使布局占据整个客户区。除了 ui.xml 文件之外，它还需要一些 Java 代码。
In your EntryPoint class, add a UiBinder definition with a annotation to the ui.xml file which declares the layout:
在您的 EntryPoint 类中，将带有注释的 UiBinder 定义添加到声明布局的 ui.xml 文件中：
@UiTemplate("LayoutDeclarationFile.ui.xml")
interface DockLayoutUiBinder extends
UiBinder<DockLayoutPanel, TheEntryPointChildClass> {
}
private static DockLayoutUiBinder uiBinder = GWT
.create(DockLayoutUiBinder.class);
in the onModuleLoad function, instantiate the UiBinder, retrieves its root and directly add it to the DOM:
在 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);
}
