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 :

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.

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 ?

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 :

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.

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 :

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 :

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

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

Voici la suite du précédent article concernant les événements personnalisés et leur rattachement aux composants.

Dans cette partie, nous allons voir comment attacher un événement à un composant, comment le dispatcher.

Attacher un événement à un composant

Repartons de notre composant précédent, de ses deux boutons et de son champ de texte. Nous allons d’abord ajouter à ce composant un événement. Pour cela nous ajoutons le code suivant :

On utilise pour ça une balise Metadata, cette balise sert en fait à préciser au compilateur Flex comment sont utilisés vos composants. Vous pouvez trouver une plus grande information en anglais dans les pages suivantes : About metadata tags et Metadata tags.

Vous devez donc définir le nom de l’événement et son type. Là, j’avoue que les noms des attributs qu’ils ont choisis sont assez mauvais, en effet il y a confusion entre name et type. Car ici, le type correspond en fait à la classe de l’événement, et le name correspond lui au type tel qu’il est défini dans la classe de l’événement (le type que l’on doit définir lorsqu’on définie une nouvelle instance de cet événement.

Pourquoi je disais avant qu’il ne fallait pas que la valeur que vous donniez à votre type soit trop idiote ? Tout simplement car vous la retrouvez ici, cette valeur est celle que vous mettez dans name, c’est celle que vous retrouverez dans l’interface de votre composant (on va voir où juste après).

Vous avez donc ajouté deux événements déclenchables par votre composant. Maintenant, on va faire en sorte que ces événements se dispatchent.

Dispatcher un événement

On veut que les événements se dispatchent lorsque l’on clique sur l’un des deux boutons.

Pour cela, on peut utiliser plusieurs moyens, le plus rapide est d’utiliser l’IDE (si vous l’avez sinon il y aura le code marqué un peu plus loin ) pour lui faire générer ce qu’il faut, c’est ce que l’on va faire ici. Retournez sur le composant préalablement créé et allez en mode Création, cliquez sur le bouton +, et repérez dans les propriétés le champ Lors d’un clic, il y a un éclair à côté, cliquez dessus et sélectionnez Générer un gestionnaire d’événement l’IDE vous a alors généré la fonction a appeler (et a associé à l’événement click le code généré. Vous n’avez plus qu’à remplacer le commentaire par votre code. Ce sera le suivant :

Pour le second bouton, on va innover. Restez en mode Source, et trouvez le bouton -. Utilisez l’auto-complétion pour générer l’événement click. Le code de la fonction sera :

On a donc généré le code suivant pour la partie script (fonctions récupérant l’événement click des boutons) :

Et pour les boutons :

Notez qu’il aurait été possible de ne pas passer par les fonctions intermédiaires, mais d’appeler directement le dispatchEvent dans les valeurs click.

Dans la prochaine et dernière partie, nous verrons comment se présente le composant ainsi créé et comment l’ajouter et utiliser ses événements dans notre application.

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 :

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 :

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 :

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.

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.

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 :

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

Bon, finalement, bien que je ne sois pas fan des blogs, je me décide à en ouvrir (et non pas un, mais deux carrément, le second étant un blog photo où je tenterais – mais ça me parait pas gagné – de mettre une nouvelle photo par jour).

J’ouvre donc ce blog ci dans le but de partager un peu (et surtout de garder une trace). Partager, car j’aime bien le concept même de partage (je suis un grand fan des blogs des Devs Adobe), et surtout quand il s’agit de points des fois assez techniques qui nous tiennent tête pendant plusieurs heures/jours.

J’avoue qu’une autre raison de l’ouverture de ce blog est que j’ai quelques projets sur le feu, et que j’ai bien l’intention de les diffuser en libre (probablement sur sourceforge), et donc que je discuterais surement là dessus.

Parmis ces projets, l’un est un petit programme fait pendant mes vacances, en bon informaticien, plutôt que  d’utiliser le couple papier/crayon pour compter les points du Triominos (pour ceux qui ne connaissent pas, regardez l’article de Wikipedia – en anglais, désolé), j’ai préféré faire un petit programme en Flex, maintenant je pense sérieusement à le finir (oui, il y a des variables en dur actuellement), et à pourquoi pas, rajouter un mécanisme pour jouer en ligne avec (et quelques graphismes aussi, actuellement ça pique les yeux). Un autre projet est un viewer FlickR permettant de récupérer les photos, naviguer dans ses contacts, favoris, les contacts et favoris de notre navigation, tout un programme, et déjà certains composants me semblent intéressant en eux même.

J’ouvre donc ce blog pour continuer à discuter là dessus et pourquoi pas, pour avoir des visiteurs (je sais, je rève un peu).