IBM Web Experience Factory 7 – Gráficas en Portlets

Creación de un portlet JSR-286 que muestre una gráfica de una fuente de datos.

Una de las necesidades en las empresas, es el graficar información de sus diferentes sistemas y fuentes de datos. En este artículo explicaré paso a paso, como crear un portlet JSR-286 con IBM Web Experience Factory 7, haciendo uso de diferentes constructores (builders) para mostrar una gráfica de una fuente de datos. Al hacer clic en cualquiera de las columnas de la gráfica, se mostrará el detalle de la misma mediante otra gráfica. Este portlet fue desplegado y probado en IBM Websphere Portal 7.

Guty Cárdenas, ICS Client Technical Professional, IBM de México

Guty CárdenasGuty Cárdenas, tiene 11 años de experiencia en la tecnologías de la información y 2 años con IBM México. Actualmente, se desempeña como Client Technical Professional dentro de la brand IBM Collaboration Solutions en el área de preventa. Anteriormente, Guty colaboró con varias compañías como Ad Infinitum (Business Parter de IBM), Microsoft México, entre otras. A su cargo está el brindar atención a los clientes de México y Latinoamérica. Cuenta con certificaciones técnicas de los productos de IBM, entre ellas IBM Websphere Portal Deployment and Administration.



09-04-2012

Una de las necesidades en las empresas, es el graficar información de sus diferentes sistemas y fuentes de datos. En este artículo explicaré paso a paso, como crear un portlet JSR-286 con IBM Web Experience Factory 7, haciendo uso de diferentes constructores (builders) para mostrar una gráfica de una fuente de datos. Al hacer clic en cualquiera de las columnas de la gráfica, se mostrará el detalle de la misma mediante otra gráfica. Este portlet fue desplegado y probado en IBM Websphere Portal 7.

Para el ejemplo, se utilizarán datos simulados de las ventas mensuales de cuatro áreas de la empresa.

El siguiente software fue utilizado para crear, desplegar y probar el portlet:

  • IBM Web Experience Factory 7.0.1.2
  • IBM Websphere Portal 7.0.0.2

Nota: Es recomendable que antes de crear el proyecto, el servidor del portal esté ejecutando el servicio para que el proyecto pueda ser desplegado.

01 Creación del proyecto

Ejecutar IBM Web Experience Factory y crear un nuevo proyecto File -> New -> Websphere Portlet Factory Project.

  • Project name: graficaDatosPortlet
  • Dejar activadas las casillas "Use default location" y "Create default folders". Hacer clic en el botón Next.
  • En la siguiente pantalla, seleccionar las características del proyecto como se muestra en la siguiente imagen y presionar el botón Next:
  • Seleccionar el servidor de portal donde se desplegará el proyecto y presionar el botón Finish.
  • Cuando se muestre en pantalla un mensaje preguntando si se desea desplegar el proyecto ahora, dar clic en el botón Yes.

En el ambiente utilizado en este ejemplo, el servidor de portal está en un equipo diferente a donde se ejecuta IBM Web Experience Factory (WEF), por lo cual al terminar de desplegar el proyecto se mostrará el siguiente mensaje (nota: si el servidor de portal y WEF están en el mismo equipo, este mensaje no se desplegará) :

  • Asegurarse de que la opción HTTP esté seleccionada y dar clic en el botón OK.

02 Creación del modelo proveedor del servicio

Para poder obtener los datos de la fuente de datos (en este ejemplo se utilizará una variable XML), crearemos un modelo con el cual se obtendrán tanto el listado del total de registros así como, un registro en específico. File -> New -> Websphere Portlet Factory Model.

  • Seleccionar el proyecto que acabamos de crear graficaDatosPortlet y clic en el botón Next.
  • En el tipo de modelo, seleccionamos la opción Empty Service Provider de la sección Service Providers y damos clic en el botón Next.
  • Service name: servicioVentas. Clic en el botón Next.
  • Model name: servicioVentas. Clic en el botón Finish.

Ahora, agregaremos los constructores que conforman el modelo de proveedor de servicios.

  • Hacer clic en el botón de Add a Builder Call de la vista Outline.
  • Buscar y seleccionar el constructor Variable
  • Name: ventas
  • Type: XML
  • Initial value:

Haga clic para ver la lista de códigos

