Wie Layout Widgets mit DockLayoutPanel und UiBinder in GWT 2.0?

Question

Ich versuche, ein einfaches Layout unter GWT 2.0 mit UiBinder arbeiten. Das Layout, das ich versuchen möchte, ist eines, das Java BorderLayout nachahmt, wo Sie verschiedene Felder in den Richtungen Norden, Süden, Osten, Westen und Zentrum angeben können; dafür benutze ich DockLayoutPanel. Ich möchte eine Kopf- und Fußzeile bekommen, beide mit fester Breite. Der verbleibende Darstellungsbereich würde von dem Widget eingenommen, das dem DockLayoutPanel-Center-Slot zugewiesen ist.

Die aktuelle .ui.xml Datei, die ich habe ist:

<g:DockLayoutPanel unit='EM'> 
    <g:north size='2'> 
     <g:HTML>HEADER</g:HTML> 
    </g:north> 

    <g:south size='2'> 
     <g:HTML>FOOTER</g:HTML> 
    </g:south> 

    <g:center> 
     <g:HTML> 
      <div id='loginform'>Hello!</div> 
     </g:HTML> 
    </g:center> 
</g:DockLayoutPanel> 

Der Browser rendert nur HEADER in der linken oberen Ecke. Wie kann ich das Layout erreichen, nach dem ich suche? Es scheint, dass es mehr CSS gibt, die Sie kennen müssen, bevor Sie GWT-Layout-Panels verwenden können, aber das verhindert den Zweck, die Benutzeroberfläche damit zu erstellen.

Answer 1

Dies funktioniert für mich mit keinem der von RaphaelO vorgeschlagenen Hacks.

Das Javadoc-Beispiel auf dem DockLayoutPanel verwendet 192 als Breite für West. Das ist falsch - der Autor dachte wahrscheinlich, dass er PX benutzt, aber er benutzte EM. Wenn Sie also herauszoomen, sehen Sie, dass Center weit rechts liegt.

Haben Sie Ihren Standardmodus überprüft? Dies ist für das DockLayoutPanel erforderlich.

Vergessen Sie auch zu erwähnen, dass Sie RootLayoutPanel verwenden sollten, wenn Sie das DockLayout in Ihrer Einstiegsklasse hinzufügen - verwenden Sie nicht RootPanel.

Answer 2

Ich habe versucht, Ihren Code-Block sowie die Beispiel-Block auf der Javadoc-Seite für DockLayoutPanel und ich bekomme ähnliche Ergebnisse. Es werden nur die Daten im Bereich North des DockLayoutPanel angezeigt. Jedoch wenn ich die Seite (mit Firefox und Safari auf Mac) suche, werden die anderen Elemente gefunden, aber sie zeigen nirgends. Scheint so, als könnte es einen Fehler mit diesem Panel und dem UiBinder geben.

Answer 3

Die Verwendung der neu eingeführten Layout Panels ist in der Tat ziemlich verwirrend. Es gibt eine Möglichkeit, das Layout den gesamten Kundenbereich zu belegen. Es erfordert ein wenig Java-Code zusätzlich zur Datei ui.xml.

In Ihrer Entrypoint Klasse, eine UiBinder Definition mit einer Anmerkung zu der ui.xml Datei hinzufügen, die das Layout erklärt: es

@UiTemplate("LayoutDeclarationFile.ui.xml") 
interface DockLayoutUiBinder extends 
     UiBinder<DockLayoutPanel, TheEntryPointChildClass> { 
} 

private static DockLayoutUiBinder uiBinder = GWT 
     .create(DockLayoutUiBinder.class); 

in der onModuleLoad Funktion, instanziiert die UiBinder, ruft seine Wurzel und direkt hinzufügen zum DOM:

public void onModuleLoad() { 
    DockLayoutPanel layout = uiBinder.createAndBindUi(this); 
    // Make sure we use the whole client area 
    Window.setMargin("0px"); 

    // Add the panel to the DOM 
    RootLayoutPanel.get().add(layout); 
}