Manual de GWT

_____________________

Capítulo I:
“Aprendiendo a caminar en GWT.”

_______________________________

Autor: Javier Mejías Real

jameraguilar@gmail.com

versión: 14 de Agosto de 2008.

Advertencia: La presente obra está liberada bajo la licencia Reconocimiento-No comercial 2.5
España License de Creative Commons, la cual tiene las siguientes premisas:
 ÍNDICE

1.INTRODUCCIÓN ....................................................................................... 1

2.¿QUÉ ES GWT?..................................................................................... 2

3.PRIMEROS PASOS EN GWT ..................................................................... 3

4.BIBLIOGRAFÍA ...................................................................................... 17

4.1. Libros .......................................................................................... 17

4.2. Webs........................................................................................... 17

i
 ÍNDICE DE FÍGURAS

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

Figura 3.2. Pantalla de descarga de la librería GWT ......................................... 4

Figura 3.3. Página Web de inicio del proyecto Eclipse ...................................... 5

Figura 3.4. Página Web de selección de la versión de eclipse a descargar ...... 5

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

Figura 3.6. Ejemplo de creación de un proyecto de GWT.................................. 7

Figura 3.7. Resultado de ejecutar el applicationCreator .................................... 8

Figura 3.8. Pantalla de importación 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 Pestaña Arguments....................................................................... 14

Figura 3.12. Pestaña Classpath de la ventana Run Dialog.............................. 15

Figura 3.13. Ventana mostrada al elegir la opción Advanced .......................... 16

Figura 3.14. Aplicación de ejemplo creada por GWT....................................... 16

ii
 1 INTRODUCCIÓN

Este documento pretende ser una breve introducción al framework de

desarrollo Google Web Toolkit, de forma que el lector aprenda los conceptos
básicos de GWT, así como a instalar y crear su primera aplicación con dicho
entorno de trabajo.

Para la elaboración de dicho documento hemos utilizado el IDE Eclipse,

en su versión Europa, bajo el Sistema Operativo Mac Os X Leopard, junto con
la JDK de Java y la librería GWT en su versión 1.5 que es una Release
Candidate 2. En caso de que se quiera realizar con una versión anterior de la
librería que no sea RC, sino que ya esté testada y verificada, el proceso será
prácticamente igual, con la diferencia de que al descargar de la página Web
oficial de GWT nos descargaremos la libreria correspondiente (versión 1.4).

Por qué hemos elegido una RC, pues porque nuestro proyecto va a
tener cierta duración en el tiempo, y en los próximos meses, Google liberará la
versión 1.5 como definitiva, por lo que hemos creído convenientes ir
familiarizándonos con ella. Además es una muestra más de la apuesta que
hacemos por la utilización de las tecnologías más punteras y actuales que
existen en el mercado.

1
 2 ¿QUÉ ES GWT?

Google Web Toolkit es un entorno de desarrollo Java, basado en

Software libre y que permite escribir aplicaciones AJAX fácilmente. GWT,
permite escribir las aplicaciones en el lenguaje de programación Java, y luego
se encarga de compilarlo, traduciendo la parte del cliente a lenguaje de
programación JavaScript + HTML + CSS, generando código JavaScript más
eficiente que el escrito a mano.

Permite integrar de forma nativa código 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 depuración.

Las aplicaciones generadas por GWT ejecutan código Java del lado del
servidor, utilizando RPC para la comunicación entre el Cliente y el Servidor,
llevando a cabo llamadas asíncronas.

2
 3 PRIMEROS PASOS EN GWT

Como ya hemos mencionado en la introducción del presente documento,

vamos a utilizar la liberaría GWT junto con el IDE Eclipse, en su versión
Europa, así como la JDK de Java, en su versión 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

página Web oficial de Sun MicroSystems [WEB-001] y seleccionamos la
versión que queremos descargarnos. En la realización 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 librería GWT desde la página
Web oficial del proyecto [WEB-002]

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

3
 Hacemos clic en la opción “Download Google Web Toolkit (GWT)” y se
nos mostrará una pantalla como la siguiente:

Figura 3.2. Pantalla de descarga de la librería GWT

En dicha pantalla seleccionaremos la versión 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 través 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

También podemos optar por descomprimirlo mediante la herramienta

que venga incluida en la distribución 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 más cómodo, aunque esto solo va a influir cuando
tengamos que elegir la ruta de la librería.

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

Figura 3.3. Página Web de inicio del proyecto Eclipse

Al hacer clic en el botón “Download Eclipse”, se nos mostrará la

siguiente pantalla

Figura 3.4. Página Web de selección de la versión de eclipse a descargar

En la cual elegiremos la versión a descargar y la plataforma para la que

lo hacemos.

Una vez tengamos descargada la distribución de Eclipse, y lista para

funcionar, recordemos que no hace falta instalarla, sólo con descomprimirla
funciona. Estamos listos para crear nuestra primera aplicación 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
añadir 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 añada de forma temporal y nos permita ejecutar los comandos
pertientes en la actual sesión.

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

También se pueden añadir de forma permanente en el fichero del

sistema que cargue dichas variables.

En Windows XP, para añadir las variables de entorno hay que hacer clic
con el botón derecho sobre el icono MiPC, seleccionar la opción de
Propiedades, seleccionar la pestaña “Opciones avanzadas” y una vez ahí
hacer clic en la opción de “Variables de Entorno”. Basta con añadir 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.

