Lotus Domino Web Services, creación de gráficos con Adobe Flex 2.0

...

En este artículo, veremos un ejemplo en el cual, además, podremos sumar gráficos a nuestras aplicaciones. Todo siempre basándonos en Web Services desarrollados en Lotus Domino, dando una nueva perspectiva de interoperabilidad e innovación no muy explotada por los desarrolladores Domino.

Nivel: Lotus Domino - Principiante / Flex - Principiante

Marzo 2009

Introducción

En lo que se refiere específicamente a experiencia de usuario, en el artículo Lotus Domino WebServices y Adobe Flex 2.0 pudimos observar las mejoras que brinda una herramienta RIA (Rich Internet Application) como Adobe Flex®. En este artículo, nos dirigimos a desarrolladores IBM Lotus Notes/Domino®, que estén interesados en implementar Adobe Flex®, para construir gráficos con aspecto y prestación empresarial en sus aplicaciones. Durante el desarrollo del artículo detallaremos paso a paso como se puede crear una base de datos IBM Lotus Notes®, un servicio web ("Web Service") de Domino y como consumir el Web Service de Domino con Abobe Flex®, para que luego muestre el gráfico. Este artículo, describe como crear un gráfico de barras, usando los datos de ejemplo cargados en la base de datos IBM Lotus Notes® - para este caso los créditos aprobados y rechazados del MGBank - Este artículo da muestra de como crear un gráfico de dificultad baja con Adobe Flex®. Si desea mostrar la información con la que se generó el gráfico y/o modificarla con Adobe Flex®, podrá implementarlo con la información que se encuentra en nuestro articulo Lotus Domino WebServices y Adobe Flex 2.0


Creación de la aplicación Lotus Domino

Durante el desarrollo del artículo, utilizaremos varios elementos de diseño Domino; un formulario, con el cual se realizará la carga de datos, una vista que será utilizada por el servicio web donde se verán los datos cargados, y por último, el servicio web que utilizaremos para la comunicación de los datos entre Lotus Domino® y Adobe Flex®.

Creación del formulario

Lo primero, será crear una base de datos en el servidor Lotus Domino®, partiendo de un diseño en blanco, y el nombre del archivo será "domflexgraf.nsf" y el título "Domino and Flex Graphics". Luego agregaremos un nuevo formulario denominado "valores | valores" con los siguientes campos:

Nombre del campo Tipo
mes Dialog list - Editable
aprobados Texto - Editable
rechazados Texto - Editable

En el campo mes, abrimos las propiedades, y en la segunda solapa Control, en la sección Choices dejamos la opción por defecto, y luego ingresamos los valores de los meses:

      Enero|1

Febrero|2

Marzo|3

      Abril|4
      Mayo|5
      Junio|6
      Julio|7
      Agosto|8
      Septiembre|9
      Octubre|10
      Noviembre|11
    Diciembre|12

porpiedades-del-campo-mes.jpg

Figura 1 - Propiedades del campo mes Una vez que creamos estos campos, agregaremos un nuevo campo oculto, para guardar el nombre del mes:

mesDescripcion: Texto - Computed

Y le agregaremos la siguiente fórmula:

@If(mes = "1"; "Enero"; mes = "2"; "Febrero"; mes = "3"; "Marzo"; mes = "4"; "Abril"; mes = "5"; "Mayo"; mes = "6"; "Junio"; mes = "7"; "Julio"; mes = "8"; "Agosto"; mes = "9"; "Septiembre"; mes = "10"; "Octubre"; mes = "11"; "Nobiembre"; "Diciembre")

Código 1 - Código del campo mesDescripcion

Formulario edicion

Figura 2 - Visualización del formulario "valores" en modo diseño

Para facilitar el ingreso de datos de prueba, agregaremos al formulario un botón denominado "Guardar y Salir" con la siguiente fórmula en el evento "Click":

@Command([FileSave]);
@Command([FileCloseWindow])

Código 2 - Código del botón Guardar y SalirNota:

    El formulario fue creado de esta manera, con estos campos, para que se ordenen correctamente en la vista y en el gráfico los meses, y se muestre el nombre.

Así se verá el formulario en el cliente Lotus Notes®:

formulario carga

Figura 3 - Formulario "valores" en modo de ediciónNota:

    El icono que se visualiza junto a la palabra "Guardar" se puede agregar desde la sección Icon de las propiedades del botón.
