Tutorial: Construyendo aplicaciones con Java y GWT

En una entrada anterior de este mismo blog discutimos un poco acerca de qué es y cómo funciona GWT (Google Web Toolkit), ahora es tiempo de crear un pequeño tutorial acerca de cómo crear aplicaciones web usando ésta herramienta y una manera de combinarla con un framework de persistencia que nos permita gestionar las operaciones CRUD de nuestra capa de datos. Para lograr lo anterior esta guía propone utilizar Hibernate para la gestión de datos, el uso de GWT y su mecanismo de comunicación RPC con el servidor para la creación de la lógica del negocio, la extensión GXT de Sencha para GWT para crear potentes y atractivos componentes en la interfaz de usuario.

Aunque la complejidad del ejemplo no es de alto nivel se espera sentar las bases para la construcción de aplicaciones web utilizando las herramientas descritas anteriormente y, aunque lo que se describirá a continuación tampoco es la única manera de construir sistemas web y existen diversas formas de integrar frameworks y herramientas existentes con GWT, resultaría un buen ejemplo para los que se van iniciando en el mundo de Java o GWT.

Así, el tutorial se dividirá en dos partes. La primera tiene la intención de mostrar cómo se configura una aplicación web que usa GWT e Hibernate en un entorno de desarrollo y la segunda cómo se implementa y distribuye la lógica de una aplicación web usando estas mismas herramientas.

¿Qué necesitamos?

• SQL Server
• Netbeans - https://netbeans.org/downloads/
• Hibernate - http://www.hibernate.org/downloads  
• GWT  - http://www.gwtproject.org/download.html
• Sencha GXT  - http://www.sencha.com/products/gxt/download/
• Plug In GWT4NB  - http://plugins.netbeans.org/plugin/44509/gwt4nb

El SMBD puede variar según las preferencias del usuario o de las especificaciones de quien siga esta guía, aunque si se elige uno diferente a SQL Server se tendrían que hacer las modificaciones pertinentes para conectar la aplicación con el gestor de BD.

PRIMEROS PASOS

Creando la base de datos

Para el presente ejemplo utilizaré una base de datos llamada “Inventario” la cual tendrá las tablas necesarias para iniciar sesión con un usuario en el sistema, aplicación de permisos sobres las operaciones de las ventanas, operaciones CRUD de  productos y tiendas, asociación de productos con las tiendas, etc. Ésta base de datos se encuentra diseñada y creada en SQL Server 2008 y no plasmaré los pasos que se siguieron para su creación porque no es el objetivo de este tutorial. Así, la base de datos queda como sigue:

Es un diagrama muy simple pero que plasma bien las relaciones entre las entidades básicas que pueden existir en un sistema administrador de inventarios y sus relaciones entre sí.

Teniendo la base de datos lista en nuestro gestor pasaremos al siguiente paso, que es configurar el ambiente de desarrollo.

Configurando el ambiente

Una vez descargados los archivos necesarios listados en le primera sección debemos configurarlos en nuestro IDE para poder utilizarlos correctamente. Esta guía usa Netbeans pero es posible configurar el ambiente en el IDE de preferencia del usuario (IntelliJ IDEA o Eclipse), previamente debemos tener instalado el JDK y el DAS (ya sea GlassFish o Tomcat) ligado a nuestro IDE para poder alojar la aplicación y ejecutarla para hacer las pruebas necesarias.

Instalando SDK de GWT

Este SDK contiene las principales librerías y el compilador necesario para desarrollar aplicaciones basadas en GWT, como se mencionó en el artículo anterior, permite además a los desarrolladores escribir frontend AJAX en el lenguaje Java, el cual es después convertido y optimizado en archivos de JavaScript que funcionan en la mayoría de los navegadores.

Para instalarlo debemos tener descargados el SDK de GWT y el plug-in para Netbeans de GWT siguiendo este procedimiento:

