Imprimir esta página
14 Sep

Lotus Domino WebServices y Adobe Flex 2.0

Los Web Services son el eje central de las arquitecturas orientadas a servicios (SOA), y Adobe Flex® es una herramienta que nos permite desarrollar aplicaciones RIA (Rich Internet Applications) con suma facilidad. En este artículo, mediante Adobe Flex®, consumiremos un Web Services desarrollado en Lotus Domino.

Nivel: Lotus Domino - Principiante / Flex - Principiante

Julio 2007

Introducción

Este artículo está dirigido a desarrolladores IBM Lotus Notes/Domino®, que se encuentren interesados en implementar Adobe Flex®, para construir las interfaces de usuario de sus aplicaciones web. Durante el desarrollo del artículo detallaremos paso a paso, cómo se puede crear una base de datos Notes, y cómo consumir con Adobe Flex® un Web Service.


Creación de la aplicación Lotus Domino

A continuación se explicaran los pasos a seguir para desarrollar un Servicio Web ("Web Service") con Lotus Notes, también crearemos un formulario y una vista, para ingresar algunos valores de prueba; que luego consumiremos a través de un formulario creado mediante Adobe Flex®, donde podremos ver los datos ingresados desde Notes, y también modificarlos.

Creación del formulario

En primer lugar crearemos una base de datos en el servidor Lotus Domino, partiendo de un diseño en blanco, el nombre del archivo será "domflex.nsf" y el título "Base de contactos". Luego agregaremos un nuevo formulario denominado "user_web_ContactInfo | ContactInfo" con los siguientes campos:

  • nombre: Texto
  • apellido: Texto
  • domicilio: Texto
  • localidad: Texto
  • provincia: Texto

Formulario Edición

Figura 1 - Visualización del formulario "ContactInfo" 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 1 - Código del botón Guardar y Salir.

La siguiente imagen representa el formulario visualizado en el cliente Lotus Notes:

Formulario Carga

Figura 2 - Formulario "ContactInfo" en modo de edición.

Nota:

      El tilde verde 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 permitir la visualización de los documentos creados a partir del formulario "ContactInfo", agregaremos una vista denominada "AllContacts" la cual constará de 5 columnas, una por cada campo del formulario. Luego permitiremos el ingreso de nuevos documentos desde la misma agregándole un botón, denominado "Nuevo Contacto", con la siguiente fórmula:

@Command([Compose]; "ContactInfo")

Código 2 - Código del botón Nuevo Contacto.

La siguiente imagen corresponde a la visualización de la vista desde el cliente Lotus Notes:

Vista sin datos

Figura 3 - Vista "AllContacts" visualizada desde el cliente Lotus Notes.

Carga de contactos

Para verificar el funcionamiento de los nuevos elementos de diseño, crearemos un contacto en la base de datos accediendo a ella a través del cliente Lotus Notes; posicionados en la vista "AllContacts", presionamos el botón "Nuevo Contacto". Como resultado se debe abrir un formulario similar a de la Figura 2, 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.

Desarrollo del Web Service

El último paso correspondiente al ambiente Lotus Domino, será la creación del Servicio Web que permita exponer la funcionalidad de la base de datos al exterior. Para crear el servicio, 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 Service

Figura 4 - Creación del Servicio Web

Utilizaremos el valor "ContactsWS" tanto para el nombre como para el alias del servicio:

Propiedades del WS

Figura 5 - Propiedades del Servicio Web

El lenguaje elegido para codificar el servicio es Java, por ello cambiaremos el lenguaje por omisión de LotusScript a Java.

Cambio de lenguaje

Figura 6 - 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 de dos métodos, uno encargado de exponer la lista de contactos y otro responsable de la actualización de los mismos, estas funciones son utilizadas por los botones "Traer datos" y "Actualizar" respectivamente, ambos dispuestos en la aplicación Adobe Flex®. A continuación se puede ver el fragmento de código correspondiente al Servicio Web, el mismo consta de una clase "ContactWS" la cual posee dos métodos, "getList" y "setList":

import java.util.*;
import lotus.domino.*;
public class ContactWS {
	public List getList(){
		ArrayList contacts = new ArrayList();		
		try {  
			HashMap contact;			
			Session session = NotesFactory.createSession();
			Database db = session.getDatabase(null, "DomFlex");
			View view = db.getView("AllContacts");			
			lotus.domino.Document doc = view.getFirstDocument();
			if (doc != null) {
				int i=0;
				while (doc != null) {
					i++;
					contact = new HashMap();	
					contact.put("unid", doc.getUniversalID());
					contact.put("nombre", doc.getItemValueString("nombre"));
					contact.put("apellido", doc.getItemValueString("apellido"));
					contact.put("domicilio", doc.getItemValueString("domicilio"));
					contact.put("localidad", doc.getItemValueString("localidad"));
					contact.put("provincia", doc.getItemValueString("provincia"));
					contacts.add(contact);
					doc = view.getNextDocument(doc); 
				}
			} 			
		} catch(Exception e) { 
			e.printStackTrace();
		}		
		return contacts;
	}
	
