UIBINDER EL PUENTE ENTRE GWT Y LOS DISEÑADORES WEB TRADICIONALES (HTML+CSS)

La mayoría de los mejores diseñadores web que conozco no tienen la lógica de un programador y esto es una traba  para engancharlos a GWT (aunque con HTML 5 necesariamente van a tener que aprender); sin embargo, con UIBInder veo la posibilidad de usar ese talento en beneficio de las Aplicaciones GWT.

PROBLEMA  1:

Como atraer  a ese mi Amigo, experto  en maquetación y diseño CSS,  al mundo de GWT sin que muera de  pánico?

SOLUCIÓN  1:

Copiar ese código bonito (html + csss) y pegarlo en UIBinder enseguida UIBinder lo transformara en un Widget y podremos utilizarlo  como si se tratase de un Widget Nativo, entonces insertar el Widget recién creado en una Layer, Grid, Panel, etc.

CONCLUSIÓN 1:

1)      Esto permite tomar trozos de código (html + css) y utilizarlo con GWT, entonces estos pedazos de códigos están elegantemente encapsulados en Widgets GWT.

2)      Aunque GW T ayuda desmesuradamente a realizar Aplicación Web, con UIBinder podrás construir Web Sites  sin necesidad de encontrarte con los fastidiosos refrescos totales de página que se originan después de realizar un requerimiento al Servidor y  además como para completar la historia subir tu Web Site a AppEngine.

PROBLEMA 2:

Como podemos implementar los eventos  JavaScript del código bonito de mi Amigo en el UIBinder ?

SOLUCIÓN 2:

1)      Podemos dejar los el código JavaScript tal cual dentro de UIBinder  y a través de JSNI (JavaScript Native Interface) utilizarlo en GWT.

2)       Eliminar todo el código Javascript y enseguida crear los eventos a través de los Widgets GWT

Ejemplo:

Código fuente Menu.ui.xml  (UIBINDER)

<div id="menuv">
        <ul>

         <li><a href="#menuv"><g:Label ui:field="menu1" text="Importante" /></a></li>
         <li><a href="#menuv">Comentarios</a></li>
         <li><a href="#menuv">Noticias</a></li>
         <li><a href="#menuv">Contacto</a></li>
         <li><a href="#menuv">Acerca de nosotros</a></li>
        </ul>
</div>

Código fuente Menu.java  (UIBINDER)

@UiField Label menu1; 
@UiHandler("menu1")
void onClick(ClickEvent e) {
  Window.alert("saludo");
}

Como puedes ver solo estamos insertando el < tag > del Widget Label en el “Menu.ui.xml”  después  en el “Menu.java”  podemos referenciar al < tag > creado  que es un Widget Label y crear los eventos asociados respectivos.

 Ahora el Widget “Menu” que se creó a partir de código HTML y CSS lo podemos agregar al Widget “HTMLPanel” y visualizar su funcionamiento tal como se muestra en el código de abajo.

Código fuente WEB.java

HTMLPanel panelIzquierdo = new HTMLPanel("");

.

.

.

Menu menu=new Menu(panelDerecho);

panelIzquierdo.add(menu);/* Insertamos el Widget Menu*/

CONCLUSIÓN 2:

1)      Con UIBinder separamos el diseño de la lógica de programación incrementando significativamente la Productividad.

Para una mejor comprensión del asunto te invito a ver el siguiente video – tutorial.