• En este caso vamos a crear una carpeta en la raíz de la unidad C:, con nombre “SDKs”, la cual va a contener los archivos del SDK de GWT y los archivos de extensión GXT de Sencha.

• Una vez descargado el plug-in para Netbeans de GWT se agrega de la siguiente manera: Vamos a Netbeans y seleccionamos el menú Tools > Plugins y de la ventana emergente seleccionamos la pestaña “Donwloaded”

• Presionamos “Add Plugins…”, navegamos hasta el directorio donde se encuentra desacargado nuestro archivo .nbm correspondiente a nuestro plug in y presionamos “Install”.

•  En la ventana siguiente presionamos Next…

• Nos mostrará una advertencia relacionada con la firma del plug in, la cual solo omitimos presionando Continue…

• Una vez que termine de instalar el plug in, nos pedirá reiniciar el IDE y cuando inicie de nuevo estaremos listos para empezar a crear la aplicación web.

Creando un proyecto GWT en Netbeans

En seguida vamos a crear un Nuevo proyecto en GWT, en Netbeans elegimos File > New Project, de la sección Categoría seleccionamos Java Web y Web Application del panel de la derecha.

• Ingresamos el nombre del proyecto y la ruta en la que se almacenarán los archivos:

• Seleccionamos el servidor de aplicaciones en el que se desplegará la aplicación en el ambiente de desarrollo y la versión de Java EE:

• En la sección de frameworks seleccionamos Google Web Toolkit, al seleccionarlo debemos también especificar la ruta en la que tenemos los archivos del SDK, la cual en este caso será en C:\SDKs\gwt

• Además, dentro de la misma sección de Frameworks seleccionamos Hibernate 3.2.5, y aprovecharemos este paso para configurar el JDBC que nos permitirá conectar la aplicación con la base de datos que se creó. Para esto seleccionamos del menú desplegable la opción New Database Connection:

• De la ventana emergente, seleccionamos la opción del combo New Driver para configurar un nuevo conector:

• Presionamos Add… para navegar hasta el directorio en el que se encuentra descargado nuestro .jar del conector y seleccionarlo:

• Una vez seleccionado presionamos OK

• Lo anterior nos regresará a la ventana emergente para configurar una conexión, para lo cual seleccionamos Microsoft SQL Server, y mostrará la ruta en la que se encuentra el conector, una vez hecho esto seleccionamos Next:

• En esta ventana configuraremos la conexión sustituyendo los datos que se muestran por los que corresponden al usuario, cuando terminemos de ingresar los datos, probamos la conexión y cuando sea exitosa presionamos Finish, en este caso queda de la siguiente manera:

• Cuando terminemos de configurar el driver y la conexión seleccionamos en el combo box de Database Connection la opción que corresponde a nuestra conexión y presionamos Finish para completar la creación inicial del proyecto.

Hecho lo anterior Netbeans construye un proyecto con la estructura siguiente:

·         Web Pages

o   WEB-INF

§  sun-web.xml

§  web.xml

o   welcomeGWT.html

·         Source Packages

o   <default package>

§  Hibernate.cfg.xml

o   org.localadmin

§  Main.gwt.xml

o   org.localadmin.client

§  MainEntryPoint

·         Libraries

o   GWT2.5.0 – gwt-user.jar

o   GWT2.5.0 – gwt-servlets-deps.jar

o   GWT2.5.0 – gwt-servlet.jar

o   GWT2.5.0 – requestfactory-server.jar

o   Hibernate...

       Estructura del proyecto.                                  Librerías.                             Estructura de archivos.

Ejecutando el proyecto

Dado que al crear el proyecto éste contiene código por Default podemos ejecutar desde este momento la aplicación y ver una salida básica. Para ejecutar el proyecto simplemente presionamos click derecho sobre el nombre del proyecto y seleccionamos “Run” como se muestra a continuación:

Al seleccionar esta operación se ejecutan los siguientes eventos:

