Ejemplo: creación de un control de botón Dojo

Este ejemplo muestra cómo puede utilizar la biblioteca Dojo para implementar una vista de coach.

1. Añadir código HTML personalizado a una vista de coach:
   1. En la página Diseño, arrastre el elemento HTML personalizado Advanced en el lienzo.
   2. En el HTML de propiedades, seleccione la opción Texto y, a continuación, proporcione su código HTML personalizado. Para este ejemplo, puede utilizar el código siguiente para definir un control de botón:

      <input type="button" class="dojobutton" name="dbtnName" value="default"></input>

2. Configure el manejador de sucesos load con un script personalizado:
   1. Registre el módulo y alias del botón Dojo que la vista de coach cargará dinámicamente.
      1. En la pestaña Comportamiento, seleccione Dependencias AMD.
      2. Pulse Añadir y especifique la información siguiente:
         • En la columna ID de módulo, escriba dijit/form/Button. Esto declara una dependencia en el módulo del botón dijit.
         • En la columna Alias, escriba Button. Este es el nombre de alias utilizado en el código para hacer referencia al botón dijit.
   2. En Manejadores de sucesos, seleccione load y después proporcione el script personalizado. Para este ejemplo, puede utilizar el script siguiente:

      var buttonNode = this.context.element.querySelector("input");
      var _this = this;
      
      var button = new Button({
      label: this.context.options._metadata.label.get("value"),
      onClick: function() {
      _this.context.trigger(function() { console.log("dojo button boundary event handled");})
      }
      }, buttonNode); 

      Tabla 1. Notas acerca del script

      Item	Descripción
      this.context.options._metadata.label.get("value")	Recupera el valor de la etiqueta de las opciones de configuración.
      this.context.trigger(...)	Desencadena un suceso límite cuando se pulsa el botón. Si el suceso límite está conectado al paso siguiente en un diagrama de servicio humano de herencia, al pulsar el botón se desencadena una transición (al paso siguiente).

3. Guarde los cambios.