<Ventas>
	<Producto><Mes>Enero</Mes><Area1>113630</Area1><Area2>134980</Area2><Area3>253340</Area3><Area4>182100</Area4><VentaTotal>684050</VentaTotal><MetaVentas>630000</MetaVentas></Producto><Producto><Mes>Febrero</Mes><Area1>109990</Area1><Area2>147330</Area2><Area3>224320</Area3><Area4>208650</Area4><VentaTotal>690290</VentaTotal><MetaVentas>650000</MetaVentas></Producto><Producto><Mes>Marzo</Mes><Area1>142270</Area1><Area2>155740</Area2><Area3>197630</Area3><Area4>212740</Area4><VentaTotal>708380</VentaTotal><MetaVentas>700000</MetaVentas></Producto><Producto><Mes>Abril</Mes><Area1>134800</Area1><Area2>221650</Area2><Area3>155400</Area3><Area4>180870</Area4><VentaTotal>692720</VentaTotal><MetaVentas>650000</MetaVentas></Producto><Producto><Mes>Mayo</Mes><Area1>135600</Area1><Area2>184700</Area2><Area3>205320</Area3><Area4>148900</Area4><VentaTotal>674520</VentaTotal><MetaVentas>600000</MetaVentas></Producto><Producto><Mes>Junio</Mes><Area1>186840</Area1><Area2>220630</Area2><Area3>195620</Area3><Area4>149800</Area4><VentaTotal>752890</VentaTotal><MetaVentas>700000</MetaVentas></Producto>
</Ventas>
  • Clic en el botón OK.

Ya que los datos de ejemplo están en formato XML, necesitamos un esquema para formatear la salida de los datos. Para esto, utilizaremos el constructor generador de esquema simple.

  • Hacer clic en el botón Add a Builder Call. Buscar y seleccionar Simple Schema Generator.
  • Name: esquemaVentas
  • Sample Data: ventas
  • Dejar los demás valores como están y dar clic en el botón OK.

El siguiente paso, hay que utilizar una lista de acción para extraer los datos de la variable XML.

  • Hacer clic en el botón Add a Builder Call. Buscar y seleccionar Action List.
  • Name: obtenerVentas
  • Return Type: IXml
  • En la sección Actions se muestran varias filas en blanco. Hacer clic en la primera fila y a la extrema derecha de la fila se muestra un botón con tres puntos suspensivos (elipsis). Dar clic en el botón, expandir la sección Special y seleccionar Return. En el campo Source hacer clic en el botón elipsis a la derecha. Expandir la sección Variables -> ventas-> Ventas y seleccionar esta última. Hacer clic en el botón OK.
  • Deberá quedar este valor en el campo Source ${Variables/ventas/Ventas}. Dar clic en el botón OK.
  • La primer fila de la sección Actions deberá aparecer como sigue Return!${Variables/ventas/Ventas}
  • Esta acción retornará todos los registros contenidos en la variable XML, no se requieren acciones adicionales. Dar clic en el botón OK.

De forma siguiente, vamos a crear una operación de servicio, la cual ejecutará la acción creada previamente que muestra todos los registros dentro de la variable XML.

  • Hacer clic en el botón Add a Builder Call. Buscar y seleccionar Service Operation.
  • Data Service: servicioVentas
  • Operation Name: obtenerVentas
  • Action to Call: obtenerVentas
  • En la sección Operation Inputs seleccionar la opción No inputs ya que no se requieren argumentos.
  • En la sección Operation Results seleccionar la opción Specify result schema
  • En Result Schema, hacer clic en el botón elipsis y expandir esquemaVentas -> elements -> Ventas y seleccionar este útimo. Dar clic en el botón OK y deberá quedar esquemaVentas/Ventas
  • Dar clic en el botón OK. Guardar el proyecto.
  • Para verificar que todo está correcto, vamos a ejecutar el modelo activo en el servidor. Dar clic en el botón Run de la barra de herramientas superior

Al abrirse el navegador, se desplegará el método que recién creamos:

  • Hacer clic en el método obtenerVentas, el cual desplegará todos los registros si todos los constructores se configuraron correctamente.

Si al dar clic en el método, aparecen mensajes de error, revisar los pasos realizados anteriormente para verificar que no se haya omitido nada de lo descrito anteriormente.