1. Glassfish se inicia automáticamente, si éste no está iniciado aún, y provee las credenciales para iniciar el servicio, por default el usuario es “admin” y la constraseña es “adminadmin” (si Glassfish se instaló independientemente de NetBeans y se especificaron credenciales diferentes para iniciar el servicio entonces se usan las que se especificaron).
2. El proyecto se compila.
3. Los archivos resultantes de la compilación se despliegan en el directorio de la aplicación: “Inventario\build”.
4. Se invoca al explorador de internet predeterminado con la URL “http://localhost:8080/Inventario/”.
5. La salida básica mencionada es un botón con texto “Clickme!” y un texto que se muestra y desaparece al presionar el botón.

Agregando la librería Ext GWT

Ext GWT es una librería de componentes Java UI desarrollada por Ext JS para crear la interfaz de usuarios de RIAs usando GWT. Algunas de sus características principales son:

• Soporte de CSS estándar
• Integración nativa con GWT, sin librerías de terceros.
• Componentes personalizables y alto rendimiento en gran variedad de elementos.
• Completo soporte de procedimientos remotos usando GWT RPC, JSON y XML.
• Soporte de las características de Java 1.5
• Licencias comerciales y open source

Ya que descargamos y copiamos los archivos a la ubicación que deseamos (en estes caso C:\SDKs\) se agrega la librería como sigue:

1. Click derecho sobre la carpeta “Libraries” en la pestaña “Project”, y seleccionamos “Add Jar/Folder”.
2. Navegamos y seleccionamos el archivo gxt.jar de la carpeta que contiene los archivos de Ext GWT como se muestra:

3. Seleccionamos el archivo “gxt-2.2.5-gwt22.jar” ya que es la versión compatible para GWT v2.

        

4. El siguiente paso es copiar la carpeta “resources” de los archivos de la carpeta “C:\SDKs\gxt\” y agregarlos al proyecto, ya que este directorio contiene las imágenes de los componentes de GXT que necesitamos para el proyecto.

5. Ahora debemos modificar el módulo GWT como se muestra:

    6. Seleccionamos “Add” y escribimos: com.extjs.gxt.ui.GXT

1. Guardar cambios y cerrar main.gwt.xml
2. Modificar el archivo welcomeGWT.html para agregar una referencia al CSS de la carpeta “web/resources/css” con la línea:

<link rel=“stylesheet” type=”text/css” href=”resources/css/gxt-all.css” />

Antes de iniciar con la sección de Hibernate me gustaría mencionar lo que acabamos de hacer con los pasos anteriores. Al agregar el Jar GXT nos permite usar la librería de componentes para crear la interfaz de usuario, algunos de éstos son paneles, ventanas, grids, textfield, date pickers, layouts etc.

La carpeta “resources” que se copió a la carpeta “web” del directorio de la aplicación contiene todos los archivos necesarios para los controles de la librería, tales como CSS, imágenes, y más, sin la necesidad de usar archivos nuevos, con lo cual podemos crear una rica interfaz de usuario de la aplicación.

La modificación que se hizo al módulo GWT “main.gwt.xml” contiene una referencia a la librería de componentes que se utilizarán para que sean accesibles desde las clases que la implementen.

Para más información pueden visitar las siguientes ligas:

GWT: http://code.google.com/webtoolkit/overview.html

Plug in GWT para Netbeans: http://plugins.netbeans.org/plugin/44509/gwt4nb

Ext GWT: http://www.sencha.com/products/gxt/

Configurando Hibernate

Antes de empezar con el desarrollo de la lógica de la aplicación configuraremos Hibernate dentro de nuestro proyecto para preparar la capa que administre la persistencia de objetos en la base de datos que la capa de la aplicación le envíe.

A continuación se anexa un diagrama que muestra la ubicación de este componente dentro de nuestra aplicación.

