Question

Al usar UiBinder, ¿cuál es el método preferido para crear un diseño simple como este?

FlowPanel:

<!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> 
    .outer { 
     display: table; 
     height: 100%; 
     width: 100%; 
    } 
    .inner { 
     background: #DDD; 
     display: table-cell; 
     vertical-align: middle; 
    } 
    </ui:style> 
    <g:FlowPanel styleName="{style.outer}"> 
    <g:FlowPanel styleName="{style.inner}"> 
     <g:Label ui:field="someLabel"/> 
    </g:FlowPanel> 
    </g:FlowPanel> 
</ui:UiBinder> 

HTMLPanel:

<!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> 
    .outer { 
     display: table; 
     height: 100%; 
     width: 100%; 
    } 
    .inner { 
     background: #DDD; 
     display: table-cell; 
     vertical-align: middle; 
    } 
    </ui:style> 
    <g:HTMLPanel styleName="{style.outer}"> 
    <div class="{style.inner}"> 
     <g:Label ui:field="someLabel"/> 
    </div> 
    </g:HTMLPanel> 
</ui:UiBinder> 

Editar: Sé que producen el mismo html cuando se representa, me pregunto si hay alguna justificación para utilizar un estilo más el otro.

Los javadocs dicen que FlowPanel es el panel más simple, pero en qué punto es preferible utilizar un HTMLPanel. p.ej.

<FlowPanel> 
    <FlowPanel> 
    <Widget> 
    </FlowPanel> 
    <FlowPanel> 
    <Widget> 
    </FlowPanel> 
</FlowPanel> 

vs

<HTMLPanel> 
    <div> 
    <Widget> 
    </div> 
    <div> 
    <Widget> 
    </div> 
</HTMLPanel> 

Gracias.

UiBinder - HTMLPanel vs. div es una pregunta bastante similar pero pregunta sobre el uso de un div frente a un HTMLPanel.

Answer 1

En realidad lo harán en su caso - div. No hay diferencia a menos que comiences a agregar más elementos a FlowPanel.

Puede probar el comportamiento FlowPanel aquí: http://examples.roughian.com/index.htm#Panels~FlowPanel

que puedes usar HTMLPanel en los casos cuando se necesita para escribir su propio código HTML personalizado en la página. Permite escribir código HTML dentro de la etiqueta HTMLPanel.

Por ejemplo, no puedes hacer tal truco con FlowPanel.

Answer 2

Recientemente leí Tags First GWT Programming. Me parece que la técnica que describe le permitirá tener un mejor control sobre la representación final de su página, al tiempo que mantiene las ventajas de GWT.

Creo que la dicotomía sobre la que estás preguntando entre FlowPanel y HTMLPanel no es realmente la pregunta correcta. En cambio, es mejor reconocer que están diseñados para diferentes cosas.

HTMLPanel es capaz de mucho más que FlowPanel. Cuando necesite agregar y eliminar dinámicamente widgets integrados en algún html personalizado, use un Panel HTML. Si solo desea que algunos widgets se alineen en la página con flujo html normal (como algunos textos e imágenes) use un FlowPanel.

Mi consejo personal sería utilizar lo más simple que pueda hacer lo que usted necesita.

Answer 3

Recomiendo el segundo ejemplo. Si es posible, debería preferir utilizar una etiqueta HTML simple como "div" sobre un widget como "FlowPanel" debido a que la sobrecarga tiene un widget lógico no utilizado.

Esto puede parecer trivial primero pero le ahorra muchos dolores de cabeza (pérdidas de memoria, operaciones de gquery, ...) cuando tiene que lidiar con muchos elementos.