Creación de la vista

Para visualizar los documentos creados a partir del formulario "valores", agregaremos una vista denominada "todos_valores" la cual tendrá 3 columnas, una por cada campo del formulario. Luego permitiremos el ingreso de nuevos documentos desde la misma agregándole un botón, denominado "Ingresar datos", con la siguiente fórmula:

@Command([Compose]; "valores")

Código 3 - Código del botón Ingresar datos

La figura siguiente, nos mostrará como será visualizada la vista desde el cliente Lotus Notes:

vista sin datos

Figura 4 - Vista "todos_valores" visualizada desde el cliente Lotus Notes

Carga de datos

Para verificar el correcto funcionamiento de los nuevos elementos de diseño, cargaremos nuevos datos en la base de datos accediendo a ella a través del cliente Lotus Notes®; posicionados en la vista "todos_valores", presionamos el botón "Ingresar datos". Como resultado se debe abrir un formulario que se mostró en la Figura 3, el cual deberemos completar, para almacenarlo luego a través del botón "Guardar y Salir". Será conveniente repetir el procedimiento reiteradas veces para contar con un conjunto de datos de prueba.

Vista con datos

Figura 5 - Vista "todos_valores" visualizada desde el cliente Lotus Notes, con datos

Desarrollo del Web Service

El último paso correspondiente al ambiente Lotus Domino, es la creación del servicio web que permita exponer la funcionalidad de la base de datos al exterior. Para crearlo, será necesario abrir la base de datos con el Lotus Domino Designer, dirigirse a la sección Shared Code --> Web Services y luego presionar el botón New Web Service.

Creación del Web Services

Figura 6 - Creación del servicio web Utilizaremos el valor "creditosWS" tanto para el nombre como para el alias del servicio:

Propiedades del WS

Figura 7 - Propiedades del servicio web El servicio se codificará en Java, por ello cambiaremos el lenguaje por omisión de LotusScript a Java.

Cambio de lenguaje

Figura 8 - Cambio de lenguaje

Luego de completar los pasos anteriores, estaremos en condiciones de comenzar el desarrollo del servicio web, el cual contempla la codificación del método encargado de exponer los datos, esta función es utilizada al cargar el gráfico en la aplicación Adobe Flex®. Lo primero que haremos, es crear una clase, la cual usaremos para crear el array con los datos que consumirá el gráfico:

public class ValoresMes {
    private java.lang.String mes;
    private java.lang.String aprobados;
    private java.lang.String rechazados;
 
    public ValoresMes(){}
 
    public ValoresMes(String mes, String aprobados, String rechazados) {
        this.mes = mes;
        this.aprobados = aprobados;
        this.rechazados = rechazados;
    }
 
    public java.lang.String getMes() {
            return mes;
    }
    public void setMes(java.lang.String mes) {
            this.mes = mes;
    }
   
    public java.lang.String getAprobados() {
            return aprobados;
    }
    public void setAprobados(java.lang.String aprobados) {
            this.aprobados = aprobados;
    }
   
    public java.lang.String getRechazados() {
            return rechazados;
    }
    public void setRechazados(java.lang.String rechazados) {
            this.rechazados = rechazados;
    }
}

Código 4 - Código Java correspondiente a la clase ValoresMes

A continuación crearemos una nueva clase dentro del servicio web, mediante el botón New Class, en esta agregaremos el siguiente código, el mismo consta de una clase "CreditosWS", con el método "getList":

import java.util.*;
import lotus.domino.*;
 
public class CreditosWS {
    public ValoresMes[] getList(){
        ValoresMes[] valores = null;
               
        try { 
            Session session = WebServiceBase.getCurrentSession();
            AgentContext agentContext = session.getAgentContext();
            Database db = agentContext.getCurrentDatabase();
            
                View view = db.getView("todosvalores");
                ViewEntryCollection vec = view.getAllEntries();
            
                valores = new ValoresMes[vec.getCount()];
                ValoresMes valor;
            
            lotus.domino.Document doc = view.getFirstDocument();
            int i = 0;
            while (doc != null) {
                valor = new ValoresMes(doc.getItemValueString("mesDescripcion"), doc.getItemValueString("aprobados"), doc.getItemValueString("rechazados"));
                valores[i] = valor;
                i++;
                doc = view.getNextDocument(doc);
            }
                           
        } catch(Exception e) {
            e.printStackTrace();
        }
       
        return valores;
    }   
}