Cuando se crea un proyecto que usa el framework Hibernate, el IDE automáticamente crea un archivo de configuración con nombre “hibernate.cfg.xml” en la raíz del classpath de la aplicación (src/java). Éste archivo de configuración contiene información acerca de la conexión a la base de datos, el mapeo de recursos, y otras propiedades de conexión. Ésta configuración se puede modificar en la vista de diseño del XML o directamente en el source.

Para éste tutorial necesitamos modificar las algunas de las propiedades de conexión definidas en éste archivo “hibernate.cfg.xml” para habilitar el registro de sentencias SQL y habilitar la administración del contexto de la sesión de Hibernate.

Para hacer esto seguimos los siguientes pasos:

• Abrimos el archivo hibernate.cfg.xml en la pestaña de Diseño:

• Expandimos la opción “Configuration Properties” bajo el nodo “Optional Propertie” y presionamos “Add…”, de la ventana emergente seleccionamos “hibernate.show_sql” y establecemos el valor de la propiedad a “true”. Esto habilita el registro de sentencias SQL.

• A continuación expandimos el nodo “Miscellaneous Properties” y seleccionamos “hibernate.current_session_context_class” en la propiedad y seleccionamos la opción “thread” para el valor de ésta.

• Ahora en el mismo nodo de “Miscellaneous Properties” seleccionamos “hibernate.query.factory_class” en la propiedad y para el valor seleccionamos “org.hibernate.hql.classic.ClassicQueryTranslatorFactory” como sigue:

Siguiendo estos pasos el archivo de configuración hibernate.cfg.xml queda como sigue:

Creando el archivo HibernateUtil.java

Para usar hibernate necesitamos creaar una clase de apoyp que maneje el inicio y el acceso de la SessionFactory de Hibernate para obtener los objetos de la sesión. La clase debe llamar al método “configure();” y cargue las propiedades establecidas en el archivo de configuración hibernate.cfg.xml para que posteriormente genere la SessionFactory.

Para crear este archivo es necesario seguir los pasos siguientes:

1. Click derecho sobre el paquete “Default Package” y seleccionar New > Other y abrir el wizard.
2. Seleccionar Hibernate del panel de categorías de la izquierda y HibernateUtil.java del panel de la derecha.
   

3. Presionamos Next y expecificamos el nombre del archivo así como el paquete de ubicación de la clase.
   

4. Presionamos Finish y el IDE abre el archivo para que se edite, sin embargo lo cerraremos ya que no es necesario hacer ninguna modificación por el momento.

Generando el mapeo de entidades y las clases que serán los beans

En este tutorial usamos POJOS (Plain Old Java Objects) para representar datos de cada una de las tablas en la base de datos que vamos a usar. La clase Java especifica los campos para las columnas en las tablas y usa simples getters y setters para obtener y escribir los datos de éstos. Para mapear los POJOs a las tablas se usa Hibernate con anotaciones en la clase y archivos de configuración XML.

Podemos usar el asistente de hibernate para generar las clases mapeadas de las tablas en la base de datos, así cuando se usa este asistente se pueden generar multiples POJOs a partir de las tablas existentes en la base de datos de la conexión y de la configuración del archivo “hibernate.cfg.xml”.

Creando el archivo de ingeniería inversa de Hibernate

Antes de generar las clases que mapean las tablas en las base de datos, necesitamos un archivo de configuración de hibernate que nos permita tener mayor control sobre la estrategia de mapeo de la base de la base de datos. Este archivo se llama hibernate.reveng.xml y lo podemos crear a partir de un asistente con los siguientes pasos:

1. Click derecho sobre “Source Packages” y seleccionamos “New” y del menú flotante la opción “Other”
2. Seleccionamos Hibernate del panel de categorias del lado izquierdo y Hibernate Reverse Engineering Wizard del lado derecho.
   
3. Seleccionamos hibernate.reveng para el nombre del archivo y “java/src” para el folder de ubicación.
   

4. Seleccionamos el archivo hibernate.cfg.xml si no está seleccionado del combo y seleccionamos las tablas que necesitamos.
   

