Animation d’interface utilisateur

Les programmeurs écrivent des interfaces utilisateur depuis déjà une vingtaine d’années et cependant il n’y a pas de façon commune de pratiquer selon qu’on utilise Html/Javascript, Visual Basic, OpenGL, Tcl-Tk, C et Motif sur Unix, C et MFC sur Windows ou Java ... et bien d’autres langages.

On présente ici les concepts, communs à tous ces langages pour définir les traitements qu’un utilisateur déclenche par l’intermédiaire de l’interface. La réalisation des concepts diffère suivant que le langage est interprété ou compilé, et suivant l’environnement graphique mis à la disposition du programmeur.

Le programmeur désire associer le bouton-poussoir, l’événement ‘clic’, le traitement qui enregistre une nouvelle identité (dans un fichier, une base de données ...) et les données (ici les deux champs chNom et chPrénom, afin d’y récupérer l’identité à enregistrer); nous les appelons données-programmeur.

Quelques mots sur l’animation

L’animation d’une interface utilisateur se fait grâce aux éléments suivants :

• des objets d’interface utilisateur (OI), comme par exemple les fenêtres, les étiquettes, les champs et zones de saisie, les boutons (bouton poussoir, bouton radio, case à cocher), les listes (simples ou déroulantes), les menus et items de menus, les temporisations ... et des éléments permettant la structuration et l’agencement géométrique de ces objets (panneaux, géomètres ...).
• des événements déclenchés par l’utilisateur et gérés par les routines de l’environnement graphique. Exemples d’événement: appuyer sur un bouton de la souris, déplacer la souris, relâcher une touche du clavier, changer la taille d’une fenêtre, être en fin de temporisation ...
• des traitements en réponse à ces événements, soit prédéfinis dans les routines de l’environnement graphique, soit définis par le programmeur ; nous appelons réflexe un tel traitement.
• des données accessibles par ces réflexes , comme par exemple l’objet graphique concerné par l’événement appelé source, les coordonnées de la souris dans la fenêtre lors d’un ‘clic’ , ou la valeur d’un champ rempli par l’utilisateur que le traitement doit utiliser (voir ci-dessus chNom, chPrénom). Ces exemples montrent qu’il y a deux sortes de données:
• celles propres aux routines de l’environnement graphique (l’objet graphique source de l’événement et par exemple les coordonnées de la souris, le bouton utilisé, la touche du clavier sollicitée ...)
• les données-programmeur qui peuvent être n’importe quoi ...

Intervention de l’environnement graphique

L’environnement graphique mis à la disposition du programmeur intervient pendant deux phases distinctes: d’une part quand le programmeur écrit ses instructions, d’autre part quand l’interface programmée s’exécute.

Pendant la première phase, cet environnement graphique fournit au programmeur:

• des OI prédéfinis, et éventuellement des outils pour en construire de nouveaux
• un mécanisme d’association OI-EV-RFX-D entre un objet d’interface, un événement déclencheur, un réflexe et les données accessibles au réflexe; cette association existe dans tous les langages cités mais sa réalisation diffère grandement suivant le langage.
  Exemples
  • En C et Motif dans l'instruction:
        XtAddCallback(btn, XmNactivateCallback, reflexe, donPrg);
    l'objet d'interface OI est: btn
    l'évènement EV est symbolisé par XmNactivateCallback
    le réflexe RFX est le pointeur sur fonction reflexe
    les données D sont fournies par donProg
  • En Java dans l'instruction:
        btn.addActionListener(objReflexe)
    l'objet d'interface OI est: btn
    l'évènement EV est traduit par ActionListener
    le réflexe RFX et les données D, sont fournis par l'objet objRefldexe, dont la classe doit contenir la méthode 'actionPerformed' et dont les champs représentent D.
  • En Visual Basic dans la déclaration:
        Private Sub text1_KeyPress(toucheAscii As Integer)
    l'objet d'interface OI est: txt1
    l'évènement EV est symbolisé par KeyPress
    le réflexe RFX est le texte de cette procédure text1_KeyPress
    les données D sont définies par une ou des variables de portée globale.

Pendant la deuxième phase les routines de l’environnement graphique animent les OI prédéfinis (édition de champ de saisie, apparence d’un bouton enfoncé/relaché, changement de couleur d’un texte quand la souris passe dessus ...) et appellent les réflexes définis par le programmeur en leur communiquant les données pertinentes pour le traitement. C’est pour cela que les réflexes ont un prototype défini par l’environnement graphique. Les réflexes sont appelés par les routines de l'environnement et non par une instruction du programmeur.

Il faut noter que les données de l’environnement graphique accessibles au réflexe sont souvent un paramètre prévu dans le prototype imposé du réflexe. Ces données comprennent des informations sur l’événement (position de la souris, caractère frappé au clavier ...) et l’objet graphique source de l’événement.

Par contre les données-programmeur sont rarement prises en compte par l’environnement graphique. Cependant on trouve

• en C et Motif un champ appelé ‘UserData’ dans tout objet graphique, pour que le programmeur y place ses données;
• en Java l’association entre l’objet graphique et un objet d’une classe définie par le programmeur, où il peut stocker toute information à utiliser dans le réflexe.

Dans tous les langages, le réflexe peut accéder à des informations globales, comme n’importe quel sous-programme du langage; cette possibilité d’accès aux variables globales est fortement déconseillée car cela rend la maintenance de programme difficile; cependant il est courant qu’un ouvrage déconseille l’usage d’informations globales dans son premier chapitre, et oublie cet adage dans le chapitre ‘interface utilisateur’.

