Crear Widgets

<< Clic para mostrar Tabla de Contenidos >>

Navegación:  Bizagi Studio > Asistente de Procesos > Definir Formas > Extender o personalizar las formas >

Crear Widgets

Introducción

Bizagi ofrece un amplio conjunto de controles (nativos) para ser incluidos en sus formas de Actividades (interfaces de usuario).

Este conjunto de controles son los mas comúnmente usados y requeridos por cualquier Proceso, como por ejemplo: el control de carga de archivos, miniaturas de imágenes, listas desplegables, botones de selección, diferentes tipos de campos de inserción, entre otros.

 

En proyectos que se requiera una interfaz gráfica personalizada y controles más sofisticados, Bizagi presenta la posibilidad de crear Widgets, como se describe en Personalizar la interfaz de usuario.

 

A través de los Widgets en Bizagi, usted podrá extender sus formas del proceso con cualquier opción interactiva (e.g, invocación de servicios REST, crear gráficos e ilustraciones específicas, videos embebidos, frames o botones personalizados, funcionalidades, etc).

Esta sección presenta una guía técnica de cómo crear sus propios Widgets.

 

Perfil requerido

Para crear Widgets de Bizagi, usted necesita tener el siguiente perfil:

 

1. Habilidades de programación de lenguajes.

Se requiere conocimiento específico sobre:

Javascript y HTML (preferiblemente HTML 5).

CSS (preferiblemente CSS 3).

Ser experimentado en jQuery (incluye jQuery UI).

Para mayor información sobre jQuery, consulte http://jquery.com/.

 

2. Entender notación JSON.

Si no se encuentra familiarizado con los archivos JSON pero ha trabajado con archivos XML, puede consultar los sitios web de conceptos básicos de JSON cuando se convierte información de XML a JSON o viceversa (e.g http://www.freeformatter.com/json-to-xml-converter.html).

 

3. Estar familiarizado con las opciones de consola y depuración provistas por los navegadores.

Es probable que necesite depurar y hacer trazas de los Widgets mientras los crea y los prueba.

Para esto, recomendamos usar Google Chrome como navegador y usar la opción de Herramientas de desarrollo (normalmente, lanzada desde la tecla F12).

 

Importante

Aunque se requiere cumplir con el perfil previamente mencionado para crear Widgets (recuerde tener conocimiento acerca de las habilidades de programación web), no se necesita ningún framework específico para construir los Widgets (e.g usted puede crear Widgets incluso directamente sobre notepad).

 

En otras palabras, los Widgets son creados por fuera de Bizagi Studio y no están atados a alguna plataforma específica debido a que se basan en tecnologías web (jQuery, HTML, CSS, JSON).

El concepto detrás de un Widget es definir y desarrollar controles que cuentan con una estructura específica (diseñado para ser visible en cualquier dispositivo) de manera que son basados en modelos. Esto significa que tienen ciertos parámetros, los cuales permiten ser configurados y adjuntados a cualquier proceso o escenario de negocio en general.

Para crear Widgets, Bizagi Ltd provee un recurso en línea llamado el Editor de Widgets.

 

El Editor de Widgets

El Editor de Widgets es un servicio provisto por Bizagi Ltd que le permitirá crear sus propios Widgets de manera asistida.

Para utilizar el Editor de Widgets, utilice simplemente un navegador para aprovechar al máximo las siguientes funcionalidades:

 

Crear Widgets que están listos para ejecución, a partir de una plantilla.

Tener validaciones automáticas de la sintaxis del código.

Similar sus procesos en tiempo de ejecución, para todos los dispositivos (PCs, tabletas y teléfonos móviles).

Contar con opciones amigables y poderosas para acelerar y asistir la implementación del código, como por ejemplo: la posibilidad de incluir librerías en su Widget, previsualizar imágenes e íconos usados en él, usar la funcionalidad de IntelliSense para el uso del API de Bizagi, y generar el archivo del Widget final.

Mantener su propio espacio de trabajo de Widgets (un workspace) en el mismo navegador, al tener la lista de Widgets trabajados recientemente y tener este progreso guardado por el navegador (aunque, de igual manera se recomienda descargar el Widget localmente).

 

Widgets_Overview

 

Para mayor información sobre las funcionalidades del Editor de Widgets y la interfaz de usuario explicada, consulte Interfaz de usuario del editor de Widgets.