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.

PROGRAMITA (SMARTGWT LGPL + PHP)

Estuve buscando viejos programitas y encontré  un programita bastante sencillo cuyo objetivo era registrar la cantidad  de votos procesados para las elecciones municipales y así determinar ,antes que el Jurado  Nacional de Elecciones diera el resultado oficial,  si el candidato había ganado (En mi País todavía no hay voto electrónico ).
Muestro el  video para que vean la sencillez del asunto, mencionar que se construyó con SmartGWT LGPL + PHP + MYSQL.  Espero que este post sea el reinicio de mi etapa  bloguera.