Primer tutorial de GWT usando eclipse indigo

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.

¿ 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 GWTMas 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.

¿ Como preparar el entorno para usar GWT ?

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.

Instalar SDK y plugin a EclipseYa tenemos instalado el Eclipse correctamente, pero todavía necesitamos los plugins y SDK de GWT. Para hacer esto, debemos abrirel 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

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 pluginsLe 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 imagenCon esto, ya podemos darle Finish para que Eclipse cargueNuestra primer aplicación.

Como empezar nuestra primera aplicación web

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 ingresamosDesde un navegador en el modo de desarrolloNos permitirá instalar el Web Developer ToolkitSolo 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.javaQue 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í:

Depurar y editar nuestra aplicación

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.

Finalmente compilar nuestra aplicación

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

Creditos