TD FLEX

Vous avez t reu la Flex Academy. Flicitations! Vous venez de recevoir une formation de 2h. Vous allez prsent devoir passer une preuve nale. Elle sera compose de plusieurs missions. Si vous les russissez, vous recevrez le titre de Flexeur Amateur. Bon courage, on se retrouve la n de votre premire mission.

1. Prise en main
Crer un projet Flex dans Flex Builder Passer en vue design Rduire la taille de lapplication 300x300 Insrer un bouton et le centrer en utilisant les contraintes (voir ci-contre) Faire en sorte douvrir une alerte (voir classe Alert) comportant le texte Hello world lors dun clic sur le bouton A prsent, un clic sur le bouton doit provoquer un changement dtat qui afche un Label Enn, chaque clic suivant doit incrmenter une variable Bindable qui sera afche dans le label Modier lapplication an dobtenir le rendu suivant

Camille Roux

18 dcembre 2008

www.camilleroux.com

Si vous lisez ceci, cest que vous venez de russir votre premire mission en tant que Flexeur dbutant. Bravo! Cependant, vous comprendrez aisment que dvelopper une telle application ne suft pas pour obtenir le titre de Flexeur amateur. Pour cela vous devrez russir la mission suivante. Bon courage!

2. Le widget LastFM
Cette seconde mission va consister en la cration dun widget LastFm. Elle va permettre de bien tester vos aptitudes devenir un Flexeur amateur. Sinscrire sur Last.fm et se crer un compte API sur http://www.lastfm.fr/api Crer un projet Flex Lapplication doit faire 400 de haut et 360 de large Dans un premier temps, afcher la rponse une requte Mettre un TextArea avec les paramtres height et width 100% Ajouter un HTTP service qui fera une recherche parmi les artistes (mettre un artiste quelconque en dur pour le moment)
<mx:HTTPService id="artists" url="{'...'}" useProxy="false" resultFormat="e4x" />

Sur lvnement creationComplete de lapplication, lancer la requte : artists.send(); Binder lattribut text du TextArea sur lattribut lastResult du HTTPService Remplacer le TextArea par un simple label et s'entraner slectionner des donnes avec la syntaxe e4x : http://livedocs.adobe.com/ex/3/html/help.html?content=13_Working_with_XML_03.html A prsent, afcher les donnes dans un composant List en utilisant la bonne syntaxe (attribut dataProvider Ajouter un champ texte au dessus de la liste qui va servir de champ de recherche (utiliser un layout VBox) A partir de maintenant, la requte doit tre lance lorsquon tape la touche entre dans le champ texte (vnement enter) Gnrer lurl du HTTPService par binding en utilisant le contenu du champ de recherche (la fonction escape() permet dencoder correctement le texte entr par lutilisateur) Faire en sorte davoir un rendu proche de laperu suivant :

Camille Roux

18 dcembre 2008

www.camilleroux.com

 Changer le composant List en TileList et partir de la base du renderer suivant pour faire un rendu propre en afchant limage :
<mx:itemRenderer> <mx:Component> <mx:Label text="{data.name}" width="100" /> </mx:Component> </mx:itemRenderer>

Afcher la liste des albums de lartiste lors dun clic sur un lment de la TileList (vnement itemClick). Pour cela utiliser les tats, crer un nouveau HTTPService...

3. Devenir un Flexeur semi-pro

Toute mes flicitations, vous tes prsent un Flexeur amateur! Mais on ne vient pas la Flex Academy pour tre un amateur, on vient ici pour tre le meilleur. Pour cela, vous avez quartier libre pour laisser libre court votre imagination. Voil les pistes que je vous donne pour vous faire remarquer par le jury : Ajouter des vues pour donner accs plus dinformation grce lAPI (dtail sur lalbum, classement des artistes ...) Amliorer le design de votre application (voir http://examples.adobe.com/ex3/consulting/ styleexplorer/Flex3StyleExplorer.html) Transformer lapplication en application Air (voir http://livedocs.adobe.com/ex/3/html/ help.html?content=Part5_AIR_1.html) Gnrer un widget UWA (compatible Netvibes, iGoogle, Vista, Dashboard...) : http:// eco.netvibes.com/submit/widget Amliorer le rendu de lapplication en utilisant des composants Flex existants (voir lapplication TourDeFlex)

Camille Roux

18 dcembre 2008

www.camilleroux.com