Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex UIComponent – Traiter les évènements (MXML et ActionScript)

Les évènements (event) sont le moyen par lequel les objets (comme les composants visuels) peuvent communiquer avec le reste de l'application. Il y a deux types d'évènements: les évènements utilisateur et les évènements système. Les évènements utilisateur sont les évènements qui se produisent directement après l'interaction de l'utilisateur avec l'application Flex. Par exemple, quand un utilisateur clique sur un bouton, un évènement click se produit, et quand un utilisateur étend un menu (comme une ComboBox par exemple), un évènement open se produit. D'autre part, un évènement système se produit car quelque chose s'est produit dans l'application, en réponse à une initialization, un opération asynchrone ou d'autres comportement sans lien avec l'utilisateur. Par exemple, quand un composant est crée, plusieurs évènements se produisent durant les étapes de la création, indiquant quels aspects du composant sont accessibles.

Quand un évènement se produit, on dit que l'évènement est dispatché/propagé (dispatched ou broadcasted). L'objet qui propage un évènement est appelé un target(cible). Tous les composants visuels Flex sont des target potentiels, ce qui signifie que tous les composants UI propagent des évènements. L'évènement qui est propagé à la forme d'un objet de type flash.events.Event (ou un sous-type). Une instance d'Event fournit des informations à propos de l'évènement, dont le type d'évènement (open, click, etc…) et le target qui a propagé l'évènement.

Quand un composant propage un évènement, rien ne se produit en réponse, sauf si quelque chose (appelé un listener) est configuré pour recevoir les notifications. Il y a deux manières de traiter (handle) les évènements dans une application Flex: soit en utilisant les attributs MXML, soit en utilisant de l'ActionScript.

 Traiter les évènements avec du MXML

Quand vous créez un composant en utilisant du MXML, vous pouvez ajouter un "event handler", c'est-à-dire quelque chose (fonction par ex.) qui va traiter l'évènement. Avec du MXML, vous pouvez ajouter un event handler en utilisant un attribut qui porte le même nom que l'évènement qui vous voulez traiter. Par exemple, un bouton propage un évènement click quand l'utilisateur clique dessus. Vous pouvez donc ajouter un attribut click au tag Button pour prendre en charge cet évènement.
Vous pouvez aussi assigner de l'ActionScript à cet attribut. Par exemple, le code suivant diminue l'alpha de 0.1 à chaque fois que l'utilisateur clique sur le bouton:

<mx:Button id="button" label="Diminuer Alpha" click="button.alpha -=.1"/>

Bien que vous puissiez assigner des expressions ActionScript à un event handler comme dans l'exemple précédent, il est plus commun (et pratique) d'assigner un appel à une fonction qui traitera l'évènement. Cela permet de définir des fonctionnalités plus complexes en réponse à l'évènement. Quand vous appelez une fonction/méthode à un event handler, vous devez lui passer un paramètre appelé "event". En MXML, le paramètre event passera automatiquement à la fonction l'objet évènement que le composant a propagé:

<mx:Button id="button" label="Diminuer Alpha" click="clickHandler(event)"/>

Vous avez ensuite besoin de définir la méthode qui est utilisée pour traiter l'évènement. Cette méthode doit accepter un paramètre de type Event (ou un sous-type d'Event approprié). L'exemple suivant montre la fonction qui produira le même résultat que l'expression inline MXML. En plus, il remet l'alpha à 1 quand il devient inférieur à 0:

<?xml version="1.0"?>
<!-- components\CompIntroEventAcc.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
		public function clickHandler(event:Event):void{
			var target:Button = Button(event.target);
			target.alpha -= .1;
			if(target.alpha < 0){
				target.alpha = 1;
			}
		}
		]]>
	</mx:Script>
    <mx:Button id="button" label="Diminuer Alpha" click="clickHandler(event)"/>
</mx:Application>

Traiter les évènements en ActionScript 3

Vous pouvez utiliser de l'ActionScript pour ajouter des event listeners à un composant en alternative aux attributs MXML. Cette technique a plusieurs avantages. D'abord, il est utile d'ajouter des event listeners avec de l'AS quand vous créez le composant en AS. Ensuite, quand vous ajoutez un event listener en utilisant de l'AS, vous pouvez aussi supprimer cet event listener plus tard. C'est pratique si vous voulez temporairement (ou de façon permanente) arrêter d'écouter un évènement spécifique d'un composant.

Attention, Flex ne vous autorise pas à supprimer un event listener qui a été déclaré en MXML. Vous pouvez uniquement supprimer ceux que vous avez ajouté avec la méthode addEventListener();

Pour enregistrer un listener pour un évènement en AS, vous devez utiliser la méthode addEventListener(). Cette méthode requiert que vous lui passiez au moins 2 paramètres: le nom de l'évènement que vous souhaitez écouter, et la fonction qui va être utilisée pour traiter l'évènement. Typiquement, vous devez utiliser des constantes pour les noms d'évènements plutôt que des String qui pourraient provoquer des erreurs de compilation.
Les constantes de nom d'évènement sont membres de la classe d'évènement associée. Par exemple, la classe Event définit OPEN, CLOSE, SCROLL, SELECT, et bien d'autres constantes. La classe MouseEvent définit CLICK, MOUSE_OVER et d'autres évènements liés à la souris. La classe FlexEvent définit de nombreuses constantes spécifiques à Flex comme ADD, REMOVE, CREATION_COMPLETE, et INITIALIZE.

Pour connaître les évènements liés à chaque classe, consultez l'aide en ligne LiveDocs Flex.

Le code suivant crée un bouton et ajoute ensuite un listener sur l'évènement click:

var button:Button = new Button;
button.addEventListener(MouseEvent.CLICK, clickHandler);
addChild(button);

L'objet évènement est automatiquement passé à la fonction en tant que paramètre:

public function clickHandler(event:MouseEvent):void{
	var target:Button = Button(event.target);
	target.alpha -= .1;
	if(target.alpha < 0){
		target.alpha = 1;
	}
}