Hello again, 3270: Acceso a las aplicaciones z/OS con un iPhone

Las nuevas tecnologías y la proliferación de dispositivos inalámbricos inteligentes no cambian el hecho de que las aplicaciones que se ejecutan en z/OS® sigan siendo el eje principal de muchas organizaciones. Pero sólo porque una aplicación sea más vieja no significa que deba parecerlo o que sea difícil acceder a ella. Este artículo describe cómo se puede potenciar la Arquitectura orientada a servicios para sortear esta brecha generacional y acceder a la aplicación z/OS desde un iPhone. Este ejemplo implica crear un servicio web CICS® que sea invocado por un iPhone usando los conceptos de Web 2.0 para acceder a la aplicación de demostración CICS/COBOL. Poder acceder a Google Maps hace aún más atractiva la interfaz de iPhone a la aplicación mainframe. This content is part of the IBM WebSphere Developer Technical Journal.

Reginaldo Barosa, Executive IT Specialist, IBM

Author photoReginaldo W. Barosa es Executive IT Specialist en IBM, brinda soporte de ventas, ayudando a los clientes en las soluciones de modernización empresariq y herramientas de desarrollo, como Rational Developer for System z. Antes de ingresar a IBM U.S., hace ya más de nueve años, Reginaldo trabajó durante 27 años para IBM Brasil, fue coautor de IBM Redbooks y escribió dos libros, además de otros artículos y tutoriales para IBM developerWorks. Es ingeniero eléctrico egresado del Instituto Maua de Tecnologia en San Pablo, Brasil.



03-08-2011

Introducción

Días atrás estaba en el subterráneo en Boston y no pude dejar de observar la cantidad de gente que estaba usando algún tipo de teléfono inteligente. Algunos usaban los juegos, otros se conectaban a Internet y otros hacían otras cosas usando sus celulares. Aunque actualmente la atención está puesta en usar todos estos dispositivos electrónicos con las últimas aplicaciones, también resulta necesario mirar atrás y construir un nexo que permita unir las aplicaciones z/OS existentes con estos dispositivos.

Este artículo le mostrará cómo puede crear fácilmente una aplicación Web 2.0 que reutilice una aplicación z/OS existente, usando los productos de software IBM® Rational®. Siguiendo los conceptos que aquí se demuestran, usted podrá crear un cliente Web 2.0 que invoque una aplicación CICS/COBOL a ejecutarse en un mainframe System z, transformado en servicios web SOAP. Aunque el ejemplo en este artículo usa COBOL y CICS, se pueden aplicar los mismos principios y tecnología a PL/I o IMS, RPG con Sistema i, y también SOAP o servicios web RESTful.

Este artículo describe cómo construir el fragmento Web 2.0 de este escenario. Aunque la aplicación de muestra completa resultante de estos pasos se incluye con este archivo para descarga. Este código de muestra ha sido probado usando un iPhone Apple. Usted también puede probarlo con otros teléfonos inteligentes con navegadores que soporten JavaScript™, como Apple Safari, Microsoft® Internet Explorer, Mozilla Firefox, Opera MinI, y otros.


Antes y después

Antes de ver cómo construir una aplicación Web 2.0 que pueda acceder a una aplicación mainframe, revisemos rápidamente el "antes" (la aplicación z/OS) y el "después" (la aplicación Web 2.0) para que pueda ver en dónde está parado y hacia dónde quiere ir.

El escenario usado en este artículo asume que usted ya tiene una aplicación CICS/COBOL. La aplicación de muestra que se describe aquí accederá a una simple aplicación de demostración IBM que obtiene información ficticia del cliente.

Vea una demostración del proceso completo que se describe en este artículo en YouTube.

La Figura 1 muestra la tradicional pantalla 3270 (el “antes”) para la aplicación de demostración de Consulta del Cliente, que muestra los datos obtenidos de un conjunto de datos VSAM. En esta aplicación, el usuario ingresa un número de cliente válido y luego presiona Enter (Ingresar). Los datos recuperados del conjunto de datos VSAM se usan para completar los campos en el panel 3270.

Figura 1. Aplicación COBOL/CICS existente en interfaz de mapa 3270
Aplicación COBOL/CICS existente en interfaz de mapa 3270

La Figura 2 muestra la arquitectura de alto nivel de esta aplicación. Básicamente está integrada por dos componentes:

  • El componente de cliente COBOL que muestra el mapa 3270.
  • El componente de servidor COBOL que accede al conjunto de datos VSAM.

La comunicación entre los componentes de cliente y servidor se logra a través de CICS COMMAREA.

Figura 2. Aplicación COBOL/CICS existente
Aplicación COBOL/CICS existente

El objetivo, entonces, es acceder a estos datos de back-end a través de la aplicación CICS/COBOL ejecutada en z/OS, pero usando un iPhone. La aplicación CICS/COBOL real no cambiará, pero como usted desea acceder a la misma a través de un iPhone, tiene la oportunidad de crear una interfaz mucho mejor para ella. Para darle una idea de las cosas que puede hacer con una interfaz mejorada, para esta aplicación de muestra usaremos el conocido servicio web Google Maps.

Vea la nueva interfaz en acción ya sea en el sistema de demostracióno en iPhoneemulator. Use los números de Cliente válidos de1a9.

La Figura 3 muestra la nueva interfaz (el “después”) como se visualiza en un iPhone. La aplicación z/OS devolvió información sobre el domicilio del cliente, pero Google Maps avanzó aún más, mostrándole literalmente en donde se encuentra ubicado el cliente. Esto, obviamente sería imposible en una pantalla 3270.

Figura 3. Interfaz nueva para la aplicación z/OS usando un iPhone
Interfaz nueva para la aplicación z/OS usando un iPhone

Comenzar con el código correcto

