Cypal Studio: plugin de GWT para Eclipse

1. Introducción

En este tutorial vamos a continuar facilitandoos el desarrollo de aplicaciones web mediante el uso del Google Web Toolkit (GWT). Si en un tutorial anterior os exlicamos cómo instalar GWT, cómo generar una pequeña aplicación de ejemplo y cómo importarla en Eclipse para poder seguir desarrollando a partir de ese punto, en este tutorial os vamos a enseñar cómo instalar Cypal Studio, que os permitiraá hacer las siguientes cosas de una manera sencilla:

• Crear módulos
• Crear servicios remotos
• Ejecutar las aplicaciones en modo host
• Compilar la aplicación para generar javascript
• Desplegar la aplicación en un servidor externo
• Exportar el proyecto como WAR

Como ya vereis a lo largo del tutorial, el plugin se integra perfectamente en Eclipse y nos será de bastante utilidad. El tutorial además es bastante sencillo de seguir, ya que hay multitud de capturas de pantallas 🙂

2. Entorno

• Máquina linux
• JDK 6u10
• GWT 1.5.2
• Eclipse 3.4 Ganymede
• Cypal Studio for GWT 1.0

3. Instalación del plugin

Lo primero que debemos hacer es descargar el software desde la dirección http://code.google.com/p/cypal-studio/downloads/list, y una vez ahi bajamos el fichero cypal.studio.for.gwt-1.0.zip

El siguiente paso es descomprimirlo. Vereis que dentro del fichero que acabais de descargar hay 3 ficheros jar:

• in.cypal.studio.gwt.core_1.0.0.200808282244.jar
• in.cypal.studio.gwt.samples_1.0.0.200808282244.jar
• in.cypal.studio.gwt.ui_1.0.0.200808282244.jar

Bien, teneis que copiar estos ficheros en el directorio ‘plugins‘ de Eclipse. Para ello vais al directorio donde lo tengais instalado, os moveis al directorio ‘plugins‘ y una vez alli copiais los 3 ficheros jar.

Tras esto ejecutamos Eclipse (si lo teniamos abierto, pues lo cerramos y lo volvemos a ejecutar). Esta primera vez tras la instalación del plugin posiblemente tarde un poco más, no seais impacientes :-).

4. Usando el plugin

Una vez haya cargado Eclipse, le indicamos al plugin el directorio donde tenemos instalado GWT. Para ello nos dirigimos a ‘Window > Preferences > Cypal Studio‘ y ahi ponemos en ‘GWT Home‘ el directorio donde tenemos instalado GWT. Tras ello pulsamos el boton ‘OK‘

Una vez que el plugin ya ha sido instalado y está configurado (como veis ha sido todo muy sencillo) vamos a crear una aplicación de ejemplo. Para ello creamos un nuevo proyecto del tipo ‘ Dynamic Web Project‘.

En ‘Project name‘ ponemos ‘AdictosGWT‘, y en ‘configuration‘, seleccionamos ‘Cypal Studio for GWT‘. Tras ello pulsamos ‘Finish‘

Como vereis nos ha creado un proyecto llamado ‘AdictosGWT‘. Hacemos click derecho sobre el proyecto y pulsamos ‘New > Other‘

Seleccionamos ‘GWT Module‘. Para poder encontrar más rapido lo que buscamos escribimos ‘module‘ en el campo ‘wizards‘:

Rellenamos los huecos como en la imagen:

• en ‘package‘ ponemos ‘com.autentia.GWT‘
• en ‘name‘ ponemos ‘AdictosGWT‘

Tras esto pulsamos ‘Finish‘

Como veis se nos abre directamente la clase ‘AdictosGWT‘. La editamos para poner el siguiente contenido:

package com.autentia.GWT.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;

public class AdictosGWT implements EntryPoint {

	public void onModuleLoad() {
		Window.alert("http://www.autentia.com/ - soporte a desarrollo informatico"); 
	}

}

Esto lo que hara sera generar una aplicación web que mostrara un alert de javascript con la frase ‘http://www.autentia.com/ – soporte a desarrollo informatico‘ . Para generar la aplicación primero deberemos lanzarla, para ello vamos a ‘Run > Run configurations‘:

Seleccionamos ‘GWT Hosted Mode‘ en la parte de la izquierda y creamos una ejecución como la siguiente. Tras ello pulsamos ‘Run‘

Se lanzará la consola de GWT con un navegador. Esperamos un poco a que compile el código para finalmente ver los resultados:

Una cualidad interesante del plugin es que se pueden hacer cambios el en código y estos se verán reflejados en la aplicacion que estemos construyendo sin necesidad de volver a lanzar la consola de GWT. Para ello vamos a hacer una prueba, sin cerrar nada, modificamos la clase ‘AdictosGWT‘ y ponemos lo siguiente:

package com.autentia.GWT.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;

public class AdictosGWT implements EntryPoint {

	public void onModuleLoad() {
		Window.alert("https://adictosaltrabajo.com/ - tutoriales sobre nuevas tecnologias");  
	}

}

Con lo que el alert ahora mostrara ‘https://adictosaltrabajo.com/ – tutoriales sobre nuevas tecnologias‘

Recargamos la aplicación pulsando el botón ‘Refresh‘

Y, tras recompilar, veremos los siguientes resultados:

5. Conclusiones

Como habreis podido comprobar, el plugin Cypal Studio facilita el desarrollo de aplicaciones GWT desde Eclipse ya que permite llevar a cabo una serie de actividades de una manera sencilla. Tambien habeis podido daros cuenta de que la instalación y configuración del plugin es bastante sencilla, con lo cual considero que es un plugin que deberemos a tener en cuenta a la hora de desarrollar aplicaciones que utilicen GWT.

Espero que os sea de utilidad.