0

我有一个 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 来放置吗？g:DeckLayoutPanel不支持在 HTML 表格中使用 a吗？如果只需要使用 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>
4

1 回答 1

1

HTMLPanel 中的 DeckLayoutPanel

问题是标题的一部分......简短的回答是：除非您为它设置固定大小，否则不要将 **LayoutPanels 嵌套在 **LayoutPanel 以外的任何东西中。

**LayoutPanels 适用于具有从外到内定义的静态布局的应用程序。如果您只使用 **LayoutPanels 进行外部布局，它可以工作。在您的第二个代码示例中，您完全注意到了这种行为。

html 表的工作方式不同，它需要它的内容来定义大小并随之增长。由于 **LayoutPanel 不会随内容增长，它们的大小为 0x0px。

我最近回答了一个类似的问题（链接）。可能它回答了这个问题的不同方面。

于 2013-10-01T18:25:55.843 回答