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)
