explicando GWT

Enero 4, 2008 at 4:19 pm (Frameworks integration, ajax, javascript)

Vía ajax hispano me encontre con este artículo que les dejo a continuación para que lo chequen a mi me parecío muy bueno por eso se los pongo a su disposición.

Saludos y empezamos nuevo año con ganas renovadas.

google tool kit frame work ajax creacion sitios web java españolMe hago eco de uno de los
mejores artículos que he leído sobre el tema de google toolkit, he visto
conveniente citarlo aquí antes de hacer algo que seguramente no dejaría tan
claro. Un especial agradecimiento a Edgardo Balduccio de gadmonks por este fantástico
artículo.

Google lanzó su Google Web Toolkit
(ver los Destaques del día) y eso me produjo dos sensaciones opuestas:

1. Alegría. Que el creador de Gmail ponga a disposición un
framework completo (quizá el propio) para desarrollar aplicaciones en AJAX en su
estilo -único- es muy gratificante para aquellos desarrolladores que apreciamos
la manera en que Google hace las cosas.

2. Cierta decepción. Cuando bajé el framework, lo “instalé” (está entre comillas porque la
instalación se remite a ser copiado al disco duro en una carpeta cualquiera) y
ejecuté su aplicación de prueba (pueden verla funcionando aquí mismo) percibí que está íntegramente orientado al
lenguaje JAVA. Lo primero que pensé es en mis clientes (podría ser de mucha
utilidad), pero lamenté el hecho de que ese entorno resulta impopular a la hora
de ser integrado en weblogs y aplicaciones simples en PHP.

Aún así, para aquellos que estén interesados en la mecánica de este nuevo
regalo de google, me permitiré explicar algunos detalles de su
funcionamiento.

Requisitos

  • Java: Sun Java 2 Runtime Environment 1.4.2+ [Download]
  • Sistema operativo: Windows XP, Windows 2000, o Linux w/
    GTK+ 2.2.1+
  • Hardware: ~100MB de espacio en el disco, 512MB RAM

Cómo funciona

El GWT funciona de dos maneras:

1. Hosted mode

Este modo de ejecución es a través de un Apache
Tomcat que viene incorporado y sirve para debuggear la aplicación
en ciernes. Para ver cómo funciona este modo de ejecución, escojeremos el mismo
ejemplo que mostramos aquí (Kitchen Sink); deberemos entrar en la carpeta
samples, luego en KitchenSink y ejecutar el archivo
KitchenSink-shell.cmd. Este comando iniciará el servidor de
aplicaciones Tomcat y abrirá un navegador (¿vieron? Google ya tiene su
navegador, aunque sea para probar sus aplicaciones) que apuntará a nuestro
localhost en el puerto 8888 (para no interferir con otros servicios
http que podamos tener activos) con la aplicación en ejecución (si quieren ver
la aplicación -de nuevo- está aquí publicada en Gadmonks).

2. Web mode (compilado)

Fíjense que existe otro archivo “cmd”:
KitchenSink-compile.cmd. Ejecuten este comando y verán cómo el
framework compila la aplicación y la guarda dentro de una carpeta llamada
www en la que encontraremos otra con el nombre completo del
package java (en este caso www\com.google.gwt.sample.kitchensink.KitchenSink).
Dentro de esta última carpeta veremos algunos archivos HTML y XML que conforman
a la aplicación que podrá ser ejecutada desde cualquier navegador sin necesitar
del TOMCAT, pues -aunque resulte difícil entenderlo-, traduce todo el código
puro JAVA a javascript.

Estructura

El GWT genera archivos para Eclipse, aún así la programación puede ser efectuada a través
de cualquier IDE Java (yo me acostumbré a usar el JDeveloper de
Oracle, es gratuito y puede bajarse directamente desde la web).
Estas herramientas nos permitirán realizar el debug de la aplicación, es decir,
verificar el recorrido del código en ejecución para detectar errores
eventuales.

Para crear una nueva aplicación, usaremos el comando applicationCreator.cmd
(es necesario tener una ventana de línea de comandos abierta pues requiere de
argumentos y en ella se nos informa dónde están guardados los archivos que
fueron generados). El argumento de este comando es el nombre que le daremos al
package, por ejemplo:

