De

<keywords content="keywords"> activex, directx, userfields, campos de usuario, campo de usuario, script, componente, user controls, control de usuario, control activo, active control, active controls, active x, periférico, periferico, dispositivo, dispositivo periférico, dispositivo periferico, integración de dispositivos, integracion de dispositivos, webcam, web cam, scanner, escaner, escáner, impresora, signpad, cámara, camara digital, cámara digital, huella dactilar, lector, COM, objetos COM, objeto COM, com object, dactilar, objeto HTML </keywords>

Cómo embeber una aplicación en Bizagi

Introducción

En este artículo se explica cómo embeber una aplicación dentro de un proceso de Bizagi, de manera que se presente gráficamente.

A través de este enfoque, los usuarios finales podrán utilizar la aplicación desde su navegador en cualquier actividad del proceso.

Como se enseña en la imagen a continuación, la interfaz de usuario (forma) de un actividad, tienen embebida una aplicación personalizada:

En este ejemplo se muestra un botón para realizar cierta acción ("Do Something"), desde un control de usuario de una aplicación.

Nótese que en Bizagi, se puede también incluir aplicaciones para realizar cierto procesamiento automático desde las reglas de negocio. Por ejemplo, se podría incluir una aplicación para crear PDFs o archivos binarios, leer contenido de plantillas de excel, etc.

La inclusión de aplicaciones para el procesamiento en reglas de negocio se maneja a través de la Librería de Componentes. Si desea ver mayor información acerca de esta posibilidad para incluir aplicaciones pero para su invocación desde reglas de negocio, diríjase al artículo de funcionalidad de Librería de Componentes.

Lo que debe hacer en Bizagi

Para poder embeber una aplicación dentro de las actividades del proceso, primero debe haberse creado la aplicación como un objeto embebible (por ejemplo, un assembly de librería de clase, una apicación swf de flash, un applet, etc). Esta aplicación deberá incluir los métodos que se requieran para ejecutar su lógica o manejo. Por ejemplo, puede incluir métodos para hacer uso de los APIs que controlan dispositivos periféricos (en caso de que se desee integrar algún periférico con Bizagi, tales cómo cámaras web, scanner, dispositivos para firmar, lector de huellas digitales, etc), o incluso para manejar firmas digitalizadas.

Una vez que se cuente con la aplicación, se debe crear un campo de usuario en Bizagi para poderla embeber e instanciar a través de su GUID (identificador único). Un campo de usuario (userfield) es un tipo de campo en Bizagi que puede contener cualquier código HTML, según como se desee personalizar.

A través de un campo de usuario, se embebe la aplicación como un objeto HTML y se exponen sus elementos de interfaz de usuario para que los usuarios finales puedan activar sus métodos (principalmente a través de botones).

Una vez que el objeto HTML ha sido embebido en la forma del proceso, en tiempo de ejecución, los botones del campo de usuario invocarán los métodos de la aplicación a través de funciones en java script. De esta forma, es importante mencionar que estos métodos serán ejecutados del lado del cliente en la solución. El resultado o la información manejada internamente por la aplicación (por ejemplo, la captura de una imagen), pueden ser enviados de vuelta al servidor en un elemento tipo "input" (HTML) desde la función de script.

Resumiendo lo anterior, se logra lo mencionado con los siguientes pasos:

1. Embebiendo la aplicación como un objeto HTML.

2. Creando los controles HTML para manejar los métodos de la aplicación.

3. Creando las funciones de script para manejar los métodos de la aplicación.

4. Incluyendo el campo de usuario en la forma.

Si desea ver un ejemplo sencillo sobre cómo extender las formas en Bizagi, sobre cómo embeber otra página web dentro de la misma forma, puede dirigirse al ejemplo Cómo Embeber un Mapa de Google en Bizagi.

Ejemplo

En el siguiente ejemplo, describiremos cómo embeber una aplicación dentro del proceso de "Solicitud de Licencia de Conducción" (Driver license request) en Bizagi.

En nuestro proceso, incluiremos una aplicación de ejemplo dentro de la actividad "Registrar información básica" (Register basic information):

En dicha actividad, capturaremos información desde un dispositivo periférico y lo almacenaremos en un atributo en Bizagi.

Antes de comenzar

El primer paso consiste en tener la aplicación disponible y conocer su GUID, métodos y propiedades.

Recuerde que esta apicación puede incluir todos los APIs necesarios para manejar un dispositivo periférico específico.

Para este ejemplo, la aplicación empleada es un Active X que expone un control de usuario. El concepto principal detrás de este tipo de aplicaciones es que se define una clase de tipo interfaz, para que sus métodos y atributos sean publicados (public). De esta forma, la instanciación de los mismos se realiza del lado del cliente en la solución (empleando HTML y código script).

Para ver información más detallada y guías sobre cómo desarrollar aplicaciones Activex en .Net, puede referirse a los siguientes enlaces (en inglés): www.dreamincode.net/forums/topic/38890-activex-with-c%23, www.c-sharpcorner.com/UploadFile/dsandor/ActiveXInNet11102005040748AM/ActiveXInNet.aspx.

Incluyendo el assembly en la ruta web

En este ejemplo se embeberá un assembly de librería de clase, que es compilado como una dll.

