Depuis Flex 4.5, j’ai commencé à m’amuser avec la création d’application Androïd en AIR, franchement c’est pas mal, on garde un certain nombre de nos automatismes, et on va assez vite pour faire quelque chose, bon après il faut le dire on se rend compte que certaines choses ne sont pas pareil sur un mobile que sur une application AIR de bureau, mais on gagne quand même du temps par rapport à une application Androïd faite de manière classique. De plus avec la 4.5.1, pas grand chose à changer pour être compatible pour iPhone ou BlackBerry Tablet. Que du bonheur donc.

Mais bien sur, un bonheur n’arrive jamais seul. Il y a donc quelques soucis parfois, des choses expliquées d’une façon dans la documentation officielle d’Adobe et qui finalement ne s’avèrent pas être comme ça.

Par exemple avec l’utilisation des touches « physiques » des mobiles (je mets des guillemets car sur mon Archos IT, elles sont totalement virtuelles, et sur mon GSii, ce n’est guère mieux…). En effet la touche menu, il n’y a pas de problème, on peut tout à fait l’activer sans effet secondaire. Mais la touche back, c’est une autre paire de manches, celle-ci s’active, malgré le preventDefault sauf si on déclare l’événement comme il faut…

Petit exemple, je veux appeler l’eventListener associé à la touche Back :

Et je défini ma fonction onKeyDown

Et voilà me direz vous, mais vous vous doutez bien que s’il y a article, ce n’est pas le cas… En effet, dans ce cas, la trace s’affiche bien, mais la touche BACK s’exécute (l’application se ferme si c’est sur l’écran principale ou on retourne à la vue précédente sinon). Ce n’est pas le cas prévu étant donné que l’on a utilisé la fonction preventDefault

Comment faire ?

Et bien tout simplement au lieu de définir en « ligne » l’ajout de l’eventlistener, on le met dans l’entête du fichier MXML

On ne change pas la fonction bien entendu.

Alors, heureux ?

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.