Ya probado el método obtenerVentas, requerimos otro método para que retorne el registro según la columna en la gráfica que se seleccione y muestre el detalle en otra gráfica.

Para ello, vamos a utilizar el constructor Método para obtener la fila correspondiente a la gráfica.

  • Hacer clic en el botón Add a Builder Call. Buscar y seleccionar Method.
  • Name: obtenerFila
  • En la sección Arguments vamos a agregar un argumento para que sea el valor de entrada del servicio de operaciones. Name: index. Data Type: String
  • Return Type: IXml
  • Method Body:
{
//establecer index

int iteratorIndex = 0;

//obtener la variable ventas
IXml productos = webAppAccess.getVariables().getXml("ventas");
//List listaVentas = ventas.getChildren("Producto");

for (IXml producto = productos.getFirstChildElement(); producto != null; 
producto = producto.getNextSiblingElement() )
	{
	 	//Buscar el producto por index
	 	if(index.equals(Integer.toString(iteratorIndex)) )
	 	
	 	    //si lo encuentra, retorna el registro correspondiente
	 	    return producto;
	 	
	 	 //incrementar index
		 iteratorIndex++;
	}
		//no se encuentra coincidencia, retornar producto vacío
		return XmlUtil.create("Producto");
}
  • Hacer clic en el botón OK.

Una vez creado el método con el constructor, agregaremos otro servicio de operaciones para llamar al método creado en el paso anterior.

  • Hacer clic en el botón Add a Builder Call. Buscar y seleccionar Service Operation.
  • Data Service: servicioVentas
  • Operation Name: obtenerAreaVentas
  • Action to Call: obtenerFila
  • En la sección Operation Inputs, seleccionar la opción Use structure from called action y asegurarse que Input Field Mapping esté seleccionada la opción Automatic.
  • En la sección Operation Results, seleccionar Specify result schema. En el campo Result Schema, hacer clic en el botón elipsis y expandir esquemaVentas -> elements -> Producto y seleccionar este último quedando esquemaVentas/Producto. Asegurarse que en Input Field Mapping esté seleccionada la opción Automatic. Hacer clic en el botón OK.
  • Guardar el proyecto.
  • Para verificar que todo está correcto, vamos a ejecutar el modelo activo en el servidor. Dar clic en el botón Run de la barra de herramientas superior.

Al abrirse el navegador se desplegarán ahora dos métodos:

  • Hacer clic en el método obtenerAreaVentas. En el campo Index, teclear como valor un número. Por ejemplo 0, debe de retornar los detalles del mes de Enero. El número 1 para Febrero y así sucesivamente.

Si al dar clic en el servicio de operaciones, aparecen mensajes de error, revisar los pasos realizados anteriormente para verificar que no se haya omitido nada de lo descrito anteriormente.

Si el registro se despliega correctamente, entonces hemos terminado con la implementación del modelo de proveedor del servicio. Ahora procederemos a crear el modelo que graficará los resultados mostrados previamente y que proporcionará la aplicación de portlet.


03 Creación del modelo consumidor de servicios que mostrará la gráfica

Ya creado el proveedor de servicios con el cual podemos extraer los datos para graficar, vamos a proceder a crear el modelo consumidor de servicios que nos permitirá generar la gráfica dentro del portlet.
File -> New -> Websphere Portlet Factory Project.

  • Seleccionamos el proyecto graficaDatosPortlet y clic en el botón Next
  • En la sección Factory Starter Models, seleccionar Empty y clic en el botón Next.
  • En Model Name escribimos graficaDatos como nombre del modelo y damos clic en el botón Finish.

Ya que este modelo es el que proveerá el portlet de la gráfica, el primer constructor que agregaremos es un adaptador de portlet.

  • Presionamos el botón Add a Builder Call. Buscar y seleccionar Portlet Adapter.
  • Name: graficaDatos
  • Portlet Title: Gráfica de Datos
  • Portlet Description: Graficación de Datos
  • Dar clic en el botón OK

Ahora, vamos a crear la página donde se mostrará la gráfica.

  • Presionamos el botón Add a Builder Call. Buscar y seleccionar Page.
  • Name: page1
  • Page Contents (HTML):
	<html>
		<body><div align="center"><span name="graficaVentas"></span></div></body>
	</html>
  • Dar clic en el botón OK.

