好的,让它工作(有关以前的尝试,请参阅此答案的旧版本;))。
我的解决方案基于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>
(区分大小写)
- 使用 of
RootLayoutPanel
代替通常的RootPanel
- 我仍然对整个
LayoutPanel
s 的东西有点困惑 - 在Mail 示例中,他们使用SplitLayoutPanel
嵌套在 a 中DockLayoutPanel
,但只有DockLayoutPanel
明确添加到RootLayoutPanel
- 我是否理解SplitLayoutPanel
自动也被添加(以便它可以接收调整大小事件等)?嵌套在主 LayoutPanel 中的其他一些小部件怎么样 - 是否必须显式添加它们,RootLayoutPanel
或者仅当它们是该小部件/复合材料的根时,或者这甚至不可能?我真的没有时间去进一步研究这个——我会把它留给别人做作业;)
顺便说一句:我已经在 Quirks 模式和 Standards 模式下检查了这段代码 - 我看不出有什么区别,两者都可以工作 O_o (虽然,这是一个简单的使用SplitLayoutPanel
- 更复杂的示例可能会导致 Quirks 模式下的一些奇怪行为和/或渲染错误)