Manual de GWT

_____________________ Captulo I:
Aprendiendo a caminar en GWT. _______________________________

Autor: Javier Mejas Real jameraguilar@gmail.com versin: 14 de Agosto de 2008.

Advertencia: La presente obra est liberada bajo la licencia Reconocimiento-No comercial 2.5 Espaa License de Creative Commons, la cual tiene las siguientes premisas:

NDICE
1.INTRODUCCIN ....................................................................................... 1 2.QU ES GWT?..................................................................................... 2 3.PRIMEROS PASOS EN GWT ..................................................................... 3 4.BIBLIOGRAFA ...................................................................................... 17 4.1. Libros .......................................................................................... 17 4.2. Webs........................................................................................... 17

NDICE DE FGURAS

Figura 3.1. Pantalla de inicio del Web Site Oficial de GWT ............................... 3 Figura 3.2. Pantalla de descarga de la librera GWT ......................................... 4 Figura 3.3. Pgina Web de inicio del proyecto Eclipse ...................................... 5 Figura 3.4. Pgina Web de seleccin de la versin de eclipse a descargar ...... 5 Figura 3.5. Consola con el comando para exportar la GWT en Mac.................. 6 Figura 3.6. Ejemplo de creacin de un proyecto de GWT.................................. 7 Figura 3.7. Resultado de ejecutar el applicationCreator .................................... 8 Figura 3.8. Pantalla de importacin del proyecto ............................................... 8 Figura 3.9. rbol de Directorios creado por GWT. ............................................. 9 Figura 3.10. Pantalla Open Run Dialog de Eclipse .......................................... 13 Figura 3.11 Pestaa Arguments....................................................................... 14 Figura 3.12. Pestaa Classpath de la ventana Run Dialog.............................. 15 Figura 3.13. Ventana mostrada al elegir la opcin Advanced .......................... 16 Figura 3.14. Aplicacin de ejemplo creada por GWT....................................... 16

ii

1
entorno de trabajo.

INTRODUCCIN

Este documento pretende ser una breve introduccin al framework de desarrollo Google Web Toolkit, de forma que el lector aprenda los conceptos bsicos de GWT, as como a instalar y crear su primera aplicacin con dicho

Para la elaboracin de dicho documento hemos utilizado el IDE Eclipse, en su versin Europa, bajo el Sistema Operativo Mac Os X Leopard, junto con la JDK de Java y la librera GWT en su versin 1.5 que es una Release Candidate 2. En caso de que se quiera realizar con una versin anterior de la librera que no sea RC, sino que ya est testada y verificada, el proceso ser prcticamente igual, con la diferencia de que al descargar de la pgina Web oficial de GWT nos descargaremos la libreria correspondiente (versin 1.4). Por qu hemos elegido una RC, pues porque nuestro proyecto va a tener cierta duracin en el tiempo, y en los prximos meses, Google liberar la versin 1.5 como definitiva, por lo que hemos credo convenientes ir familiarizndonos con ella. Adems es una muestra ms de la apuesta que hacemos por la utilizacin de las tecnologas ms punteras y actuales que existen en el mercado.

2
eficiente que el escrito a mano.

QU ES GWT?

Google Web Toolkit es un entorno de desarrollo Java, basado en Software libre y que permite escribir aplicaciones AJAX fcilmente. GWT, permite escribir las aplicaciones en el lenguaje de programacin Java, y luego se encarga de compilarlo, traduciendo la parte del cliente a lenguaje de programacin JavaScript + HTML + CSS, generando cdigo JavaScript ms

Permite integrar de forma nativa cdigo JavaScript con los JSNI (JavaScript Native Interface). La ventaja de programar en Java es que se pueden utilizar los IDE existentes para este lenguaje, como es el caso de Eclipse o NetBeans, as como sus herramientas de depuracin. Las aplicaciones generadas por GWT ejecutan cdigo Java del lado del servidor, utilizando RPC para la comunicacin entre el Cliente y el Servidor, llevando a cabo llamadas asncronas.