Siguiente, agregaremos un constructor para poder consumir el servicio creado en el modelo previo.

  • Presionamos el botón Add a Builder Call. Buscar y seleccionar Service Consumer.
  • Name: ventas
  • Provider Model: servicioVentas
  • Presionar el botón OK.

Es necesario crear una lista de acciones para llamar al consumidor del servicio y abrir la página donde serán mostrados los datos graficados.

  • Presionamos el botón Add a Builder Call. Buscar y seleccionar Action List.
  • Name: main
  • Return Type: Object
  • Actions, en la primer fila presionar el botón elipsis, expandir Data Services -> ventas -> obtenerVentas, seleccionar este último quedando de la siguiente manera DataServices/ventas/obtenerVentas. Después, en la segunda fila presionar nuevamente el botón elipsis y expandemos Pages -> page1, seleccionamos ésta última. Presionar el botón OK.

A continuación, agregaremos el constructor que se encargará de dibujar la gráfica.

  • Presionamos el botón Add a Builder Call. Buscar y seleccionar Charts.
  • Name: graficaVentas
  • Location Technique: On Named Tag
  • Page: page1
  • Tag: graficaVentas

En la sección Chart and Style Data

  • Chart Type: Bar
  • Chart Data, presionar el botón elipsis y expandir la sección DataServices -> ventas -> obtenerVentas -> Results -> Ventas, seleccionar este último quedando ${DataServices/ventas/obtenerVentas/results/Ventas}
  • Data Format: Tabular Data (Rowset/Row)

En la sección Chart Properties

  • Column for X-Axis, desplegar el combo y seleccionamos Mes.
  • Column Selection: Include Columns
  • Columns for Y-Axis, dar clic en la primer fila y seleccionar del combo VentaTotal.
  • Show Chart as 3D: Use Chart Style
  • Show Chart Legend: No Legend
  • Dar clic en el botón OK.
  • Guardar el proyecto.

En estos momentos, ya el modelo puede mostrar la gráfica de los datos que son devueltos por el servicio. Presionamos el botón Run para ejecutar el modelo activo. Si todo es correcto, el navegador deberá mostrar el siguiente resultado:

Al pasar el ratón por encima de cada una de las columnas, observaremos que se muestra el valor que seleccionamos para el Eje-Y, ventaTotal. Si damos clic encima de cualquier columna, veremos que aún no podemos ver el detalle de las ventas de cada mes. Para lograr ese resultado, debemos agregar aún otros constructores, lo que haremos más delante.

Como siguiente paso, agregaremos otra página para desplegar la gráfica que muestre el detalle de la venta del mes seleccionado.

  • Presionar el botón Add a Builder Call. Buscar y seleccionar Page.
  • Name: paginaAreaVentas
  • Page Contents (HTML):

Haga clic para ver la lista de códigos

	<html>
	    <body><div align="center"><span name="graficaAreaVentas"></span><br><span name="botonRegresar"></span></div></body>
	</html>
  • Dar clic en el botón OK.

Necesitamos otra lista de acciones para poder llamar al servicio y ejecutar el método que nos retorne el detalle de las ventas según la columna del mes seleccionada.

  • Presionar el botón Add a Builder Call. Buscar y seleccionar Action List.
  • Name: mostrarPaginaAreaVentas
  • En la sección Arguments, expandir y aparece una tabla para agregar parámetros que podemos utilizar como argumentos de los métodos disponibles. En la columna Name, tecleamos index y en la columna Data Type, seleccionamos String.
  • Actions, hacer clic en la primer fila y presionar el botón elipsis. Expandir la sección Methods -> ventasObtenerAreaVentasWithArgs. Aparecerá un cuadro solicitando un argumento String, Presionar el botón elipsis y expandemos la sección Arguments -> index y seleccionamos éste, quedando como sigue ${Arguments/index}. Dar clic en el botón OK.
  • Como segunda acción, damos clic en la segunda fila y clic en el botón elipsis. Expandir Pages -> paginaAreaVentas y seleccionar ésta.
  • Ya estando las dos acciones establecidas, presionamos el botón OK.

Como queremos graficar los detalles, en este ejemplo utilizaremos otro tipo de gráfica para representar el detalle de las ventas por mes al hacer clic sobre la columna de ventas totales.

  • Presionamos el botón Add a Builder Call. Buscar y seleccionar Charts.
  • Name: graficaAreaVentas
  • Location Technique: On Named Tag
  • Page: paginaAreaVentas
  • Tag: graficaAreaVentas

