Impossible de faire fonctionner SplitLayoutPanel - GWT + UIBinder me rendent fou

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

Quelque chose ne va pas avec ça? Tout ce que j'essaie de faire est de faire un simple panneau de split, mais chaque fois que je lance ce que tout ce que je reçois est une page blanche. Sans aucune des choses SplitPanel, cela fonctionne très bien. La même chose se produit avec DockLayoutPanel.

Answer 1

OK, il a obtenu de travail (voir plus versions de cette réponse pour les tentatives précédentes;)).

Ma solution est basée sur Mail example. Le code de travail:

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 un certain nombre de choses:

• tout d'abord: vous avez eu une erreur dans votre UiBinder XML modèle: c'est <g:Button>, pas <g:button> (sensible à la casse)
• L'utilisation de RootLayoutPanel au lieu de l'us uel RootPanel
• Je suis encore un peu confus au sujet de l'ensemble LayoutPanel de la thingy - dans le Mail example qu'ils utilisent un SplitLayoutPanel niché dans un DockLayoutPanel, mais seulement le DockLayoutPanel est explicitement ajouté à la RootLayoutPanel - dois-je comprendre que le SplitLayoutPanel automagiquement est également ajouté (pour pouvoir recevoir des événements de redimensionnement, etc.)? Que diriez-vous d'autres Widgets imbriqués dans le LayoutPanel principal - doivent-ils être explicitement ajoutés au RootLayoutPanel ou seulement s'ils sont la racine de ce Widget/Composite ou est-ce possible? Je n'ai pas vraiment le temps de poursuivre ceci - je vais le laisser comme un devoir pour quelqu'un d'autre;)

BTW: J'ai vérifié ce code sous le mode Quirks et le mode Standards - I don ' t voir une différence, les deux fonctionnent O_o (bien que ce soit une utilisation simple du SplitLayoutPanel - des exemples plus complexes entraîneront probablement un comportement étrange en mode Quirks et/ou des erreurs de rendu)

Answer 2

Quel type de document utilisez-vous? Ces panneaux ne fonctionnent qu'en mode standard (au moins avec quelques broswers). Si vous utilisez le mode quirks, il arrive souvent que vous obteniez une page vierge avec ces panneaux.

Vérifiez votre fichier HTML. Il devrait idéalement commencer par:

<!DOCTYPE html> 

Ou bien un autre type de document qui résulte en mode standard (mais assurez-vous tappez 100% in extenso), voir http://hsivonen.iki.fi/doctype/