Netbeans construye el archivo de ingeniería inversa y lo abre en el editor, sin embargo en este momento podemos cerrarlo ya que no lo modificaremos en este momento.

Creando los archivos de mapeo y los POJOs

A continuación se usarán un asistente para generar los archivos de mapeo de cada tabla que se especificó  en el archivo de ingeniería inversa de hibernate y con la configuración que se estableció en el archivo hibernate.cfg.xml.

Para generar los archivos sigamos el siguiente procedimiento:

1. Click derecho sobre “source packages” y seleccionamos “New” y la opción “Other”
2. Seleccionamos hibernate del panel de categorías de la izquierda y el panel de la derecha Hibernate Mapping Files and POJOs y seleccionamos “Next”.
3. De la pantalla siguiente seleccionamos las opciones como sigue:
   
   
   
4. Presionamos Finish.

El resultado del procedimiento anterior son clases con su respectivo xml en un paquete con nombre “beans” los cuales son representaciones de las tablas que especificamos en el archivo de ingeniería inversa con anotaciones respectivas a las propiedades de las tablas.

Explorando los archivos de mapeo

En lo siguiente exploraremos la configuración de un archivo de mapeo de una tabla en la base de datos, en este caso será un xml de nombre “Perfiles.hbm.xml”

La primera propiedad en el archivo es la clase, la cual se especifica desde el paquete principal de su ubicación. También tiene el nombre de la tabla que mapea, el esquema en la base de datos y el nombre de la misma.

A continuación tenemos las columnas de la tabla, que para la clase serán propiedades, si observamos la primera es el “id” el cual tiene un tipo de dato “long”, también se especifica el nombre de la columna en la tabla y el tipo de dato que tiene en la BD, y en este caso tiene una estrategia de generación “assigned”.

Posteriormente encontramos las demás propiedades mapeadas de la misma forma que el “Id” sin embargo se anexan las propiedades con la especificación del tipo de relación de una columna con la tabla que corresponda (uno a muchos, muchos a uno, muchos a muchos en caso de que aplique), además se incluyen los tipos de datos, nombre de la columna y si es posible ingresar valores nulos dentro de ésta.

En este caso es necesario agregar una propiedad más a la especificación de la relación muchos a muchos que se describe en la última parte del archivo, ya que sin ésta las consultas HQL resultarían en un error debido a que no encontraría la clase con la que se mapea la relación. La propiedad que falta es:

class="org.localadmin.beans.Perfiles"

Estos archivos de mapeo se pueden manipular para cambiar la configuración por default que tienen ya que aunque corresponde a lo que el generador interpretó en la base de datos en ocasiones es necesario hacer adecuaciones para asegurar la integridad de los datos.

La clase que corresponde al archivo xml que acabamos de revisar es Perfiles.java y en ésta se definen las propiedades marcadas en el xml con algunas anotaciones las cuales son el complemento de la configuración implementada para cada vean mapeado de la base de datos.

Una vez hecho lo anterior podemos probar una consulta para obtener algunos datos a través de la capa de hibernate. Como sigue:

1. Click derecho sobre el archivo hibernate.cfg.xml y seleccionamos la opción “Run HQL Query”
2. De la pantalla resultante escribir la consulta: “from Estados”
3. Ejecutar la consulta presionando el botón “Ejecutar HQL” ubicado en la parte superior de la pestaña de la consulta
   
   
   
4. El resultado de la consulta a los datos a través de esta capa se muestra en un panel inferior, y como podemos observar uno de ellos tiene una referencia a una Tienda la cual es un objeto de tipo Tienda (una clase mapeada de la base de datos).

Con esto comprobamos que la capa intermedia que administrará la persistencia de los datos se encuentra configurada correctamente.

Creando los DTOs

Los DTOs (Data Transfer Objects) serán objetos transferibles a través del servidor y el cliente los cuales viajarán a través del proxy del mecanismo de comunicación RPC y que serán utilizados para intercambiar información.