Réalisation suivant les langages

Voyons quelques façons de réaliser l’association OI-EV-RFX-D, suivant le langage.

• En C et Motif, l’association OI-EV-RFX-D entre l’objet graphique, l’événement, le réflexe et les données programmeurs se fait par appel du sous-programme XtAddCallback, qui reçoit en paramètre l'objet graphique, l'événement déclencheur, le réflexe (adresse de fonction) et les données-programmeur.

        void reflexe(Widget btn, XtPointer donProg, XmPushButtonCallbackStruct *pevt) { ... } 
  
  
        Widget  btn = XmCreatePushButton(fenetre, "Valider", NULL, 0);
  
        donPrg = ...;
  
        XtAddCallback(btn, XmNactivateCallback, reflexe, donPrg);
  

   

• En java , comme un sous-programme ne peut pas être utilisé en argument d’une méthode, on utilise une classe qui implante alors une méthode (spécifique à l'événement déclencheur) correspondant au réflexe voulu, en ajoutant dans cette classe les données-programmeur. On crée ensuite au moins un objet de cette classe.

  Puis l’association entre objet graphique et réflexe est faite par une méthode (spécifique à l’événement attendu) de l'objet graphique; par exemple pour un objet de classe Button, addActionListener permet l'association entre le bouton et l'objet 'réflexe' créé.

     Classe CReflexe implements ActionListener {
        Donnees  donProg;
        CReflexe(Donnees  d) { donProg=d; }
        void actionPerformed( ActionEvent  evt} { ... }
        }
  
     donnéesProgrammeur = ... 
     CReflexe  objReflexe = new CReflexe ( donnéesProgrammeur);
     Button btn = new Button(‘ENREGISTRER’);
     btn.addActionListener(objReflexe) ;
  

  Il exisite d’autres possibilités de programmation où la classe CReflexe paraît absente ou incomplète.

  • Appelons CFenetre la classe représentant une fenêtre et tous ses composants, avec en particulier un objet graphique auquel nous devons associer une méthode ‘réflexe’ et des données. La classe CReflexe n'est pas mentionnée si on définit méthode ‘reflexe’ et données dans la classe CFenetre.
    Ce n’est pas souhaitable pour une fenêtre contenant beaucoup d’objets graphiques et leur réflexe.

  • On peut aussi définir CReflexe comme une classe interne à CFenetre, et mettre les données-programmeur dans CFenetre (et non pas CReflexe); de part l’accessibilité d’information depuis une classe interne la méthode-réflexe y aura accès
    On est dans la situation de données accessibles de façon globale, ce qui va à l’encontre d’une programmation objet bien conçue.

  • La simplification extrême consiste à définir CReflexe comme une classe anonyme, interne à CFenetre, contenant le seul traitement-réflexe, qui accède aux données-programmeur par la portée globale de ces données.

  Ces possibilités de programmation peuvent être utilisées dans les cas simples où il n’y a pas de données-programmeur. Par exemple si on désire terminer l'application par un bouton, sans demander confirmation à l'utilisateur, le traitement-réflexe n'utilise aucune information
  C'est admissible pour un exercice mais cela l'est moins si votre application doit conserver des résultats, car alors la moindre des choses est de prévenir l'utilisateur s'il n'a rien enregistré; cela sous-entend qu'avant de fermer il faut disposer de l'information: 'des résultats ont-ils été conservés'.

   

• En Visual Basic, une fois l'objet graphique créé, l'association est faite en définissant le réflexe comme un sous-programme dont le nom est imposé, car composé du nom de l'objet graphique (voir text1 ci-dessous) et de celui de l'événement déclencheur (voir KeyPress ci-dessous). L'accès au données-programmeur se fait en forçant ces données à avoir une portée globale dans la feuille, afin qu'elles soient accessibles dans le sous-programme.

     Private  Sub  text1_KeyPress(toucheAscii As Integer)
         Select Case KeyAscii
            ...
         End Select
     End Sub
  

   

• En Html/Javascript , on utilise une propriété de l'objet graphique, spécifique à l'événement déclencheur; cette propriété reçoit, sous forme chaîne de caractères, l'instruction à exécuter. L'accès aux données-programmeur se fait en utilisant un paramètre lors de l’appel (il existe aussi la notion de portée globale dans la page qu’il vaut mieux éviter d’utiliser).

  Exemple 1, voir propriété onClick:

    <form>
      nom : <textarea name="nom" rows=3 cols=55> Exemple </textarea>
      <input type="button" value="exécution" onClick="jexecute(this.form)">
    </form>
  
  

  Exemple 2, voir propriétés onMouseOver, onMouseOut:

    <a  href="javascript:alert('On clique ...')"
          onMouseOver="document.images.main.src='../u/lettres/main1.gif'"
          onMouseOut="document.images.main.src='../u/lettres/main.gif'">
       <img name="main" src="../u/lettres/main.gif" align="bottom"
                  border="0" alt="main.gif">
    </a>
  
  

http://cpcug.org/user/clemenzi/technical/Languages/   chercher ‘Basic Windows GUI Tasks’
http://msdn.microsoft.com/library/default.asp
http://www.cs.cf.ac.uk/Dave/X_lecture/node5.html
http://www.cppfrance.com/rechcodesndx.aspx