【发布时间】：2013-10-02 02:25:55
【问题描述】：
我有一个 GWT 应用程序，其中一个主面板显示 PostgreSQL 实例表。我希望应用程序显示其他类型的实例，例如Redis 实例。因此，我最初将主面板包装在 DeckLayoutPanel 中，以将 PostgreSQL 面板换成 Redis 面板。左侧会有一个垂直菜单，用户将使用它来选择要显示的实例类型。
将 DeckLayoutPanel 添加到 UI XML 会导致主面板不显示，尽管我确实在 DOM 检查器中看到了内容。
这是原始的、工作的用户界面，没有g:DeckLayoutPanel：
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder
xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel>
<table width="100%" border="1">
<tr>
<td colspan="2" align="left">
<a href="/">Logo</a>
</td>
<td colspan="2" align="right">
Hello John
</td>
</tr>
<tr>
<td colspan="4">
<g:VerticalPanel ui:field="instancesPanel">
<g:Label ui:field="mainErrorLabel" />
<g:FlexTable ui:field="flexTable" />
<g:HorizontalPanel>
<g:TextBox ui:field="createInstanceTextBox" />
<g:ListBox ui:field="createInstanceVersionsListBox" />
<g:Button ui:field="createInstanceButton">Create</g:Button>
<g:Label ui:field="createInstanceErrorLabel" />
</g:HorizontalPanel>
</g:VerticalPanel>
</td>
</tr>
<tr>
<td>Help</td>
<td>About</td>
<td>Contact</td>
</tr>
</table>
</g:HTMLPanel>
</ui:UiBinder>
如果我删除 g:HTMLPanel 和 HTML 表格，将其修剪为，这可行：
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder
xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:DeckLayoutPanel ui:field="deckLayoutPanel">
<g:VerticalPanel ui:field="instancesPanel">
<g:Label ui:field="mainErrorLabel" />
<g:FlexTable ui:field="flexTable" />
<g:HorizontalPanel>
<g:TextBox ui:field="createInstanceTextBox" />
<g:ListBox ui:field="createInstanceVersionsListBox" />
<g:Button ui:field="createInstanceButton">Create</g:Button>
<g:Label ui:field="createInstanceErrorLabel" />
</g:HorizontalPanel>
</g:VerticalPanel>
</g:DeckLayoutPanel>
</ui:UiBinder>
我在这里使用 HTML 表格，因为我不是前端设计师，并且我对非 GWT JSP 页面（使用 JSTL 标记）有类似的 HTML，所以要确保 GWT 和非 GWT页面呈现相同。
我应该使用桌子以外的东西吗？我应该切换到divs 来代替吗？是否不支持在 HTML 表格中使用 g:DeckLayoutPanel？如果只需要使用 GWT 布局小部件，应该如何为 GWT 和非 GWT 页面获得相同的 HTML 页面？
顺便说一句，我尝试使用 RootPanel，但它也不适用于 HTML 页面。
我正在使用以下方式绑定它：
interface Binder extends UiBinder<HTMLPanel, MyWebApp> { }
private static final Binder binder = GWT.create(Binder.class);
@UiField
DeckLayoutPanel deckLayoutPanel;
@UiField
VerticalPanel instancesPanel;
@Override
public void onModuleLoad() {
HTMLPanel outer = binder.createAndBindUi(this);
// Tweak a bunch of settings on the UI elements.
...
RootLayoutPanel.get().add(outer);
deckLayoutPanel.showWidget(instancesPanel);
}
托管页面的 HTML 是这样的：
<!doctype html>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
<link type="text/css" rel="stylesheet" href="MyWebApp.css">
<title>MyWebApp</title>
<script type="text/javascript" language="javascript" src="MyWebApp/MyWebApp.nocache.js"></script>
</head>
<body>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
</body>
</html>
【问题讨论】：