Ejemplo: Creación de una vista de coach de barra de progreso AngularJS personalizada

Este ejemplo muestra cómo utilizar las funciones del ayudante AngularJS (coachViewHelper) que se proporciona en el kit de herramientas de coaches de respuesta para crear una vista de barra de progreso personalizada.

1. Cree el archivo HTML para el control. Por ejemplo, para crear un control Barra de progreso, cree un archivo llamado progressBar.html que contenga el siguiente código:

   <div class="textLabel ng-cloak" ng-show="showLabel()">
   	<label id="progress-label-{{viewid}}" class="text control-label" 
   		ng-class="'bpm-label-'+textSize" dir="{{textDirection}}" ng-bind="label"></label>
   </div>
   <div id="progressBar-{{viewid}}" class="ng-cloak" role="progressbar" aria-valuenow="{{bindingValue}}" aria-valuemin="{{minValue}}" aria-valuemax="{{maxValue}}">
   	<meter id="progressBar-progress-{{viewid}}" ng-disabled="disabled"
   		aria-labelledby="progress-label-{{viewid}}" value="{{bindingValue}}" min="{{minValue}}" max="{{maxValue}}" style="width:100%" >
   	</meter>
   </div>

   En el ejemplo, el valor de bindingValue proviene del objeto de negocio al que el usuario enlaza el control. Los atributos maxValue y minValue son opciones de configuración que se definen más adelante en el procedimiento.
2. Cargue el archivo HTML en el kit de herramientas creando un archivo web y seleccionando el archivo HTML.
3. Cree dos versiones del archivo JavaScript del controlador. La primera versión es para fines de depuración y está en un formato legible. La segunda versión es para el tiempo de ejecución y está comprimida para obtener un mejor rendimiento.
   1. Cree la versión de depuración del archivo de controlador y añádale código JavaScript que realiza lo siguiente:
      • Cargue el módulo responsive.coaches necesario
      • Cree un scope.watchOption para cada opción de configuración de la que el control debe hacer un seguimiento
      Por ejemplo, cree un archivo denominado progressBar.controller.js y añádale el código siguiente:

      angular
      	.module("responsive.coaches")
      	.controller("progressBar", ["$scope", "$element", "$timeout","Coach", function 
      		($scope, $element, $timeout, Coach)
      	{
      		"use strict";
      		angular.extend($scope, new Coach($scope, $element, $timeout));
      		$scope.watchOption("maxValue", 100);
      		$scope.watchOption("minValue", 0);
      }]);

   2. Cree la versión de depuración del controlador colocando el archivo JavaScript de controlador que acaba de crear en una carpeta denominada scripts. Empaquete la carpeta scripts en un nuevo archivo comprimido. Por ejemplo, cree un nuevo archivo .zip denominado customControls.debug.zip y añádale el archivo scripts/progressBar.controller.js.
   3. Para crear la versión de no depuración del controlador, minimice el contenido del archivo de controlador en un archivo JavaScript comprimido. Por ejemplo, puede utilizar una herramienta como https://developers.google.com/closure/compiler/ para minimizar el contenido de progressBar.controller.js en un archivo denominado progressBar.controller.min.js. Pegar el contenido de progressBar.controller.js en http://closure-compiler.appspot.com genera el código siguiente:

      angular.module("responsive.coaches").controller("progressBar",["$scope","$element","$timeout","Coach",function(a,b,c,d){angular.extend(a,new
          d(a,b,c));a.watchOption("maxValue",100);a.watchOption("minValue",0)}]);

   4. Coloque el archivo JavaScript minimizado en una carpeta scripts. Empaquete la carpeta scripts en un archivo comprimido. Por ejemplo, empaquete scripts/progressBar.controller.min.js en el archivo customControls.min.zip.
   5. Cargue los archivos comprimidos customControls.debug.zip y customControls.min.zip en el kit de herramientas como archivos web.
4. Para obtener una vista previa de la vista de coach en el editor de coach, cree un archivo JavaScript de vista previa y añádale código que cargue el módulo coachViewHelper, el cual carga la biblioteca AngularJS y todas las dependencias necesarias. coachViewHelper también carga el archivo JavaScript del controlador para la vista de coach progressBar y llama a la función wysiwyg.bootstrap para que compile y cargue el controlador. Observe que coachViewHelper se carga a partir del kit de herramientas de coaches de respuesta (SYSRC) y el controlador se carga a partir del kit de herramientas de la vista de coach (MYTK). Por ejemplo, cree un archivo denominado progressBar.preview.js y añádale el siguiente código:

   var mixObject = {
   	createPreview: function(containingDiv, labelText, callback) {
   		var _this = this; 
   		_this.context.previewDiv = containingDiv;
   		window.com_ibm_bpm_coach = this.context;
   		var helperPath = this.context.getManagedAssetUrl('coachview.helper.min.zip', com_ibm_bpm_coach.assetType_WEB, 'SYSRC', false, "/scripts/coachViewHelper.js");
   		require({async: false}, [helperPath], function(coachViewHelper) {
   		if (coachViewHelper.wysiwyg) {
   			coachViewHelper.loadResource('customControls.debug.zip', 'MYTK', '/scripts/progressBar.controller.js');
   			coachViewHelper.loadResources();
   			coachViewHelper.wysiwyg.bootstrap(_this.context, containingDiv, callback, "responsive.coaches", "progressBar", {Explorer: 9});
   	}
   		else {
   			setTimeout(function() {
   		require({async: false}, [helperPath], function(coachViewHelper) {
   			coachViewHelper.loadResource('customControls.debug.zip', 'MYTK', '/scripts/progressBar.controller.js');
   			coachViewHelper.loadResources();
   			coachViewHelper.wysiwyg.bootstrap(_this.context, containingDiv, callback, "responsive.coaches", "progressBar", {Explorer: 9});
   		});
   	}, 250);
   	}
   		});
   
   	},
   
   	propertyChanged: function(propertyName, propertyValue) {
   		var _this = this;
   		var helperPath = this.context.getManagedAssetUrl('coachview.helper.min.zip', com_ibm_bpm_coach.assetType_WEB, 'SYSRC', false, "/scripts/coachViewHelper.js");
   		require({async: false}, [helperPath], function(coachViewHelper) {
   			coachViewHelper.wysiwyg.propertyChanged(propertyName, propertyValue, _this.context);
   		});
   	},
   
   	destroyPreview: function() {
   		var _this = this;
   		var helperPath = this.context.getManagedAssetUrl('coachview.helper.min.zip', com_ibm_bpm_coach.assetType_WEB, 'SYSRC', false, "/scripts/coachViewHelper.js");
   		require({async: false}, [helperPath], function(coachViewHelper) {
   			coachViewHelper.wysiwyg.destroyPreview(_this.context.previewDiv);
   		});
   	}
   };