6
 projectCreator –eclipse NombreProyecto –out NombreDirectorio

La opción –eclipse indica que vamos a crear un proyecto para el IDE

eclipse, y con la opción –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 creación de un proyecto de GWT

Una vez hemos creado el proyecto, tenemos que crear la aplicación,

para ello haremos uso del comando applicationCreator con los siguientes
parámetros

applicationCreator –eclipse NombreProyecto –out Directorio

org.client.ClasePrincipal

El parámetro –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.

7
 Figura 3.7. Resultado de ejecutar el applicationCreator

Una vez hemos creado el proyecto y la aplicación, vamos a exportarla

en Eclipse. Para ello lanzamos eclipse y en el menú File, de la parte superior,
seleccionamos la opción Import.

Se nos abrirá la pantalla que se nos muestra a continuación.

Figura 3.8. Pantalla de importación del proyecto

8
 Seleccionamos la opción “Existing Projects into Workspace”, y
seleccionamos la carpeta de nuestro proyecto (recordemos que va a ser la ruta
que poniamos en la opción –out)

Una vez hemos importado nuestro proyecto se nos añadirá 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 aplicación. 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 código:

package org.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;

9
/**
* 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/logo-
185x175.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 públicos, la hoja de estilo, las

imágenes, el fichero html de la aplicación, y el fichero de configuración
.gwt.xml.

El fichero html de la aplicación 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=UTF-
8">
<!-- -->
<!-- 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 más
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 incluirán todas las clases correspondientes a
la lógica del servidor.

Fuera del directorio src, nos encontramos las librerías que utilizamos, en
este caso las librerías por defecto, pero siempre que utilicemos alguna librería
externa estará aquí.

Luego nos encontramos tres ficheros llamados MainHolaMundo*. El

primero, el MainHolaMundo.launch, es el fichero de configuración, 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
aplicación a JavaScript, devolviendo la salida al directorio www del directorio
raiz de la aplicación.

El último fichero es el MainHolaMundo-shell, el cual contiene el script

que permite ejecutar nuestra aplicación 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 aplicación Java normal se tratara.

Para configurar Eclipse para este propósito [WEB-004], es decir, para

ejecutar una aplicación GWT, como si de una aplicación Java se tratara (con
esto podremos utilizar las herramientas de depuración de Eclipse de forma
normal), vamos a seguir los siguientes pasos.

12
 Con nuestro proyecto ya importado y seleccionado, ir a la opción del
menú Run y seleccionamos la opción “Open Run Dialog”, mostrándose la
siguiente pantalla.

Figura 3.10. Pantalla Open Run Dialog de Eclipse

Seleccionar “Java Application” y con el botón derecho “New“

En “Name” introducimos, por ejemplo, el nombre de nuestra aplicación

En “Project” seleccionamos nuestro proyecto

En “Main class” escribimos “com.google.gwt.dev.GWTShell” (sin las

comillas)

A continuación nos vamos a la pestaña “Arguments” e introducimos algo

similar a esto: -out www com.mycompany.MyApplication/MyApplication.html

13
 Figura 3.11 Pestaña Arguments

El valor adecuado para nuestra aplicación 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-mac-
1.5.1/gwt-user.jar:/Users/jamer/Documents/i2bc/gwt-mac-
1.5.1/gwt-dev-mac.jar" com.google.gwt.dev.GWTShell -out
"$APPDIR/www" "$@" org.MainHolaMundo/MainHolaMundo.html;

Vamos a la pestaña “Classpath” y en “User Entries” añadimos al

“default classpath” de nuestro proyecto (si no aparece pulsar en “Restore
Default Entries”) lo siguiente:

14
 Figura 3.12. Pestaña Classpath de la ventana Run Dialog

Pulsamos en la opción “Advanced…“,tal y como se muestra en la

siguiente figura, y seleccionamos la opción “Add folder” y elejimos la carpeta
“src” de nuestro proyecto

15
 Figura 3.13. Ventana mostrada al elegir la opción Advanced

“Add external JARs…” y buscamos la libería “gwt-dev-mac.jar” (o

“gwt-dev-windows.jar” en su caso) del directorio de instalación de GWT

Vamos a la pestaña “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 aplicación

usando Eclipse.

Ya estamos listos para trabajar con nuestro proyecto y poder ejecutarlo

bajo el IDE Eclipse.

Si ejecutamos nuestra primera aplicación de ejemplo de GWT se nos

mostrará la siguiente pantalla:

Figura 3.14. Aplicación de ejemplo creada por GWT

16
4 BIBLIOGRAFÍA

4.1. Libros

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

597 p. ISBN: 1-933988-23-1

• Dewsbury, R. Google Web Toolki Applications. 1º 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 Página

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/ Artículo sobre como ejecutar/depurar una aplicación GWT en
eclipse. Ultimo acceso en Agosto de 2008.

• http://esgooglewebtoolkit.blogspot.com/ Pagina no oficial de Google

Web Toolkit en español. Ultimo acceso en Agosto de 2008.

• http://angel.hurtado.googlepages.com/tutorialgwt Tutorial de Google

Web Toolkit realizado por Angel Hurtado, en español. 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-una-
aplicacion-gwt-en-tomcat/ Artículo acerca de como desplegar una
aplicación 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