Articles taggues ‘Evénement’

Créer un événement personnalisé et l’attacher à un composant (Partie 3 fin)

Et voici venir la dernière partie de cette petite explication sur les événements personnalisés en Flex. Dans cette partie, nous allons voir comment ajouter le composant à notre application et comment utiliser les événements qui lui sont attachés.

Commençons par revenir dans le composant principal de notre projet qui pour l’instant se présente comme ceci :

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
</s:WindowedApplication>

Nous allons d’abord ajouter un label, il servira à garder le calcul que nous réalisons, en effet notre application permet de rentrer un chiffre et en cliquant sur plus ou moins, de ajouter/soustraire à notre valeur en cours.

1
<s:Label text="Calcul : {calcul}" />

Comme vous le voyez, nous faisons appel à une variable calcul, il faut donc que nous la déclarions quelque part. Et quoi de mieux que le bloc des déclarations pour ça ?

1
2
3
<fx:Declarations>
    <fx:Number id="calcul" >0</fx:Number>
</fx:Declarations>

Nous allons ajouter le composant directement à partir de la vue Source. FlexBuilder permet de le faire rapidement, juste en tapant le début du nom de notre composant et en se servant de l’auto-complétion. Si vous n’utilisez pas FlexBuilder, il suffit de rajouter le namespace de notre composant xmlns:renderers="info.fxbt.devblog.renderers.*" et de rajouter le composant <renderers:ButtonsCompo id="bc" />

On s’aperçoit ensuite que ce composant a deux événements qui nous sont connus plusClick et minusClick on va leur attribuer un event Handler (notez qu’il est possible d’attribuer un event Handler différent à chaque événement, ce que propose par défaut FlexBuilder par exemple, mais ici, les événements ont été fait de tel façon qu’on peut traiter les deux dans le même event Handler).

On se retrouve avec notre composant qui est défini de la façon suivante :

1
2
3
4
<renderers:ButtonsCompo
    id="bc"
    plusClick="bc_plusminusClickHandler(event)"
    minusClick="bc_plusminusClickHandler(event)" />

Il faut donc maintenant définir la fonction bc_plusminusClickHandler. Cette fonction va, en fonction du type de l’événement qu’elle prend en paramètre, ajouter ou soustraire le chiffre contenu dans la zone de texte à notre total.

1
2
3
4
5
6
7
protected function bc_plusminusClickHandler(event:TestEvent):void
{
    if( event.type == TestEvent.PLUS_CLICKED )
        calcul += event.value;
    else
        calcul -= event.value;
}

Et voici, notre programme est capable de calculer des additions et des soustractions (comment ça il ne va pas servir à grand chose ? :-p )

Vous avez remarqué qu’il y a des erreurs possibles, en effet, on peut mettre des lettres dans la zone de texte et tenter de les additionner à notre total… Ce qui ne manquera pas de lever une erreur.

Voici le code total de notre application :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:renderers="info.fxbt.devblog.renderers.*" >
    <fx:Script>
        <![CDATA[
            import info.fxbt.devblog.events.TestEvent;

            protected function bc_plusminusClickHandler(event:TestEvent):void
            {
                if( event.type == TestEvent.PLUS_CLICKED )
                    calcul += event.value;
                else
                    calcul -= event.value;
            }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <fx:Number id="calcul" >0</fx:Number>
    </fx:Declarations>
   
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
   
    <s:Label text="Calcul : {calcul}" />
   
    <renderers:ButtonsCompo
        id="bc"
        plusClick="bc_plusminusClickHandler(event)"
        minusClick="bc_plusminusClickHandler(event)" />
   
</s:WindowedApplication>

Et si on veut utiliser plusieurs fois notre composant ? Et bien ce n’est pas plus compliqué qu’avec un bouton ou tout autre composant classique.

Voici rapidement le code à rajouter.

Pour la partie définition du composant :

1
2
3
4
    <renderers:ButtonsCompo
        id="bc10"
        plusClick="bc10_plusminusClickHandler(event)"
        minusClick="bc10_plusminusClickHandler(event)" />

Pour la partie définition de l’event Handler :

1
2
3
4
5
6
7
protected function bc10_plusminusClickHandler(event:TestEvent):void
{
    if( event.type == TestEvent.PLUS_CLICKED )
        calcul += 10 * event.value;
    else
        calcul -= 10 * event.value;
}

Et ainsi, notre application est capable de soustraire/additionner les facteurs de 10 (de plus en plus fort :-p)

Créer un événement personnalisé et l’attacher à un composant (Partie 1)

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é.

Haut de Page

Publicité