Download Generador Gráfico para Aplicaciones Java™ EE

Generador Gráfico para Aplicaciones Java™ EE
Víctor D. Castillo Díaz 1,Chadwick Carreto Arrellano 2 y F. Rolando Menchaca García3
Centro de Nacional de Cálculo-IPN, Av. Miguel Otón de Mendizábal, esquina Av.
Miguel Bernard, Edif. Secretaría de Administración 2do. Piso, Col. La Escalera,
Delegación Gustavo A. Madero, C. P. 07738, México, D.F.
1
2
3
[email protected], [email protected], [email protected]
Resumen. Las gráficas son una atractiva opción para representar datos
tabulares en una página web, desafortunadamente mantenerlas al día es una
tarea que puede complicarse si los datos presentan cambios constantes, pues la
representación gráfica debe generarse nuevamente cada vez que se refresquen
los datos. El presente documento describe el diseño e implementación del
Generador Gráfico, una herramienta que permite al código de su aplicación
generar diversos tipos de representaciones gráficas de la información a partir de
los datos más recientes disponibles e integrarlas en su aplicación Java EE de
forma automática. El Generador Gráfico se emplea actualmente en el desarrollo
del Sistema Institucional de Información del Instituto Politécnico Nacional.
Palabras Clave: Gráficas dinámicas, Patrones de diseño, Java EE.
1 Introducción
El Generador Gráfico (GG) es un paquete de clases diseñado para simplificar el
proceso de acceso, extracción y conversión de los datos a los que se desea crear una
representación gráfica particular.
Debido a la amplia diversidad de tipos de gráficas, sería un gran esfuerzo construir
un paquete de clases que diera soporte aun a los tipos más comunes, por lo que en lugar
de desarrollarlo por nosotros mismos optamos por seleccionar alguno que cumpliera
nuestros requerimientos. Nos inclinamos por JFreeChart, debido a que es un paquete
gráfico de fuente abierto, completo y ampliamente usado. Además se utilizo el
framework de Struts como implementación del patrón Modelo-Vista-Controlador
(MVC). Finalmente pueden apreciarse los resultados del GG gracias al Sistema
Institucional de Información (SII), una aplicación Java EE que se encuentra en una
etapa avanzada de desarrollo.
El resto de este artículo se organizo de la siguiente forma, la sección 2 contiene una
breve percepción de la situación actual en cuanto a representación gráfica de
información. En la sección 3 se presenta metodología empleada en el diseño e
implementación del GG. La sección 4 describe los resultados obtenidos al integrar el
GG al SII que actualmente se encuentra en desarrollo dentro del Centro Nacional de
Cálculo (CENAC) del Instituto Politécnico Nacional (IPN). Finalmente la sección 5
presenta nuestras conclusiones y los trabajos futuros.
2 Estado del Arte
La representación gráfica de los datos es un tópico de amplio interés y complejidad,
basta observar en revistas o páginas web la cantidad de compañías que ofrecen
paquetes gráficos para realizar el análisis y la visualización de datos. La mayoría de
estos paquetes presentan un problema en común: requieren un formato especifico de
los datos, para que ellos los puedan entender. Claro que con esto se pierde flexibilidad
al tomar información de diversas fuentes y tener que aplicarles un formato especifico.
El generador gráfico que se describe en este artículo permite extraer y usar
información desde cualquier base de datos, gracias a que no requiere un particular
formato de los mismos con lo cual es posible automatizar en su totalidad el proceso,
desde la extracción hasta la visualización gráfica de los datos.
3 Metodología Empleada
Desde la concepción del GG se definieron los siguientes objetivos de diseño que
guiaron todo el proceso de desarrollo:
 Separar el proceso de acceso, extracción y conversión de datos, el proceso
de generación y ajuste de las características visuales de las gráficas y el
proceso de despliegue.
 Automatizar los procesos anteriormente mencionados.
 Tener amplia disponibilidad y evitar el uso de herramientas adicionales del