Antes de iniciar cualquier implementación, debe asegurarse que todas las partes que la integran funcionen correctamente. En este caso, usted desea conocer el funcionamiento de la aplicación mainframe, por lo menos con respecto a resultados y rendimiento. De esta manera usted sabrá si sus resultados son correctos, y verificará los tiempos de respuesta.

Una de las ventajas generales de las aplicaciones 3270 CICS es su excelente tiempo de respuesta. Sin embargo, a veces la tecnología nueva puede ofrecer una solución muy linda, pero con un tiempo de respuesta pobre que obstaculiza su implementación. Este siempre debería ser un tema prioritario. Para medir el tiempo de respuesta de la aplicación z/OS, se usó una rutina simple para comenzar a contar desde el momento en que se invocó el servicio web CICS Web hasta que se obtuvo el dato. Afortunadamente, el tiempo de respuesta fue menor a medio segundo, lo cual alivió la preocupación con respecto a la aplicación de demostración. (Todo el análisis XML en este ejemplo se realizó con COBOL.)

La Figura 4 muestra el tiempo de respuesta para invocar la aplicación de demostración CICS COBOL desde el cliente Web 2.0. En este ejemplo, el tiempo de respuesta para esta invocación de servicio fue 0,140 segundos. ¡Impresionante! (Puede comprobarlo usted mismo haciendo clic en el icono símbolo de verificación verde en la interfaz Web 2.0.)

Figura 4. Tiempo de respuesta para invocar el servicio web SOAP CICS
Tiempo de respuesta para invocar el servicio web SOAP CICS

Tenga en cuenta que, en este ejemplo, no se consideró el tiempo requerido para cargar el HTML del cliente y JavaScript y que en esta instancia aún debe ajustarse. Hay varias formas de compactar los datos enviados al navegador para que le permita funcionar mejor, pero la medición más importante en este caso fue el tiempo de respuesta total para acceder a z/OS, ejecutar el análisis de XML SOAP, invocar a la aplicación CICS/COBOL, obtener los datos VSAM y luego volver al cliente Web.


Creación de una aplicación Web 2.0 iPhone para una aplicación CICS/COBOL

Las próximas secciones describen el proceso para construir la aplicación Web 2.0 de muestra que se incluye en este artículo. El proceso consta de tres pasos principales:

  1. Creación del proveedor de servicio web CICS
  2. Creación del solicitante de servicio web 2.0 (interfaz de usuario)
  3. Ampliación del código Web 2.0 para invocar el servicio de Google Maps

Para seguir los pasos reales que se describen aquí, necesitará acceder a IBM Rational Developer for System z con EGL V7.5 (o una versión posterior). Si usted sólo tiene IBM Rational Business Developer, u otro producto de software Rational que contenga EGL, puede seguir los pasos de la sección 2 en adelante.

Este artículo asume que usted está familiarizado con Eclipse y el concepto de perspectivas y vistas. Los productos Rational anteriormente mencionados incluyen tutoriales para ayudarlo a familiarizarse con los términos y los conceptos relacionados, por lo tanto no es necesario que tenga mucha experiencia para seguir el tema. También es útil contar con conocimientos generales de terminología sobre mainframe y conceptos de Web 2.0.


1. Creación del proveedor de servicio web CICS

En este primer paso, se eliminan el programa de cliente COBOL y las pantallas de mapa 3270 (como se muestra en la Figura 2) y el código CICS/COBOL del servidor es encapsulado como un servicio CICS por WSDL (Lenguaje de Descripción de servicios web). Este paso es clave en la transformación de su aplicación. La Figura 5 muestra la topología de esta transformación,

Figura 5. Eliminación del mapa 3270 y del cliente COBOL por WSDL
Eliminación del mapa 3270 y del cliente COBOL por WSDL

Esta es la parte más simple de todo el proceso, y resulta aún más fácil usando los utilitarios CICS. Si usted usa Rational Developer for System z (en adelante Rational Developer), también puede probar fácilmente el servicio que ha creado. Hay mucho tutoriales que explican cómo realizar esta tarea, por lo tanto aquí no se repetirán los pasos detallados. Aunque básicamente usted aplicará los asistentes de Rational Developer Enterprise al programa CICS/COBOL y los asistentes generarán un servicio web CICS SOAP y el lenguaje WSDL. El código también se puede implementar en CICS usando las facilidades de Rational Developer.

La Figura 6 muestra el CICS DFHCOMMAREA usado para invocar al programa CICS/COBOL. El valor del número de cliente que es ingresado por el usuario se mueve al campo CustNo. El dato que se obtiene del conjunto de datos VSAM es enviado nuevamente a los restantes campos.

Figura 6. DFHCOMMAREA del programa CICS/COBOL
DFHCOMMAREA del programa CICS/COBOL

Recuerde que el servicio web se crea, implementa y prueba usando Rational Developer sin afectar la actual aplicación CICS/COBOL.

La Figura 7 muestra el lenguaje WSDL generado por Rational Developer. El mensaje de entrada es CustNo y el mensaje de salida todo el DFHCOMMAREA.

Figura 7. Lenguaje WSDL generado por los asistentes de Rational Developer
Lenguaje WSDL generado por los asistentes de Rational Developer

El código generado se implementa en su CICS usando Rational Developer. Hasta los nuevos recursos CICS que se necesitan configurar en CICS se pueden crear usando Rational Developer V7.5 o versiones posteriores. Una nueva perspectiva de CICSExplorer hace que ésta sea una tarea muy simple.

