Esempio: creazione di un controllo pulsante jQuery

Questo esempio mostra come sia possibile utilizzare una libreria esterna di terze parti, come jQuery,, durante la creazione di una vista.

1. Aggiungere codice HTML personalizzato ad una vista:
   1. Nella pagina Layout, aggiungere l'elemento HTML personalizzato Avanzato all'area.
   2. Nelle proprietà HTML , selezionare l'opzione Testo e fornire il codice HTML personalizzato.
      Per questo esempio, è possibile utilizzare il seguente codice per definire un pulsante jQuery :

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

2. Caricare un file compresso (.zip) contenente le risorse della libreria jQuery e i fogli di stile, quindi selezionare i singoli file da includere:
   1. Dall'elenco delle risorse della libreria, selezionare il segno più accanto a File e selezionare File server dall'elenco dei componenti.
   2. Selezionare il file di risorse della libreria jQuery compresso (jQuery.zip per questo esempio) e fare quindi clic su Fine.
   3. Una volta completato il caricamento, passare alla pagina Comportamento della vista e fare clic sul segno più accanto a Script inclusi.
   4. Nell'elenco dei file server, fare clic sul simbolo accanto a jQuery.zip per visualizzare il contenuto del file caricato.
   5. Selezionare un file da includere.
      Ogni file da includere viene selezionato singolarmente. I file .css sono inclusi in un ordine specifico. Per questo esempio, i seguenti file sono inclusi nell'ordine in cui sono elencati:

      • jquery-1.4.js
      • jquery-ui-1.8.custom.min.js
      • core.css
      • jquery-ui-1.8.custom.css
3. Nella pagina Comportamento , sotto Gestori eventi, selezionare carica e fornire lo script personalizzato.
   Per questo esempio, è possibile utilizzare il seguente script:

   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");})
   }); 

   Tabella 1. Note sullo script

   Elemento	Descrizione
   this.context.options._metadata.label.get("value")	Richiama il valore dell'etichetta dalle opzioni di configurazione.
   this.context.trigger(...)	Attiva un evento limite quando si fa clic sul pulsante. Se l'evento di limite è collegato al passo successivo in un diagramma del servizio umano, facendo clic sul pulsante si attiva una transizione (al passo successivo).

4. Fare clic su Salva o su Termina modifica.