Gestion des évènements

Demander un devis
Je souhaite télécharger le programme ou imprimer le programme
  • Imprimer
tutoriel_vers_formation_Flex

Les interactions entre l'utilisateur et l'application déclenchent des évènements, qui permettent ainsi à l'application de réagir en fonction des actions de l'utilisateur.

Un évènement peut être généré par un clic sur la souris ou l'appui d'une touche sur le clavier, par exemple. Mais des évènements sont également déclenchés par des composants de l'application elle-même, pour signaler qu'ils ont fini de s'initialiser, par exemple.

 

On distingue deux types d'évènements:

  • les évènements utilisateur sont le résultat de l'interaction de l'utilisateur avec l'application, dont notamment :
    • change : lorsque la valeur d'un composant est modifiée (sélection d'une ligne dans une liste déroulante par exemple),
    • click : lors d'un clic sur un bouton,
    • mouseOver : lorsque l'utilisateur positionne le curseur de la souris sur un composant particulier ;
  • les évènements système surviennent durant l'exécution de code ActionScript. Tout composant MXML propage, entre autres, les évènements système suivants:
    • creationComplete : diffusé une fois le composant implanté et dessiné s’il s’agit d’un objet graphique,
    • initialize : diffusé après initialisation complète des propriétés de l’objet (y compris les objets fils),
    • show : diffusé au changement d’état invisible / visible d’un objet.

 

 

Pour répondre à un évènement en MXML, il faut associer au type d'évènement une portion de code MXML ou ActionScript, comme nous l'avions fait précédemment dans le chapitre Variables et méthodes :

 
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="700" minHeight="400">
 
<![CDATA[
                  import mx.controls.Alert;
                  public function test():void {
                        Alert.show("Ceci est un exemple de boite d'alerte");
                  }
            ]]>
 
 
 

Dans ce programme, la propriété click à la ligne 14 permet d'appeler la méthode test() lorsque l'utilisateur cliquera sur le bouton.

La méthode permettant de traiter un évènement s'appelle gestionnaire d'évènement, ou event handler.

 

 

Propriétés d'un évènement

 

Tout évènement hérite de la classe flash.events.Event et peut être fourni au gestionnaire d'évènement associé au composant qui déclenche l'évènement.
L’objet de type Event qui est envoyé à la fonction gestionnaire est référencé par le nom de variable « event » dans du code inline :

Notez que cet objet event n'est pas un objet que nous avons déclaré, mais qui est instancié automatiquement

 

Comme tout objet, un event possède un certain nombre de propriétés, dont :

  • type (String), qui indique la classe précise de l'Event (clic sur un bouton, par exemple);
  • target (Object), qui indique l'objet qui a déclencé l'évènement (un bouton en particulier).
Ainsi, le code suivant affichera les informations de l'illustration ci-dessous :

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    
      xmlns:s="library://ns.adobe.com/flex/spark"
    
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="700" minHeight="400">
    
 
    
            <![CDATA[
                  import mx.controls.Alert;
 
                  public function test(event:Event):void {
                        Alert.show("type : " + event.type + "\n" +
                             "target : " + event.target.toString() + "\n",
                             "Propriétés de l'évènement");
                  }
            ]]>
    
 
    
 
    
 
    

 

evenements

 

 

Gestionnaire d'évènements en ActionScript

 

Pour ajouter un gestionnaire d'évènements, nous avons vu qu'un attribut pouvait être ajouté au composant MXML :

Il existe une autre technique, utilisant le langage ActionScript, qui consiste à appeler la méthode addEventListener(), disponible pour tout composant MXML. Cette méthode doit prendre deux paramètres:

  1. le type de l'évènement concerné,
  2. le nom du gestionnaire d'évènement

Ainsi, le code suivant utilisant les attributs MXML :

    
 
    
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
        
       xmlns:s="library://ns.adobe.com/flex/spark"
        
       xmlns:mx="library://ns.adobe.com/flex/mx"
        
       >
        
 
        
            <![CDATA[
                  import mx.controls.Alert;
                  // Event handler du bouton
                  public function buttonHandler(event:Event):void {   
                        Alert.show("Méthode buttonHandler");
                  }
            ]]>
        
 
        
 
        
 
        

 

est équivalent à celui-ci :

        
 
        
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
            
      xmlns:s="library://ns.adobe.com/flex/spark"
            
      xmlns:mx="library://ns.adobe.com/flex/mx"
            
      initialize="initializeHandler(event)"
            
      >
            
 
            
            <![CDATA[
                  import mx.controls.Alert;
 
                  // Handler de l'initialisation de l'application
                  public function initializeHandler(event:Event):void {
                        // Création d'un event listener pour le composant "bouton"
                        bouton.addEventListener(MouseEvent.CLICK, buttonHandler);
                  }
 
                  // Event handler du bouton
                  public function buttonHandler(event:Event):void {   
                        Alert.show("Méthode buttonHandler");
                  }
            ]]>
 
 
 

 

Dans ce deuxième code, nous avons un gestionnaire d'évènements nommé initializeHandler (ligne 12), déclenché à l'initialisation de l'application (ligne 5), dans lequel est créé un gestionnaire d'évènements pour le composant nommé "bouton".

La méthode buttonHandler est alors liée (ligne 14) à un évènement de type clic sur le composant "bouton".

Notez également que le composant MXML en lui-même ne nécessite plus d'attribut pour gérer l'évènement (ligne 24).

 

Cette deuxième technique permet une plus grande maintenabilité, du fait de la séparation entre la présentation (composant MXML) et le traitement des évènements (méthodes ActionScript), et sera donc le plus souvent préférée.

 

tutoriel_precedent

tutoriel_suivant

.
X
 
 
 
 
 

You havecharacters left.