RSS

Ejemplo básico con GWT

21 May

Tras la breve introducción del post anterior, vamos a hacer un ejemplo básico con GWT. Para ello lo primero que vamos a hacer es instalar el plugin que tiene GWT para Eclipse. Obviamente podemos usar GWT sin necesidad de Eclipse. Para la compilación de una aplicación GWT se utiliza Ant. Podríamos desde línea de comandos compilar y lanzar nuestra aplicación, pero pienso que el uso de Eclipse facilita bastante las cosas. Si quieres echar un vistazo a cómo comenzar, visita la sección de getting started de GWT. Después de instalar el plugin vamos a hacer lo siguiente.

  1. Estudiar los conceptos básicos (ficheros en una aplicación GWT, modos de ejecucción, …) a partir de un proyecto GWT de Google Code.
  2. Crear una interfaz de usuario para nuestra aplicación GWT.
  3. Gestionar los eventos en el cliente.
En este mail nos centraremos en los conceptos básicos de GWT.
1. Conceptos básicos.
Para comenzar nuestra andadura con GWT vamos a utilizar uno de los proyectos de ejemplo, llamado StockWatcher. Para traernos este producto a Eclipse únicamente tenemos que seguir las instrucciones de esta página. Una vez creado el proyecto se van a generar una serie de directorios y ficheros para la aplicación.
  • /src/com/google/gwt/sample/stockwatcher. Es una carpeta que a su vez contiene las siguientes carpetas:
    • Client: donde está implementado el cliente de la aplicación Stockwatcher .En esta carpeta hay 3 clases java:
      • StockWatcher.java: define el punto de entrada a la aplicación a través del método onModuleLoad. En este método se cargan los elementos visuales que nos van a permitir interactuar con el servicio que nos va a generar la capa servidora de la aplicación. Al ser GWT un framework orientado a eventos, también tenemos que definir un manejador para tratarlos. En esta clase en concreto se incluye un handler que implementa las interfaces ClickHandler y KeyUpHandler respectivamente. Cuando pulsemos el botón Send generado en nuestra interfaz se invocará al servicio a través de la interfaz GreetingService desde el manejador ClickHandler.
      • GreetingService.java: interfaz a través de la cual vamos a acceder al servicio que nos ofrece esta aplicación de prueba. Es nuestro stub de cliente.
      • GreetingServiceAsync.java: la interfaz asincrona para acceder al servicio.
    • Server: donde está implementado la parte servidora de la aplicación. En este caso simplemente vamos a tener la implementación del servicio que llama la parte cliente. Hay una clase java:
      • GreetingServiceImpl.java: extiende la clase RemoteServiceServlet e implementa la lógica de respuesta que se devuelve al cliente.
    • Shared: es una especie de carpeta de clases de utilidades. En este caso hay una clase java:
      • FieldVerifier.java: una clase sencilla de validación llamada desde la implementación del servicio. Simplemente verifica que el nombre que nos manda el cliente tiene una longitud mayor de 3 caracteres.
    • META-INF. En esta carpeta nos encontramos con un fichero jdoconfig.xml que define la capa de persistencia de nuestra aplicación. Ésta está basada en JDO.
    • En la raíz de esta carpeta tenemos dos ficheros más.
      • log4j.properties. propiedades de nuestro log.
      • StockWatcher.gwt.xml. Es el fichero que indica como se define nuestra aplicación. Aquí definimos la clase que implementa el punto de entrada a nuestra aplicación que como ya sabemos es StockWatcher.java, los módulos que utiliza nuestra aplicación ó qué hojas de estilo vamos a usar.
  • war. En esta carpeta vamos a encontrar todo lo necesario para desplegar nuestra aplicación.
    • StockWatcher.html. Página web que mostraremos al usuario. Está página será ‘sobreescrita’ por la clase StockWatcher cuando carguemos la aplicación.
    • StockWatcher.css. Hojas de estilo que usará nuestra cliente web.
    • carpeta stockwatcher. Aquí estarán almacenados recursos estáticos como imagenes, más css, … que usará el cliente.
    • carpeta WEB-INF. Están las librerías que necesitamos, el fichero web.xml donde se anota el servlet implementado en la carpeta Server vista anteriormente, fichero de properties, … .
Una aplicación GWT puede ser arrancada de dos modos:
  • Hosted mode: se abrirá un navegador GWT donde correrá nuestra aplicación sobre la máquina virtual de Java. Al estar corriendo en Java podremos depurar nuestra aplicación de forma más sencilla que si lo hicieramos directamente sobre Javascript.
  • Web mode: se probará sobre el navegador que decidamos. En el modo web estamos probando la aplicación real, es decir, ya no estaremos usando las clases java sino el html y el código javascript que haya generado el compilador de GWT.
Podemos arrancar estos dos modos desde Eclipse o directamente desde línea de comandos a través de un fichero build.xml de Ant. En los ejemplos que encontramos en la web de GWT podemos ver cómo se han creado dos tareas, ejecutaremos ant hosted ó ant build en función del modo que deseemos.
Nosotros vamos a lanzar nuestra aplicación desde Eclipse en modo web. Al instalarnos el ejemplo StockWatcher se nos crea directamente un launch que ejecutaremos.
lauch a GWT app
Podremos acceder a nuestra aplicación a través de está URL.
get the url of a gwt app
Una vez abierto nuestro navegador utilizaremos el cliente para interactuar con el servicio de ejemplo.
StockWatcher client
GWT StockWatcher response
En los siguientes post veremos un poco más de GWT.
 
6 comentarios

Publicado por en 21 mayo, 2011 en GWT

 

Etiquetas: , , , ,

6 Respuestas a “Ejemplo básico con GWT

  1. Pingback: Gwt | TagHall

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: