java - ¿Cómo diseñar widgets usando DockLayoutPanel y UiBinder en GWT 2.0?

Question

Estoy tratando de obtener un diseño simple que funcione bajo GWT 2.0 usando UiBinder. El diseño que estoy tratando de obtener es uno que imita el BorderLayout de Java en el que puede especificar diferentes paneles en las direcciones norte, sur, este, oeste y centro; para eso estoy usando DockLayoutPanel. Me gustaría obtener un encabezado y un pie de página, ambos con ancho fijo. El espacio restante de la ventana gráfica estaría ocupado por el widget asignado a la ranura central de 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 solo muestra HEADER 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 derrota el propósito de crear la interfaz de usuario con él.

Answer 1

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

En su clase EntryPoint, agregue una definición de UiBinder con una anotación al archivo ui.xml que declara el diseño:

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

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

en la función onModuleLoad, cree una instancia de UiBinder, recupere su raíz y agréguela directamente al 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);
 }

Answer 2

Esto me funciona sin ninguno de los trucos sugeridos por RaphaelO.

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

¿Has comprobado que estás usando el Modo Estándar? Esto es necesario para el DockLayoutPanel.

Además, olvidó mencionar que debe usar RootLayoutPanel cuando agregue DockLayout en su clase de punto de entrada, no use RootPanel.

Answer 3

DockLayoutPanel bloque de código y el bloque de muestra en la página javadoc para DockLayoutPanel y DockLayoutPanel resultados similares. Solo se muestran los datos en la sección Norte de DockLayoutPanel. Sin embargo, cuando busco en la página (utilizando Firefox y Safari en Mac), se encuentran los otros elementos, pero no se muestran en ninguna parte. Parece que puede haber un error con este panel y el UiBinder.