Google toolkit. Framework Ajax para crear sitios web

Enviado por Javier Mellado el 12 Marzo, 2007 - 13:48 ::

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 {
  2.  
  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();
  9.  
  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 Creator.