Can't get SplitLayoutPanel working - GWT + UIBinder are driving me crazy

...
<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="messageTex开发者_如何学Got" 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>
...

Anything look wrong with this? All I'm trying to do is make a simple split panel but whenever I run this all I get is a blank page. Without any of the SplitPanel stuff, it works fine. The same happens with DockLayoutPanel.

OK, got it working (see older versions of this answer for previous attempts ;)).

My solution is based on Mail example. The working code:

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> 

Note a number of things:

• First of all: you had an error in your UiBinder XML template: it's <g:Button>, not <g:button> (case sensitive)
• The use of RootLayoutPanel instead of the usual RootPanel
• I'm still a bit confused about the whole LayoutPanels thingy - in the Mail example they use a SplitLayoutPanel nested in a DockLayoutPanel, yet only the DockLayoutPanel is explicitly added to the RootLayoutPanel - am I to understand that the SplitLayoutPanel automagically also gets added (so that it can receive resize events, etc)? How about some other Widgets nested in the main LayoutPanel - do they have to be explicitly added to the RootLayoutPanel or only if they are the root of that Widget/Composite or is that not even possible? I don't really have time atm to pursue this further - I'll leave it as a homework for someone else ;)

BTW: I've checked this code under Quirks mode and Standards mode - I don't see a difference, both work O_o (though, this is a simple use of the SplitLayoutPanel - more complex examples will probably result in some weird behavior in Quirks mode and/or rendering errors)

Which doctype are you using? These panels only work in standards mode (at least with some broswers). If you use quirks mode, then it often happens, that you get a blank page with these panels.

Check your HTML file. It should ideally start with:

<!DOCTYPE html>

Or alternatively some other doctype that results in standards mode (but make sure to type it in 100% verbatim), see http://hsivonen.iki.fi/doctype/