Introducción
Para crear un Widget, considere que su implementación varía significativamente de acuerdo con su objetivo y su comportamiento esperado.
Crear Widgets se realiza por medio del Widget Editor como se describe en Crear Widgets.
Qué considerar de antemano
Los siguientes aspectos y preguntas deben cubrirse antes de iniciar a crear un Widget:
1. Comportamiento editable y no editable
Un Widget debe comportarse de manera diferente cuando se usa como de solo lectura y cuando no. De acuerdo a esto, considere:
•¿Cómo se debe mostrar Widget cuando es editable y qué se le debe permitir hacer a un usuario sobre este?
•¿Cómo se debe mostrar un Widget exactamente cuando es de solo lectura? ¿Qué ventajas traería su implementación a modo de lectura en comparación con un control nativo de Bizagi?
Tenga en cuenta que es posible que no necesariamente desee implementar el Widget tanto editable como solo de lectura. El potencial de algunos Widgets podría estar enfocado exclusivamente en capturar información (p.e. un Widget de cámara web) mientras que para otros, su potencial podría estar en mostrar información (p.e, un Widget de gráficos).
2. Dispositivos y Navegadores
Gracias a las poderosas capacidades de diseño en Bizagi, cualquier Widget es capaz de ser mostrado en cualquier dispositivo.
Sin embargo, debe preguntarse antes, dependiendo de las limitaciones y funcionalidad de cada dispositivo/navegador, si lo que desea implementar es viable o si aporta valor. Considere:
•¿El Widget estará disponible cuando se acceda desde todos los dispositivos (escritorio, tableta, celular), o solo desde uno específico?
•Cuando esté disponible desde todos los dispositivos, ¿habrá cambios significativos en el ancho o en la apariencia del Widget? Por ejemplo, cuando se muestra en celulares, el ancho debe ser óptimo.
•¿El Widget estará disponible cuando se acceda desde todos los navegadores y sus versiones? Si es así, tenga en cuenta que las funciones/APIs que use, necesitan ser soportadas en estas posibilidades.
Tenga en cuenta que es posible también que algunos Widgets tengan más sentido para algunos dispositivos que otros (p.e, una cámara web que es útil para capturar fotos). Debido a que los móviles y tabletas usualmente ya ofrecen una cámara integrada para este fin, tal Widget es de utilidad principalmente cuando se usa desde computadoras PC.
3. Plugins y librerías o servicios adicionales
Un Widget puede usar plugins de jQuery o sus propias librerías o servicios (incluyendo servicios de la nube). Para ello considere:
•¿Está planeando reutilizar algún plugin o librería en específico?
•¿El Widget se apoyará en otra librería o servicio externo?
Tenga en cuenta que para los servicios, usted tendrá que saber si necesita conexión a Internet o cualquier otra consideración especial de acceso (llaves, tokens, credenciales en general).
•¿Requiere una versión específica de jQuery?
Si necesita una versión específica de jQuery diferente a la que está integrada con Bizagi, necesitará utilizar y entender el uso de namespaces para funciones de jQuery y asegurarse de que puede incluir jQuery en las librerías sin generar conflictos.
4. Parámetros y XPath configurables
Un Widget necesita parámetros de manera que pueda ser reutilizable en diferentes procesos, e igualmente reutilizable a lo largo de diferentes puntos de un mismo proceso.
También, es factible que utilice una o más definiciones XPath configurables, de tal manera que pueda usar los datos de negocio de cualquier proceso.
Considere lo siguiente:
•¿Cuáles parámetros necesitará el Widget?
•¿Cuáles propiedades deben ser configurables en diseño y cuáles no?
•¿El Widget necesitará un parámetro de XPath de Bizagi específico (sea para traer o guardar información en el modelo de datos)? Si es así, Necesitará más de 1 XPath de Bizagi?
Tenga en cuenta que una colección representa 1 XPath en Bizagi, pero implica un tratamiento diferente que los XPaths "simples" (p.ej, string, entero, etc).
Si necesita información específica de su proyecto, se puede usar una regla de negocio como una propiedad.
5. Contexto y consideraciones especiales
Cuando se crean Widgets en Bizagi, se tendrá diferencias importantes en su definición, dependiendo de dos posibles contextos: cuando se utiliza dentro de una tabla o no.
Los Widgets que se utilizan dentro de una tabla se conocen como Widgets a nivel de columna (column Widget) e implican una mayor complejidad que aquellos utilizados por fuera de una tabla (es decir, ubicados sobre la forma principal).
Considere lo siguiente:
•¿Existen consideraciones especiales para su uso?
Las consideraciones especiales pueden implicar el hecho de que desee que su Widget extienda la funcionalidad de un control ya provisto por Bizagi.
Por ejemplo, para los Widgets que manipulan información de registros de una colección (adicionar, editar, o eliminarlos), esto puede significar que además del Widget, usted necesite incluir en la misma forma al control de tabla de Bizagi también.
•¿Se planea que el Widget se muestre dentro de una tabla o por fuera?
En caso de que necesite cubrir ambos escenarios, usted necesitará 2 Widgets diferentes aunque podrá reutilizar la mayoría del código.
|
Antes de comenzar a crear Widgets, es muy importante cerciorarse de que el código HTML y de jQuery que quiere incluir en el Widget, funciona adecuadamente. Esto significa que de manera separada de Bizagi, usted deberá ya contar con una página demo.html donde se presente lo que desea hacer funcionando por sí solo. |
Pasos sugeridos a alto nivel
Ya al momento de crear un Widget desde el Widget Editor, considere los siguientes pasos sugeridos.
Note que como una guía general, la idea es que empiece poco a poco e implemente funcionalidades en su Widget de forma incremental.
1. Defina su Widget como un control en su forma o que sea dentro de una tabla
Este primer paso es obligatorio y se pregunta cuando se crea el Widget.
2. Incluya los plugins o librerías de jQuery necesarias, si aplica
Haga esto primero para asegurarse de que en este punto, los plugins no generan conflictos.
Usted debe ser capaz de simular la plantilla por defecto del Widget habiendo incluido los plugins JS.
Usted puede incluir también CSS para asegurarse de que no esta agregando estilos CSS que afectan elementos generales de la interfaz gráfica (no se afecta <body>, todos los <p> etc).
3. Defina la propiedades básicas que utilizará su Widget
Define las propiedades básicas como XPath y aquellas que considere estrictamente necesarias.
Asegúrese de simular su Widget periódicamentepara asegurarse de que todo está bien.
4. Implemente la apariencia (look and feel) para un escenario más simple
La mayoría de las veces, el escenario más simple es en el que se muestra el Widget como de solo lectura (si aplica).
Para implementar este escenario, simplemente asegúrese de que su Widget dibuja apropiadamente el HTML dentro de la función getReadOnlyControl().
5. Implemente el comportamiento
Implemente la función renderComplex() para lanzar el comportamiento de su Widget de forma que en realidad haga lo que está diseñado para hacer.
Asegúrese de que puede simularlo.
Mientras se asegura que todo funciona bien, considere agregar escenarios a los datos de simulación para cubrir más de una combinación de acuerdo a su configuración.
En este punto, usted puede seguir con la implementación de la apariencia (look and feel) para otro escenario si aplica (más probablemente, getEditableControl()).
6. Ajuste e incluya mejoras adicionales
En este punto, usted puede incluir propiedades adicionales para una mayor personalización o posibilidades de configuración.
Se insta a que divida el código de forma que pueda implementar separadamente, lo que hace el Widget y lo que va a ser previsualizado en el diseñador de formas (debería ser más simple que en tiempo de ejecución).
También, puede mejorar los estilos y los íconos y finalmente, replicar los cambios a tabletas y celulares si esto está planeado en el alcance de su Widget.
Last Updated 1/26/2022 3:49:40 PM