Código 5 - Código Java correspondiente al servicio web

La codificación del método de la clase "CreditosWS", correspondiente al servicio web, debería ser familiar para cualquier desarrollador que haya trabajado con IBM Lotus Domino®. En este caso se retorna un arreglo del tipo ValoresMes con la lista de valores que se obtuvieron al iterar la vista "todos_valores". Por último se debe establecer cual es la clase que implementa las operaciones del servicio web, para ello ingresaremos CreditosWS en la opción PortType class de la solapa Basics correspondiente a las propiedades del servicio:

PortType class

Figura 9 - Selección de PortType class

Adicionalmente debemos verificar que los valores de la solapa Advanced sean similares a los siguientes:

Solapa Advanced

Figura 10 - Configuración de la solapa Advanced

Prueba del Web Service

Para verificar que el servicio web se encuentre accesible, ingresaremos la URL del componente en un navegador de internet, la misma posee la siguiente forma:

http://(Nombre del servidor)/domflexgraf.nsf/CreditosWS?wsdl

El navegador deberá mostrarnos un documento XML similar al siguiente:

<?xml version="1.0" encoding="UTF-8"?>
<wsdl:definitions targetNamespace="urn:DefaultNamespace" xmlns="http://schemas.xmlsoap.org/wsdl/" xmlns:apachesoap="http://xml.apache.org/xml-soap" xmlns:impl="urn:DefaultNamespace" xmlns:intf="urn:DefaultNamespace" xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/" xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/" xmlns:wsdlsoap="http://schemas.xmlsoap.org/wsdl/soap/" xmlns:xsd="http://www.w3.org/2001/XMLSchema">  <wsdl:types>   <schema targetNamespace="urn:DefaultNamespace" xmlns="http://www.w3.org/2001/XMLSchema" xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/">    <import namespace="http://schemas.xmlsoap.org/soap/encoding/"/>    <complexType name="ValoresMes">     <sequence>      <element name="mes" nillable="true" type="xsd:string"/>      <element name="aprobados" nillable="true" type="xsd:string"/>      <element name="rechazados" nillable="true" type="xsd:string"/>     </sequence>    </complexType>    <complexType name="ArrayOfValoresMes">     <complexContent>      <restriction base="soapenc:Array">       <attribute ref="soapenc:arrayType" wsdl:arrayType="impl:ValoresMes[]"/>      </restriction>     </complexContent>    </complexType>   </schema>  </wsdl:types>  <wsdl:message name="getListRequest">  </wsdl:message>  <wsdl:message name="getListResponse">   <wsdl:part name="getListReturn" type="intf:ArrayOfValoresMes"/>  </wsdl:message>  <wsdl:portType name="CreditosWS">   <wsdl:operation name="getList">    <wsdl:input message="intf:getListRequest" name="getListRequest"/>    <wsdl:output message="intf:getListResponse" name="getListResponse"/>   </wsdl:operation>  </wsdl:portType>  <wsdl:binding name="DominoSoapBinding" type="intf:CreditosWS">   <wsdlsoap:binding style="rpc" transport="http://schemas.xmlsoap.org/soaphttp"/>   <wsdl:operation name="getList">    <wsdlsoap:operation soapAction="getList"/>    <wsdl:input name="getListRequest">     <wsdlsoap:body encodingStyle="http://schemas.xmlsoap.org/soap/encoding/" namespace="urn:DefaultNamespace" use="encoded"/>    </wsdl:input>    <wsdl:output name="getListResponse">     <wsdlsoap:body encodingStyle="http://schemas.xmlsoap.org/soap/encoding/" namespace="urn:DefaultNamespace" use="encoded"/>    </wsdl:output>   </wsdl:operation>  </wsdl:binding>  <wsdl:service name="creditosWSService">   <wsdl:port binding="intf:DominoSoapBinding" name="Domino">    <wsdlsoap:address location="http://localhost"/>   </wsdl:port>  </wsdl:service> </wsdl:definitions>

Código 6 - XML devuelto por el Web ServicesNota:

    el XML retornado corresponde a la definición de servicio en formato WSDL, para mayor información conviene revisar la sección referencias del presente artículo.

Creación de la aplicación Adobe Flex®

