Dans une application Flex complète, on a souvent besoin de faire communiquer des composants entre eux, de faire remonter l’information des composants fils vers les composants parents. Quoi de mieux alors que d’utiliser le mécanisme d’événement sur un événement pour que celui-ci alerte son parent ?

Dans cette optique, nous allons voir comment créer un événement personnalisé, puis comment ajouter cet événement à un composant pour que celui-ci soit capable de présenter l’événement lors d’une utilisation via l’éditeur.

Pour toutes ces explications, nous allons faire une petite application (AIR pour ma part ça évite de lancer un navigateur web ;-) mais cela fonctionne de la même façon avec une application Flex classique). Cette application sera composée des choses suivantes : un composant possédant deux boutons et un emplacement pour entrer du texte; un composant principal qui contiendra le précédent composant ainsi qu’un label qui nous affichera des valeurs. Notre application sera capable seulement d’additionner ou de soustraire des chiffres entre eux.

Créer notre composant avec boutons

Je pars du principe que vous savez comment faire, utilisez soit la vue Source, soit la vue Création, ça va presque aussi vite dans un cas comme dans l’autre. Ce que l’on obtient au niveau visuel est la chose suivante :

Le code MXML quand à lui est le suivant :

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<s:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx"
        height="23" width="350">
        <mx:Spacer/>
        <s:Label text="Valeur :" fontWeight="bold"
            height="100%" verticalAlign="middle"/>
        <s:TextInput id="tiValue" />
        <mx:Spacer/>
        <s:Button id="btnPlus" label="+"/>
        <s:Button id="btnMoins" label="-"/>
</s:HGroup>

Créer un événement

Ensuite, nous créons l’événement. Pour cela, on créé une nouvelle Classe ActionScript nommé TestEvent qui va étendre la classe flash.events.Event. Le code ainsi créé sera le suivant :

1
2
3
4
5
6
7
8
9
10
11
12
13
package info.fxbt.devblog.events
{
    import flash.events.Event;
   
    public class TestEvent extends Event
    {
        public function TestEvent(type:String,
            bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);
        }
    }
}

C’est un bon début, mais notre événement, nous voulons qu’il propose deux types, l’un pour le bouton +, l’autre pour le bouton -. Ce manière très simple, on rajoute ces deux types :

14
15
    public static const PLUS_CLICKED:String = "plusClick";
    public static const MINUS_CLICKED:String = "minusClick";

Notez qu’il ne faut pas donner des valeurs à ces constantes trop idiotes, vous allez voir après pourquoi.

On rajoute à ça la valeur qui sera transférée dans l’événement.

17
    public var value:Number = 0;

On va même rajouter un constructeur pour pouvoir créer l’événement en une seule fois avec la valeur en question directement définie.

7
8
9
10
11
12
    public function TestEvent(type:String, value:Number)
    {
        super(type);
       
        this.value = value;
    }

Vous remarquerez que je n’ai pas remis dans le constructeur les paramètres bubbles:Boolean=false, cancelable:Boolean=false, dans notre cas ils ne sont pas forcément utiles, et cela fera peut-être l’objet d’un billet plus tard (je supprimerais d’ailleurs le constructeur les contenant dans le récapitulatif du code).

On obtient donc le code suivant pour cette classe :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package info.fxbt.devblog.events
{
    import flash.events.Event;
   
    public class TestEvent extends Event
    {
        public function TestEvent(type:String, value:Number)
        {
            super(type);
           
            this.value = value;
        }
       
        public static const PLUS_CLICKED:String = "plusClick";
        public static const MINUS_CLICKED:String = "minusClick";
       
        public var value:Number = 0;
       
    }
}

Dans la prochaine partie, nous attacherons l’événement au composant préalablement réalisé.