Qual è il modo preferito per associare gli stili css ai widget GWT (usando UiBinder)?

Question

Dalla pagina GWT (http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html#cssfiles), si parla di 2 modi (per l'applicazione moderna):

• Utilizzando un CssResource contenuta all'interno di un ClientBundle.
• Utilizzo di un elemento in linea in un modello UiBinder.

Le moderne applicazioni GWT utilizzano in genere una combinazione di CssResource e UiBinder.

Quindi la mia domanda è, quando dovrei utilizzare un file css e creare un CssResource per essa, e quando devo definire gli stili direttamente nel file ui.xml utilizzando < ui: stile >? Vi sono implicazioni relative alle prestazioni (ad esempio, la dimensione della risorsa da scaricare sul client) con uno di questi modi?

Answer 1

Nessuna implicazione sulle prestazioni: se si specifica il CSS nel file UiBinder, il compilatore GWT creerà un CssResource in modo dinamico in base alle regole delineate nel file .ui.xml e lo utilizzerà.

Quindi in realtà si tratta solo di condividere questo stile in altri punti della tua app. Se si desidera che un pulsante in Something.ui.xml abbia lo stesso stile di un altro pulsante in SomethingElse.ui.xml, è necessario specificare tale stile in CssResource. Altrimenti, specifica lo stile nel file UiBinder e nessun'altra classe avrà accesso ad esso.

Answer 2

Utilizzando UiBinder, l'utilizzo principale di CssResource è di modificare lo stile in modo dinamico. Se non intendi cambiare stili dinamicamente, non perdere tempo con CssResource.

Si consiglia di utilizzare i file CSS. Questo separa Style dal markup nel tuo UiBinder che aiuta la collaborazione nel progetto con più di 1 persona - questo è particolarmente vero con un enorme progetto. Ad un certo punto, il tuo file .ui.xml può diventare davvero enorme, e anche avere il CSS in esso non farà altro che peggiorare le cose.

È possibile aggiungere facilmente un file CSS a qualsiasi UiBinder e quindi utilizzarlo normalmente. Ecco un esempio:

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" 
    xmlns:g="urn:import:com.google.gwt.user.client.ui"> 

    <ui:style src="../css/StyleSheet.css" /> 
    ... 
    ... 
      <g:LayoutPanel ui:field="layoutName" styleName="{style.aCssRule}" > 
    ... 

Usando lo stile in questo modo, se vi capitasse di voler cambiare lo stile di un widget in modo dinamico, è sufficiente creare un CssResource (in un ClientBundle) di questo file CSS e sarete sii pronto per il rock.