Uso de componentes JSF de gráficos con el soporte de Primefaces.

Uso de componentes JSF de gráficos con el soporte de Primefaces.


0. Índice de contenidos.


1. Introducción

En este tutorial vamos a ver cómo generar, de una manera sencilla, gráficos estadísticos con el soporte de los componentes JSF de Primefaces.

JSF es un lenguaje orientado a la creación de árboles de componentes visuales en el servidor de modo que trata de independizar el desarrollo de la interfaz visual, del lenguaje del cliente en el que se interpretará. JSF nos proporciona la renderización de los componentes visuales en el lenguaje del cliente de modo que, por ejemplo, para incorporar un componente de selección de fecha, haciendo uso de una librería de componentes visuales como Primefaces, no debemos preocuparnos del html o javascript que se necesitará en el cliente para generarlo, puesto que ya lo incorpora el renderizador del propio componente.

Extrapolado a los componentes que vamos a ver en este tutorial, para generar un gráfico de líneas o de barras, solo vamos a hacer uso de un componente visual en el lado del servidor, proporcionándole una estructura de datos a mostrar y, su renderización en el navegador, para nosotros, será transparente.

Con la versión 3 de Primefaces los componentes de gráficos han sido reescritos para generarse con el soporte de canvas de HTML5 y, para renderizarlos correctamente en las versiones de IE que no soportan canvas, utilizan el plugin excanvas.


2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 15′ (2.4 GHz Intel Core i7, 8GB DDR3 SDRAM).
  • Sistema Operativo: Mac OS X Lion 10.7.2
  • JSF 2.1, Mojarra 2.1.4
  • Primefaces 3.0.1
  • Apache Tomcat 7.0.6

3. Modelo de datos.

Para mostrar información en los componentes visuales que vamos a ver en este tutorial, primero necesitamos una estructura de datos que mostrar.

Esa estructura de datos la debemos asignar a una clase que representa la información para un gráfico cartesiano: org.primefaces.model.chart.CartesianChartModel.

El modelo será común para todos los tipos de componentes que vamos a ver, puesto que son los que se basan en un eje de coordenadas.


4. Gráfico de líneas.

Para incluir un gráfico de líneas solo tenemos que incluir el siguiente componente, haciendo referencia a nuestra estructura de datos a través de EL:

Con ello, tendremos en nuestra interfaz un gráfico como el que sigue:


5. Gráfico de áreas.

El gráfico de líneas lo podemos convertir en un gráfico de área simplemente añadiendo el atributo fill=true:

El resultado será el siguiente:


6. Gráfico de barras.

Podemos incluir un gráfico de barras, al igual que con los anteriores, incluyendo el siguiente componente en nuestro árbol:

El resultado será el siguiente:

Podemos modificar la orientación de las barras con la propiedad orientation=”horizontal” y apilar la información con stacked=”true”.


7. Referencias.

  • http://www.primefaces.org/showcase-labs/ui/chartsHome.jsf

8. Conclusiones.

Como contamos en nuestros cursos de JSF, sus componentes nos encapsulan el lenguaje de cliente y nos abstraen de trabajar con el html y/o javascript necesarios para realizar este tipo de funcionalidades más o menos manualmente pero, sobre todo, nos facilitan las tareas de mapeo, conversión y validación de los valores que encapsulan en la lógica de control de nuestra aplicación.

Primefaces, como librería de componentes visuales para JSF, nos proporciona una serie de componentes, listos para usar, de una gran calidad.

Un saludo.

Jose

jmsanchez@autentia.com