java - 无法让 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 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
• 我对整个 LayoutPanel 还是有点困惑小东西 - 在 Mail example他们使用 SplitLayoutPanel嵌套在 DockLayoutPanel 中, 但只有 DockLayoutPanel明确添加到 RootLayoutPanel - 我是否理解 SplitLayoutPanel自动也被添加(以便它可以接收调整大小事件等)？嵌套在主 LayoutPanel 中的其他一些小部件怎么样 - 它们是否必须显式添加到 RootLayoutPanel 中？或者只有当它们是那个 Widget/Composite 的根时，或者那是不可能的？我真的没有时间在 atm 上进一步研究 - 我会把它留给其他人做作业 ;)

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