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 <../../_static/scriptUI/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
****************************************************

.. code-block:: javascript

   // 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
*******************************************************

.. code-block:: javascript

   // 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
********************************************

.. code-block:: javascript

   // 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
**********************

.. code-block:: javascript

   // 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é
******************************

.. code-block:: javascript

   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
******************************************

.. code-block:: javascript

   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
************************

.. code-block:: javascript

   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.