Después de las compilaciones en z/OS y de la creación de los recursos CICS, usted deberá probar el servicio CICS creado. A los fines de este artículo, este servicio ya está implementado en nuestro sistema z/OS de demostración y usted puede probarlo usando el Explorador de servicios web de Rational Developer. El Explorador de servicios web usa un navegador Web como interfaz para permitirle probar una simple invocación Web. Indique, en el Explorador de servicios web Services, este URL: http://zserveros.demos.ibm.com:9046/wdz/LAB3POT y asegúrese que el servicio CICS esté ejecutándose como corresponde (Figura 8):

  1. Haga clic con el botón derecho en CUSTINQ.wsdl en la carpeta Generation/Targets (Generación/Destinos) y seleccione servicios web => Test with Web Services Explorer (Probar con el Explorador de servicios web).
  2. Haga clic en LAB3POTOperation, luego ingrese un número de cliente válido (por ejemplo,4), luego haga clic en Go (Ir). Este es el lenguaje WSDL que usará para la creación de la página Web 2.0.

Es necesario probar exitosamente esto antes de continuar. En este ejemplo, el servicio CICS está implementado en una mainframe que se está escuchando en el puerto 9046. Asegúrese que no haya firewalls que bloqueen su conexión. Si no recibe datos o aparecen otros errores, corrija el problema y vuelva a probar antes de avanzar. Si se ha caído el sistema CICS (por ejemplo por tareas de mantenimiento) deberá probar en otro momento.

Figura 8. Invocación del servicio web CICS con el Explorador de servicios web
Invocación del servicio web CICS con el Explorador de servicios web

Usando la aplicación de muestra

La descripción del proceso de creación del lenguaje WSDL y otros componentes escapa al alcance de este artículo. Para obtener detalles sobre cómo realizar esta tarea, consulte el artículo Wrap existing COBOL programs as Web Services with IBM Rational Developer (Encapsular programas COBOL existentes como servicios web con IBM Rational Developer).

Sin embargo, puede rastrear rápidamente esta tarea si ha instalado Rational Developer importando el archivo Project Interchange (Intercambio de proyectos) y los activos relacionados, con el lenguaje WSDL, que se incluye en este artículo. (Consulte Acerca de la descarga para obtener más información sobre los materiales de muestra suministrados con este artículo.) Para importar el proyecto a Rational Developer:

  1. Descargue el archivo .zip que acompaña a este artículo y extraiga el contenido.
  2. Inicie Rational Developer señalando un espacio de trabajo vacío.
  3. Seleccione File (Archivo) => Import... (Importar) => Other (Otro) => Project Interchange => Next (Siguiente).
  4. Señale el archivo CICS_Services_Project.zip extraído, seleccione All (todos) y haga clic en Finish (Finalizar).
  5. Debe abrir la perspectiva Enterprise Service Tools (Herramientas de servicios empresariales) para ver lo que ha importado.

2. Creación del solicitante de servicio web 2.0 (interfaz de usuario)

Ahora está listo para crear la interfaz de usuario usando los componentes de la interfaz de usuario rico (Rich User Interface o Rich UI) para invocar al servicio CICS que ha creado.

EGL versión 7.5.1, le permite generar JavaScript que se ejecuta en el navegador. Esto es importante porque hace que la página Web tenga mayor capacidad de respuesta, y brinda una mayor flexibilidad de manera que la experiencia del usuario trascienda la etapa de enviar y recibir una página. Por ejemplo, después que el usuario hace clic en un botón de radio, la lógica podría responder mediante el cambio de los contenidos de una casilla de texto. El cambio se produce rápidamente por JavaScript se ejecuta localmente y, en la mayoría de los casos, sólo necesita volver a dibujar un área de la página.

Una extensión de JavaScript del lado cliente es Ajax (JavaScript asincrónico y XML), tecnología que permite invocar el tiempo de ejecución de código remoto y la subsiguiente actualización de un fragmento de página Web, aún cuando el usuario siga trabajando en otro lugar de la página. Después que el usuario selecciona una orden de compra de un casillero de la lista, por ejemplo, la lógica de JavaScript podría solicitar la transmisión de detalles de orden-elemento del servidor Web remoto y luego colocar estos detalles en una tabla que se visualiza al usuario. De esta manera, la aplicación puede acceder a contenido desde el servidor, pero ahorrando tiempo al seleccionar –en tiempo de ejecución– qué contenido se transmite.

Usted puede escribir las aplicaciones Rich UI que usan esta tecnología, usando la sintaxis de EGL. Al usar Rational Developer con EGL, creará un proyecto Rich UI EGL, importará el lenguaje WSDL que usará, creará la interfaz Rich UI y creará la lógica de EGL para invocar al servicio web SOAP creado en la sección 1. La secuencia de tareas es la siguiente:

  1. Crear un proyecto EGL Rich UI e importar el lenguaje WSDL
  2. Crear un controlador de EGL Rich UI
  3. Crear widgets de EGL Rich UI
  4. Crear el código EGL para utilizar el Servicio CICS
  5. Completar el código EGL Rich UI para invocar al servicio CICS
  6. Probar la aplicación Rich UI
  7. Medir el tiempo de respuesta de llamada del servicio

a. Crear un proyecto EGL Rich UI e importar el lenguaje WSDL

Uso de Rational Developer y de la perspectiva EGL Rich UI, creación de un proyecto Rich UI e importación del lenguaje WSDL que ha creado (o descargado) en la sección 1. Para crear el proyecto EGL Rich UI:

  1. Seleccione File => New (Nuevo) => Other... => EGL => EGL Project (Proyecto EGL) => Next.
  2. Elija un nombre significativo para el proyecto, seleccione Rich UI Project (Proyecto Rich UI) y haga clic en Finish.
  3. Haga clic en Yes (Sí) para ir a la perspectiva Rich UI.