Adobe Flex® es un marco de trabajo orientado al desarrollo de aplicaciones de Internet basadas en los conceptos de RIA; una aplicación Adobe Flex® típica, consiste de un archivo de aplicación MXML (un archivo XML cuyo elemento raíz es mx:Application), y uno o mas componentes definidos en archivos MXML separados, librerías ActionScript, archivos de componentes Flash, etc. "Adobe Flex® Builder 2.0" es un entorno de trabajo basado en Eclipse especializado para asistir el desarrollo de aplicaciones Adobe Flex® 2 y ActionScript 3.0 entre otras, este entorno será el utilizado en el presente artículo para desarrollar la aplicación ejemplo. En primer lugar, abriremos el entorno de desarrollo "Adobe Flex Builder 2.0", luego, crearemos un nuevo proyecto Adobe Flex® a través de la opción de menú File --> New --> Flex Project.

New Flex Project

Figura 11 - Creación de un nuevo proyecto Adobe Flex®

Luego, nos debe aparecer una pantalla similar a la que se muestra en la Figura 12, debido a que nuestra aplicación Adobe Flex® se comunicará con el servidor Lotus Domino a través de un servicio web, dejaremos seleccionada la opción por omisión Basic (e.g. XML or web service from PHP/JSP/ASP.NET) y presionaremos el botón Next.

New Flex Project Config

Figura 12 - Configuración del proyecto Adobe Flex®

A continuación, ingresaremos el nombre del proyecto, en nuestro caso GraficoFlex, seleccionaremos el directorio donde almacenar el mismo y presionamos el botón Finish.

New Flex Project Name

Figura 13 - Ventana final de configuración del proyecto Adobe Flex®

Al finalizar la creación del proyecto visualizaremos el entorno de trabajo como se muestra en la siguiente figura:

Flex Project Creado

Figura 14 - Visualización del entorno luego de crear el proyecto Adobe Flex®

Desarrollo del Gráfico

La creación del proyecto nos dejo disponible el archivo GraficoFlex.mxml, en él, codificaremos la aplicación Adobe Flex® y será el único utilizado en el presente artículo. Este archivo XML tiene definido un espacio de nombres correspondiente al vocabulario MXML, el mismo se encuentra definido por la expresión xmlns:mx="http://www.adobe.com/2006/mxml" y permite que todo elemento que comience con el sufijo mx: sea considerado un componente o elemento relacionado a Adobe Flex®. En primer lugar cambiaremos la distribución general de la aplicación modificando el valor del parámetro layout correspondiente al elemento mx:Application, de absolute a horizontal, agregaremos código para el tratamiento de los errores y referenciaremos el servicio web desarrollado en el ambiente Lotus Domino:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
        ] ]>     
    </mx:Script>
    <mx:WebService id="ws" wsdl="http://(Nombre del servidor)/domflexgraf.nsf/CreditosWS?wsdl" showBusyCursor="true" fault="Alert.show(event.toString()), 'Error'"/>
</mx:Application>

Código 7 - Visualización del archivo GraficoFlex.mxml modificado

El valor del parámetro wsdl del elemento mx:WebService debe coincidir con la URL del servicio web desarrollado en la primera parte del artículo:

http://(Nombre del servidor)/domflexgraf.nsf/CreditosWS?WSDL

Posteriormente agregaremos el parámetro creationComplete="ws.getList()" al elemento mx:Application, para que cuando se cargue el gráfico, automáticamente se muestren los valores:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" creationComplete="ws.getList()">

Código 8 - Nuevo parámetro del elemento mx:Application

Ahora, debemos escribir el código del gráfico:

<mx:Panel width="100%" height="100%" textAlign="center" title="MGBank">
    <mx:ColumnChart id="grafico" width="100%" height="100%" dataProvider="{ws.getList.lastResult}">
        <mx:horizontalAxis>
      <mx:CategoryAxis dataProvider="{ws.getList.lastResult}" categoryField="mes"/>
        </mx:horizontalAxis>
        <mx:series>
            <mx:ColumnSeries id="aprobados" displayName="Créditos aprobados" xField="mes" yField="aprobados"/>
            <mx:ColumnSeries id="rechazados" displayName="Créditos rechazados" xField="mes" yField="rechazados"/>
        </mx:series>
    </mx:ColumnChart>
    <mx:Legend dataProvider="{grafico}"/>
</mx:Panel>

Código 9 - Código para crear el gráfico

