Jak układać widżety za pomocą DockLayoutPanel i UiBinder w GWT 2.0?

Question

Próbuję uzyskać prosty układ działający pod GWT 2.0 przy użyciu UiBinder. Układ, który próbuję uzyskać, to taki, który naśladuje BorderLayout Java, w którym można określić różne panele w kierunkach północnym, południowym, wschodnim, zachodnim i środkowym; do tego używam DockLayoutPanel. Chciałbym uzyskać nagłówek i stopkę, obie o stałej szerokości. Pozostała przestrzeń widoku zostanie zajęta przez widget przypisany do gniazda centralnego DockLayoutPanel.

Bieżący plik .ui.xml mam to:

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

przeglądarka renderuje tylko NAGŁÓWEK w lewym górnym rogu. Jak mogę uzyskać wygląd, którego szukam? Wygląda na to, że jest więcej kodów CSS, które musisz znać, zanim użyjesz paneli układu GWT, ale ten rodzaj porażek ma na celu stworzenie interfejsu użytkownika.

Answer 1

To działa dla mnie bez żadnego z hacków sugerowanych przez Raphaela.

Przykład Javadoc na DockLayoutPanel używa 192 jako szerokości dla Zachodu. To jest złe - autor prawdopodobnie myślał, że używa PX, ale używał EM. Jeśli pomniejszysz, zobaczysz, że Centrum znajduje się daleko po prawej stronie.

Czy sprawdziłeś, czy korzystasz z trybu standardowego? Jest to wymagane w przypadku DockLayoutPanel.

Zapomniałem wspomnieć, że powinieneś używać RootLayoutPanel kiedy dodajesz DockLayout w klasie entrypoint - nie używaj RootPanel.

Answer 2

Wypróbowałem twój blok kodu, jak również przykładowy blok na stronie javadoc dla DockLayoutPanel i otrzymuję podobne wyniki. Wydaje się, że wyświetlane są tylko dane w sekcji DockLayoutPanel North. Jednak kiedy przeszukuję stronę (używając firefox i safari na Macu), inne elementy są znalezione, ale one nie pokazują się nigdzie. Wygląda na to, że może wystąpić błąd w tym panelu i UiBinder.

Answer 3

Korzystanie z nowo wprowadzonych paneli układów jest rzeczywiście dość zagmatwane. Istnieje sposób, aby układ zajął cały obszar klienta. Wymaga trochę kodu Java oprócz pliku ui.xml.

W swojej klasie EntryPoint, dodać definicję UiBinder z adnotacją do pliku ui.xml który deklaruje układ:

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

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

w funkcji onModuleLoad, instancję UiBinder, pobiera swoje korzenie i dodać go bezpośrednio do 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); 
}