En la sección Chart Style and Data

  • Chart Type: Pie
  • Chart Data, expandir DataServices -> ventas -> obtenerAreaVentas -> results -> Producto y selccionar éste último, quedando ${DataServices/ventas/obtenerAreaVentas/results/Producto}
  • Data Format: Tabular Data (Rowset/Row)

En la sección Chart Properties

  • Column for X-Axis: dejar este campo vacío
  • Column Selection: Include Columns
  • Columns For Y-Axis, dar clic en la primer fila y teclear Area1. Clic en la segunda fila y teclear Area2. Clic en la tercer fila y teclear Area3, luego una fila más y teclear Area4.
  • Chart Title, teclear lo siguiente: Detalle de ventas del mes de ${DataServices/ventas/obtenerAreaVentas/results/Producto/Mes}
  • Show Chart as 3D: 3D
  • Show Chart Legend: No Legend
  • Dar clic en el botón OK

Ahora, agregaremos un botón que nos permita regresar a la gráfica de barras con el total de las ventas por mes.

  • Presionamos el botón Add a Builder Call. Buscar y seleccionar Button.
  • Name: botonRegresar
  • Location Technique: On Named Tag
  • Page: paginaAreaVentas
  • Tag: botonRegresar
  • Label: Regresar
  • Action Type: Link to an action
  • Action, presionar el botón elipsis y expandir Pages -> page1 y seleccionar ésta última.
  • Dar clic en el botón OK
  • Guardar el proyecto.

Como último paso, vamos a agregar el método a llamar cuando se haga clic sobre la gráfica para mostrar el detalle. Para ésto, damos doble clic sobre el constructor Chart creado graficaVentas. Agregamos los siguientes cambios:

En la sección Chart Click Action

  • Habilitar Enable Click Action
  • Action Type: WebApp Action
  • Method to Call, dar clic en el botón elipsis y expandir Methods -> mostrarPaginaAreaVentas y selccionar éste último.
  • En la sección Inputs, se agregará un argumento de nombre ArgumentSource1, borrar ese nombre y teclear index. En la columna Value presionar el botón elipsis y expandir ChartValues -> colIndex y seleccionar éste último.
  • Presionar el botón OK
  • Guardar el proyecto

Una vez realizados los pasos anteriores, vamos a probar el proyecto en el navegador. Hacemos clic en el botón Run para ejecutar modelo activo. Hacer clic sobre el mes de Marzo en la primer gráfica para que nos muestre el detalle de las ventas por área del mes seleccionado. Deberá mostrarse como a continuación:

Ventas Totales:

Y al hacer clic sobre el mes de Marzo, obtendremos el siguiente detalle:

Al pasar el ratón por encima de cada una de las áreas, el gráfico mostrará el valor correspondiente al área. Al presionar el botón Regresar, nos retorna a la gráfica inicial. Probar haciendo clic en todas las columnas.

Para poder visualizar la aplicación de portlet desde IBM Websphere Portal 7, se puede realizar de dos maneras. Una, exportando el archivo WAR de la siguiente forma, hacer clic sobre el nombre del proyecto y luego ir a File -> Export -> Websphere Portlet Factory Portlet WAR. Una vez exportado el proyecto, instalarlo utilizando la interfaz de administración del portal y posteriormente, agregar el portlet en alguna página dentro de IBM Websphere Portal.

La segunda opción, es desplegando directamente la aplicación de portlet desde IBM Web Experience Factory 7 dando clic derecho sobre el nombre del proyecto -> Publish Application y seleccionar el servidor de portal de destino. Presionar el botón OK. Desde el portal, agregar el portlet a alguna página.

Dentro de IBM Websphere Portal, la aplicación de portlet se visualiza de la sigueinte manera:

La aplicación ha quedado lista !!!

Más recursos:

IBM Websphere Portal Family Wiki
http://www-10.lotus.com/ldd/portalwiki.nsf

IBM Web Experience Factory Wiki
http://www-10.lotus.com/ldd/pfwiki.nsf

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=WebSphere
ArticleID=808639
ArticleTitle=IBM Web Experience Factory 7 – Gráficas en Portlets
publish-date=04092012