¿Cuál es la forma preferida de asociar estilos CSS con widgets GWT (usando UiBinder)?

Question

Desde la página de GWT (http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html#cssfiles), menciona 2 maneras (por aplicación moderna):

• El uso de un CssResource contenida dentro de un ClientBundle.
• Uso de un elemento en línea en una plantilla de UiBinder.

Las aplicaciones GWT modernas suelen utilizar una combinación de CssResource y UiBinder.

Así que mi pregunta es, ¿cuándo debo utilizar un archivo CSS y crear un CssResource por ella, y cuando debería definir estilos directamente en el archivo ui.xml usando <ui:> estilo? ¿Hay alguna implicación en el rendimiento (es decir, el tamaño del recurso para descargar en el cliente) con cualquiera de estas formas?

Answer 1

No hay una implicación en el rendimiento: si especifica el CSS en el archivo UiBinder, el compilador GWT creará un CssResource dinámicamente en función de las reglas incorporadas en su archivo .ui.xml y lo usará.

Por lo tanto, realmente solo se trata de si desea compartir ese estilo en otros lugares de su aplicación. Si desea que un botón en Something.ui.xml tenga el mismo estilo que otro botón en SomethingElse.ui.xml, debe especificar ese estilo en un CssResource. De lo contrario, especifique el estilo en el archivo UiBinder y ninguna otra clase tendrá acceso a él.

Answer 2

Al usar UiBinder, el uso principal de CssResource es cambiar el estilo dinámicamente. Si no tiene la intención de cambiar estilos dinámicamente, no pierda su tiempo con CssResource.

Recomiendo el uso de archivos CSS. Esto separa el estilo del marcado en su UiBinder, lo que ayuda a la colaboración en el proyecto con más de 1 persona, esto es particularmente cierto con el gran proyecto. En algún momento, su archivo .ui.xml puede ser realmente enorme, y tener el CSS en él solo empeorará las cosas.

Puede agregar fácilmente un archivo CSS a cualquier UiBinder y luego usarlo como lo haría normalmente. He aquí un ejemplo:

<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 el estilo de esta manera, si alguna vez desea cambiar el estilo de un widget de forma dinámica, sólo tiene que crear un CssResource (en un ClientBundle) de este archivo CSS y usted estar listo para rockear