Non riesco a far funzionare SplitLayoutPanel - GWT + UIBinder mi sta facendo impazzire

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> 
... 

C'è qualcosa che non va? Tutto quello che sto cercando di fare è creare un semplice pannello diviso, ma ogni volta che eseguo tutto ciò che ottengo è una pagina vuota. Senza nessuna delle cose SplitPanel, funziona perfettamente. Lo stesso succede con DockLayoutPanel.

Answer 1

OK, capito di lavoro (vedi più vecchio versioni di questa risposta per tentativi precedenti;)).

La mia soluzione è basata su Mail example. Il codice di lavoro:

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> 

nota una serie di cose:

• Prima di tutto: avete avuto un errore nel vostro XML UiBinder modello: è <g:Button>, non <g:button> (maiuscole e minuscole)
• L'uso di RootLayoutPanel invece di noi UAL RootPanel
• Sono ancora un po 'confuso circa l'intero LayoutPanel s thingy - nel Mail example usano un SplitLayoutPanel nidificato in un DockLayoutPanel, ma solo il DockLayoutPanel è esplicitamente aggiunto alla RootLayoutPanel - sono io a capire che il SplitLayoutPanel automagicamente viene anche aggiunto (in modo che possa ricevere eventi di ridimensionamento, ecc.)? Che ne dite di altri Widget nidificati nel LayoutPanel principale? Devono essere esplicitamente aggiunti allo RootLayoutPanel o solo se sono la radice di quel Widget/Composito o non è nemmeno possibile? Non ho davvero tempo per perseguire questo obiettivo - lo lascerò come compito a qualcun altro;)

BTW: Ho controllato questo codice in modalità Quirks e modalità Standard - I don ' Per vedere una differenza, entrambi funzionano O_o (tuttavia, questo è un semplice uso di SplitLayoutPanel - esempi più complessi probabilmente daranno qualche strano comportamento in modalità Quirks e/o errori di rendering)

Answer 2

Quale doctype stai utilizzando? Questi pannelli funzionano solo in modalità standard (almeno con alcuni broswers). Se si utilizza la modalità quirk, accade spesso che si ottenga una pagina vuota con questi pannelli.

Controlla il tuo file HTML. Dovrebbe iniziare idealmente con:

<!DOCTYPE html> 

Oppure, in alternativa qualche altro tipo di documento che si traduce in modalità standard (ma assicuratevi di digitare in 100% testualmente), vedi http://hsivonen.iki.fi/doctype/