¿Cómo se distribuyen los widgets usando DockLayoutPanel y UiBinder en GWT 2.0?

Question

Estoy tratando de obtener un diseño simple trabajando bajo GWT 2.0 usando UiBinder. El diseño que estoy tratando de obtener es el que imita el BorderLayout de Java en donde se pueden especificar diferentes paneles en las direcciones norte, sur, este, oeste y centro; para eso estoy usando DockLayoutPanel. Me gustaría obtener un encabezado y pie de página, ambos con ancho fijo. El espacio restante de la ventana gráfica estaría ocupado por el widget asignado al espacio central DockLayoutPanel.

El archivo .ui.xml actual que tengo es:

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

El navegador sólo renders de encabezado en la esquina superior izquierda. ¿Cómo puedo lograr el diseño que estoy buscando? Parece que hay más CSS que debes saber antes de poder usar los paneles de diseño de GWT, pero ese tipo de problemas frustra el propósito de crear la interfaz de usuario con él.

Answer 1

Esto funciona para mí con ninguno de los hacks sugeridos por RaphaelO.

El ejemplo de Javadoc en DockLayoutPanel usa 192 como ancho para Oeste. Esto está mal: el autor probablemente pensó que estaba usando PX, pero estaba usando EM. Entonces, si alejas, verás que el Centro está muy a la derecha.

¿Ha comprobado el uso del modo Estándares? Esto es requerido para DockLayoutPanel.

Además, se olvidó de mencionar que debe usar RootLayoutPanel cuando agrega DockLayout en su clase de entrypoint; no use RootPanel.

Answer 2

He intentado su bloque de código, así como el bloque de muestra en la página de javadoc para DockLayoutPanel y estoy obteniendo resultados similares. Solo los datos en la sección North del DockLayoutPanel parecen mostrarse. Sin embargo, cuando busco en la página (usando Firefox y Safari en Mac) los otros elementos se encuentran pero no se muestran en ninguna parte. Parece que podría haber un error con este panel y UiBinder.

Answer 3

El uso de los Paneles de diseño recientemente introducidos es bastante confuso. Hay una manera de hacer que el diseño ocupe todo el área del cliente. Requiere un poco de código Java además del archivo ui.xml.

En su clase de EntryPoint, añadir una definición UiBinder con una anotación en el fichero de ui.xml que declara la disposición:

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

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

en la función onModuleLoad, una instancia del UiBinder, recupera su raíz y añadir directamente para el 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); 
}