GWT

GWT incluye una amplia colección de controles (widgets) que van desde los más simples (Labels, Button, etc) hasta algunos más complejos y no disponibles en HTML de forma directa (MenuBar , Tree y StackPanel). El modelo de eventos es similar al de Swing o SWT. Ejemplo muy básico:

Button button = new Button("Click me");
       final Label label = new Label();
       button.addClickListener() {
               public void onClick(Widget sender) {
               label.setText("Hola Mundo");
               }
       }

Antes de abordar un ejemplo debemos entender la estructura de directorio que exige GWT para nuestro proyecto.

Un proyecto GWT, a pesar de contener una aplicación web, se parece más a un proyecto Java que a un proyecto J2EE. GWT necesita ciertos ficheros adicionales y el seguimiento de una cierta nomenclatura en los paquetes.

En este ejemplo utilizaremos el nombre de paquete “com.sp.gwt”. La estructura entonces debe ser:

• Src/
• Src/com/sp/gwt/Ejemplo.gwt.xml : Descriptor de módulo

GWT basa sus aplicaciones en módulos , y cada módulo debe tener su fichero de configuración.

Similar al descriptor J2EE, en este fichero se declaran los servicios RCP que van a ser invocados desde el cliente así como los puntos de entrada a nuestra aplicación (entrypoints).

• Src/com/sp/gwt/client/: Fuentes Java que serán compilados a Javascript
• Src/com/sp/gwt/client/Ejemplo.java
• Src/com/sp/gwt/server/: Fuentes de los servicios RPC del servidor (que se compilaran a .class)ç
• Src/com/sp/gwt/public/: Recursos estáticos (imagenes , css, js, etc)
• Src/com/sp/gwt/public/Ejemplo.html: Página contenedora

Al menos debe existir una pagina HTML que debe invocarse para lanzar la aplicación GWT.

• bin/

Aquí están los .class resultado de compilar las clases java mediante el compilador javac

• www/

Aquí va la aplicación lista para desplegar en un servidor web. Es decir aquí tenemos las clases cliente Javascript compiladas por el GWT. Aquí se copia la carpeta public.

Para probar la aplicación basta con abrir el fichero www/.../Ejemplo1.html en un navegador y estaremos ejecutando nuestra aplicación en el modo web. Todo el contenido de esta carpeta se puede ejecutar en un servidor web ya que todo es HTML, Javascript y XML

No obstante, no tenemos que crear todas esas carpetas, GWT trae una herramienta que las crea por nosotros “applicationCreator.cmd”

Tan solo creamos el directorio base de nuestro ejemplo e invocamos esta herramienta.

También se crean dos scripts:

Ejemplo1-compile.cmd : invoca al compilador GWT y genera código cliente en www

• Abrimos Ejemplo.html en nuestro navegador

Ejemplo1-shell.cmd: con esto se ejecuta la aplicación en “hosted mode” mientras estemos desarrollando la aplicación.

Veamos que el fichero generado “Ejemplo.java” ya contiene el esqueleto suficiente para hacer un Hola mundo. Por lo que podemos lanzar los scripts anteriores y ver sus resultados:

package com.sp.gwt.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.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class Ejemplo1 implements EntryPoint {
          /**
         * Se ejecuta cuando una página HTML declara el uso de un módulo GWT
          */
         public void onModuleLoad() {
                  final Button button = new Button("Click me");
                  final Label label = new Label();
                  button.addClickListener(new ClickListener() {
                            public void onClick(Widget sender) {
                                     if (label.getText().equals(""))
                                               label.setText("Hello World!");
                                     else
                                               label.setText("");
                            }
                  });
         // RootPanel nos permite acceder a los elementos HTML que tengamos en la pagina
         RootPanel.get("slot1").add(button);
         RootPanel.get("slot2").add(label);
         }
}

Ahora vemos el código html de “Ejemplo.html”