PRIMEROS PASOS EN GWT

Como ya hemos mencionado en la introduccin del presente documento, vamos a utilizar la liberara GWT junto con el IDE Eclipse, en su versin Europa, as como la JDK de Java, en su versin 1.5 o superior, por lo que lo primero que tenemos que hacer es descargarnos estas tres cosas. Primero nos descargamos la JRE de Java, para ello accedemos a la pgina Web oficial de Sun MicroSystems [WEB-001] y seleccionamos la versin que queremos descargarnos. En la realizacin de este documento nos encontramos con la JDK 6 Update 7. Una vez nos hemos descargado e instalado la JDK de Java correspondiente, procedemos a la descarga de la librera GWT desde la pgina Web oficial del proyecto [WEB-002]

Figura 3.1. Pantalla de inicio del Web Site Oficial de GWT

Hacemos clic en la opcin Download Google Web Toolkit (GWT) y se nos mostrar una pantalla como la siguiente:

Figura 3.2. Pantalla de descarga de la librera GWT

En dicha pantalla seleccionaremos la versin de Google Web Toolkit que finalmente hayamos decidido descargar y para la plataforma oportuna. Si hemos optado por la plataforma Windows, se nos descargar un fichero .zip, mientras que si hemos optado por GNU/Linux, Mac o similares se nos descargar un paquete .tar.gz o .tar, respectivamente, el cual puede descomprimirse a travs de linea de comandos con alguna de las siguientes ordenes: tar xvzf gwt-linux-1.5.1.tar.gz tar xvz gwt-mac-1.5.1.tar Tambin podemos optar por descomprimirlo mediante la herramienta que venga incluida en la distribucin que tengamos instalada. Una vez tengamos instalada descargada y descomprimida la GWT, si se quiere se puede copiar la carpeta en cualquier otro directorio, actuando siempre como nos resulte ms cmodo, aunque esto solo va a influir cuando tengamos que elegir la ruta de la librera.

Como ya hemos mencionado, nosotros vamos a trabajar con el IDE Eclipse, por lo que nos lo descargamos de su pgina Web oficial [WEB-003]

Figura 3.3. Pgina Web de inicio del proyecto Eclipse

Al hacer clic en el botn Download Eclipse, se nos mostrar la siguiente pantalla

Figura 3.4. Pgina Web de seleccin de la versin de eclipse a descargar

En la cual elegiremos la versin a descargar y la plataforma para la que lo hacemos. Una vez tengamos descargada la distribucin de Eclipse, y lista para funcionar, recordemos que no hace falta instalarla, slo con descomprimirla funciona. Estamos listos para crear nuestra primera aplicacin en GWT. 5

Lo primero que vamos a hacer es crear un proyecto, para ello necesitamos ejecutar algunos comandos de GWT, por lo que es recomendable aadir la ruta donde tengamos descomprimido la GWT en las variables de entorno del S.O. En Mac, basta con ejecutar la siguiente orden desde la consola, para que se nos aada de forma temporal y nos permita ejecutar los comandos pertientes en la actual sesin.

Figura 3.5. Consola con el comando para exportar la GWT en Mac

Tambin se pueden aadir de forma permanente en el fichero del sistema que cargue dichas variables. En Windows XP, para aadir las variables de entorno hay que hacer clic con el botn derecho sobre el icono MiPC, seleccionar la opcin de Propiedades, seleccionar la pestaa Opciones avanzadas y una vez ah hacer clic en la opcin de Variables de Entorno. Basta con aadir en el path la ruta de la GWT. Una vez que podemos ejecutar las aplicaciones que incluye GWT, vamos a ejecutar el comando que nos va a permitir crear un proyecto. Dicho comando es el projectCreator.

projectCreator eclipse NombreProyecto out NombreDirectorio

