FlowPanel vs. HTMLPanel in GWT UiBinder

Question

Quando si utilizza UiBinder qual è il metodo preferito per creare un layout semplice come questo?

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> 

Edit: So che producono lo stesso HTML durante il rendering, mi chiedo se non v'è alcuna giustificazione per l'utilizzo di uno stile su l'altro.

I javadocs dicono che il FlowPanel è il pannello più semplice, ma a che punto è preferibile utilizzare un HTMLPanel. per esempio.

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

vs.

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

Grazie.

UiBinder - HTMLPanel vs. div è una domanda abbastanza simile ma chiede di utilizzare un div vs. un HTMLPanel.

Answer 1

Effettivamente renderanno lo stesso nel tuo caso - div. Non c'è differenza a meno che non si inizi ad aggiungere più elementi a FlowPanel.

È possibile provare il comportamento FlowPanel qui: http://examples.roughian.com/index.htm#Panels~FlowPanel

si dovrebbe usare HTMLPanel nei casi in cui è necessario scrivere il proprio codice HTML personalizzato sulla pagina. Permette di scrivere codice HTML all'interno del tag HTMLPanel.

Ad esempio, non è possibile eseguire tale trucco con FlowPanel.

Answer 2

Ho letto di recente Tags First GWT Programming. Mi sembra che la tecnica che descrive ti consenta di avere un controllo molto migliore sul rendering finale della tua pagina, pur mantenendo i vantaggi di GWT.

Penso che la dicotomia che stai chiedendo tra FlowPanel e HTMLPanel non sia la domanda giusta. Invece, è meglio riconoscere che sono pensati per cose diverse.

HTMLPanel è molto più potente di FlowPanel. Quando è necessario aggiungere e rimuovere dinamicamente i widget incorporati in alcuni html personalizzati, utilizzare un HTMLPanel. Se si desidera che alcuni widget si allineino sulla pagina con il normale flusso HTML (come testo e immagini), utilizzare un FlowPanel.

Il mio consiglio personale sarebbe quello di utilizzare la cosa più semplice che può fare quello che ti serve.

Answer 3

Raccomando il secondo esempio. Se è possibile, si consiglia di utilizzare un semplice tag HTML come "div" su un widget come "FlowPanel" a causa del sovraccarico di un widget logico inutilizzato.

Questo può sembrare banale prima, ma ti fa risparmiare un sacco di mal di testa (perdite di memoria, operazioni di gquery, ...) quando devi gestire molti articoli.