Para importar el lenguaje WSDL:

  1. Haga clic con el botón derecho en la carpeta EGLSource y seleccione Import... =>General => File System (Sistema de archivos) => Next.
  2. Navegue hasta el archivo WSDL (debería estar en su espacio de trabajo bajo su proyecto de servicio y en la carpeta Generation/Targets) o señale el archivo WSDL suministrado (CUSTINQ.wsdl ) y haga clic en Finish.

La Figura 9 muestra un proyecto EGL Rich UI creado con el lenguaje WSDL importado. El lenguaje WSDL debe estar en la carpeta EGLSource.

Figura 9. Proyecto EGL Rich UI con el lenguaje WSDL importado
Proyecto EGL Rich UI con el lenguaje WSDL importado

b. Crear un controlador de EGL Rich UI

En EGL, un controlador es una clase especial de programa con funciones que están ligadas a eventos específicos que ocurren cuando alguien usa una interfaz. Un Controlador Rich UI tiene las siguientes propiedades:

  • initialUI: Especifica una serie de controles (widgets) que integran la visualización inicial para la página Web.
  • onConstructionFunction: Especifica una función para llamar cuando la interfaz es recién creada.
  • cssFile: Especifica una hoja de estilo en cascada (CSS) para asignarle al archivo. De manera predeterminada, EGL crea una CSS con el mismo nombre que el controlador de Rich UI, y define algunos estilos básicos. Para personalizar la apariencia de la página, puede modificar este archivo o asignarle uno diferente a la propiedad cssFile.

Cada programa EGL Rich UI tiene uno o más controladores. Este ejemplo tiene sólo un controlador para hacerlo más simple. Con este artículo también se provee una hoja de estilo en cascada que se adapta bien en el iPhone en download materials (materiales de descarga).

Para crear un controlador Rich UI:

  1. Haga clic con el botón derecho en la carpeta EGLSource y seleccione New (Nuevo) => Rich UI Handler (Controlador Rich UI).
  2. Nombre al paquete handlers, nombre al archivo fuente de EGL CallCICS, y haga clic en Finish. El editor visual se abrirá con una página en blanco. Cuando haga clic en la pestaña Source (Fuente), tendrá el código fuente de Rich UI EGL.
  3. Haga clic con el botón derecho en la carpeta css debajo de WebContent y seleccione Import... => General => File System => Next. Señale el archivo iPhoneUI.css suministrado y haga clic en Finish. (Probablemente necesite actualizar para que el archivo .css importado se visualice en su carpeta de proyecto.)
  4. Usando el editor CallCICS.egl, haga clic en la pestaña Source y cambie la propiedad cssFile para indicar en iPhoneUI.css, como se muestra en la Figura 8.
  5. Guarde los cambios.

La Figura 10 muestra el código EGL modificado, pero sin los widgets creados. Posteriormente necesitará agregar los controles (como título, campos de entrada, botones, etc.)

Figura 10. Código EGL usando hoja de estilo en cascada iPhoneUI
Código EGL usando hoja de estilo en cascada iPhoneUI

c. Crear widgets de EGL Rich UI

Puede crear fácilmente componentes Rich UI usando la perspectiva EGL Rich UI y el editor visual que se arrastra y suelta. Asegúrese de generar periódicamente el código EGL y verificar los componentes que se generaran. El tutorial Building Web 2.0 applications using EGL (Construcción de aplicaciones Web 2.0 usando EGL) explica las técnicas básicas para hacer esto. Alternativamente, usted puede importar este código del material incluido en download material.

Para este ejemplo, usted creará:

  • Un campo de entrada para número de cliente.
  • Seis campos no modificables en donde cargará los datos obtenidos por CICS.
  • Un botón que invocará al servicio web CICS.

En EGL Rich UI:

  • El campo de entrada es un widget denominado com.ibm.egl.rui.widgets.TextField
  • El campo no modificable es un widget denominado com.ibm.egl.rui.widgets.TextLabel
  • El botón un widget denominado com.ibm.egl.rui.widgets.Button.

Use cualquier editor de pruebas Windows® para abrir el archivo CallCICS_incomplete.egl que se ha suministrado. Copie y pegue el contenido de este archivo en el archivo CallCICS.egl que está editando. Esto acelerará la creación de su archivo RichUI.

Simultáneamente puede editar el mismo código EGL usando el Editor Visual Rich UI y el editor estándar EGL Rich UI. Sólo haga clic con el botón derecho en el código EGL y seleccione Open with (Abrir con= => EGL Rich UI Editor para editar con el editor visual. Repita esta operación, pero usando Open with => EGL Editor para el editor estándar. Usando las capacidades de Eclipse, usted puede reajustar su pantalla como se muestra en la Figura 11.

Figura 11. Código EGL Rich UI usando dos editores simultáneamente
Código EGL Rich UI usando dos editores simultáneamente

d. Crear el código EGL para utilizar el Servicio CICS

La invocación del servicio en Rich UI es siempre asincrónica. Esto significa que el solicitante (el cliente Rich UI) sigue ejecutándose sin esperar una respuesta del servicio. El usuario puede seguir interactuando con la interfaz de usuario mientras el controlador Rich UI espera que el servicio responda. Después de la invocación, el servicio realiza algunas tareas, en la mayoría de los casos, responde al tiempo de ejecución de EGL, que a su vez invoca una función Rich UI que usted codifica, llamada callback function (función de devolución de llamada).

Para invocar un servicio desde Rich UI, necesita crear una parte de interfaz EGL que incluya propiedades que indiquen cómo se accede al servicio en tiempo de ejecución. Luego usted crea una variable basada en la parte de interfaz y usa la variable en una instrucción de llamada. La instrucción de llamada incluye los detalles necesarios para que el tiempo de ejecución EGL emita una devolución de llamada.

Nuevamente para usar Rational Developer con EGL, necesita crear las interfaces EGL que invoca el servicio CICS desde el lenguaje WSDL generado:

  1. Usando la perspectiva EGL Rich UI, haga clic con el botón derecho en CUSTINQ.WSDL y seleccione EGL Services (Servicios EGL) => Create EGL Client Interface (Crear interfaz de cliente EGL). Asegúrese que Create Web Services Client Bindings (Crear enlaces de cliente para servicios web) esté seleccionado y haga doble clic en Next.
  2. Seleccione Update all existing bindings (Actualizar todos los enlaces existentes) y luego haga clic en Finish.
  3. Se creará el paquete files.target (nombre predeterminado) y el editor EGL mostrará el código EGL denominado CUSTINQ.egl que se ha creado. No se requieren cambios. El EGL generado se muestra en el Listado 1.
  4. Se crean otros dos paquetes EGL con variables que mapean los mensajes entrantes y salientes. Recuerde que el mensaje entrante es el número de cliente (CustNo) y el mensaje saliente es el CICS DFHCOMMAREA completo.
Listado 1. Servicio EGL creado desde WSDL
package files.target;
       //@webBinding{wsdlLocation="CUSTINQ.wsdl", wsdlPort = "CUSTINQPort", wsdlService =
      "LAB3POTService"} interface CUSTINQPortType{@xml {name="CUSTINQPortType",
      namespace="file://target.files"}} function LAB3POTOperation(DFHCOMMAREA
      com.LAB3POTI.www.schemas.LAB3POTIInterface. DFHCOMMAREA in)
      returns(com.LAB3POTO.www.schemas.LAB3POTOInterface.DFHCOMMAREA) {@xml
      name="LAB3POTOperation"}}; end