La opcin eclipse indica que vamos a crear un proyecto para el IDE eclipse, y con la opcin out NombreDirectorio, indicamos el directorio donde se va a crear el proyecto. Recomendamos que el directorio tenga un nombre identificativo, y que este se encuentre dentro del Workspace de eclipse en el que vamos a trabajar.

Figura 3.6. Ejemplo de creacin de un proyecto de GWT

Una vez hemos creado el proyecto, tenemos que crear la aplicacin, para ello haremos uso del comando applicationCreator con los siguientes parmetros
applicationCreator eclipse NombreProyecto out Directorio

org.client.ClasePrincipal

El parmetro eclipse NombreProyecto, tiene que ser el mismo que utilizamos con el projectCreator, as como el directorio. Por ltimo seleccionamos el paquete del cliente inicial, as como el nombre de la clase principal.

Figura 3.7. Resultado de ejecutar el applicationCreator

Una vez hemos creado el proyecto y la aplicacin, vamos a exportarla en Eclipse. Para ello lanzamos eclipse y en el men File, de la parte superior, seleccionamos la opcin Import. Se nos abrir la pantalla que se nos muestra a continuacin.

Figura 3.8. Pantalla de importacin del proyecto

Seleccionamos la opcin Existing Projects into Workspace, y seleccionamos la carpeta de nuestro proyecto (recordemos que va a ser la ruta que poniamos en la opcin out) Una vez hemos importado nuestro proyecto se nos aadir en Eclipse el mismo con la siguiente estructura de directorios.

Figura 3.9. rbol de Directorios creado por GWT.

La carpeta src contiene los paquetes de la aplicacin. Uno el org.client donde se van a crear todas las clases de la parte del cliente, las que posteriromente GWT compilar a JavaScript. En el paquete org.client, nos encontramos la clase MainHolaMundo.java, la cual contiene el siguiente cdigo:
package org.client; import import import import import import import import com.google.gwt.core.client.EntryPoint; com.google.gwt.user.client.ui.Button; com.google.gwt.user.client.ui.ClickListener; com.google.gwt.user.client.ui.DialogBox; com.google.gwt.user.client.ui.Image; com.google.gwt.user.client.ui.RootPanel; com.google.gwt.user.client.ui.VerticalPanel; com.google.gwt.user.client.ui.Widget;