lado del cliente (plug-ins, applets, componentes ActiveX, etc).
Para cumplir estos objetivos se decidió diseñar el GG acorde a una arquitectura de
tres capas basada en web que separa las capas de presentación, lógica de negocios y
acceso a datos; más algunos patrones de diseño estándar de Java EE [1].
Nota: Todo los datos técnicos mencionados en este articulo requieren la versión
0.1.0 del GG y las librerías JFreeChart versión 0.9.20 [2] y JCommon versión 0.9.5 [3].
3.1 Patrones de diseño
Entre los diversos patrones de diseño que empleamos, destaca el patrón MVC [4] cuyo
principal objetivo es separar la lógica de negocios, presentación de datos e interacción
de los usuarios, por medio de: 1) Un modelo que representa la lógica de negocios que
gobierna el acceso y actualización de los datos, se implementa por medio de JavaBeans
o EJBs, 2) La vista que se hace tangible como la interfaz de usuario y se implementa
por medio de páginas JSP, y 3) El controlador que transforma las interacciones del
usuario en la vista y las traduce en acciones que el modelo debe realizar, estas acciones
son implementadas por medio de Sevlets.
Se emplea Struts [5] como implementación del patrón MVC, pues ofrece:
 Configuración centralizada (struts-config.xml).
 Internacionalización por medio de archivos de propiedades.
 Validación de datos.


Librería de etiquetas JSP (HTML, Bean, Logic, etc).
Soporte de extensiones como Tiles, que ayuda a construir páginas a partir de
pequeños fragmentos.
Otros patrones de diseño usados son el Data Access Object (DAO) [6] que:
 Separa la interfase de las fuentes de datos de sus mecanismos de acceso.
 Permite adaptar un API específica para acceso a fuentes de datos a una
interface genérica.
y el Value Object (VO) [7] que permite:
 Múltiples propiedades empaquetas en un objeto transferible, para no tener que
manejar referencias entre capas.
 Elimina tráfico en la red durante solicitudes de datos entre las capas de
presentación y negocios.
Fig. 1. Arquitectura de una aplicación Java EE basada en el patrón de diseño MVC.
Además de las tecnologías Java SE, Java EE y los patrones de diseño, se empleo una
librería gráfica ampliamente utilizada llamada JFreeChart [8] que ofrece:
 Diversos tipos de gráfica (Pastel 2D y 3D, Barras 2D y 3D, Barras apiladas
2D y 3D, Línea, Área).
 Soporte para servlets, applets o aplicaciones cliente.
 Acceso a datos por medio de objetos Dataset.
 Exporta a imagen con formato PNG y JPEG.
 Escrito para Java (JDK 1.2.2 o superior).
 Código fuente abierto protegido por la licencia GNU LGPL.
3.2 Descripción del paquete de clases


gg.action.chart: Este paquete contiene a la clase ChartAction que extiende a
la clase Action de Struts, la cual a su vez extiende a un objeto de tipo Servlet y
se encarga de entregar los datos y pedir a las clases encargadas de generar y
ajustar las gráficas que se haga lo necesario para obtener la gráfica que
finalmente se encarga de insertar en la respuesta a la solicitud http generada.
gg.action.data: Define a la clase GetDataSeriesAction que también extiende
de Action y se encarga de insertar en la solicitud HTTP los datos que la clase

ChartAction pasara a las clases descritas en el siguiente paquete para que
realicen su trabajo.
gg.chart: Aquí se encuentran las clases ColorSeries, CustomizeChart y
GenerateChart, responsables de definir los colores adecuados para cada tipo
de gráfica, realizar los ajustes estéticos y generar la gráfica respectiva.
Fig. 2. Diagrama de clases del Generador Gráfico.






gg.data: En este paquete encontramos a la clase GenericDataset que se
encarga de realizar el manejo genérico de las series y categorías de datos.
gg.db.vo: Contiene la clase GenericVO, que realiza de forma genérica la
transferencia de datos entre las capa de acceso a datos y la capa de la lógica de
negocios.
gg.db.dao: Este paquete aloja a la clase GenericDAO que es responsable de
acceder a la fuente de datos para entregarlos a la clase GenericVO y
DAOException que se encarga de crear y enviar un mensaje de excepción
apropiado en caso de que durante la ejecución de los métodos de la clase
GenericDAO se presente algún problema.
gg.db.dbms.mysql: Clase MysqlDB que realiza la implementación de la
interface DBInterface para acceder al manejador de bases de datos MySQL.
gg.db.dbms.oracle: Clase OracleDB que realiza la implementación de la
interface DBInterface para acceder al manejador de bases de datos Oracle.
gg.db: Finalmente este paquete contiene a la interface DBInterface que
permite homogeneizar las API de acceso a diversos DBMSs.
4 Resultados Experimentales
Crear una aplicación web basada en el generador gráfico, que despliegue gráficas
dinámicas a partir de datos extraídos de una base de datos particular no es muy
complicado y cabe señalar que gracias al patrón DAO resulta muy simple cambiar
prácticamente a cualquier manejador de base de datos.
Pasos para generar una gráfica:
 Debe obtenerse la serie o series de datos por medio de algún DAO.
 Con base en estos datos, se crean estructuras de datos internas apropiadas.
 Se determina el tipo de gráfica deseada.
 Se configura la apariencia de la gráfica.
 Se crea la gráfica y se envía al navegador como una imagen PNG o JPEG
