Tutorial de GWT hecho por Luis García. Alumno de Laboratorio III Confederación Suiza. 2012

1. Introducción
¿ Qué es GWT?
El significado de GWT es Google web Tools, un framework, generador de JavaScript
creado por Google que permite el desarrollo de aplicaciones web, facilitando al
programador trabajar en un entorno ágil, de alto nivel, y despreocupándose de problemas
como la incompatibilidad de navegadores. Además permite al programador trabajar en
Java, sin necesidad de jamás escribir una sola línea de HTML o JavaScript.
¿Para que sirve?
Con la biblioteca GWT, los desarrolladores pueden crear y depurar aplicaciones AJAX en
lenguaje JAVA usando el entorno de desarrollo que prefieran. Cuando una aplicación es
desplegada, el compilador GWT traduce la aplicación Java a un archivo Javascript, que
puede ser ofuscado para optimizar el rendimiento.

2. ¿ Qué tengo que instalar ?
En re sumen lo que debemos instalar son estas 3 simples herramientas:
- Java Se Development Kit 7
-Eclipse Indigo o Eclipse Classic
-Plugin y SDK de GWT
Mas adelante, veremos como instalaremos fácilmente estas 3 herramientas
necesarias y como pondremos correctamente en marcha nuestra primer
aplicación GWT
¿Qué es Eclipse?
Eclipse es un entorno de desarrollo integrado de código abierto
multiplataforma para desarrollar lo que el proyecto llama "Aplicaciones de
Cliente Enriquecido", opuesto a las aplicaciones "Cliente-liviano" basadas en
navegadores. Esta plataforma, típicamente ha sido usada para desarrollar
entornos de desarrollo integrados (IDE), como el IDE de Java llamado Java
Development Toolkit (JDT) y el compilador (ECJ) que se entrega como parte de
Eclipse Sin embargo, también se puede usar para otros tipos de aplicaciones
cliente, como BitTorrent o Azureus.

3. Antes que nada, debemos tener previamente instalado el Java Se Development Kit 7, que
podemos descargarlo de la pagina oficial:
http://www.oracle.com/technetwork/java/javase/downloads/java-se-jdk-7-download-
432154.html, en la misma, nos da una lista de opciones para descargar según el SO que
tengamos instalado, nosotros vamos a elegir el que corresponda con nuestra PC.
Una vez que tengamos instalado el Java Se Develpment kit, podemos pasar a la
instalación del Eclipse, nos dirigimos a la webhttp://www.eclipse.org/downloads/ y
descargamos el que muestra esta imagen a continuación.
Una vez descargado, ya estamos listo para configurarlo, dado que no necesita instalación,
solo los queda descomprimirlo en una carpeta que nos sea cómoda.

4. Ya tenemos instalado el Eclipse correctamente,
pero todavía necesitamos los plugins y SDK de GWT.
Para hacer esto, debemos abrir
el eclipse y dirigirnos a:
Help > Install new software
donde se nos abrirá una nueva ventana, en la misma, debemos hacer click en
Add, nos va a aparecer una ventana nueva con 2 espacios en blanco
El primero será el nombre que le pongamos a
nuestro nuevo software, en este caso es GWT
El segundo, será la dirección de donde se
podrá descargar nuestro plugin.
En este caso lo descargaremos directo de Google
http://dl.google.com/eclipse/plugin/3.7

5. Una vez que completemos estos 2 campos de texto, le damos OK, en la ventana anterior,
nos va a cargar la lista de cosas que tenemos para
descargar, como las que aparece en la imagen.
Ahora que tenemos seleccionados los plugins
Le damos a NEXT y aceptamos los términos y condiciones de uso de plugin, y por ultimo,
le damos click en FINISH para que comience la descarga e instalación de los plugins y
SDK que seleccionamos. Cuando la descarga e instalación terminé, debemos reiniciar el
Eclipse, y todo esta listo para poder empezar con nuestro primer proyecto.
Para crear nuestra primera aplicación web, vamos a
File > New > Web Aplication Proyect . Esto nos abrirá un
Asistente para crear la aplicación y sus datos, como el nombre
Y el paquete Java que se va a usar, en este caso será:
com.mycompany.mywebapp. Igual que en la imagen
Con esto, ya podemos darle Finish para que Eclipse cargue
Nuestra primer aplicación.

6. Para poder ver funcionando localmente nuestra aplicación, solo debemos ir a nuestra
aplicación y darle click derecho, y dirigirnos a Debug as > Web Aplication , esto
depurará la aplicación y nos permitirá acceder a ella mediante cualquier navegador de
internet.
Como esta es la primera vez que ingresamos
Desde un navegador en el modo de desarrollo
Nos permitirá instalar el Web Developer Toolkit
Solo tendremos que seguir las instrucciones del navegador para instalarlo y refrescar la
dirección cuando termine.
Teniendo listo nuestra sencilla aplicación, podemos hacer unos pequeños
cambios como, editar algunos textos, para ello iremos a la carpeta SCR de nuestra
aplicación, donde se encuentra el código fuente, veremos un paquete llamado
com.mycompany.mywebapp.client , dentro de el hay un archivo llamado MyWebApp.java
Que tiene en la linea 40 construido el boton Send “final Button sendButton = new
Button(“Send");” Cambiaremos el nombre “Send” por “Enviar al servidor”, guardamos y
actualizamos la pagina para ver el cambio, que quedará así:

7. Para ejecutar la aplicación en JavaScript de GWT en el modo " producción", compilaremos
la aplicación haciendo clic derecho en el proyecto y la elección de Google > Compilar
GWT .
Este comando invoca el compilador de GWT que genera una serie de archivos de
JavaScript y HTML a partir del código fuente de Java en el MyWebApp MyWebApp/war
/ subdirectorio. Para ver la aplicación final, abra el
Archivo ”MyWebApp/war / MyWebApp.html”
nuestro navegador, que ya puede estar listo para
implementarse en cualquier
servidor copiando los archivos que se encuentran
MyWebApp/war .
A final de esta sencilla guía de GWT, aprendimos como preparar todo el entorno y a crear
una aplicación web con GWT, esto nos sirve para desarrollar cualquier en cualqueira
de nuestros proyectos en los que queramos utilizar las herramientas de Java para
hacer Ajax y javascript y que funcione en cualquier navegador moderno sin
problemas.

8. Tutorial rápido hecho por: Jorge Luis García
Año: 6to División: 11º
Con ayuda de: Luchee-PC
Para: Laboratorio III con Pablo Conrado