/** * Entry point classes define <code>onModuleLoad()</code>. */ public class MainHolaMundo implements EntryPoint { /** * This is the entry point method. */ public void onModuleLoad() { Image img = new Image("http://code.google.com/webtoolkit/logo185x175.png"); Button button = new Button("Click me"); VerticalPanel vPanel = new VerticalPanel(); // We can add style names. vPanel.addStyleName("widePanel"); vPanel.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER); vPanel.add(img); vPanel.add(button); // Add image and button to the RootPanel RootPanel.get().add(vPanel); // Create the dialog box final DialogBox dialogBox = new DialogBox(); dialogBox.setText("Welcome to GWT!"); dialogBox.setAnimationEnabled(true); Button closeButton = new Button("close"); VerticalPanel dialogVPanel = new VerticalPanel(); dialogVPanel.setWidth("100%"); dialogVPanel.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER); dialogVPanel.add(closeButton); closeButton.addClickListener(new ClickListener() { public void onClick(Widget sender) { dialogBox.hide(); } }); // Set the contents of the Widget dialogBox.setWidget(dialogVPanel); button.addClickListener(new ClickListener() { public void onClick(Widget sender) { dialogBox.center(); dialogBox.show(); } }); } }

En la carpeta org, todos los ficheros pblicos, la hoja de estilo, las imgenes, el fichero html de la aplicacin, y el fichero de configuracin .gwt.xml. El fichero html de la aplicacin que se encuentra en la carpeta public del directorio org, tiene el siguiente contenido: 10

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!-- The HTML 4.01 Transitional DOCTYPE declaration--> <!-- above set at the top of the file will set --> <!-- the browser's rendering engine into --> <!-- "Quirks Mode". Replacing this declaration --> <!-- with a "Standards Mode" doctype is supported, --> <!-- but may lead to some differences in layout. --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF8"> <!---> <!-- Any title is fine --> <!---> <title>MainHolaMundo</title> <!---> <!-- This script loads your compiled module. --> <!-- If you add any GWT meta tags, they must --> <!-- be added before this line. --> <!---> <script type="text/javascript" language="javascript" src="org.MainHolaMundo.nocache.js"></script> </head> <!-<!-- The body can have arbitrary html, or <!-- you can leave the body empty if you want <!-- to create a completely dynamic UI. <!-<body> --> --> --> --> -->

<!-- OPTIONAL: include this if you want history support --> <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe> </body> </html>

Y el fichero MainHolaMundo.gwt.xml, el cual se encuentra en el directorio org est formado por el siguiente contenido.
<module> <!-- Inherit the core Web Toolkit stuff. --> <inherits name='com.google.gwt.user.User'/> <!-- Inherit the default GWT style sheet. You can change --> <!-- the theme of your GWT application by uncommenting --> <!-- any one of the following lines. --> <inherits name='com.google.gwt.user.theme.standard.Standard'/> <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/>--> <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>--> <!-- Other module inherits -->

11

<!-- Specify the app entry point class. --> <entry-point class='org.client.MainHolaMundo'/> <!-- Specify the application specific style sheet. --> <stylesheet src='MainHolaMundo.css' /> </module>

Ahora mismo no nos tenemos que preocupar del contenido de estos dos ltimos ficheros, ya que hasta que no comencemos con conceptos ms avanzados no ser necesario modificarlos y nos bastar con los que incluye GWT por defecto. Cuando programemos una parte del servidor, habr un nuevo paquete que ser org.server, en el cual se incluirn todas las clases correspondientes a la lgica del servidor. Fuera del directorio src, nos encontramos las libreras que utilizamos, en este caso las libreras por defecto, pero siempre que utilicemos alguna librera externa estar aqu. Luego nos encontramos tres ficheros llamados MainHolaMundo*. El primero, el MainHolaMundo.launch, es el fichero de configuracin, que al utilizar Eclipse no vamos a tener que modificar para nada. El siguiente es el MainHolaMundo-compile, el cual es un Script que al ejecutar nos compilar la aplicacin a JavaScript, devolviendo la salida al directorio www del directorio raiz de la aplicacin. El ltimo fichero es el MainHolaMundo-shell, el cual contiene el script que permite ejecutar nuestra aplicacin en el navegador empotrado. Como nosotros vamos a utilizar Eclipse, vamos a aprender a configurarlo para que no haga falta utilizar este Script, para ejecutar el sistema, ya que bastar con ejecutarlo como si de una aplicacin Java normal se tratara. Para configurar Eclipse para este propsito [WEB-004], es decir, para ejecutar una aplicacin GWT, como si de una aplicacin Java se tratara (con esto podremos utilizar las herramientas de depuracin de Eclipse de forma normal), vamos a seguir los siguientes pasos.

12

Con nuestro proyecto ya importado y seleccionado, ir a la opcin del men Run y seleccionamos la opcin Open Run Dialog, mostrndose la siguiente pantalla.

Figura 3.10. Pantalla Open Run Dialog de Eclipse

Seleccionar Java Application y con el botn derecho New En Name introducimos, por ejemplo, el nombre de nuestra aplicacin En Project seleccionamos nuestro proyecto En Main class escribimos com.google.gwt.dev.GWTShell (sin las comillas) A continuacin nos vamos a la pestaa Arguments e introducimos algo similar a esto: -out www com.mycompany.MyApplication/MyApplication.html

13

Figura 3.11 Pestaa Arguments

El valor adecuado para nuestra aplicacin lo podemos ver en el fichero nombreProyecto-shell que el GWT ha creado, por ejemplo:
#!/bin/sh APPDIR=`dirname $0`; java -XstartOnFirstThread -Xmx256M -cp "$APPDIR/src:$APPDIR/bin:/Users/jamer/Documents/i2bc/gwt-mac1.5.1/gwt-user.jar:/Users/jamer/Documents/i2bc/gwt-mac1.5.1/gwt-dev-mac.jar" com.google.gwt.dev.GWTShell -out "$APPDIR/www" "$@" org.MainHolaMundo/MainHolaMundo.html;

Vamos a la pestaa Classpath y en User Entries aadimos al default classpath de nuestro proyecto (si no aparece pulsar en Restore Default Entries) lo siguiente:

14

Figura 3.12. Pestaa Classpath de la ventana Run Dialog

Pulsamos en la opcin Advanced,tal y como se muestra en la siguiente figura, y seleccionamos la opcin Add folder y elejimos la carpeta src de nuestro proyecto

15

Figura 3.13. Ventana mostrada al elegir la opcin Advanced

Add external JARs y buscamos la libera gwt-dev-mac.jar (o gwt-dev-windows.jar en su caso) del directorio de instalacin de GWT Vamos a la pestaa Environment, seleccionamos New, en Name ponemos GWT_EXTERNAL_BROWSER (sin las comillas) y en Value el path al navegador Web del sistema, por ejemplo /usr/bin/firefox Listo, ya estamos preparados para ejecutar/depurar nuestra aplicacin usando Eclipse. Ya estamos listos para trabajar con nuestro proyecto y poder ejecutarlo bajo el IDE Eclipse. Si ejecutamos nuestra primera aplicacin de ejemplo de GWT se nos mostrar la siguiente pantalla:

Figura 3.14. Aplicacin de ejemplo creada por GWT

16

4
4.1. Libros
597 p. ISBN: 1-933988-23-1 Dewsbury, R. Google Web

BIBLIOGRAFA

Hanson, R; Tacy, A; GWT In Action. 1ed. USA. Manning. 2007.

Toolki

Applications.

ed.

Massachusets. 2008. 574p. ISBN: 0-321-50196-9. Chaganti, P; Google Web Toolkit. 1 ed.Birmingham. 2007. 232p. ISBN:978-1-847191-00-7

4.2. Webs

[WEB-001]

http://java.sun.com/javase/downloads/index.jsp Pgina

oficial de descarga del JDK de Java. Ultimo acceso Agosto de 2008. [WEB-002] http://code.google.com/webtoolkit Pagina oficial del

framework Google Web Toolkit. Ultimo acceso Agosto de 2008. [WEB-003] http://www.eclipse.org Pagina oficial del proyecto Eclipse. Ultimo Acceso Agosto de 2008.

17

[WEB-004]

http://rubensa.wordpress.com/2006/10/17/java-eclipse-

gwt/ Artculo sobre como ejecutar/depurar una aplicacin GWT en eclipse. Ultimo acceso en Agosto de 2008. http://esgooglewebtoolkit.blogspot.com/ Pagina no oficial de Google Web Toolkit en espaol. Ultimo acceso en Agosto de 2008. http://angel.hurtado.googlepages.com/tutorialgwt Tutorial de Google Web Toolkit realizado por Angel Hurtado, en espaol. Ultimo acceso en Agosto de 2008. http://examples.roughian.com/ Pagina Web con ejemplos de Google Web Toolkit. Ultimo acceso en Agosto de 2008. http://eraunatonteria.wordpress.com/2007/08/10/desplegar-unaaplicacion-gwt-en-tomcat/ Artculo acerca de como desplegar una aplicacin realizada en GWT en un servidor Apache Tomcat. http://www.gwtapps.com/ Pagina con ejemplos de aplicaciones realizadas en GWT. Ultimo acceso en Agosto de 2008. http://google.wikia.com/wiki/Google_Web_Toolkit Wiki no oficial sobre Google. Ultimo acceso en Agosto de 2008.

18