La Figura 12 muestra el código EGL generado a través de la secuencia de diálogo para crear la interfaz de cliente EGL.

Figura 12. Proyecto EGL Rich UI con el código EGL generado
Proyecto EGL Rich UI con el código EGL generado

e. Completar el código EGL Rich UI para invocar al servicio CICS

Deberá asociar un evento en el Rich UI que invocará al servicio CICS. En este escenario, puede asociar el botón Rich UI con la invocación del servicio. Al hacer clic en el botón, el código EGL invocará al servicio CICS.

Esto se realiza usando un evento EGL llamado onClick. Debajo de la función findCustomer, una variable denominada srv se enlaza con el servicio CICS y con el puerto. Los datos son asignados desde Rich UI al registro EGL, luego se transmiten como mensaje entrante y se llama al servicio CICS.

Esta es una llamada asincrónica. Cuando el servicio vuelve sin errores, se ejecuta la función getCustomerDataCallback. Cuando el servicio devuelve una excepción, se ejecuta otra función llamada handleGetCustomersError (Figura 13).

Figura 13. Código EGL para invocar la llamada del servicio web y procesar los resultados
Código EGL para invocar la llamada del servicio web y procesar los resultados

Consulte CallCICS_complete_noServiceMonitor.egl en download material para obtener el código completo.

f. Probar la aplicación Rich UI

El código está listo para ser probado. La Figura 14 muestra el modo vista previa cuando se prueba este código EGL Rich UI. Para probar el código:

  1. Abra callCICS.egl usando el Editor EGL Rich UI.
  2. Haga clic en la pestaña Preview (Vista previa), ingrese un valor válido para número de cliente (como por ejemplo 4), y haga clic en Call CICS Service (Llamar al Servicio CICS). El Servicio CICS será invocado y se visualizarán los resultados.
Figura 14. Prueba de la interfaz EGL Rich UI
Prueba de la interfaz EGL Rich UI

Pruebe esto mismo con otros valores para número de cliente, de 1 a 9. ¿Observó el tiempo de respuesta? ¿También observó que no haya servidor de aplicaciones ejecutándose? La llamada se realiza desde Rational Developer al CICS que provee un proxy Ajax, sin requerir ningún servidor de aplicaciones. Cuando usted implementa este código en WebSphere Application Server, también se implementará este proxy.

g. Medir el tiempo de respuesta de llamada del servicio

Usted puede medir el tiempo de respuesta modificando uno de los programas EGL suministrados. Abra CallCICS.egl en un editor de texto. Antes de la instrucción function initialization (), agregue la línea de código que se muestra en la Figura 15. (Tenga en cuenta que esta línea termina con llaves { } no paréntesis ().)

También necesita importar un archivo Project Interchange:

  1. Seleccione File => Other => Project Interchange => Next y señale com.ibm.service.monitor.zip. Haga clic en Select All (Seleccionar todos) y luego Finish. Es correcto sobrescribir proyectos ya existentes.
  2. Ajuste las propiedades de proyecto EGL Build Path (Construir ruta de acceso EGL) para señalar a este proyecto nuevo. Haga clic con el botón derecho en proyecto EGL RichUI y seleccione Properties (Propiedades) => EGL Build Path. Seleccione com.ibm.service.monitor y haga clic en OK (Aceptar).
  3. Puede usar la función Organize Imports (Organizar importaciones) cuando edite el código (también puede usar Ctrl + Shift + O en la página del editor).
  4. Use Project (Proyecto) => Clean (Limpiar) => Clean all projects (Limpiar todos los proyectos) para arreglar cualquier posible error. No deberían aparecer errores en la vista Problems (Problemas) (sí pueden aparecer advertencias.)

Cuando agregue este código al controlador EGL Rich UI, tendrá una pantalla que monitorea la invocación del servicio web.

Figura 15. Código EGL para monitorear la llamada del servicio
Código EGL para monitorear la llamada del servicio