El elemento mx:ColumnChart, nos indica que tipo de gráfico vamos a crear, en este caso, un gráfico de barras. El elemento mx:horizontalAxis, es el que nos mostrará las etiquetas del eje x, en este caso, los meses que cargamos. Y por último, el elemento mx:series, que contiene los mx:ColumnSeries, es con el cual mostraremos los valores cargados anteriormente en el gráfico. El código completo de la aplicación, quedará de la siguiente manera:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" creationComplete="ws.getList()"> 
    <mx:Script>
        import mx.controls.Alert;
    </mx:Script>
   
    <mx:WebService id="ws" wsdl="http://(Nombre del servidor)/domflexgraf.nsf/CreditosWS?wsdl" showBusyCursor="true" fault="Alert.show(event.toString()), 'Error'"/>
   
    <mx:Panel width="100%" height="100%" textAlign="center" title="MGBank">
        <mx:ColumnChart id="grafico" width="100%" height="100%" dataProvider="{ws.getList.lastResult}">
                    <mx:horizontalAxis>
                    <mx:CategoryAxis dataProvider="{ws.getList.lastResult}" categoryField="mes"/>
                    </mx:horizontalAxis>
            <mx:series>
                <mx:ColumnSeries id="aprobados" displayName="Créditos aprobados" xField="mes" yField="aprobados"/>
                <mx:ColumnSeries id="rechazados" displayName="Créditos rechazados" xField="mes" yField="rechazados"/>
            </mx:series>
        </mx:ColumnChart>
        <mx:Legend dataProvider="{grafico}"/>
    </mx:Panel>
</mx:Application>

Código 10 - Código completo de la aplicación

Para probar el que el código funciona correctamente, lo primero que debemos hacer, es ejecutar la aplicación para que nos genere el archivo GraficoFlex.swf en la carpeta bin, en donde creamos el proyecto.

Run Project

Figura 15 - Ejecución de la aplicación

Este archivo, lo agregamos como un Shared Resource en la base de Datos IBM Lotus Notes y lo abriremos en un navegador ingresando la siguiente dirección URL:http://(Nombre del servidor)/domflexgraf.nsf/GraficoFlex.swfSi todo funciona correctamente deberemos visualizar la aplicación como se muestra en la siguiente figura:

Gráficos

Figura 16 - Vista de la aplicación Adobe Flex® desde un navegador de Internet


Conclusión

En este artículo pudimos aprender que agregar componentes RIA a nuestras aplicaciones Domino es una tarea con una excelente relación costo/beneficio. Pudimos observar que el desarrollo de este tipo de interfaces ricas para entornos web es rápido y sencillo y es una muy buena alternativa a AJAX u otros frameworks RIA. Adobe Flex® demuestra que brinda un importante soporte al desarrollo de aplicaciones RIA, permitiéndole al desarrollador, mantener el aislamiento de los datos Domino -como servicios- por medio de Web Services. IBM Lotus Domino demuestra, por su parte, que se mantiene vigente para el desarrollo de soluciones empresariales con requerimientos exigentes en lo referido a interfaces de usuario, integración y aislamiento.


Versiones de evaluación de los productos

    • Adobe Flex Builder 2 y Adobe Flex Charting 2

Sitio de descarga de software de Adobe

    • Productos de la familia IBM Lotus Domino 8.0.x

Sitio de descarga de software de IBM


Código de ejemplo

En la parte inferior del artículo encontrará una link de descarga del código del ejemplo (GraficosFlex.zip).


Referencias

    • Lotus Notes/Domino 7 Web Services

http://www-128.ibm.com/developerworks/lotus/library/nd7-webservices/

    • Quickly create Domino Web services: New Web services function in Domino 7 speeds development

http://www-128.ibm.com/developerworks/edu/i-dw-ls-domino7ws-i

    • Flex: Cree resultados web de la próxima generación

http://www.adobe.com/es/products/flex/

    • Web Services Description Language (WSDL) 1.1

http://www.w3.org/TR/wsdl



Modificado por última vez en Lunes, 08 Julio 2013 12:57

Acerca del autor

Fabián M. Rivarola

Fabián cuenta con mas de 6 años de experiencia en la diseño y construcción de aplicaciones Web bajo plataformas Java EE  e IBM Domino, actualmente es Líder de Proyecto en el área de operaciones de MicroGestion Software.