Gwt 带有HTML表的HTMLPanel中的DeckLayoutPanel不显示_Gwt_Uibinder

Gwt 带有HTML表的HTMLPanel中的DeckLayoutPanel不显示

gwt

Gwt 带有HTML表的HTMLPanel中的DeckLayoutPanel不显示,gwt,uibinder,Gwt,Uibinder,我有一个GWT应用程序，其中一个主面板显示PostgreSQL实例表。我希望应用程序显示其他类型的实例，例如Redis实例。因此，我首先将主面板包装在DeckLayoutPanel中，以用Redis面板替换PostgreSQL面板。左侧将有一个垂直菜单，用户将使用该菜单选择要显示的实例类型将DeckLayoutPanel添加到UI XML会导致主面板不显示，尽管我确实在DOM检查器中看到了内容这是原始的工作UI，没有g:DeckLayoutPanel：我在这里使用一个HTML表，因为我不是

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

将DeckLayoutPanel添加到UI XML会导致主面板不显示，尽管我确实在DOM检查器中看到了内容

这是原始的工作UI，没有g:DeckLayoutPanel：

我在这里使用一个HTML表，因为我不是前端设计师，我使用JSTL标记为非GWT JSP页面创建了类似的HTML，因此希望确保GWT和非GWT页面呈现相同的结果

我应该用桌子以外的东西吗？我应该改为切换到div进行安置吗？是否不支持在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>

HTMLPanel中的DeckLayoutPanel

问题是标题的一部分。。。简单的回答是：除非为**LayoutPanel设置了固定的大小，否则不要将**LayoutPanel嵌套在**LayoutPanel以外的任何对象中

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

html表格的工作原理不同，它需要它的内容来定义一个大小并随它增长。由于**布局面板不随内容增长，因此其大小为0x0px

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

如果一个人想使用Twitter引导页面来托管GWT应用程序，那么他会不会想远离**布局面板，继续使用其他面板，并使用RootPanel.get根据需要添加GWT小部件？如果您更喜欢浮动的、类似引导的布局，而不是基于静态**布局面板的布局，这实际上取决于您的应用程序/用例。是的，您可以决定不使用**布局面板。我已经构建了这两种应用程序，这取决于具体情况。我个人认为一些非布局面板是不好的做法，因为它们基于表格，并且是为怪癖模式构建的。相反，我更喜欢让浏览器布局引擎完成它的工作，并使用UiBinder/HTMLPanel/CSS的组合。

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);
}

<!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>