blog

ADF Faces incorpora un conjunto de componentes visuales (‘Data Visualization Tools’ o DVT) con más de 50 tipos de gráficos (barras, tarta, líneas, dispersión, ajuste lineal curvo, etc.), permitiendo un diseño sencillo y una integración rápida de los mismos en nuestras aplicaciones.

Una librería de componentes gráficos que forme parte de un ‘Framework’ de desarrollo deberá ofrecer los mecanismos necesarios para conseguir un alto grado de dinamismo e interacción. DVT brilla especialmente en estos dos aspectos. Podemos encontrar una sencilla introducción sobre DVT en el siguiente documento:

http://www.oracle.com/technetwork/developer-tools/jdev/adf-dvt-graph-howto-082848.html

Ahora vamos a ver con un sencillo ejemplo como podemos interactuar con un gráfico de tarta ‘PIEGraph’, de tal forma que al clicar sobre una porción (‘slice’), se muestre un segundo gráfico con información más detallada para la porción seleccionada. Veámoslo paso a paso:

Los datos de partida están en una tabla donde cada línea representa un presupuesto y el gráfico de primer nivel se basa en el conteo de presupuestos agrupados por ESTADO (iniciado, aprobado, finalizado).  El de segundo nivel desglosa para cada ESTADO la cantidad de presupuestos, esta vez agrupados por  ZONA  (norte, sur, este,…) .

Creamos un ‘ViewObject’ resumenEstadosVO a partir de la consulta:

SELECT estado, count(*) as conteo FROM presupuestos GROUP BY estado

Creamos el ‘ViewObject’ resumenEstadoZonasVO para el gráfico de segundo nivel:

SELECT zona, count(*) as conteo FROM presupuestos 
GROUP BY estado WHERE estado=:p_estado

Si hemos incluido las dos vistas anteriores en un módulo de aplicación, dispondremos de un Data Control para poder diseñar los gráficos.

Arrastramos y soltamos el Data Control resumenEstadosView1 sobre la página principal. En el diálogo que aparece a continuación, indicamos qué atributo (conteo) se corresponde con la tarta  y qué atributo (estado) contiene las porciones o ‘slices’. El primer gráfico está casi terminado. Más tarde añadiremos el ‘listener’ y el manejador del evento clic.

El segundo gráfico se mostrará en un diálogo emergente, cada vez que hagamos clic sobre un estado.

La forma correcta de diseñar esto es:

1.   Crear un task-flow que contenga una actividad y un fragmento de página con el segundo ‘PIEGraph’ dentro. También creamos un parámetro (tfp_estado). La actividad se obtiene arrastrando la operación ExecuteWithParams que cuelga del Data Control (resumenEstadoZonasView1), será la actividad por defecto y transitará incondicionalmente al fragmento de página, y como estamos trabajando con una vista parametrizada, al soltar el icono de la operación sobre el task-flow se nos pide que indiquemos como rellenar el parámetro p_estado y utilizamos para la ocasión #{pageFlowScope.tfp_estado} (el argumento que hemos definido en el task-flow).

2.   Crear una región dentro del diálogo. Arrastramos el task-flow del punto anterior y lo soltamos sobre el diálogo. Es hora de decirle a la región de dónde tiene que tomar el parámetro del task-flow. Usaremos el nombre de una variable de sesión creada en el manejador del evento del siguiente punto (#{pageFlowScope.graphEstado})

3.    Sólo queda definir el ‘listener’ en el gráfico.

Y por último codificar el método que maneja el evento en el ‘Backing Bean’ que da soporte a la página.