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

Question

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

Answer 1

好的,让它工作(请参阅以前尝试的旧版本的答案;)).

我的解决方案基于Mail示例.工作代码:

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
• 我仍然对整个事情感到有点困惑LayoutPanel- 在Mail示例中,他们使用SplitLayoutPanel嵌套在a中DockLayoutPanel,但只有DockLayoutPanel明确添加到RootLayoutPanel- 我能理解SplitLayoutPanel自动添加(因此它可以接收调整大小)事件等)？如何将其他小部件嵌套在主LayoutPanel中 - 是否必须将它们显式添加到RootLayoutPanel或仅当它们是该Widget/Composite的根或者甚至不可能？我没有时间来进一步追求这一点 - 我会把它作为别人的家庭作业;)

BTW:我已经在Quirks模式和标准模式下检查了这个代码 - 我没有看到差异,两者都工作O_o(但是,这是一个简单的使用SplitLayoutPanel- 更复杂的例子可能会导致Quirks模式中的一些奇怪的行为和/或渲染错误)