Introducción
Bizagi Ltd ofrece el servicio de Widget Editor que le permite crear sus propios Widgets de manera asistida.
Este mismo Widget Editor le permite modificar Widgets existentes y producir uno nuevo que se ajuste a los requerimientos específicos.
Para más información sobre los Widgets y qué se necesita para crearlos o modificarlos, consulte Crear Widgets.
A través del ejemplo que se ilustra a continuación y los pasos guiados, usted podrá producir un Widget nuevo realizando modificaciones a uno ya existente.
Para entender mejor los pasos que se llevan a cabo, se recomienda que ya esté familiarizado con los Widgets y su estructura.
Ejemplo
En este ejemplo crearemos un Widget de gráficos de área, partiendo desde el Widget de gráficos de línea disponible en Widget Xchange.
El Widget de gráfico de linea es util para presentar una serie de datos en una línea, usando la librería HighCharts como se muestra en highcharts.com:
El Widget de gráfico de área que queremos crear parte desde una implementación existente también provista por la librería HighCharts y explicada en highcharts.com:
Para crear una vista de un gráfico de área, necesitaremos hacer unos pequeños ajustes ya que como se ve en el demo online, la librería y la estructura general del Widget permanecerá similar, mientras que los parámetros específicos de este tipo de gráfico van a cambiar:
La mayoría de los ajustes del Widget serán enfocados en:
•Mantener el nombre y los archivos internos del Widget.
•Modificar los parámetros usados para mostrar la gráfica para cambiar la implementación actual.
•Cambiar el archivo icon.png usado como vista preliminar cuando use el Widget en el Diseñador de Formas.
•Cambios adicionales para simular el Widget y propagar estos cambios para la implementación en tableta y celular.
¡Manos a la obra!
Primero, acceda al Widget Xchange en http://www.bizagi.com/widgetstore para descargar el Widget Line Chart 2D.
Revise los detalles y los términos para descargarlo y guardarlo en una ruta de su elección:
Después, ingrese al editor de Widgets en http://www.bizagi.com/widget-editor e ingrese usando su cuenta de bizagi.com.
Una vez allí, siga estos pasos:
1. Use la opción Abrir para cargar el Widget LineChart2D descargado:
2. Arrastre y suelte el archivo .bwg del Widget LineChart2D en las opciones de Abrir:
|
Desde esta acción, el Widget cargará su estructura de archivos y sus propiedades. Cuando cargue el Widget, se usará un GUID autogenerado para reemplazar el original del archivo .bwg original, por lo tanto, no será necesario modificar GUIDs. |
3. Cambie el nombre del Widget en sus propiedades internas.
•Para hacer esto, primero dé doble clic en la carpeta principal del Widget y utilice la opción Renombrar (para este ejemplo, nómbrelo como Area Chart 2D):
•Renombre también el archivo de definición de propiedades (.JSON) y asegúrese de cambiar los nombres para mostrar y las etiquetas de localización dentro de él (básicamente, reemplazaremos las ocurrencias de Line por la palabra Area):
El contenido modificado debe verse así:
En el mismo archivo, edite las propiedades metavalue y designvalue del Widget para la ejecución.
Esto se hace especificando AreaChart2D para la propiedad control:
•De igual manera, renombre el archivo de implementación y los otros archivos respectivamente usando el mismo nombre(AreaChart2D).
Podemos hacer esto inicialmente para la implementación de escritorio (desktop) y dejar para después el reemplazo de los archivos de implementación para tabletas y celulares, de tal forma que podamos reemplazar el archivo completo (una manera fácil de hacerlo):
•Después de renombrar el archivo, asegúrese de considerar la definición en la primera línea del archivo de implementación, de tal forma que use AreaChart2D (de lo contrario, no se ejecutará el Widget):
Después de haber editado estos archivos, abra el archivo userfielddescriptor.json para editar los nombres para mostrar y las etiquetas similares:
4. Edite el código de implementación para cambiar el gráfico de línea a un gráfico de área.
Como una buena práctica, empiece editando la implementación para los dispositivos de escritorio (editando el archivo desktop\AreaChart2D.js).
Una vez que esté seguro de que funciona como se espera, los cambios serán propagados a los otros dispositivos.
Para editar el código, tenga en cuenta que no se necesitan estrictamente cambios en las funciones principales que muestran el Widget, piense que es una buena práctica cambiar el nombre de las clases CSS involucradas en su Widget de tal forma que puede usar configuraciones para cambiar la apariencia evitando conflictos con el Widget de Gráfico de Línea original.
•Reemplace la parte de W010LC por otro sufijo, por ejemplo: W011AC.
•Después, localice la función plotLines la cual tiene la lógica que muestra el gráfico usando la librería Highcharts.
Tenga en cuenta que estos parámetros necesitan ser configurados de acuerdo a lo que se va a mostrar en el gráfico:
No se usará un gráfico de tipo line y se usarán los siguientes parámetros:
•haga lo cambios mencionados (para incluir zoomType, elimine el line-type del gráfico y maneje otros parámetros):
Lo mas importante es la definición del parámetro area en plotOptions, así como en los datos de series:
|
La función plotLines modificada, debe tener este código:
plotLines: function (YTitle, chartContainer, chartTitle, chartSubtitle, valuesArray, namesArray, vlines, separatorS, localwidth){ oChart = new Highcharts.Chart({ chart: { renderTo: chartContainer, plotBackgroundColor: "#EEEEEE", width: localwidth, zoomType: 'x' }, title: { text: chartTitle, style: { fontWeight: 'bold', fontFamily: 'Segoe', fontSize: 16 } }, subtitle: { text: chartSubtitle, style: { fontFamily: 'Segoe', fontSize: 12 } }, xAxis: { categories: namesArray, title: { text: null }, labels: { staggerLines: vlines } }, yAxis: { title: { text: YTitle } }, tooltip: { formatter: function() { return '<b>'+ this.x +'</b>: '+ (this.y).toString().replace(/\B(?=(\d{3})+(?!\d))/g, separatorS); } }, plotOptions: { area: { marker: { radius: 1 }, lineWidth: 1, states: { hover: { lineWidth: 1 } }, threshold: null } }, legend: { enabled: false }, credits: { enabled: false }, exporting: { buttons: { exportButton: { enabled:false } } }, series: [ { type: 'area', name: 'Values', data: valuesArray//[973, 914, 4054, 732, 34] } ] }); } |
•Asegúrese de editar los archivos .CSS (edite los archivos desktop\W010styles.css, tablet\W010styles.css y smartphone\W010styles.css) de tal forma que se usen los nombres de clases apropiados como se editaron anteriormente (use el prefijo W011AC en vez de W010LC).
5. Edite el archivo simulationData.json que define los valores tomados por la simulación del Widget.
Esto le permite probar su Widget antes de propagar los cambios a las implementaciones de tableta y celular.
•Asegúrese de especificar
control: "AreaChart2D"
•También puede incluir una información dummy adicional para que el gráfico muestre más información.
Adicione registros repitiendo las ocurrencias de este código: {"id": 200, "value": 1,603]} (asegurándose de separarlos por comas), donde puede usar cualquier id y cualquier conjunto de valores, preferiblemente que los pares de valores tengan una secuencia y que el valor actual sea un punto en el gráfico:
|
Puede usar los siguientes datos dummys para probar su gráfico: "chartData": [ {"id": 201,"value": [ 1, 603]}, {"id": 201,"value": [ 2, 508]}, {"id": 202,"value": [ 3, 551]}, {"id": 203,"value": [ 4, 410]}, {"id": 204,"value": [ 5, 601]}, {"id": 205,"value": [ 6, 453]}, {"id": 206,"value": [ 7, 702]}, {"id": 207,"value": [ 8, 551]}, {"id": 208,"value": [ 9, 775]}, {"id": 209,"value": [ 10, 615]}, {"id": 210,"value": [ 11, 615]}, {"id": 211,"value": [ 12, 726]} ], |
•Usted podrá editar la etiquetas aleatorias asignadas por defectos para los atributos de tipo string o cualquier otro parámetro configurable del Widget:
•Dé clic en el botón Ejecutar para inicial la simulación y verifique su resultado:
6. Propague los cambios de la implementación de escritorio a los otros dispositivos.
La forma más fácil de hacerlo es copiando el contenido completo del archivo dekstop\AreaChart2D.js.
En el siguiente ejemplo, ilustraremos estro eliminando los archivos anteriores (tanto tableta como celular):
Y después, cree los archivos nuevos y nómbrelos de igual forma: AreaChart2D.js (tanto tableta como celular):
Copie el contenido completo de desktop\AreaChart2D.js en los nuevos archivos (tanto tableta como celular):
Por último y de manera opcional, puede cambiar el ícono icon.png que está siendo usado para mostrar el control en el Diseñador de Formas de Bizagi Studio.
La forma más fácil de hacerlo es arrastrando y soltando el nuevo archivo y asegurándose de borrar el antiguo icon.png y renombrar el nuevo con este mismo nombre.
|
Si cambia el ícono de mostrar, asegúrese de editar la siguiente línea en el archivo userfielddescriptor.json que especifica la ubicación del archivo de vista en miniatura. Edite directamente el elemento hdpi con: "small": "icon.png", |
7. Descargue y produzca el archivo final .bwg del Widget.
Para esto, dé clic en el botón Descargar para guardar el Widget de manera local.
Asegúrese de nombrar o renombrar el archivo de manera acorde para evitar confusiones:
Ahora incluya el Widget que ha sido producido, usted puede incluirlo en su proyecto y compártalo con los miembros de su equipo de proyecto.
Para incluirlo en el Studio, use las opciones de administración de Widgets de Bizagi Studio:
Una vez registrado en su proyecto, usted puede incluirlo en sus formas del proceso directamente desde la categoría Charts:
Asegúrese de configurar sus propiedades acordemente:
En ejecución, muestre los datos que haya configurado en la tabla de la colección:
Last Updated 1/25/2023 11:13:39 AM