无法让 SplitLayoutPanel 工作 - GWT + UIBinder 让我发疯答案

【问题标题】：Can't get SplitLayoutPanel working - GWT + UIBinder are driving me crazy无法让 SplitLayoutPanel 工作 - GWT + UIBinder 让我发疯
【发布时间】：2011-01-30 12:40:39
【问题描述】：

...
<g:VerticalPanel styleName="{style.mainVerticalPanel}">
    <g:SplitLayoutPanel>
    <g:north size="700">
        <g:VerticalPanel>
                <g:ScrollPanel styleName="{style.conversationPanelContainer}">
                    <g:FlexTable ui:field="conversationPanel" styleName="{style.conversationPanel}"></g:FlexTable>
                </g:ScrollPanel>
                <g:HorizontalPanel styleName="{style.messageTextAndSendPanel}">
                    <g:TextBox ui:field="messageText" styleName="{style.messageText}"></g:TextBox><g:Button ui:field="sendButton">Send</g:Button>
                </g:HorizontalPanel>
        </g:VerticalPanel>
    </g:north>
    <g:south size="300">
    <g:button>TestButton</g:button>
    </g:south>
    </g:SplitLayoutPanel>
</g:VerticalPanel>
...

这看起来有什么问题吗？我要做的只是制作一个简单的拆分面板，但每当我运行它时，我得到的只是一个空白页。没有任何 SplitPanel 的东西，它工作正常。 DockLayoutPanel 也是如此。

【问题讨论】：

没有例外？（在 DevMode 和 Firebug/其他浏览器控制台中）
我现在不在我的工作电脑旁，所以我不能肯定，但我记得在 Firebug 控制台窗口中看到了一些 RPC 调用（我有一个 RPC 调用每 x 分钟执行一次），尽管缺少 UI。如果有异常，什么都不会运行，对吧？

标签： java javascript gwt uibinder

【解决方案1】：

好的，开始工作了（有关以前的尝试，请参阅此答案的旧版本；））。

我的解决方案基于Mail example。工作代码：

public class SplitTest implements EntryPoint {

    private static TestUiBinder uiBinder = GWT.create(TestUiBinder.class);

    interface TestUiBinder extends UiBinder<SplitLayoutPanel, SplitTest> {
    }

    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {
        SplitLayoutPanel outer = uiBinder.createAndBindUi(this);

        RootLayoutPanel.get().add(outer);
    }
}

UiBinder *.ui.xml:

<!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">
  <ui:style>
    .conversationPanelContainer, .conversationPanel, .messageTextAndSendPanel, .messageText {
      font-weight: bold;
    }
  </ui:style>
    <g:SplitLayoutPanel>
    <g:north size="700">
        <g:VerticalPanel>
                <g:ScrollPanel styleName="{style.conversationPanelContainer}">
                    <g:FlexTable ui:field="conversationPanel" styleName="{style.conversationPanel}"></g:FlexTable>
                </g:ScrollPanel>
                <g:HorizontalPanel styleName="{style.messageTextAndSendPanel}">
                    <g:TextBox ui:field="messageText" styleName="{style.messageText}"></g:TextBox><g:Button ui:field="sendButton">Send</g:Button>
                </g:HorizontalPanel>
        </g:VerticalPanel>
    </g:north>
    <g:south size="300">
    <g:Button>TestButton</g:Button>
    </g:south>
    </g:SplitLayoutPanel>
</ui:UiBinder>

注意一些事情：

首先：您的 UiBinder XML 模板中有一个错误：它是 <g:Button>，而不是 <g:button>（区分大小写）
使用RootLayoutPanel 代替通常的RootPanel
我仍然对整个LayoutPanels 的东西有点困惑——在Mail example 中，他们使用嵌套在DockLayoutPanel 中的SplitLayoutPanel，但只有DockLayoutPanel 被显式添加到@987654334 @ - 我是否理解 SplitLayoutPanel 也会自动添加（以便它可以接收调整大小事件等）？嵌套在主 LayoutPanel 中的其他一些小部件怎么样 - 它们是否必须显式添加到 RootLayoutPanel 或仅当它们是该小部件/复合的根时，或者这甚至不可能？我真的没有时间去进一步研究这个——我会把它留给别人做作业；）

顺便说一句：我已经在 Quirks 模式和标准模式下检查了这段代码 - 我看不出有什么区别，两者都可以工作 O_o（不过，这是 SplitLayoutPanel 的简单使用 - 更复杂的示例可能会导致Quirks 模式下的一些奇怪行为和/或渲染错误）

【讨论】：

我想我在尝试让 DockLayoutPanel 工作时已经尝试过这个，但是当我回到我的工作 PC 上时我会再试一次。谢谢。 :)
应该类似于 DockLayoutPanel。见stackoverflow.com/questions/2493101/…
你在IE的怪癖模式下也查过吗？它通常在 Firefox 的 quirks 模式下工作。
是的，我的猜测也是IE是有问题的（像往常一样>_>）。虽然无法在 atm 测试它。
您可以通过 .gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-HDragger 和 .gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-VDragger 更改拆分器的样式，如果这就是您的意思（我不太确定我是否理解您的意思 - 您能否提供指向有问题的陈列柜？）。

【解决方案2】：

您使用的是哪种文档类型？这些面板仅在标准模式下工作（至少在某些浏览器中）。如果您使用 quirks 模式，则经常会出现带有这些面板的空白页面。

检查您的 HTML 文件。理想情况下，它应该以：

<!DOCTYPE html>

或者其他导致标准模式的文档类型（但请确保以 100% 逐字输入），请参阅http://hsivonen.iki.fi/doctype/

【讨论】：

您好，我的 doctype 设置为您建议的内容，但不幸的是它仍然无法正常工作。 :(
只是为了确保：它是否在发送到浏览器的结果 HTML 的第一行（上面甚至可能没有评论）？
您也可以通过右键->查看页面信息并检查渲染模式值来快速检查Firefox以哪种模式呈现页面。