5. Cargue el archivo de vista previa al kit de herramientas creando un Archivo web y seleccionando el archivo progressBar.preview.js.
6. Cargue los archivos de imagen para el control creando un Archivo web para cada archivo de imagen y seleccionando los archivos de imagen. Por ejemplo, cargue los archivos progressBar_palette.PNG y progressBar_preview.jpeg.
   progressBar_palette.png
   progressBar_preview.jpeg

   La siguiente captura de pantalla muestra los archivos que se crean y cargan en el kit de herramientas para el control de Barra de progreso:

   

7. Cree el control como una vista de coach.
   1. Cree una vista de Coach. Por ejemplo, cree la vista de coach Barra de progreso.
   2. En la página Visión general de la vista de coach, defina las propiedades siguientes.
      • En la sección Vista previa, establezca el Icono de paleta y la Imagen de diseño en los archivos de imagen apropiados que ha cargado como archivos web.
      • En la sección Vista previa avanzada, establezca el Archivo JS de ayuda en el archivo JavaScript de vista previa que ha cargado.
      • Establezca el Archivo de fragmento de código HTML en el archivo HTML que ha cargado.
      Por ejemplo, la barra de progreso tiene los valores siguientes en su página Visión general:

      Propiedad	Valor
      Icono de paleta	progressBar_palette.png
      Imagen de diseño	progressBar_preview.jpeg
      Archivo JS de ayuda	progressBar.preview.js
      Archivo de fragmento de código HTML	progressBar.html

      La siguiente captura de pantalla muestra el aspecto de la página Visión general para el control Barra de progreso de ejemplo:
      
   3. Para proporcionar la ubicación de las funciones auxiliares de la vista de coach, en el área JavaScript en línea, pegue el código siguiente, incluidos los comentarios:

      /*
      @dojoConfigUpdateStart
      dojoConfig.packages.push({
      name: 'com.ibm.bpm.coach.angular',
      location: com_ibm_bpm_coach.getManagedAssetUrl('coachview.helper.min.zip',
      com_ibm_bpm_coach.assetType_WEB, 'SYSRC')
      });
      @dojoConfigUpdateEnd
      */

   4. Añada la siguiente dependencia AMD a la vista de coach Barra de progreso:

      Tabla 1.

      ID de módulo	Alias
      com.ibm.bpm.coach.angular/scripts/coachViewHelper	coachViewHelper

   5. Añada el código necesario a los manejadores de sucesos adecuados. Normalmente, el código que pone en el manejador de sucesos de carga es parecido al código que pone en el archivo progressBar.preview.js. En concreto, utilice el módulo coachViewHelper para cargar los recursos (tales como el archivo de controlador) desde el kit de herramienta y luego invoque la función bootstrap para compilar y cargar la vista de coach. Verifique que el acrónimo del kit de herramientas es correcto (en este caso, MYTK) y que el nombre de controlador coincide con el nombre contenido en el archivo de controlador (en este caso, progressBar). Por ejemplo, seleccione el manejador de sucesos load y añádale el código siguiente:

      coachViewHelper.loadResource('customControls.debug.zip', 'MYTK', '/scripts/progressBar.controller.js');
      coachViewHelper.bootstrap(this, "responsive.coaches",  "progressBar", {Explorer: 9});

      Seleccione el manejador de sucesos view y añádale el siguiente código para inicializar la vista de coach:

      coachViewHelper.init();

      Seleccione el manejador de sucesos change y añádale el siguiente código para notificar a Angular que necesita volver a resumir el módulo:

      coachViewHelper.notify(this, event);

   6. En la página Variables, añada el tipo de enlace para el control y las opciones de configuración. Por ejemplo, para la vista de coach Barra de progreso, añada value(Integer) como datos de negocio y maxValue(Integer) y minValue(Integer) como opciones de configuración.
   7. En la página Diseño, añada dos elementos HTML personalizados al lienzo:
      • Defina la propiedad HTML del primer elemento HTML personalizado a Archivo gestionado y, a continuación, seleccione el archivo HTML del control. Por ejemplo, defina la propiedad HTML en progressBar.html para el control de barra de progreso.
      • Defina la propiedad HTML del segundo elemento HTML personalizado en Archivo gestionado y, a continuación, seleccione validationAlert.html en el kit de herramientas (SYSRC) de coaches de respuesta.
8. Pulse Guardar o Finalizar edición.