Como dato complementario se debe mencionar no se pueden usar los mismos objetos para el administrador de persistencia ya que éste necesita POJOs para realizar las operaciones CRUD con objetos, y ésta es la razón por la que es necesario convertir los POJOs (que en adelante llamaremos Entidades) a DTOs y viceversa del lado del servidor.

Los DTOs que vamos a crear serán objetos con las mismas propiedades que las entidades (objetos mapeados de las tablas) pero que extenderán de otras clases e implementarán algunas interfaces, lo cual nos permitirá enviarlos a través del cliente y el servidor y a su vez convertir éstos objetos en modelos de datos los cuales podrán ser almacenados en controles como ComboBox, Grid, etc.

Para crear estos DTOs necesitamos desarollar primeramente un paquete para almacenarlos, el procedimiento es el siguiente:

1. Agregar un paquete “client.dto”
   

Crear dentro de este paquete las clases DTO correspondientes a cada entidad con las propiedades que tienen éstas pero sin incluir las anotaciones y cambiando las referencias de entidades a su equivalente objeto DTO, exploremos como quedaría la clase de PerfilesDTO.java

Como se puede notar las anotaciones que tiene la clase de Perfiles.java no se incluyeron y además las referencias a otros objetos se cambiaron por referencias a objetos DTO y en adición la clase extiende de BaseModel (la cual nos permite incluir funcionalidad para crear modelos de datos con éste tipo de objetos en controles de usuario) y además implementa las interfaces IsSerializable (interfaz necesaria para que el motor GWT a través del mecanismo RPC pueda enviar y recibir objetos del cliente al servidor y viceversa) y BeanModelTag (interfaz para marcar los modelos de datos).

Nota: Un DTO en la práctica y por definición es un objeto que es serializable, tiene un constructor público sin argumentos definido explícitamente y sus propiedades son privadas pero accesibles a través de getters y setters los cuales son nombrados usando las convenciones de Java Beans.

Resumen de lo que se ha hecho

Con el procedimiento anterior descrito anteriormente se ha configurado el ambiente para usar GWT e Hibernate en una aplicación Java Web, además se configuró la conexión con la base de datos y el archivo hibernate.cfg.xml, se agregó el archivo de ingeniería inversa para el mapeo de entidades, se construyeron y configuraron los POJOs representativos de las tablas en la BD, además, se crearon las clases DTO que nos servirán para transferir objetos del servidro al cliente y al revés y que podemos convertir en modelos para representación de datos con los controles de usuario.

En este punto se ha construido solo la infraestructura de la aplicación siguiendo el diagrama de la aplicación que se mostró en puntos anteriores, con esto tenemos la capa de datos (BD), la capa de persistencia (administrada por Hibernate), la capa de la lógica del negocio lista para anexarse y preparada la configuración de la capa de presentación con las librerías de componentes Ext GXT.

Hasta aquí la primera parte del tutorial, en la segunda parte cubriremos los puntos de:

• Creación del mecanismo de comunicación de cliente servidor
• Envío y recepción de DTO’s entre cliente – servidor
• Transformación de DTO’s a Entidades
• Capa de persistencia de Hibernate
• Consulta de datos
• Almacenamiento de un nuevo registro
• Actualización de registros
• Eliminación de registros
• Creación de los controladores de persistencia de las Entidades
• Creación de modelos de datos a partir de DTOs para mostrarlos en controles

Acerca del Autor

Víctor M. Rojas es un Ingeniero en Sistemas Computacionales certificado por Oracle como Java Asociated y Java Programmer egresado del I.T.S. de Teziutlán, Puebla. Con más de un año de experiencia profesional en Desarrollo de Software a la medida tanto en la plataforma Java como en la plataforma de .NET, actualmente colabora con Dawcons como Desarrollador en el área de software a la medida. Puedes contactarlo a través de la cuenta de correo vrojas@dawcons.com.