manual de gwt - bitacorasigloxxi.files.wordpress.com · programación javascript + html + css,...

Manual de GWT

_____________________

Capítulo I:

“Aprendiendo a caminar en GWT.”

_______________________________

Autor: Javier Mejías Real

[email protected]

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:

i

Í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

ii

Í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

1

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.

2

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.

3

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

4

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.

5

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.

6

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.

7

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.

8

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

9

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;

10

/** * 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:

11

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">       <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <title>MainHolaMundo</title>      <script type="text/javascript" language="javascript" src="org.MainHolaMundo.nocache.js"></script> </head>      <body>  <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>  <inherits name='com.google.gwt.user.User'/>    <inherits name='com.google.gwt.user.theme.standard.Standard'/>

12

 <entry-point class='org.client.MainHolaMundo'/>  <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.

13

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

14

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:

15

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

16

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

17

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.

18

• [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.