	public boolean setList(ArrayList datos) {
		try {  
			Session session = NotesFactory.createSession();
			Database db = session.getDatabase(null, "DomFlex");			
			lotus.domino.Document doc = db.getDocumentByUNID(datos.get(0).toString());
			doc.replaceItemValue("nombre", datos.get(1));
			doc.replaceItemValue("apellido", datos.get(2));
			doc.replaceItemValue("domicilio", datos.get(3));
			doc.replaceItemValue("localidad", datos.get(4));
			doc.replaceItemValue("provincia", datos.get(5)); 
			doc.save(true,false);
			return true;
		} catch(Exception e) {
			e.printStackTrace();
			return false;
		}
	}
}

Código 3 - Código Java correspondiente al Servicio Web

La codificación de los métodos de la clase "ContactWS", correspondiente al Servicio Web, debería ser familiar para cualquier desarrollador que haya trabajado con Lotus Domino. En el primer caso se retorna un arreglo ("ArrayList") con la lista de contactos que se obtuvieron al iterar la vista "AllContacts", la información de cada contacto es cargada como un par etiqueta-valor dentro de un "HashMap". En el segundo caso se reciben los datos de un contacto dispuestos en un arreglo ("ArrayList"), el primer valor representa el "UniversalID" asociado al documento de contacto, con él se obtiene el documento, se actualizan sus campos y luego se retorna "true" o "false" de acuerdo al éxito de la actualización. Por último se debe establecer cual es la clase que implementa las operaciones del Servicio Web, para ello ingresaremos ContactsWs en la opción PortType class de la solapa Basics correspondiente a las propiedades del servicio:

PortType class

Figura 7 - Selección de PortType class

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

Solapa Advanced

Figura 8 - 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)/DomFlex.nsf/ContactsWS?WSDL

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

 


      
        
      
      
        
      
    
      
        
      
      
          
            
            
          
          
            
            
          
      
      
        
          
            
              
                
              
              
                
              
          
          
            
              
                
              
              
                
              
          
      
      
          
            
          
      
  

Código 4 - XML devuelto por el Web Services

Nota: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®

Como se comentó al inicio del artículo, "Adobe Flex®" es un marco de trabajo orientado al desarrollo de aplicaciones de Internet basadas en los conceptos de RIA; una aplicación 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 9 - Creación de un nuevo proyecto Adobe Flex®

Luego, nos debe aparecer una pantalla similar a la Figura 10, 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 10 - Configuración del proyecto Adobe Flex®

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

New Flex Project Name

Figura 11 - 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 12 - Visualización del entorno luego de crear el proyecto Adobe Flex®

Desarrollo de la vista de contactos (DataGrid)

La creación del proyecto nos dejo disponible el archivo DominoFlex.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:

 



    
                    import mx.controls.Alert;
        ]]>     
    
    

 

Código 5 - Visualización del archivo DominoFlex.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)/DomFlex.nsf/ContactsWS?WSDL

Posteriormente agregaremos en la aplicación un botón que obtenga los contactos almacenados en la base de datos Lotus Notes y una tabla que permita visualizarlos, el botón definido a través del elemento mx:Button invocará el Servicio Web establecido por el elemento mx:WebService y la tabla, definida por el elemento mx:Datagrid, obtendrá los valores a través del parámetro dataProvider, a continuación se muestra el código del archivo DominoFlex.mxml modificado:



    
                    import mx.controls.Alert;
        ]]>     
    
    
 
    
        
            
                
                
                
                
                
            
        
       
        
            
        
    

Código 6 - Archivo DominoFlex.mxml con los nuevos elementos: mx:DataGrid y mx:Button

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

Run Project

Figura 13 - Ejecución de la aplicación

Este archivo, lo agregamos como un Shared Resource en Notes y lo abriremos en un browser ingresando la siguiente URL:

http://(Nombre del servidor)/DomFlex.nsf/DominoFlex.swf

Si todo funciona correctamente deberemos visualizar la aplicación como se muestra en la siguiente figura:

DataGrid

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

Desarrollo del formulario de modificación de datos

El siguiente paso será crear el formulario donde se actualizarán los datos del contacto seleccionado en la vista, para ello agregaremos un panel (mx:Panel) con un componente mx:Form como muestra el siguiente fragmento de código:


        
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
        

Código 7 - Fragmento donde se puede visualizar el componente de formulario

