Creación de Interfaces Humanas usando Coaches

Los Coaches son interfaces de usuario utilizadas para introducir la información requerida para algún servicio. En este artículo se muestra cómo crear un formulario y darle dinamismo en poco tiempo.

Pedro Ernesto Arroyo Reynoso, WebSphere IT Specialist, IBM

Pedro Ernesto Arroyo Reynoso, WebSphere IT Specialist, IBM



05-09-2011

Introducción

Un proceso es la unidad lógica principal en IBM® Business Process Manager. Es el contenedor de todos los componentes de una definición de proceso, incluidos servicios, actividades y puntos de acceso; líneas de secuencia, reglas y variables. Cuando modela un proceso, está creando una definición de proceso de negocio (BPD) reutilizable.

Los componentes de proceso le permiten definir el flujo de trabajo del proceso para usuarios finales, creando la lógica dentro de un proceso y realizando la integración con otras aplicaciones y fuentes de datos.

Al crear servicios humanos normalmente se incluyen coaches, que proporcionan las interfaces para la interacción con los usuarios finales. En la primera etapa del diseño de un coach, el objetivo puede ser visualizar qué datos son necesarios en el coach de ejecución, y dónde se deben visualizar los datos en el diseño. Una vez que haya diseñado el aspecto del coach, deberá proporcionar datos de negocio reales a los controles del coach para que los participantes del proceso interactúen con ellos. Esto requiere la creación de enlaces entre los controles del coach y las estructuras de datos (variables) que representan los datos de negocio de los procesos de IBM® Business Process Manager.

Al crear un servicio humano que incluya uno o más coaches, puede pulsar la pestaña Coaches para acceder al diseñador de coaches. La Figura 1 muestra el diseñador de coaches y cada una de las áreas funcionales:

Figura 1
Figura 1
  1. Muestra todos los coaches en el servicio abierto actualmente.
  2. Muestra el diseño y la implementación del coach seleccionado en la pestaña Diseño. Puede pulsar la pestaña Vista previa para ver cómo los usuarios finales visualizarán el coach cuando se ejecute el servicio.
  3. Utilice los primeros tres iconos para: (1) mostrar el diseño del coach; (2) mostrar el diseño y el código del coach; (3) mostrar sólo el código del coach, respectivamente. Cuando muestra el diseño y el código, el diseño se visualizará en la mitad superior del diálogo y el código se mostrará en la mitad inferior. (Los dos íconos finales se utilizan para el propio servicio; para depurar o ejecutar todo el servicio.)
  4. Lista las secciones, controles y variables que puede incluir en el coach. Arrastre una sección o control de la paleta a la pestaña Diseño para añadirlo al coach. Para crear un control para una variable incluida en el servicio, arrastre una variable de la paleta a la pestaña Diseño. El tipo de control que se cree dependerá de la variable.
  5. Muestra las propiedades del control seleccionado en la pestaña Diseño. Pulse otra opción para configurar otros aspectos del control, como por ejemplo la Presentación y la Visibilidad.

Creación del Coach

A continuación se muestra paso a paso cómo crear un Coach en IBM Process Designer. Para ello utilizaremos un proceso llamado Nota de Crédito. Para efectos de este artículo no modelaremos todo el proceso, sino que usaremos sólo la primera actividad: Llenar Formulario.

Como primer paso crearemos un BPD y lo llamaremos Nota de Credito. De la paleta de elementos BPMN arrastraremos una tarea y la unimos entre los eventos de inicio y fin del proceso.

Figura 2
Figura 2

También crearemos un tipo de dato al que llamaremos Formulario con los siguientes elementos:

NOMBRE TIPO DE DATO
numClienteString
fechaDate
numFacturaString
beneficiarioString
conceptoString
cantidadDecimal
importeDecimal
subtotalDecimal
ivaDecimal
totalDecimal
observacionesString
motivoString

Dentro de la sección Variables creamos una variable privada a la que llamaremos datosFormulario y será del tipo Formulario.

Figura 3
Figura 3

No olvide marcar la casilla que indica los valores por defecto de la variable.

Figura 4
Figura 4

Para crear el Coach, pulse con el botón derecho del ratón para desplegar el menú contextual y elija la opción Activity Wizard.

Figura 5.

A continuación se desplegará una ventana en la que podemos introducir el nombre que daremos a la actividad. Por defecto toma el nombre que le dimos a la tarea: Llenar Formulario

Figura 6
Figura 6