<html>
       <head>
              <title>Ejemplo</title>
              <style>
                       body,td,a,div,.p{font-family:arial,sans-serif}
                       div,td{color:#000000}

                            a:link,.w,.w a:link{color:#0000cc}
                            a:visited{color:#551a8b}
                            a:active{color:#ff0000}
                  </style>
                  <meta name='gwt:module' content='com.sp.gwt.Ejemplo'>
         </head>
         <body>
<!-- Referencia al Javascript que se encarga de ejecutar el codigo del modulo que
declare la pagina.Ha sido creado por applicationCreator.cmd y no es necesario que 
modifiquemos su contenido -->

        <script language="javascript" src="/servicios/madeja/gwt.js"></script>
        <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
        <h1>Ejemplo1</h1>
        <p>Este es el ejemplo</p>

<!- Definimos una tabla con dos celdas a las que se llama slot1 (para el botón) 
y slot2 (para la etiqueta).Estos son los contenedores donde ubicaremos los 
controles de nuestra aplicación.-->

                  <table align=center>
                            <tr>
                                     <td id="slot1"></td>
                                     <td id="slot2"></td>
                            </tr>
                  </table>
         </body>
</html>

A continuación veremos un ejemplo un poco más complejo con interacción con el servidor.

En el ejemplo anterior todo se ejecuta en el lado cliente. Es más habitual aplicaciones web que manejan datos y ejecutan transacciones en el servidor.

A las operaciones en servidor se les llama “servicios”, pero no confundir con los servicios de la arquitectura SOA típicamente implementados con la tecnología Web Services.

Un servicio GWT es simplemente un servlet que recibe una petición http con una serie de parámetros y devuelve un resultado. En este caso todos los parámetros que recibe como el resultado son objetos serializados.

Otra diferencia importante es que el Servlet no devuelve una página HTML, sino que la respuesta es un documento XML con únicamente el objeto de respuesta serializado.

Ahora pasemos con el segundo ejemplo:

Siempre que creamos un servicio GWT crearemos dos interfaces y una clase.

En este ejemplo vamos a implementar un servicio de búsqueda de empleados. Dado un número de departamento nos devolverá los empleados de ese departamento.

El primer paso es poner un nombre al servicio: “SrvBusqueda”. Éste será el nombre de la primera interfaz necesaria que extenderá “com.google.gwt.user.client.rpc.RemoteService” y que declarará el método que realizará la operación de búsqueda. Este interfaz lo metemos en el paquete client.

Fichero: SrvBusqueda.java

package com.sp.gwt.client;
import com.google.gwt.user.client.rpc.RemoteService;
public interface SrvBusqueda extends RemoteService {
         public Empleado[] buscarEmpleados (int nDpto);
}

En este ejemplo vamos a crear un Empleado que implementa isSerializable, (observe que los campos son de tipo String e int, con lo que cumple las reglas):

Empleado.java

package com.sp.gwt.client;
import com.google.gwt.user.client.rpc.IsSerializable;
public class Empleado implements IsSerializable {
         private String nombre = null;
         private String apellido = null;
         private int antiguedad = 0;
         public Empleado() {
                  super();
         }
         public Empleado(int antiguedad, String apellido, String nombre) {
                  super();
                  this.antiguedad = antiguedad;
                  this.apellido = apellido;
                  this.nombre = nombre;
  }
  public int getAntiguedad() { return antiguedad; }
  public void setAntiguedad(int antiguedad) { this.antiguedad = antiguedad; }
  public String getApellido() { return apellido; }
  public void setApellido(String apellido) { this.apellido = apellido; }
  public String getNombre() { return nombre; }
  public void setNombre(String nombre) { this.nombre = nombre; }
}

Ahora definimos la clase del lado del servidor que implemente dicha interfaz. Esta clase va a correr como un servlet dentro de un contenedor J2EE. Nuestra clase sólo se debe encargar de implementar el método buscarEmpleado() ya que del resto se encarga GWT.

SrvBusquedaImpl.java

package com.sp.gwt.server;
 import java.util.HashMap;
 import com.google.gwt.user.server.rpc.RemoteServiceServlet;
 import com.sp.gwt.client.Empleado;
 import com.sp.gwt.client.SrvBusqueda;
public class SrvBusquedaImpl extends RemoteServiceServlet implements SrvBusqueda {
         static HashMap map = new HashMap();
         static {
                  map.put(new Integer(0), new Empleado[] {
                          new Empleado(2, "Manuel", "Rico"),
                          new Empleado(1, "Luis", "González"),
                          new Empleado(5, "Sonia", "Puentes"),
                  });
                  map.put(new Integer(1), new Empleado[] {
                          new Empleado(2, "Jorge", "de Andrés"),
                          new Empleado(1, "Óscar", "Rodríguez"),
                          new Empleado(3, "Jesús", "López"),
                  });

            map.put(new Integer(2), new Empleado[] {
                     new Empleado(6, "Natalia", "Ruiz"),
                     new Empleado(3, "Begoña", "Ferrer"),
                     new Empleado(2, "Antonio", "García"),
            });
            map.put(new Integer(3), new Empleado[] {
                     new Empleado(2, "Isabel", "Perez"),
                     new Empleado(8, "Luis", "Hernandez"),
                     new Empleado(5, "Francisco", "Soldado"),
            });
  }
  public Empleado[] buscarEmpleados(int nDepto) {
            Empleado[] lista=(Empleado[])map.get(new Integer(nDepto));
            if (null==lista) {
                     return new Empleado[]{};
            }
  return lista;
  }
}

Por último una clase del lado cliente que se va a utilizar para realizar la invocación de forma asíncrona desde el código cliente:

SrvBusquedaAsync.java

package com.sp.gwt.client;
import com.google.gwt.user.client.rpc.AsyncCallback;
public interface SrvBusquedaAsync {
         public void buscarEmpleados(int nDepto, AsyncCallback callback) ;
}

El nombre de esta interfaz debe ser idéntico al nombre de la interfaz principal del servicio añadiéndole el sufijo “Async”. Como vemos la firma del método “buscarEmpleados” es ligeramente distinta en la versión asíncrona , la transformación ha sido la siguiente:

• Nombre del método el mismo
• El tipo de retorno debe ser “void”
• Los parámetros del método deben ser los mismos y en el mismo orden, pero hay que añadir al final un parámetro de tipo “AsynCallback”. Este objeto se encarga de recibir la respuesta de la invocación al servidor. En nuestro ejemplo devolverá un array de empleados.

Por último, veamos como invocar al servicio desde el cliente:

Cuando un usuario hace click en el botón de búsqueda se ejecutará el siguiente código:

Ejemplo2.java

package com.sp.gwt.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.rpc.ServiceDefTarget;
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.DockPanel;
import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class Ejemplo2 implements EntryPoint {
         private Grid tabla = null;
         /**
         * This is the entry point method.
         */
         public void onModuleLoad() {

final VerticalPanel panel = new VerticalPanel();
final TextBox txtDept = new TextBox();
panel.add(new Label("Número Departamento:"));
panel.add(txtDept);
final Button btnConsultar = new Button("Consultar");
btnConsultar.addClickListener(new ClickListener() {
         public void onClick(Widget sender) {
                   int nDepto = -1;
         try {
                   nDepto = Integer.parseInt(txtDept.getText());
         } catch (NumberFormatException e) {
                   mostrarError("Debe indicar un valor numérico como departamento");
                   txtDept.setText("");
                   return;
         }
//Creamos una instancia de la interface asincrona del servicio
SrvBusquedaAsync srvBusqueda = (SrvBusquedaAsync) GWT.create(SrvBusqueda.class);
//Indicamos la URI en la cual esta desplegado el servicio
ServiceDefTarget endpoint = (ServiceDefTarget) srvBusqueda;
endpoint.setServiceEntryPoint("/Ejemplo2/srvBusqueda");
//Creamos el objeto que gestionará el resultado de la invocación asíncrona
AsyncCallback callback = new AsyncCallback() {
         //La invocación al servicio ha sido correcta
         //Pinta el array de empleados con un Grid
         public void onSuccess(Object result) {
                   Empleado[] lista = (Empleado[]) result;
                   // eliminamos tabla con resultados anteriores
                   if (tabla != null) {
                             panel.remove(tabla);
                   }
                   tabla = new Grid(lista.length + 1, 3);
                   tabla.setWidth("450px");

                             tabla.setCellSpacing(0);
                             tabla.setCellPadding(2);
                             tabla.setStyleName("tabla");
                             // cabecera
                             tabla.setWidget(0, 0, new Label("Nombre"));
                             tabla.setWidget(0, 1, new Label("Apellido"));
                             tabla.setWidget(0, 2, new Label("Antiguedad"));
                             tabla.getRowFormatter().setStyleName(0,"tabla-filaCabecera");
                             // filas
                             for (int i = 0; i < lista.length; i++) {
                                        Empleado emp = lista[i];
                                        tabla.setWidget(i + 1, 0, new Label(emp.getNombre()));
                                        tabla.setWidget(i + 1, 1, new Label(emp.getApellido()));
                                        tabla.setWidget(i + 1, 2, new Label(""+ emp.getAntiguedad()));
                             }
                             // añadimos tabla
                             panel.add(tabla);
                   }
                   //La invocación al servicio ha fallado
                   public void onFailure(Throwable t) {
                             panel.add(new Label("Error: " + t.getMessage()));
                   }
          };
          //Invocación del servicio , como es una llamada asíncrona no bloquearemos la pantalla del usuario
          // durante la ejecución del servicio
          srvBusqueda.buscarEmpleados(nDepto, callback);
          }
  });
  panel.add(btnConsultar);
  panel.add(new Label("Resultados:"));
  RootPanel.get("panel1").add(panel);
}
private void mostrarError(String text) {
         final DialogBox popup = new DialogBox();
         popup.setText("Error");
         DockPanel dlgPanel = new DockPanel();
         dlgPanel.setSpacing(4);
         dlgPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
         dlgPanel.add(new Label(text), DockPanel.NORTH);
         dlgPanel.add(new Button("Cerrar",new ClickListener(){
                  public void onClick(Widget sender) {
                           popup.hide();
                  }}),DockPanel.SOUTH);
         popup.add(dlgPanel);
         popup.setPopupPosition(60, 60);
       popup.show();
    }
}