7 
...
<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ます。

4

2 に答える 2

6

OK、うまくいきました（以前の試みについては、この回答の古いバージョンを参照してください;））。

私の解決策は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
  • 私はまだLayoutPanels 全体について少し混乱しています - Mail の例SplitLayoutPanelでは、ネストされた aを使用していますが、に明示的に追加されているDockLayoutPanelのは だけです -も自動的に追加されることを理解する必要があります (サイズ変更を受け取ることができるように)イベントなど）？メインの LayoutPanel にネストされた他のウィジェットについてはどうですか?明示的に追加する必要がありますか、またはそのウィジェット/コンポジットのルートである場合にのみ追加する必要がありますか?それとも不可能ですか? これをさらに追求する時間は本当にありません-他の誰かの宿題として残します;)DockLayoutPanelRootLayoutPanelSplitLayoutPanelRootLayoutPanel

SplitLayoutPanelところで: このコードをQuirksモードと Standards モードでチェックしました - 違いはわかりません。および/またはレンダリング エラー)

于 2010-03-22T20:43:43.533 に答える
2

どのDoctypeを使用していますか? これらのパネルは、標準モードでのみ機能します (少なくとも一部のブラウザーでは)。quirks モードを使用すると、これらのパネルで空白のページが表示されることがよくあります。

HTML ファイルを確認します。理想的には、次のように開始する必要があります。

<!DOCTYPE html>

または、標準モードになる他の doctype (ただし、100% 逐語的に入力するようにしてください) については、http://hsivonen.iki.fi/doctype/を参照してください。

于 2010-03-22T20:31:01.903 に答える