Ejecute las pruebas de vista previa nuevamente y haga clic en el icono de flecha verde en el extremo superior izquierdo del panel. La Figura 16 muestra el monitor de esta pantalla en acción. En este ejemplo, observará que le tomó 265 ms de tiempo de respuesta para invocar al servicio web CICS y obtener una respuesta. Esto es realmente impresionante, considerando que usted está enviando datos XML a través de la línea, que se analizan mediante un adaptador COBOL, se invoca al código CICS/COBOL y devuelve el XML. Puede hacer clic en la pestaña Request (Solicitud) para ver el servicio solicitado.

Figura 16. Medición del tiempo de respuesta de llamada del servicio
Medición del tiempo de respuesta de llamada del servicio

Ahora tiene una demostración de una invocación de servicio web CICS, pero todavía puede mejorar este código. Como está usando Web 2.0, puede mejorar la aplicación y las mashups. A los fines de este ejemplo, usted usará la dirección provista por el programa CICS, la enviará al servicio Google Maps y luego mostrará gráficamente la ubicación del cliente en un Google Map. Esto se muestra en la sección 3.


3. Ampliar el código Web 2.0 para invocar el servicio Google Maps

Una de las ventajas de usar Web 2.0 es que puede integrar fácilmente EGL Rich UI con los servicios web existentes. Uno de los servicios comúnmente usados es el servicio web Google Maps que todos pueden usar en la Web. Las tareas principales para lograr esta integración son:

  1. Importar el proyecto con la interfaz Google Maps
  2. Modificar la interfaz Rich UI para agregar más controles e invocar al servicio Google Maps
  3. Probar usando un navegador Web estándar
  4. Probar usando un emulador iPhone
  5. Implementar el código en un servidor de aplicaciones
  6. Modificar el HTML para evitar cambiar el tamaño de iPhone
  7. Implementar y probar el código usando WebSphere Application Server
  8. Implementar la interfaz Rich UI en WebSphere Application Server
  9. Ejecutar el código que se implementa en System z

a. Importar el proyecto con la interfaz Google Maps

Necesita importar el proyecto com.ibm.egl.misc a su espacio de trabajo. Si ya está cargado en su espacio de trabajo, salte al paso 3, de lo contrario:

  1. Seleccione File => Import... => Other => Project Interchange y señale el archivo com.ibm.egl.misc.zip provisto.
  2. Select All y clic en Finish para importar este proyecto. Es correcto sobrescribir proyectos existentes.
  3. Haga clic con el botón derecho en proyecto Rich UI y cambie la propiedad de EGL Build Path, seleccionando el proyecto com.ibm.egl.misc que ha importado. Esto le permite usar el código EGL que está incluido en este proyecto.

b. Modificar la interfaz Rich UI para agregar más controles e invocar al servicio Google Maps

Necesita cambiar los controles Rich UI y hacer otro botón para invocar al servicio Google Maps cuando lo presione. También necesita agregar un control para visualizar el mapa. Usando la función Project Interchange, importe el archivo CICS_Services+RichUI+Google.zip provisto.

Aparte de los controles nuevos para Google Maps, necesita definir una nueva variable EGL llamada googleMap a definirse como ExternalType GoogleMap (Figura 17). Este código EGL es suministrado como parte del proyecto com.ibm.egl.misc.

Figura 17. Código EGL para invocar el servicio Google Map
Código EGL para invocar el servicio Google Map

Después de importar el archivo Project Interchange, la solución para invocar el servicio Google Maps se encuentra ubicado en el proyecto LAB3_EGL_RichUI. Recuerde ejecutar Project => Clean => Clean all projects después de la importación. No deberían aparecer errores en la vista Problems (aparte de las advertencias).

La Figura 18 muestra cómo se invoca el servicio Google Map cuando se presiona el botón GoogleMap. Este botón invoca la función showMap, que a su vez invoca a functionshowAddresses definido en el paquete google.map en el proyecto com.ibm.egl.misc.

Figura 18. Cuando se presiona el botón se invoca la función showMap EGL
Cuando se presiona el botón se invoca la función showMap EGL

c. Probar usando un navegador Web estándar

Para probar la aplicación usando un navegador Web estándar:

  1. Haga clic con el botón derecho en CallCICS.egl y seleccione Open With => EGL Rich UI Editor
  2. Haga clic en la pestaña Preview para asegurarse que la aplicación esté ejecutándose correctamente.
  3. Para visualizar Google Map, haga clic en el botón verde GoogleMap.
  4. Desde esta pestaña, haga clic en el icono globo (Figura 19) para visualizar la página Web en el navegador externo. La aplicación se visualizará en su navegador Web predeterminado.
  5. Copie la dirección que obtuvo de la aplicación CICS/COBOL al portapapeles Windows y pegue en su navegador. Después necesitará pegar esto en el emulador iPhone. Un ejemplo de esta dirección generada es: http://localhost:5590/LAB3_EGL_RichUI/handlers/CallCICS.html?contextKey=3, aunque la suya será diferente, según sus configuraciones, su nombre de proyecto, etc.
  6. Pruebe la aplicación algunas veces más con este navegador usando valores de número de cliente válidos. No cierre el navegador.
Figura 19. Visualización de la vista previa usando un navegador externo
Visualización de la vista previa usando un navegador externo

d. Probar usando un emulador iPhone

Como el objetivo aquí es mostrar la aplicación que se ejecuta a través de un iPhone, usted puede demostrar estos resultados usando un explorador Web que se ejecute en un emulador iPhone. Hay varios emuladores iPhone disponibles en la Web. Para usar un emulador:

  1. Seleccione un emulador iPhone. A los fines de este artículo, vaya a http://www.testiphone.com/.
  2. Pegue la dirección http que se muestra en el navegador externo en la línea de entrada del emulador y presione Enter. El resultado tiene la apariencia más aproximada a un iPhone real (Figura 20).
  3. Pruebe la aplicación nuevamente usando números de cliente válidos, use el botón Google Map y observe el tiempo de respuesta.
Figura 20. Simulador iPhone
Simulador iPhone

