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

Este ejemplo muestra cómo puede utilizar una tercera biblioteca externa, como por ejemplo jQuery, al crear 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 botón jQuery:

      <input type="button" class="Jquerybutton" name="jbtnName" value="default"></input>

2. Suba un archivo comprimido (.zip) que contenga los activos y las hojas de estilo de la biblioteca jQuery y, a continuación, seleccione los archivos individuales para incluir:
   1. De la lista de activos de la biblioteca, pulse el signo más junto a Archivos y seleccione Archivo de servidor de la lista de componentes.
   2. Seleccione el archivo de activos de la biblioteca jQuery (jQuery.zip para este ejemplo) y, a continuación, pulse Finalizar.
   3. Después de que la subida este completa, vaya a la pestaña Comportamiento de la vista de coach y pulse el signo más situado junto a Scripts incluidos.
   4. En la lista de archivos de servidor, pulse el triángulo junto a jQuery.zip para ver el contenido del archivo subido.
   5. Seleccione un archivo para incluir. Cada archivo para incluir se selecciona de forma individual. Los archivos .css se incluyen en un orden específico. Para este ejemplo, los archivos siguientes está incluidos en el orden en que se han listado:
      • jquery-1.4.js
      • jquery-ui-1.8.custom.min.js
      • core.css
      • jquery-ui-1.8.custom.css
3. En Manejadores de sucesos, seleccione load y después proporcione el script personalizado. Para este ejemplo, puede utilizar el script siguiente:

   var _this = this;
   $('.Jquerybutton', this.context.element).button(
   {label: this.context.options._metadata.label.get("value")}).bind('click', function() {
   _this.context.trigger(function() { console.log("jQuery button boundary event handled");})
   }); 

   Tabla 1. Notas acerca del script

   Elemento	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 de usuario, al pulsar el botón se desencadena una transición (al paso siguiente).

4. Pulse Guardar o Finalizar edición.