Exemple : création d'un contrôle de bouton jQuery

Cet exemple montre comment utiliser une bibliothèque tierce externe, telle que jQuery, pour implémenter une vue Coach.

1. Ajoutez du code HTML personnalisé à une vue Coach :
   1. Dans la page Disposition, déplacez l'élément Code HTML personnalisé sur la grille.
   2. Dans les propriétés HTML, sélectionnez l'option Texte et fournissez le code HTML personnalisé. Dans cet exemple, vous pouvez utiliser le code suivant pour définir un bouton jQuery :

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

2. Envoyez un fichier compressé (.zip) qui contient les actifs et les feuilles de style de la bibliothèque jQuery et sélectionnez les fichiers à inclure :
   1. Dans la liste des actifs de la bibliothèque, cliquez sur le signe Plus à côté de Fichiers et sélectionnez fichier de serveur dans la liste des composants.
   2. Sélectionnez le fichier compressé des actifs de la bibliothèque jQuery (jQuery.zip pour l'exemple) et cliquez sur Terminer.
   3. Après l'envoi, accédez à l'onglet Comportement de la vue Coach et cliquez sur le signe plus en regard de l'élément Scripts inclus.
   4. Dans la liste des fichiers de serveur, cliquez sur le twistie à côté de jQuery.zip pour afficher le contenu du fichier envoyé.
   5. Sélectionnez un fichier à inclure. Chaque fichier à inclure est sélectionné. Les fichiers .css sont inclus dans un ordre donné. Pour cet exemple, les fichiers suivants sont inclus dans l'ordre de la liste :
      • jquery-1.4.js
      • jquery-ui-1.8.custom.min.js
      • core.css
      • jquery-ui-1.8.custom.css
3. Sous Gestionnaires d'événements, sélectionnez charger et fournissez le script personnalisé. Par exemple, vous pouvez utiliser le script suivant :

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

   Tableau 1. Remarques sur le script

   Elément	Description
   this.context.options._metadata.label.get("value")	Extrait la valeur de libellé des options de configuration.
   this.context.trigger(...)	Déclenche un événement de limite lorsque l'utilisateur clique sur le bouton. Si l'événement de limite est connecté à l'étape suivante dans un diagramme de service utilisateur et que vous cliquez sur le bouton, vous déclenchez une transition (étape suivante).

4. Sauvegardez les modifications.