e. Implementar el código en un servidor de aplicaciones

A esta altura, usted está listo para implementar la interfaz EGL Rich UI a su servidor de aplicaciones. Rational Developer soporta la publicación de Rich UI tanto para WebSphere Application Server como para Apache Tomcat. Los pasos que se muestran aquí son para WebSphere Application Server, pero los pasos para Tomcat serán similares:

  1. Desde cualquier perspectiva Rational Developer, navegue a Window (Ventana) =>Preferences (Preferencias) => EGL => Rich UI. En el menú desplegable Application Generation/Generation Mode (Generación de aplicación/Modo de generación) seleccione Deployment (Implementación) y haga clic en OK. Esto hará que se vuelvan a generar todas las partes usadas por las aplicaciones Rich UI en su espacio de trabajo. No deberían aparecer errores en la vista Problems (sí pueden aparecer advertencias).
  2. En la perspectiva EGL Rich UI, haga clic en CallCICS.egl (debajo del paquete de controladores) y seleccione Deploy EGL Rich UI Application (Implementar la aplicación EGL Rich UI).
  3. Seleccione WebSphere Application Server deployment (Implementación de WebSphere Application Server) => Next.
  4. Seleccione New Web project (Nuevo proyecto Web) e ingrese un nombre para Project name (Nombre de proyecto), como LAB3.
  5. Seleccione su servidor de tiempo de ejecución definido (WebSphere Application Server V6. 1 o V7) y haga clic en Finish. El código se implementará y se creará un proyecto Web nuevo. Un diálogo (Figura 21) visualizará el HTML creado en la carpeta WebContent. Aquí, el archivo creado se llama CallCICS-en_US.html.

Nuevamente no deberían presentarse errores. Tal vez necesite limpiar los proyectos generados usando el proceso Project => Clean.

Figura 21. Diálogo que aparece cuando el código está implementado
Diálogo que aparece cuando el código está implementado

f. Modificar el HTML para evitar cambiar el tamaño de iPhone

A esta altura, usted puede publicar y probar el código que se ejecuta en WebSphere Application Server. Si ejecutó la aplicación en un iPhone, descubrirá que la página es muy pequeña. Puede usar la función para cambiar el tamaño de iPhone, pero existe una técnica fácil que puede usar (probablemente haya varias) para rectificar esto, e implica solamente agregar una línea de código al HTML generado:

  1. Haga una copia de su código original para preservarlo antes de efectuar esta modificación. Haga clic con el botón derecho en CallCICS-en_US.html (el archivo HTML generado) en la carpeta LAB3/WebContent, seleccione Rename (Renombrar), y cambie el nombre a CallCICS.html.
  2. Abra el archivo renombrado con su editor HTML e inserte las líneas en negrita que aparecen en el Listado 2 después de las etiquetas de inicio-comentarios <html> y <--.
  3. Guarde el código modificado.
Listado 2. Línea a agregar en el archivo HTML generado
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
                1.0 Transitional//EN" "http://www....
                    <html> <head><meta name="viewport"
                    content="width=320,
                user-scalable=no"></head> <!-- Generated at Fri Jul
                31 14:56:52 EDT 2009 by EGL 1.0.0.v20090608_2230 -->
                <title>CallCICS</title>

g. Implementar y probar el código usando WebSphere Application Server

Asumiendo que usted tiene instalado WebSphere Application Server en Rational Developer o Rational Business Developer, sólo haga clic con el botón derecho en CallCICS.html y seleccione Run As (Ejecutar como) => Run on Server (Ejecutar en Servidor). Seleccione WebSphere Application Server y haga clic en Finish.

Observe que ahora el número de puerto en el cual se está escuchando WebSphere Application Server es distinto al de las pruebas anteriores. Por ejemplo: http://localhost:9081/LAB3/CallCICS.html

Si usted tiene un iPhone con conectividad Wi-Fi en la misma red en donde se está ejecutando el servidor de aplicaciones, puede usar la dirección de IP del servidor de aplicaciones en lugar de localhost, por ejemplo: http://192.168.1.105:9081/LAB3/CallCICS.html. Recuerde que la dirección distingue mayúsculas de minúsculas.

Se visualizará un diálogo con el mensaje: The Google Maps API server rejected your request (El servidor API de Google Maps rechazó su solicitud). Esto podría deberse a que la clave API usada en este sitio estaba registrada para un sitio Web diferente. Este mensaje significa que su servidor no está registrado en el servidor Google como sí lo está nuestro servidor de demostraciones. Ignore el mensaje y haga clic en OK. (Puede investigar en Google Maps las instrucciones para registrar un servidor que use este servicio web.)

La Figura 22 muestra una imagen de un iPhone. Observe que la pantalla se visualiza sin necesidad de cambiar el tamaño de la imagen. ¿Qué bueno esto no?

Figura 22. Imagen tomada de iPhone ejecutando el código Rich UI
Imagen tomada de iPhone ejecutando el código Rich UI

h. Implementar la interfaz Rich UI en WebSphere Application Server