El panel debe colocarse luego del que contiene la vista, si accedemos posteriormente a la aplicación a través de un navegador de internet visualizaremos la siguiente imagen:

DataGrid y Form

Figura 15 - Vista de la aplicación con la tabla y el formulario de modificación de datos

Hasta el momento la aplicación permite visualizar los contactos ubicados en el ambiente Lotus Domino a través del botón "Obtener Datos", adicionalmente al seleccionar un item de la lista los datos del contacto se visualizan en el formulario de modificación como muestra la siguiente imagen:

DataGrid y Form con Datos

Figura 16 - Vista de la aplicación luego de obtener datos y seleccionar un item de la lista

Implementación de la actualización de datos

Para finalizar con el desarrollo, agregaremos un botón para actualizar los datos que modifiquemos. Para esto agregaremos un botón, al que llamaremos Actualizar, y las funciones correspondientes. El botón llamará a la función que actualiza los datos, y el código del mismo, es el siguiente:


    

La pantalla finalizada se verá de la siguiente manera:

Pantalla completa

Figura 17 - Vista de la pantalla finalizada

La función que agregaremos, creará el vector que enviaremos al Web Service, y actualizará la vista con los contactos. Además llamaremos a otra función, que hará que se demore un segundo el refresh de la vista.

    import mx.managers.ToolTipManager;
           
    private function delayUpdate():void {
        ToolTipManager.enabled = true;
        ToolTipManager.showDelay = 0;
        ToolTipManager.hideDelay = 1000;
    }
           
    private function UpdateValues():void {
    var detalles:Array = new Array();
               
	detalles.push(list.selectedItem.unid);
	detalles.push(detallesNombre.text);
	detalles.push(detallesApellido.text);
    detalles.push(detallesDomicilio.text);
    detalles.push(detallesLocalidad.text);
    detalles.push(detallesProvincia.text);
 
    //Grabo los datos modificados
    if (srv.setList(detalles.valueOf())) {
        //Demoro un segundo la nueva carga de la lista
        delayUpdate();
 
        //Vuelvo a cargar la lista, con los datos actualizados
        srv.getList();
    }
}

Código 8 - Función de actualización de los datos

El código completo, deberá quedar de la siguiente manera:



    
                    import mx.controls.Alert;
             import mx.managers.ToolTipManager;
           
            private function delayUpdate():void {
                ToolTipManager.enabled = true;
                ToolTipManager.showDelay = 0;
                ToolTipManager.hideDelay = 1000;
            }
           
            private function UpdateValues():void {
                var detalles:Array = new Array();
               
                detalles.push(list.selectedItem.apellido);
                detalles.push(detallesNombre.text);
                detalles.push(detallesApellido.text);
                detalles.push(detallesDomicilio.text);
                detalles.push(detallesLocalidad.text);
                detalles.push(detallesProvincia.text);
 
                //Alert.show(detalles.valueOf());
 
                //Grabo los datos modificados
                 if (srv.setList(detalles.valueOf())) {
                    //Demoro un segundo la nueva carga de la lista
                    delayUpdate();
 
                    //Vuelvo a cargar la lista, con los datos actualizados
                     srv.getList();
                 }
            }
        ]]>     
    
 
    
   
    
        
            
                
                
                
                
                
            
        
       
        
            
        
    
   
    
        
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
        
       
        
            
        
    

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


Conclusión

En este artículo pudimos aprender que tan rápido y tan fácil puede construirse una aplicación RIA con Adobe Flex 2.0 que se integre con IBM Lotus Domino mediante Web Services, mientras presenta una interfase de usuario sobre Flash (SWF), haciéndola más liviana para el trabajo en la web. Adobe Flex® demuestra que brinda un importante soporte al desarrollo de aplicaciones RIA, permitiéndole al desarrollador, contar con una alternativa a AJAX; manteniendo el aislamiento de los datos Domino -como servicios- por medio de Web Services.


Versiones de evaluación de los productos

    • Adobe Flex Builder 2

Sitio de descarga de software de Adobe

    • Productos de la familia IBM Lotus Domino 7.0.x

Sitio de descarga de software de IBM


Código de ejemplo

Al final del artículo encontrará un link para descargar el código del ejemplo (DominoFlex.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.html

    • 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


Acerca del Autor

FabiánFabián M. Rivarola, MicroGestion

Fabián Rivarola es Líder de Proyecto en el departamento de desarrolladores de MicroGestion Software, enfocado en la construcción de aplicaciones bajo plataformas IBM Lotus Domino y Java con interfaces web dinámicas, y a participado en numerosos proyectos para empresas de primer nivel.

Modificado por última vez en Lunes, 08 Julio 2013 12:58
Valora este artículo
(0 votos)
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.

Sitio Web: www.microgestion.com/index.php/mg-developers/blog/author/986-fabianmrivarola