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.