Por último, usted querrá ejecutar su código en un servidor fuera de su entorno de desarrollo. Asumiendo que usted tiene acceso a WebSphere Application Server que se ejecuta fuera de su entorno de desarrollo:

  1. Usando Rational Business Developer o Rational Developer for System z, seleccione File => Export (Exportar) => Java EE => EAR file (Archivo EAR) => Next. Como este ejemplo usa WebSphere Application Server, el diálogo de implementación creó un archivo J2EE™EARfile. Si usted eligió Tomcat, exportará un archivo WAR.
  2. Seleccione el proyecto EAR (LAB3EAR), el destino y haga clic en Finish. Esto creará el archivo EAR llamado LAB3EAR.ear (también suministrado con este artículo).
  3. Cierre todo aquel Rational Developer que esté ejecutando e inicie WebSphere Application Server como administrador.
  4. Desde la consola administrativa de WebSphere Application Server, expanda Applications (Aplicaciones) => Install New Application (Instalar Aplicación Nueva) => Local File System (Sistema de archivos local) y navegue hasta donde exportó el archivo LAB3EAR.ear. Haga clic en Next. La Figura 23 muestra esta secuencia.
  5. Acepte todas las opciones predeterminadas y haga clic en Next. Acepte las opciones predeterminadas nuevamente y haga clic en Next, luego Finish. Se implementará la aplicación y usted debe Save (Guardar) las configuraciones.
  6. Seleccione Enterprise Applications (Aplicaciones empresariales) => LAB3EAR y haga clic en el botón Start (Iniciar). Se iniciará la aplicación y usted ya puede comenzar a probar desde el servidor.
  7. Para ejecutar en un iPhone, señale este servidor y use la dirección HTTP para ejecutar la aplicación iPhone, por ejemplo: http://192.168.1.105:9080/LAB3/CallCICS.html.
Figura 23. Instalación del archivo EAR en WebSphere Application Server V6.1
Instalación del archivo EAR en WebSphere Application Server V6.1

i. Ejecutar el código que se implementa en System z

Direccione su iPhone u otro navegador a la aplicación de demostración en: http://zserveros.demos.ibm.com:9080/iPhone/CICS-en_US.html. Este código también contiene una función de ayuda a la cual puede acceder haciendo clic en el icono en el símbolo de interrogación. Esto le mostrará la topología que está en uso (Figura 24). En este ejemplo, el archivo EAR se implementó en WebSphere Application Server para z/OS V6.1 que se ejecuta en la misma LPAR en la que se estaba ejecutando la aplicación CICS/COBOL.

Figura 24. Invocación de los servicios web CICS desde iPhone
Invocación de los servicios web CICS desde iPhone

Resumen

EGL Rich UI ofrece muchos más beneficios que las implementaciones de niveles inferiores (como JavaScript y Ajax). Entre otras cosas, EGL:

  • Reduce los costos de desarrollo, acelera el tiempo de comercialización y ayuda a brindar soluciones empresariales nuevas y de mejor calidad basadas en Web 2.0, debido a la mayor productividad y simplicidad involucradas.
  • Funciona muy bien con una interfaz de usuario rico (rich user).
  • Requiere una curva de aprendizaje más corta y menores costos de capacitación; los desarrolladores sólo necesitan aprender un lenguaje (EGL) para construir la lógica de negocio back-end y las interfaces de usuario front-end.
  • Soporta múltiples navegadores (escribe una vez, ejecuta en los navegadores más conocidos).
  • Amplía el valor y la duración de la lógica de negocio confiable que reside en System z y en sistemas i habilitando aplicaciones que ejecutan servicios transaccionales en aplicaciones innovadoras que mejoran la experiencia y la productividad del usuario.
  • Integra, sin contratiempos, la información y los procesos de negocios con otras fuentes de información, datos y servicios en toda la empresa o en la Web para asistir mejor a usuarios, clientes y asociados (a través de mashups).
  • Potencia los servicios verticales de la industria basados en SOA suministrados por el proveedor y poderosos servicios gratuitos y pagos (por ejemplo, Google Charts, Google Maps, Xignite, etc.)
  • Disminuye las barreras de conocimientos avanzados y potencia a los tradicionales desarrolladores orientados al negocio brindando soluciones de avanzada, innovadoras y muy valiosas para la empresa.

Acerca de la descarga

Los materiales de descarga incluidos con este artículo contienen el código que usted puede usar para implementar las ideas aquí presentadas. Descargue el archivo iPhone_EGL_Assets.zip a una unidad de disco temporaria en su computadora y descomprímalo. En lugar de construir todas las partes usted mismo, se le suministra el código para la solución completa de este ejemplo para que usted pueda focalizarse en los conceptos que se están describiendo. El archivo de descarga incluye:

  • CICS_Services_Project.zip: Archivo de intercambio de proyectos exportado de Rational Developer for System z que se puede usar para probar el servicio web CICS.
  • CUSTINQ.wsdl: WSDL que invoca el servicio web CICS.
  • iPhoneUI.css: Hoja de estilo en cascada para las aplicaciones Web de iPhone.
  • CallCICS_Incomplete.egl: Código EGL Rich UI que contiene sólo widgets, sin ninguna lógica que invoque el servicio CICS.
  • CallCICS_complete_noServiceMonitor.egl:Código EGL necesario para implementar la invocación de servicios CICS y los widgets de Rich UI.
  • com.ibm.service.monitor.zip: Archivo de Intercambio de proyecto EGL exportado para rastrear y medir el servicio invocado. Usted debe importar este archivo al espacio de trabajo. Para mayor información sobre este monitor de servicios, visite la entrada Groundcontrol to major Tom... del blog EGL Cafe.
  • com.ibm.egl.misc.zip: Código EGL requerido al usar el servicio web de Google Maps.
  • CICS_Services+RichUI_noGoogle .zip: Archivos de Intercambio de proyectos exportados de Rational Developer para probar el servicio web CICS.
  • CICS_Services+RichUI+Google .zip: Archivo de Intercambio de proyectos exportado de Rational Developer que necesita cargar cuando use Google Maps.
  • LAB3EAR.ear: Archivo J2EE EAR para implementar en WebSphere Application Server V6.1 ó 7.0.

Descargar

DescripciónNombretamaño
Code sampleiPhone_EGL_sample.zip9.2 MB

Recursos

Aprender

Comentar

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=463025
ArticleTitle=Hello again, 3270: Acceso a las aplicaciones z/OS con un iPhone
publish-date=08032011