CODE:

  1. applicationCreator
    com.blogatronica.client.Prueba

El client es necesario, si no, nuestro proyecto no será
creado y dará un mensaje de error.

El comando generará una serie de carpetas, de acuerdo con el nombre de
nuestro package (en java siempre es así) dentro de la carpeta src en el
path del framework. En nuestro caso, el path será:
src\com\blogatronica\client y
src\com\blogatronica\public.

Dentro de public encontraremos el archivo Prueba.html y
dentro de client el código fuente en java, un archivo llamado
Prueba.java.

En Public.html está la llamada al javascript que será
generado en la ejecución (gwt.js), tanto en Host mode como en Web mode. Este
javascript será el que gerenciará todo el código generado.

La aplicación generada de prueba es el típico Hello world! que
aparecerá luego de que apretemos un botón. Para ejecutarla, pueden ver que el
framework generó en su path tanto el archivo de ejecución como el de
compilación, en este caso Prueba-shell.cmd y
Prueba-compile.cmd.

El archivo Prueba.java funda la clase de esta manera:

JAVA:

  1. public class Prueba implements EntryPoint {
  3. /**
  4.    * This is the entry point
    method.
  5.    */
  6. public void onModuleLoad() {
  7.   final Button button =
    new Button(“Click
    me”    );
  8.   final Label label =
    new Label();
  10.   button.addClickListener(new ClickListener() {
  11.     public void onClick(Widget sender) {
  12.       if (label.getText().equals(“”))
  13.         label.setText(“Hello
    World!”    );
  14.       else
  15.         label.setText(“”);
  16.     }
  17.   });

El código es muy simple, si cuando apretamos el botón el label está
vacío, escribirá “Hello world!” si no, sacará lo que está escrito y lo dejará
vacío. Pueden ver el ejemplo publicado aquí también.

Cuando el código es compilado, genera un archivo de javascript para cada
navegador, y describe a los navegadores de la siguiente manera (en el archivo
*nocache.html):

JavaScript:

  1. window["prop$user.agent"] = function() {
  2. var v = window["provider$user.agent"]();
  3. switch (v) {
  4.   case “ie6″:
  5.   case “moz”:
  6.   case “oldmoz”:
  7.   case “opera”:
  8.   case “safari”:
  9.     return v;
  10.   default:
  11.     parent.__gwt_onBadProperty(“com.blogatronica.Prueba”, “user.agent”, ['"ie6"', '"moz"', '"oldmoz"', '"opera"', '"safari"'], v);
  12.     throw null;
  13. }
  14. };

Podemos ver que los navegadores soportados son el Explorer, Mozilla, Netscape
(oldmoz), Opera y Safari.

Conclusión

Estas descripciones no esperan ser un detalle exhaustivo del funcionamiento
del GWT, sí acercar a los desarrolladores interesados -por querer usarlo o por
curiosidad- el mecanismo primario de un framework que podría facilitarle la vida
a más de uno a la hora de desarrollar alguna aplicación que nuestro trabajo nos
traiga a las manos. La versión es beta y en el sitio indica que esperan el
feedback de la gente para ajustarlo. A mí me pareció, en las pocas pruebas que
hice, muy estable, en ningún momento dio ningún error. Para los que prefieran
alguna cosa más fácil, les recomiendo el Google Page
Creatorv. 

2 comentarios

  1. Omar Martínez dijo:

    Enero 4, 2008 a 5:35 pm

    Me parece que el tema de ajax y GWT tiene mucho futuro, y muy importante que sepan de su existencia. Para facilitar la existencia hay un plugin para el IDE Eclipse uqe lo pueden descargar de esta pagina.

    http://sourceforge.net/projects/googlipse

    Ahi esta un video que explica como utilizar el plugin.

    Si alguen le ineresa pues ahi esta.

    Ok, saludos a todos

    Responder

  2. GyoX dijo:

    Febrero 19, 2008 a 4:49 pm

    Pues si, a mi tambien me parece que tiene buena pinta.

    Responder

Escribe un comentario