Gérer les événements en Flex : un peu d’ActionScript

On continue la découverte de Flex avec à présent un zeste d’ActionScript, le fameux langage utilisé pour réaliser des scripts Flash. Dans ce billet, nous allons voir comment ajouter un peu d’interactivité dans nos applications Flex en voyant la gestion des événements. L’application en résultant ne sera pas extraordinaire (un simple Hello World! personnalisé avec votre prénom), mais sera suffisant pour appréhender les concepts généraux de la gestion d’événements, ainsi que quelques autres petites bricoles. :)

Création de l’interface en MXML

Notre interface sera très simple. Elle sera composée d’un champ de type texte et d’un bouton. Créons donc un nouveau projet, et modifions la structure de base de notre application avec une largeur et une hauteur plus modestes que celles par défaut.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white"  backgroundGradientAlphas="1,1" width="320" height="120">
</mx:Application>

Ce code devrait déjà vous être familier, d’après l’article d’hier (un « Hello World! » en Flex). Cependant, nous avons rajouté un attribut backgroundColor permettant de changer le dégradé bleu/gris par défaut en un dégradé gris/blanc.

Si nous désirons récupérer une couleur blanche unie, il faut en plus indiquer à notre application que nous ne voulons pas d’effet d’ombre. L’ombre est réalisée par le canal Alpha. S’il vaut 0, elle sera complètement opaque (couleur noire) ; s’il est à 1, elle sera entièrement transparent (couleur indiquée, ici blanche). On modifie donc le gradient (le dégradé) par défaut avec l’attribut backgroundGradientAlphas. Ainsi, on veut que l’ombre soit un dégradé de transparent (1) à transparent (1). Bref, qu’il n’y ait pas d’effets particuliers : nous voulons notre couleur de fond, à savoir la couleur blanche.

A présent, installons nos deux composants de formulaires : le champ de type texte (balise mx:TextInput) et le bouton (balise mx:Button). On obtient alors le code suivant :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white"  backgroundGradientAlphas="1,1" width="320" height="120">
	<mx:TextInput id="txtName" />
	<mx:Button id="btnHello" label="Say hello!" />
</mx:Application>

On a attribué à ces deux éléments un id, afin de pouvoir y avoir accès facilement par la suite, lorsque nous nous attaquerons au code ActionScript de notre application révolutionnaire.

A noter également que le contenu du bouton est à spécifier grâce à l’attribut label.

Le code précédent aboutit à cela :

Notre interface est prête, mais ne réagit pas. C’est normal : nous ne lui avons rien dit de faire. C’est le rôle de l’ActionScript.

Gestion des événements en ActionScript

L’ActionScript est un langage de programmation qui lui, n’a rien à voir avec XML. Il nécessite donc un apprentissage certain. Nous allons voir les bases petit à petit, au fur et à mesure de notre découverte du Flex.

Tout d’abord, comment insérer de l’ActionScript ? Grâce à la balise bien nommée mx:Script.

<mx:Script>
	<![CDATA[
		// Votre code ici
	]]>
</mx:Script>

Dorénavant, et afin de ne pas alourdir l’affichage, je n’afficherais plus que la portion de code concernée. Vous pouvez placer cette balise où vous le désirez.

On retrouve ici la fameuse « balise » CDATA. Pour tous ceux qui auraient quelques lacunes en XML (n’est-ce pas mes étudiants ? ^^), il s’agit d’une balise indiquant au validateur que le code compris à l’intérieur ne devra pas être vérifié. C’est bien le cas ici, car nous sommes dans un document XML, et nous allons y inclure de l’ActionScript, ce qui pourrait causer des soucis à cause de caractères spéciaux tels que les chevrons.

Petit mot au passage sur les commentaires : ils se représentent comme dans la majorité des langages :

• // pour un commentaire sur une seule ligne,
• /* … */ pour des commentaires multilignes.

Nous allons à présent créer la fonction qui nous permettra d’afficher un Hello World! personnalisé. Appelons la sayHello.

import mx.controls.Alert;

	public function sayHello():void
	{
		var name:String = txtName.text;
		Alert.show("Hello " + name + "!", "Hello " + name + "!");
	}

Quelques explications s’imposent…

La première ligne importe toutes les fonctionnalités de la classe Alert (l’équivalent du alert en Javascript). Il s’agit d’un package, tout comme en Java ou en C# : on intègre des fonctions supplémentaires qui n’existent pas par défaut.

On déclare notre fonction. Elle sera définie en tant que publique (donc accessible de partout). Nous reviendrons plus tard sur la signification de ces opérateurs, cela n’ayant aucun intérêt dans ce billet. Le type de retour se met à la fin de la déclaration, après deux points. Ici, notre fonction ne retournera rien. Syntaxe certes exotique, mais il suffit de le savoir.

Le mot-clef var nous permet de déclarer une variable, de nom name, de type String. Celui-ci ne s’indique pas avant, mais après. On lui attribue le contenu du champ texte (dont l’id est txtName). L’accès aux propriétés d’un objet se fait le plus naturellement du monde avec l’opérateur point.

Ligne suivante, on fait appel à la méthode statique show de la classe Alert qui prend pas mal d’arguments en paramètres. Cependant, nous n’indiquerons ici que les deux premiers, à savoir respectivement le texte contenu dans la pop-up, et son titre.

Vous pouvez essayer de compiler votre code, mais celui-ci ne devrait rien faire de plus. Et pour cause, nous n’avons pas indiqué que cette fonction devait être appliquée en appuyant sur le bouton.

Comme en Javascript, nous aurions pu le faire en ajoutant un attribut dans la balise mx:Button. Mais comme en Javascript, on préférera passer par des listeners, c’est-à-dire des objets particuliers qui ne font qu’exécuter une fonction si une certaine condition est remplie : un clic de souris, une touche enfoncée, etc…

Ajoutons donc un listener à notre bouton.

import flash.events.MouseEvent;

	public function init():void
	{
		btnHello.addEventListener(MouseEvent.CLICK, sayHello);
	}

On importe tout d’abord le package comprenant tous les gestionnaires d’événements liés à la souris. Cela nous permettra d’utiliser la constante MouseEvent.CLICK qui correspond à… un clic de souris pardi ! ^^

Nous créons une deuxième fonction init() qui sera appelée lorsque notre application Flash sera chargée. Dans celle-ci, nous ajoutons, grâce à la méthode addEventListener un listener à notre bouton, d’id btnHello.

Ce listener réagira sur les clics de souris, et exécutera la fonction sayHello définie auparavant. Cette fonction étant désormais exécutée par un listener, nous devons impérativement (sous peine d’avertissements lors de la compilation) lui passer en argument un objet de type Event (événement). Modifions donc notre fonction sayHello :

public function sayHello(e:Event):void

Enfin, il nous faut ajouter l’appel à la fonction init() lorsque l’application sera chargée. Cela se fait en inline. Logique, étant donné qu’il faut bien un point d’entrée quelque part. Cela se fait grâce à l’attribut creationComplete :

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();" backgroundColor="white"  backgroundGradientAlphas="1,1" width="320" height="120">

Un simple appel à la fonction init(), et les événements sont mis en place, terminant ainsi l’application.

Ainsi s’achève ce deuxième tutorial Flex sur la gestion des événements. Prochainement, un troisième billet sur le positionnement des différents éléments, qui sont, pour l’instant, toujours centrés dans notre fenêtre.