incrustada en una página web.
4.1 Series de datos
Para obtener nuestra primer gráfica, la series de datos se compone por el total de
alumnos graduados por cada escuela en un año determinado y los nombres de las
respectivas escuelas son las leyendas que definen a que concepto corresponde cada
valor de de la serie de datos, está información es representada por medio de una gráfica
de tipo barras en 3D (ver Fig. 3), aunque podría usarse cualquiera de los diversos tipos
de gráfica que JFreeChart soporta.
Fig. 3. Gráfica de los estudiantes graduados por plantel en un periodo determinado.
Aunque la Fig. 3 empleo solo una categoría de datos, es posible tener gráficas con
múltiples categorías de datos, una categoría de datos es una agrupación de elementos
similares, por ejemplo los alumnos inscritos en cada área del conocimiento pueden
agruparse por medio del nivel educativo (ver Fig. 4).
Fig. 4. Gráfica agrupada por medio de niveles educativos.
5 Conclusiones y Trabajos Futuros
Actualmente el generador gráfico se encuentra en su primer versión estable, se tiene
la fortuna de estar siendo probado en el contexto de un sistema como el SII que
presenta un uso intensivo de gráficas. Gracias a esto será posible detectar los puntos en
que el generador presente problemas o no satisfaga los requerimientos.
Particularmente nos interesa incluir en la próxima versión del generador, soporte
para trabajar con imágenes sensitivas (mapas), de tal manera que la navegación pueda
ser más intuitiva al permitir seleccionar elementos de la imagen como vínculos hacia
un mayor detalle.
Reconocimientos. Los autores de este trabajo agradecen al Centro Nacional de Cálculo
y al Instituto Politécnico Nacional por ofrecer un favorable ambiente laboral y
académico, así como todas las facilidades necesarias para el desarrollo de este artículo.
Referencias
[1] Sun Microsystems, Java BluePrints Patterns Catalog, http://java.sun.com/blueprints/patterns/
catalog.html, Sun Microsystems, 2002.
[2] David Gilbert y Thomas Morgner, The JFreeChart Home Page, http://www.jfree.org/
jfreechart/, Object Refinery Limited, 2005.
[3] David Gilbert y Thomas Morgner, The JCommon Home Page, http://www.jfree.org/
common/, Object Refinery Limited, 2005.
[4] Sun Microsystems, Java BluePrints Patterns Catalog, http://java.sun.com/blueprints/patterns/
MVC-detailed.html, Sun Microsystems, 2002.
[5] Craig R. McClanahan, David Geary, Mike Schachter, Ted Usted, Martin Cooper, Arron
Bates, Cedric Dumoulin, David Winterfeldt, Chris Assenza, dIon Gillard, Dominique Plante,
Ed Burns, Eric Wu, James DeVries, John Rousseau, John Ueltzhoeffer, Larry McCay, Mark
Budai, Matthias Kerkhoff, Paul Runyan, Robert Hayden, Robert Leland, Stanley Santiago,
Wong Kok Kai, Donald Ball, Dan Walter, Eddie Bush, Yann Cebron y David Graham, The
Struts User´s Guide, http://struts.apache.org/userGuide/index.html, versión 1.2.4, The
Apache Software Foundation, 2005.
[6] Sean C. Sullivan, Advanced DAO programming, http://www-128.ibm.com/developerworks/
java/library/j-dao/, Sun Microsystems, 2002.
[7] Sun Microsystems, Core J2EE Pattern Catalog, http://java.sun.com/blueprints/corej2ee
patterns/Patterns/TransferObject.html, Sun Microsystems, 2003.
[8] David Gilbert, The JFreeChart Class Library Developer Guide, Version 1.0.0 pre1, Object
Refinery Limited, 2005.