Modificar Widgets

<< Click to Display Table of Contents >>

Navigation:  Bizagi Studio > Asistente de Procesos > Definir Formas > Extender o personalizar la interfaz de usuario (Widgets) > Crear Widgets > Pasos necesarios para crear Widgets >

Modificar Widgets

Introducción

Bizagi Ltd ofrece el servicio de Editor de Widgets que le permite crear sus propios Widgets de manera asistida.

Este mismo editor de Widgets 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:

 

LineChartHighcharts

 

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:

 

AreaChartHighcharts

 

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:

 

AreaChartFiddle

 

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 tablet y smatphone.

 

 

¡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:

 

 

LineChartDownload

 

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:

 

LineChartOpen

 

2. Arrastre y suelte el archivo .bwg del Widget LineChart2D en las opciones de Abrir:

 

OpenFromDragND

 

note_pin

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):

 

WidgetRename01

 

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):

 

WidgetRename03

 

El contenido modificado debe verse así:

 

WidgetRename05

 

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:

 

WidgetRename07

 

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):

 

WidgetRename02

 

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):

 

WidgetRename04

 

Después de haber editado estos archivos, abra el archivo userfielddescriptor.json para editar los nombres para mostrar y las etiquetas similares:

 

WidgetRename06

 

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.

 

WidgetImpl02

 

 

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:

 

WidgetImpl00

 

No se usará un gráfico de tipo line y se usarán los siguientes parámetros:

 

AreaChartFiddleCode

 

haga lo cambios mencionados (para incluir zoomType, elimine el line-type del gráfico y maneje otros parámetros):

 

WidgetImpl03

 

Lo mas importante es la definición del parámetro area en plotOptions, así como en los datos de series:

 

WidgetImpl01

 

note_pin

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).

 

WidgetImpl04

 

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"

 

WidgetSimulation00

 

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:

 

 

WidgetSimulation01

 

note_pin

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:

 

WidgetSimulation02

 

 

Dé clic en el botón Ejecutar para inicial la simulación y verifique su resultado:

 

    WidgetSimulation03

 

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):

 

WidgetReplacefiles01

 

 

Y después, cree los archivos nuevos y nómbrelos de igual forma: AreaChart2D.js (tanto tableta como celular):

 

WidgetReplacefiles04

 

 

Copie el contenido completo de desktop\AreaChart2D.js en los nuevos archivos (tanto tableta como celular):

 

WidgetReplacefiles05

 

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.
 

WidgetReplacefiles03

 

note_pin

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",

WidgetReplacefiles06

 

 

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.

 

WidgetExecution01

 

Asegúrese de nombrar o renombrar el archivo de manera acorde para evitar confusiones:

 

WidgetExecution02

 

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:

 

WidgetExecution03

 

Una vez registrado en su proyecto, usted puede incluirlo en sus formas del proceso directamente desde la categoría Charts:

 

WidgetExecution04

 

Asegúrese de configurar sus propiedades acordemente:

 

WidgetExecution05

 

En ejecución, muestre los datos que haya configurado en la tabla de la colección:

 

WidgetExecution06