Enseguida se muestra una pantalla con los datos que el servicio humano deberá tomar como datos de entrada y de salida. Cuando el proceso Nota de Crédito se vaya completando, seguramente crearemos más variables. Con esta pantalla podemos decidir qué datos son los que deben pasar al Coach y cuáles no.

Figura 7
Figura 7

Cuando el Activity Wizard se haya completado hay que pulsar en dos ocasiones el botón izquierdo del ratón sobre la actividad en el BPD para desplegar el flujo del servicio humano que acabamos de crear.

Una tarea con implementación de servicio humano dentro del IPD puede contener un flujo de pantallas o Coaches. Así se modela una interacción de varias pantallas para el mismo usuario del proceso. También se pueden incluir llamadas a servicios que validen los datos de entrada o bien para obtener datos de algún repositorio y mostrarlos en la siguiente pantalla.

Figura 8
Figura 8

Para ver el diseño del Coach, pulse en la pestaña Coaches y podrá observar que los datos de la variable Formulario que habíamos creado previamente se muestran junto con controles que permiten la entrada de datos. Esta capacidad acelera dramáticamente la generación de interfaces humanas ya que los formularios son creados automáticamente a partir de los datos de entrada.

Figura 9
Figura 9

Sin realizar ninguna otra actividad podemos probar la apariencia del Coach en un navegador de internet (por ejemplo Internet Explorer, Firefox, etc.) pulsando el ícono de "Play". La vista es como lo muestra la Figura 10.

Figura 10
Figura 10

Haga clic para ampliar la imagen

Figura 10

Figura 10

En la mayoría de los casos el formulario no se utilizará tal y como se crea por defecto, habrá que realizar cambios en el diseño del formulario como eliminar algunos títulos, distribuir los componentes en columnas, agregar funcionalidad en la página (como mostrar/ocultar componentes, llenar campos a partir de la información ingresada en otro, etc). Dichos cambios son muy fáciles de realizar haciendo uso de la vista de Propiedades y de los componentes que están en la paleta de elementos HTML.

A continuación realizaremos algunas de estas modificaciones que cambiaran el aspecto del Coach.

Primero quitaremos el título de la sección Llenar Formulario. Para ello, seleccione la sección en cuestión y en la vista de Propiedades desmarque la casilla que dice "Título Visible:", como se muestra en la Figura 11.

Figura 11
Figura 11

Igualmente, en la vista de Propiedades de la Sección, agregamos una columna y arrastramos los elementos HTML que deseemos a la nueva columna.

Figura 12
Figura 12

Nuevamente en la vista de Propiedades de la Seccion, modificaremos las propiedades de las columnas para que cada una ocupe el 50% del espacio de la ventana en la que se despliega el Coach.

Figura 13
Figura 13

El diseño final del Coach lo podemos revisar pulsando nuevamente el botón "Play" y se despliega una vista como la que muestra la figura 14.

Figura 14
Figura 14

Ahora bien, en un formulario también es deseable poder tener algunos elementos dinámicos que hagan la experiencia de usuario más agradable, como, por ejemplo, auto completar algunos campos que dependen de otros. En este caso queremos que al escribir la cantidad y el importe se calcule automáticamente el subtotal, el impuesto del 16% y el total.

De la paleta de elementos HTML tomaremos el componente Custom HTML y lo arrastraremos arriba de la primera sección (Datos Formulario). En la vista de propiedades escribiremos el siguiente código JavaScritpt.

Figura 15
Figura 15

Es importante hacer notar que los identificadores de los campos pueden variar, así que después de escribir el código, por favor valide que los identificadores correspondan a los campos deseados.

Ahora tenemos que agregar un evento onKeyUp al campo Cantidad y al campo Importe para que una vez que se haya escrito la nueva cantidad se ejecute la función autoCompletar(). Esto lo hacemos desde la sección Propiedades de cada campo.

Figura 16
Figura 16

Hemos finalizado nuestro Coach, ahora lo ejecutamos y observaremos que nuestro formulario cuenta con una interfaz apropiada para ingresar información y que tiene dinamismo en algunos de sus elementos.

Figura 17
Figura 17

Conclusión

Con IBM Process Designer puede crear formularios y flujos de pantallas de manera ágil utilizando los Coaches, esto permite disminuir el tiempo en el diseño y desarrollo de prototipos así como habilitar a usuarios menos técnicos para crear poderosas interfases de usuario.

Referencias

http://publib.boulder.ibm.com/infocenter/dmndhelp/v7r5mx/topic/com.ibm.wbpm.wle.editor.doc/modeling/topic/building_coaches.html

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=755769
ArticleTitle=Creación de Interfaces Humanas usando Coaches
publish-date=09052011