Bouton, prompt, affichage¶

Objectif : lire et analyser les éléments de base d’une interface interactive.

1 – récupérer le .jsx de travail¶

Télécharger exemple-bouton-et-prompt.jsx (à placer dans le dossier Scripts ou Scripts/ScriptUI)

2 – récupérer la référence de la fenêtre ou la créer¶

// on récupère la référence à la palette (ou on en créé une)
var fenetre = (this instanceof Panel) ? this : new Window( 'palette', 'script', undefined, { resizeable: true });

Note

var fenetre = : on créé une variable à laquelle on associe l’identificateur fenetre.
(this instanceof Panel) : cette expression teste si l’objet associé au mot-clé this est une instance de la classe Panel. Si ça n’est pas le cas, c’est probablement parce qu’il faut créer une fenêtre (un objet Panel).
x ? y : z : cet expression est un opérateur ternaire : si x est vrai, alors on renvoie y, sinon on renvoie z.
this : si this est une instance de Panel, alors on a déjà notre panneau, que l’on associe à l’identificateur fenetre.
new Window(…) : si this n’est pas une instance de Panel, alors on doit créer notre fenêtre via new Window(…) et l’associer à l’identificateur fenetre.

3 – définir la position de notre bouton dans la fenêtre¶

// limites = [ ← gauche, ↑ haut, → droite, ↓ bas ]
var limites_bouton = [ 5, 5, 105, 25 ];

Note

On donne les coordonnées des différents coins du rectangle qui va accueillir notre bouton, à partir du coin en haut à gauche. Ici notre rectangle fait 100px de large et 20 de haut. Il démarre en haut à gauche à 5px du haut et du côté gauche.

4 – définir les différents éléments de texte¶

// texte à afficher sur le bouton
var texte_bouton = 'cliquez-moi !';

// texte à afficher à l'utilisateur
var question_prompt = 'Dis-moi quelque chose ou clique sur annuler !';

// texte par défaut du prompt
var texte_par_defaut_prompt = 'quelque chose';

Note

Ces différentes variables nous permettent simplement de regrouper les différents textes à un seul endroit. C’est parfaitement optionnel.

5 – créer notre bouton¶

// création du bouton et ajout à notre fenêtre
var bouton_valider = fenetre.add( 'button', limites_bouton, texte_bouton );

Note

On créé notre bouton avec fenetre.add(). Pour rappel, on a associé plus haut l’identificateur fenetre à notre fenêtre. On utilise la méthode add( type, limites, texte) pour lui ajouter un bouton. Et on garde une référence de notre bouton associée à l’identificateur bouton_valider.

6 – ajouter de l’interactivité¶

bouton_valider.onClick = function () {
   /* ce que l'on souhaite faire au clic */
};

Note

Lorsqu’un bouton est cliqué, la fonction associée à la propriété onClick est appelée.

On va donc définir une fonction que l’on va associer à la propriété onClick de notre bouton.

7 – récupérer de l’information utilisateur¶

var entree_utilisateur = prompt ( question_prompt, texte_par_defaut_prompt );

Note

Ici, nous utilisons la fonction prompt pour afficher une interface comportant un titre, un champs de réponse, un bouton annuler et un bouton ok.

La fonction renvoie null si l’utilisateur appuie sur annuler, la valeur du champs texte s’il appuie sur OK.

on va créé une variable qu’on appelera ici entree_utilisateur pour stocker ce résultat.

8 – afficher le résultat¶

alert( entree_utilisateur );

Note

La fonction alert() permet d’afficher un popup affichant les données données en paramètre. Ici, le résultat du prompt.