Para realizar esto, copie el assembly en una ruta de la carpeta donde se encuentra la aplicación web (en un proyecto Bizagi, se puede colocar en "C:\BizAgi\[edicion_bizagi]\Projects\[nombre_proyecto]\WebApplication\").

Tenga en cuenta que esta dll corresponde a un assembly personalizado que se incluye manualmente en un proyecto Bizagi, y por lo tanto, Bizagi no le hará deployment automáticamente a los otros ambientes (no se incluye dentro del paquete de despliegue generado por Bizagi automáticamente).

Esto no sucede cuando un assembly se incluye a través de la Librería de Componentes (que es para un tipo de integración de aplicaciones diferente al que se presenta en este artículo).

En este ejemplo, el assembly de salida es MyClassLibrary1.dll. El namespace de la aplicación es MyClassLibrary1.dll, y la clase de control de usuario es MyControl.cs.

Embebiendo la aplicación como un objeto HTML

Una vez que tengamos el assembly de nuestro ActiveX, podemos crear el campo de usuario en Bizagi que permita embeber este la aplicación través del elemento HTML <Object>.

Para hacer esto, hacer clic en la opción de Campos de Usuario (userfields) en el Menú Herramientas (Tools) y añadir un nuevo campo de usuario:

Asegurarse de marcar los tipos de atributos posibles que puede utilizar este campo de usuario. En este caso, queremos que sea el atributo que almacenará el resultado de la información capturada. Luego se procede con la edición del código:

Nótese que se está embebiendo la aplicación como un objeto HTML al incluir la referencia al assembly ActiveX (como una ruta web, de acuerdo a lo realizado en la sección anterior):

El código para esto es:

FieldResponse.AppendHTML("<object id='h_UserControlVar' name='h_UserControlVar' classid='../../MyClassLibrary1.dll#MyClassLibrary1.myControl' width='300' height='300' ></object>");

Tenga en cuenta que se empleó una ruta relativa para la ubicación física del archivo. Dado que la ruta por defecto de los campos de usuario de Bizagi es "C:\BizAgi\[bizagi_edition]\Projects\[su_proyecto]\WebApplication\App\ListaDetalle\", hemos incluído el prefijo "../../" para llegar a la ruta "C:\BizAgi\[bizagi_edition]\Projects\[su_proyecto]\WebApplication\" (que es donde se encuentra ubicado el dll).

Adicionalmente, se ha identificado el objeto como "h_UserControlVar", de forma que se pueda instanciar por su id en una función de scripting (se requiere que el nombre comience por "h_" para que sea tratado como un input escondido de tipo "hidden").

Creando los controles HTML para manejar los métodos de la aplicación

Ahora necesitamos definir los botones para manejar (e invocar) los métodos desde la aplicación.

Se incluye un render oculto (llamado "[mi_Entidad_de_Proceso]__[mi_Atributo]") para almacenar de vuelta en Bizagi la información capturada.

El código añadido es:

FieldResponse.AppendHTML("<object id='h_UserControlVar' name='h_UserControlVar' classid='../../MyClassLibrary1.dll#MyClassLibrary1.myControl' width='300' height='300' ></object>");
FieldResponse.AppendHTML("<input type='button' value='Capture' onClick='DoCapture()' />");
FieldResponse.AppendHTML("<input type='button' value='Reset' onClick='DoReset()' />");
FieldResponse.AppendHTML("<input Type='hidden' name='DriverLicenseRequest__S1' value=''>");

Los dos botones ejecutarán las funciones DoCapture() and DoReset() respectivamente.

Creando las funciones de script para manejar los métodos de la aplicación

De acuerdo al paso anterior, se procede a definir las funciones de DoCapture() y DoReset().

Para hacer esto, incluimos las definiciones de las funciones (javascript) en el mismo campo de usuario:

El código a continuación quedaría así (ejemplo para 'DoCapture()'):

FieldResponse.AppendHTML("<object id='h_UserControlVar' name='h_UserControlVar' classid='../../MyClassLibrary1.dll#MyClassLibrary1.myControl' width='300' height='300' ></object>");
FieldResponse.AppendHTML("<input type='button' value='Capture' onClick='DoCapture()' />");
FieldResponse.AppendHTML("<input Type='hidden' name='DriverLicenseRequest__S1' value=''>");

FieldResponse.AppendHTML("<script language='JavaScript'>");
FieldResponse.AppendHTML("function DoCapture() {");
FieldResponse.AppendHTML("var UserControlObject = document.getElementById('h_UserControlVar');");
FieldResponse.AppendHTML("var myBizagiField = document.getElementById('DriverLicenseRequest__S1');");
FieldResponse.AppendHTML("myBizagiField.value = UserControlObject.SampleMethod();");

FieldResponse.AppendHTML("}");
FieldResponse.AppendHTML("</script>");

Se almacenan estos cambios. Con lo anterior hemos terminado la creación del campo de usuario.

Incluyendo el campo de usuario en la forma

Finalmente, incluimos el campo de usuario en la forma de la actividad de Registro.

Para hacer esto, seleccionar el tercer paso del asistente de procesos (definir formas) y hacer clic en la actividad "Registro de información básica" (Register basic information).
En el diseñador de formas, incluir en esta forma el campo que almacenará la información. Convertir este campo a tipo "campo de usuario" (seleccionando el campo de usuario creado previamente):

Guardar la forma y proceder a ejecutar el proceso en el portal de trabajo de Bizagi.

Resultado

Para ejecutar el proceso, se puede acceder al paso 7 del asistente de procesos (correr proceso) o dar clic directamente sobre el ícono de "Ejecutar" del acceso rápido:

Creamos un caso nuevo del proceso de "Solicitud de licencia de conducción" (Driver License Request) y entramos a la actividad de "Registrar información básica" (Register basic information).

Los métodos Active X serán invocados al momento de hacer clic en el botón correspondiente:

En este punto ya se puede apreciar la aplicación embebida en una actividad de nuestro proceso en Bizagi!

Artículos Relacionados

• Campos de Usuario en Bizagi

<comments />