GWT Html Convenciones de diseño

Acabo de empezar a trabajar con GWT y ya estoy reconociendo la extraordinaria potencia que posee. Vengo de un mundo frontend así que Java es una gran curva de aprendizaje, pero creo que eso realmente me ayudará a construir una aplicación correctamente diseñada (html-wise) en lugar de solo confiar en los paneles GWT predeterminados que a menudo terminan usando tablas para el diseño, o divs superfluos, absolutamente posicionados.GWT Html Convenciones de diseño

Lo más importante que me está ralentizando en este momento, sin embargo, es decidir cómo diseñar correctamente el diseño de mi sitio. Tengo un sitio de cabecera/pie de dos colas bastante estándar (ancho fijo) que quiero diseñar, pero no soy fanático de todos los divs/estilos adicionales que vienen con el DockLayoutPanel, por ejemplo.

estoy pensando que yo debería escribir mi propio compuesto extendiéndose control Layout que tiene HTMLPanels para el sitio de disposición general
(creo ... todavía no se han dado cuenta plenamente de que todavía, es decir. Cómo hacer añado de identificación a estos divs del panel "#header", "#nav" etc ...)
entonces puedo añadir otros widgets en este diseño

Pero la otra cosa que estoy viendo es que podría escribir una clase de Diseño que extiende UiBuilder y tiene divisiones directas en el archivo ui.xml.

Me pregunto, ¿cuál es el método preferido para el diseño del sitio con GWT? Esto no va a ser reutilizado en el sentido de otros widgets, se usará una vez y mis controles, etc. se colocarán dentro.

¡Todos los consejos o trucos son muy apreciados! Y si me he perdido completamente el bote sobre cómo hacer esto, hágamelo saber

Fuente

2010-03-30 brad

Una combinación de UI Binder y HTML Panel funciona mejor para nosotros.

En su .ui.xml, código de lugar similar a -

<gwt:HTMLPanel ui:field="container"> 



    <gwt:FlowPanel ui:field="header"></gwt:FlowPanel> 



     <gwt:HTMLPanel styleName="secondarynav"> 

      <gwt:FlowPanel ui:field="menuWidget"></gwt:FlowPanel> 

      <gwt:FlowPanel ui:field="someOtherWidget"></gwt:FlowPanel> 

     </gwt:HTMLPanel> 



     <gwt:FlowPanel styleName="secondarycontent"> 

      <gwt:FlowPanel ui:field="faqWidget"></gwt:FlowPanel> 

      <gwt:FlowPanel ui:field="advertisingWidget"></gwt:FlowPanel> 

     </gwt:FlowPanel> 



     <div class="content"> 
     <gwt:FlowPanel ui:field="mainContentWidget"/> 

     </div> 


     <div class="clearingDiv"/> 

    </div> 



    <gwt:FlowPanel ui:field="footer"></gwt:FlowPanel> 

</gwt:HTMLPanel>

En la correspondiente clase .java, tendrá métodos como setHeader(), setSecondaryNav(), SetMenu(), setFooter() etc.

De esta manera, su diseño se define completamente en su ui.xml. Además, puedes usar abstracciones de widgets. Lo que significa que puede crear un Widget de encabezado y luego invocar el método setHeader() en su diseño para colocarlo correctamente.

Fuente

2010-03-31 08:17:51

Esto tiene mucho sentido para mí, pero mi principal problema con esto es la adición de atributos de identificación html. Quizás esto no sea estándar en GWT y procedo de la codificación manual de html, pero no me gusta usar clases para divisiones de diseño que solo se usan una vez. ¿Alguna idea sobre eso? – brad

Sí, debe pasar por aros para establecer la identificación de los widgets. GWT desalienta el uso de identificadores en widgets (excepto para las pruebas automatizadas), ya que no tienen forma de garantizar que el ID sea único. Por lo tanto, aunque sepa que va a usar el encabezado solo una vez, GWT no puede saberlo. Es por eso que no expone el método setId(). En pocas palabras, es probablemente más fácil seguir su recomendación y usar clases para diseñar. –

Continúe usando su diseño. GWT es muy adaptable.

Una opción que quizás desee probar es mantener su diseño estático de HTML/CSS. Puede usar RootPanel.get ("id") para recuperar una referencia al elemento (por id), como un Panel, en el que puede agregar widgets GWT (incluidos otros paneles).

También podría mover su diseño en una plantilla de UiBinder. Los beneficios aquí son la minimización y ofuscación de CSS (múltiples UiBinders pueden compartir un único recurso CSS)

Fuente

2010-03-30 23:10:03

He hecho una especie de combo entre esta sugerencia de Sripathi. que también es similar a la sugerencia de chris. ¡un montón! – brad

Al final, decidí usar la sugerencia de Sripathi. Parece ofrecer el mecanismo más simple para actualizar los widgets en cada sección. Gracias de nuevo por las sugerencias – brad

Si simplemente desea construir la página usando sus propios divs, la forma más fácil es usar divs en el archivo XML de UiBinder. Allí también se puede establecer el atributo id como de costumbre:

<g:HTML> 
    <div id="header">...</div> 
    ... 
</g:HTML>

Los paneles de diseño proporcionados por GWT pueden ser útiles, también - tal vez usted querrá jugar con ellos un poco más, y ver si ofrecen cualquier valor (como evitar algunos problemas de navegador cruzado) para usted, o no.

Fuente

2010-03-30 23:16:41

, he combinado un poco de esto con la sugerencia de Sripathi – brad

Respuesta

Cuestiones relacionadas