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 ?

Qui n’a jamais eu le désagréable clignotement des images dans une liste en Flex ? Vous savez, ce clignotement qui vous donne l’impression que vos images sont rechargées à chaque fois que vous scrollez dans une liste d’image… D’autant plus qu’elles sont vraiment rechargées à chaque fois.

Si vous avez essayé comme moi de faire un visualiseur pour Flickr (rien à voir le clignotement là), vous avez du le remarquer, et vous avez du vous arracher les cheveux sur le composant List (ou autre) et sur les composants Image pour trouver pourquoi il voulait absolument recharger les images à chaque fois.

Et bien vous savez, vous n’êtes pas les seuls à avoir eu ce problème (la preuve, je l’ai eu sinon je n’en parlerais pas), mais certains en plus de l’avoir eu, l’on résolu !

En cherchant comment le résoudre pour une énième fois, j’ai fini par trouver le blog de Quietly Scheming. Outre le fait qu’il explique des choses intéressantes pour Flex, il donne aussi du code clef en main (à un bémol pour Flex 4 et les composants Spark), pour corriger ce problème de clignotement. Je vous laisse découvrir la suite sur l’article du blog en question (en anglais) ”how I made my Flex List Images stop flickering.”.

Comment s’en servir ? Récupérez les classes qui vont bien, mettez les dans votre projet, et ensuite, au lieu de prendre du , prenez du , pas bien compliqué. Il y a quelques limitations par rapport aux images Flex natives, mais il faut se limiter à utiliser ces SuperImages dans des listes, et ne pas en mettre là où les images natives sont déjà suffisantes.

Il y avait un bémol avec Flex 4 ? En fait oui, mais pas grand chose de bien dramatique. L’auteur a poussé le vice de ces images à rajouter un effet de bordure, sauf que avec l’arrivée de Spark, la façon dont il défini les bordures pose problème, en effet il recherche la classe du style « BorderSkin » via la fonction getStyle, or cette fonction renvoie depuis l’arrivée de Spark, une classe Spark, là où une classe mx était demandée, Résultat, crash à l’instanciation. J’avoue ne pas avoir pris le temps de le corriger pour m’en servir, d’autant que les cadres autour des images, je m’en moque un peu, j’ai donc juste retiré la fonctionnalité de la manière suivante :

Pas très élégant, mais suffisant. Promis, bientôt je regarderais comment corriger et remettre les bordures.

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