Question

我有一个GWT应用程序，其中一个主面板显示了一个PostgreSQL实例表。我希望该应用程序显示其他类型的实例，例如Redis实例。所以我最初将主面板包装在DeckLayoutPanel中，以使用Redis面板交换PostgreSQL面板。用户将使用左侧的垂直菜单选择要显示的实例类型。

将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页面的类似HTML（使用JSTL标签），所以要确保GWT和非GWT页面呈现相同。

我应该使用别的东西而不是桌子吗？我应该切换到div s进行安置吗？是否在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>

Answer 1

HTMLPanel中的DeckLayoutPanel

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

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

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

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

HTML表格中的DeckLayoutPanel不显示HTML表格

1 个答案: