Flex et AIR

Copyright © 2008 Micro Application - 20-22, rue des Petits-Hôtels - 75010 Paris

1ère Édition - Octobre 2008

Auteurs - Vianney BARON, Jessy BERNAL, Adrien MONTOILLE, Edouard RUIZ et Nicolas YUEN

Toute représentation ou reproduction, intégrale ou partielle, faite sans le consentement de MICRO APPLICATION est illicite(article L122-4 du code de la propriété intellectuelle).

Avertissement aux utilisateurs

Cette représentation ou reproduction illicite, par quelque procédé que ce soit, constituerait une contrefaçon sanctionnée parles articles L335-2 et suivants du code de la propriété intellectuelle.Le code de la propriété intellectuelle n’autorise, aux termes de l’article L122-5, que les reproductions strictement destinéesà l’usage privé et non destinées à l’utilisation collective d’une part, et d’autre part, que les analyses et courtes citationsdans un but d’exemple et d’illustration.Les informations contenues dans cet ouvrage sont données à titre indicatif et n’ont aucun caractère exhaustif voire certain.A titre d’exemple non limitatif, cet ouvrage peut vous proposer une ou plusieurs adresses de sites Web qui ne seront plusd’actualité ou dont le contenu aura changé au moment où vous en prendrez connaissance.

Aussi, ces informations ne sauraient engager la responsabilité de l’Editeur. La société MICRO APPLICATION ne pourra êtretenue pour responsable de toute omission, erreur ou lacune qui aurait pu se glisser dans cet ouvrage ainsi que des conséquences,quelles qu’elles soient, qui résulteraient des informations et indications fournies ainsi que de leur utilisation.

Tous les produits cités dans cet ouvrage sont protégés, et les marques déposées par leurs titulaires de droits respectifs. Cetouvrage n’est ni édité, ni produit par le(s) propriétaire(s) de(s) programme(s) sur le(s)quel(s) il porte et les marques ne sontutilisées qu’à seule fin de désignation des produits en tant que noms de ces derniers.

ISBN : 978-2-300-016783

Couverture réalisée par Sébastien Wiegant

MICRO APPLICATION Support technique :20-22, rue des Petits-Hôtels Également disponible sur www.microapp.com75010 PARIS http://www.microapp.comTél. : 01 53 34 20 20Fax : 01 53 34 20 00

Retrouvez des informations sur cet ouvrage !

Rendez-vous sur le site Internet de Micro Applicationwww.microapp.com. Dans le module de recherche, sur la paged’accueil du site, entrez la référence à 4 chiffres indiquée sur le présentlivre. Vous accédez directement à sa fiche produit.

1678

Avant-proposLa collection Atelier du webmaster s’adresse aux personnes initiées au développement desites web qui souhaitent découvrir et mettre en pratique les nouvelles technologiesInternet. Sans négliger les aspects théoriques, nous donnons toujours priorité à la pratiqueafin que vous puissiez rapidement être autonome.

À travers les différents titres de cette collection vous découvrirez les technologies qui fontle web 2.0 et feront ce que certains nomment déjà le web 3.0.

Conventions typographiquesAfin de faciliter la compréhension des techniques décrites, nous avons adopté lesconventions typographiques suivantes :

j gras : menu, commande, boîte de dialogue, bouton, onglet.j italique : zone de texte, liste déroulante, case à cocher, bouton radio.j Police bâton : instruction, listing, texte à saisir.j ➥ : dans les scripts, indique un retour à la ligne volontaire dû aux contraintes de la

mise en page.

Il s’agit d’informations complémentaires relatives au sujet traité. Propose conseils et trucs pratiques.

Mise en garde sur un point important à ne pas négliger.

bas

Sommaire

1 Créer son premier projet avec Flex 25

1.1 Initiation à Flex Builder 3 ................................................... 26Flex Builder 3 et Eclipse ...................................................... 26Installer Flex Builder 3 ........................................................ 27Comprendre l’arborescence du dossier d’installation .................. 32Présentation de l’environnement de développement ................... 33

1.2 Créer sa première application ............................................ 34Création d’un nouveau projet ............................................... 35Comprendre l’arborescence d’un projet Flex ............................ 38MXML ............................................................................ 38Mode Source .................................................................. 39Mode Design .................................................................. 42

1.3 Compiler une application Flex ............................................ 44Du MXML au SWF ............................................................ 44Fichiers générés ................................................................ 44

1.4 Check-list ....................................................................... 45

2 Découvrir l’ActionScript 3.0 47

2.1 Démarrer avec ActionScript dans Flex Builder ....................... 48Créer l’application Flex ...................................................... 48Le code ActionScript dans vos fichiers MXML ........................... 49Le code ActionScript dans des fichiers séparés ......................... 52Importer du code ActionScript dans un fichier MXML .................. 54

2.2 Les bases de la programmation .......................................... 55Les packages et namespaces ............................................... 55Les types de données et les variables ...................................... 59Les fonctions et opérateurs ................................................... 62Les boucles et conditions ..................................................... 66

2.3 La programmation orientée objet dans ActionScript ................ 68Les avantages de la programmation orientée objet .................... 68Les classes ...................................................................... 69Les interfaces ................................................................... 73L’héritage ........................................................................ 74

2.4 Déboguer de l’ActionScript 3.0 dans Flex Builder .................. 77Création d’une application Flex utilisant ActionScript .................. 77Le mode Debug ................................................................ 78Ajouter un point d’arrêt ....................................................... 79Le pas à pas .................................................................... 83Afficher le contenu d’une variable .......................................... 83

La fonction trace ............................................................... 85Corriger les erreurs ............................................................ 86

2.5 Check-list ....................................................................... 87

3 Réaliser sa première interface 89

3.1 Les composants MXML ...................................................... 90Définition d’un composant ................................................... 90Travailler avec les contrôles Flex ............................................ 91Différencier les composants ................................................. 93Utiliser un composant en MXML et en ActionScript ..................... 94

3.2 Les conteneurs d’agencement ............................................. 96Comprendre l’utilité des conteneurs ....................................... 96Maîtriser les conteneurs primordiaux : HBox et VBox .................. 97Reconnaître les cadres d’utilisation des autres conteneursd’agencement .................................................................. 99

3.3 Mise en forme de l’interface ............................................. 108Comprendre le redimensionnent d’un composant .................... 108Comprendre le positionnement absolu et les contraintes ............ 111

3.4 Les contrôles simples ....................................................... 113Utiliser Flex Component Explorer pour appréhenderles contrôles simples ........................................................ 113Afficher des images ......................................................... 114Utiliser les Text Controls ..................................................... 117

3.5 Mise en pratique : une interface d’annuaire ........................ 120Mettre en place les conteneurs ........................................... 121Ajouter les contrôles simples en mode Design ......................... 121

3.6 Check-list ..................................................................... 124

4 Gérer les événements 127

4.1 Introduction aux événements ............................................ 128Comprendre le flux des événements ..................................... 128À propos de l’objet Event .................................................. 128La classe EventDispatcher .................................................. 129

4.2 Utiliser les événements .................................................... 129Utiliser les événements inline .............................................. 130Utiliser les événements dans le code ..................................... 130Manipuler l’objet Event ..................................................... 131Les événements à connaître ............................................... 132

4.3 Les événements clavier .................................................... 133

Sommaire

Gérer les événements clavier .............................................. 133Récupérer les codes clavier ............................................... 135Les événements clavier-souris .............................................. 136

4.4 Créer ses propres événements .......................................... 137La méthode dispatchEvent() ................................................ 137Déclencher un événement en MXML ..................................... 138Personnaliser votre événement ............................................ 138

4.5 Mise en pratique : un convertisseur de devises ..................... 138Mise en place du projet .................................................... 139L’interface ..................................................................... 139Mettre en place la logique métier ........................................ 140Associer la logique à l’interface avec MXML .......................... 141Associer la logique à l’interface avec ActionScript ................... 142

4.6 Check-list ..................................................................... 143

5 Gérer les données 145

5.1 Définir un data model ..................................................... 146Création d’un formulaire ................................................... 146La balise <mx:Model> ...................................................... 149La balise <mx:XML> ......................................................... 151Les modèles basés sur du script ........................................... 152Les modèles basés sur des classes ActionScript ....................... 153

5.2 Lier des données ............................................................ 156Les accolades en MXML ................................................... 156Utiliser du code ActionScript dans les accolades ..................... 157La balise <mx:Binding> en MXML ....................................... 158Plusieurs sources ou plusieurs destinations .............................. 159Lier des données en ActionScript ......................................... 160

5.3 Valider des données ....................................................... 161Les validateurs prédéfinis ................................................... 161Utiliser des validateurs dans un formulaire .............................. 163Personnalisation de la validation ......................................... 166

5.4 Formater les données ...................................................... 168Utiliser les formateurs de base ............................................ 168Récupérer les erreurs de formatage ...................................... 169Formater à l’intérieur d’une liste de données ........................... 170

5.5 Travailler avec XML ........................................................ 171Accéder aux éléments ...................................................... 171Modifier les données ....................................................... 173Créer ou assembler des objets XML ..................................... 175

5.6 Check-list ..................................................................... 175

Sommaire

6 Aller vers une interface riche 177

6.1 Les contrôles avancés ..................................................... 178Les List, les HorizontalList et les ComboBox ............................ 178Les DataGrid ................................................................. 180Les Tree ........................................................................ 181

6.2 Créer ses propres composants .......................................... 182Un nouveau conteneur racine pour les composants MXML ......... 182Utilisons nos nouveaux composants ..................................... 184La création de composants en ActionScript ............................ 189ActionScript vs MXML pour la création de nouveaux composants . 189Pourquoi créer ses propres composants ? .............................. 190

6.3 Mise en pratique : une interface maître-détail ...................... 190Qu’est-ce qu’une interface maître-détail ? .............................. 190Mise en place du projet .................................................... 191Le découpage du projet .................................................... 191Le module maître ............................................................. 192Le module détail ............................................................. 197L’assemblage des deux modules ......................................... 199

6.4 Check-list ..................................................................... 201

7 Naviguer dans son application 203

7.1 Introduction à la navigation ............................................. 204

7.2 Manipuler une ViewStack ................................................ 204Introduction au composant ViewStack .................................. 204Ajouter une ViewStack dans une application .......................... 206Manipuler une ViewStack ................................................. 210Dimension des conteneurs enfants ....................................... 214

7.3 Les contrôles TabNavigator et Accordion ............................ 215Le composant TabNavigator .............................................. 215Le composant Accordion ................................................... 216Navigation au clavier ...................................................... 217Ajouter des boutons pour faciliter la navigation ....................... 218

7.4 Mise en pratique : mon CV en ligne ................................... 218Création du projet ........................................................... 219Ajout d’un composant de navigation .................................... 221Ajout des informations ...................................................... 221Mise en forme et design .................................................... 222Résultat final .................................................................. 222

7.5 Check-list ..................................................................... 225

Sommaire

8 Personnaliser son application 227

8.1 Utiliser les comportements ............................................... 228Comment fonctionnent les comportements ? ........................... 228Les effets disponibles dans Flex ........................................... 229Appliquer les comportements aux composants ........................ 230

8.2 Ajouter des effets ........................................................... 234Retarder le lancement d’un effet .......................................... 234Combiner plusieurs effets .................................................. 234Créer son propre effet d’apparition ...................................... 236

8.3 ViewStates et transitions .................................................. 238Mettre en œuvre les ViewStates .......................................... 238Appliquer des transitions ................................................... 241

8.4 Styliser l’interface .......................................................... 242La balise <mx:Style> ........................................................ 243Les classes de style .......................................................... 243Le StyleManager ............................................................. 243Le style inline .................................................................. 244

8.5 Item renderers et editors ................................................. 244Utiliser des renderers et des editors en méthode drop-in ............. 245La méthode inline ............................................................ 246Quels sont les composants Flex qui peuvent servir de renderer oud’editor ? ...................................................................... 247Utiliser des items renderers et editors complexes ...................... 248

8.6 Check-list ..................................................................... 249

9 Améliorer l’expérience utilisateur 251

9.1 Le glisser-déposer (drag-and-drop) ..................................... 252

9.2 L’historique de navigation (deep linking) ............................ 256Pour quoi faire ? ............................................................. 256Comment ça marche ? ..................................................... 257Concrètement ? .............................................................. 257

9.3 Impression .................................................................... 260

9.4 Internationalisation ........................................................ 263Faire une application localisée pas à pas .............................. 263Mettre autre chose que des objets string dans les ressources ....... 266Charger les fichiers de langue à l’exécution ........................... 267

9.5 Check-list ..................................................................... 267

Sommaire

10 Communiquer avec un serveur 269

10.1 Comprendre les possibilités de récupération de données ....... 270Chargement dynamique des données XML ............................ 270Un point sur le Player Flash et la sécurité ................................ 273

10.2 HTTPService ................................................................. 274Récupération de données via une requête http ........................ 275Utiliser le binding ............................................................ 280Récupérer les résultats de manière événementielle .................... 281Gérer les erreurs ............................................................. 283

10.3 Services web ................................................................ 285Utiliser des services web de type SOAP ................................ 286Appeler des méthodes distantes .......................................... 287Passer des arguments aux méthodes de services web ............... 287Différence d’utilisation entre service web et HTTPService ........... 289

10.4 RemoteObject ............................................................... 290

10.5 Mise en pratique : une application avec Amazon ................. 291

10.6 Check-list ..................................................................... 301

11 Présenter les données graphiquement 303

11.1 Introduction à Flex Charting ............................................. 304Utiliser un composant de Flex Charting ................................. 304

11.2 Les différents types de graphiques ..................................... 305Le PieChart .................................................................... 305L’AreaChart ................................................................... 306Le ColumnChart et le BarChart ........................................... 307Le LineChart ................................................................... 308Le BubbleChart et le PlotChart ............................................ 308

11.3 Mettre en forme les graphiques ......................................... 309Les données ................................................................... 309Les séries ...................................................................... 310Les axes ........................................................................ 312

11.4 Interaction avec les graphiques ......................................... 315Les bulles d’information ..................................................... 315Les légendes .................................................................. 317Animer un graphique ....................................................... 319

11.5 Mise en pratique : un module de statistiques ........................ 321

11.6 Check-list ..................................................................... 327

Sommaire

12 Utiliser AIR 329

12.1 Passer de Flex à AIR ....................................................... 330Les outils pour utiliser et développer une application AIR ............ 330Un projet AIR dans Flex Builder 3 ........................................ 331Les caractéristiques d’un projet AIR ...................................... 334Créer un package AIR ...................................................... 336

12.2 Utiliser HTML ................................................................ 337La classe HTMLControl ..................................................... 337Les possibilités avancées ................................................... 340HTMLControl dans le composant HTML ................................ 343

12.3 Gérer des fichiers .......................................................... 344Les classes pour gérer les fichiers ......................................... 344Manipuler des répertoires ................................................. 347Gérer les fichiers ............................................................. 349

12.4 Utiliser SQLite ............................................................... 352Se connecter à une base ................................................... 352Créer des tables ............................................................. 354Manipuler des données .................................................... 355

12.5 Personnaliser ses fenêtres ................................................ 357Les types de fenêtres ........................................................ 357Gérer les événements des fenêtres ....................................... 360

12.6 Check-list ..................................................................... 361

13 Aller plus loin 363

13.1 Cairngorm ................................................................... 364Le motif de conception modèle vue contrôleur ......................... 364L’architecture MVC selon Cairngorm .................................... 365Utiliser Cairngorm dans votre application .............................. 366Mise en pratique ............................................................ 368

13.2 Tests unitaires ................................................................ 372Le principe des tests unitaires .............................................. 373FlexUnit ........................................................................ 374Mise en pratique ............................................................ 378

13.3 LiveCycle Data Services et BlazeDS ................................... 383Remote Procedure Call ..................................................... 383Data Management .......................................................... 384Messaging .................................................................... 384

13.4 Obtenir de l’aide ........................................................... 384L’aide officielle ............................................................... 384

Sommaire

Le forum Adobe Flex ........................................................ 386

13.5 Check-list ..................................................................... 387

14 Annexes 389

14.1 Webographie ............................................................... 390Sources officielles ............................................................ 390Communauté ................................................................. 391Flex en France ................................................................ 392

14.2 Antisèches .................................................................... 392Les composants .............................................................. 392Les propriétés ................................................................. 402Utiliser ActionScript .......................................................... 403AIR .............................................................................. 403

14.3 Glossaire ..................................................................... 405

15 Index 409

Sommaire

PréfaceEnfin un livre, sur l’une des technologies les plus en vogue « FLEX » ! Dévorez ce livreet développez de nouvelles applications « riches et ergonomiques ». Croyez-moi, ensuitevous aurez du mal à vous en passer !

La planète Web est encore et sera toujours en pleine effervescence ! Aujourd’hui la ventede services et de biens en ligne est en pleine croissance et il est déjà possible de construirede vrais modèles économiques !

Il y a une course effrénée autour des standards technologiques de demain (Flash/Flex,SilverLight, Ajax, XUL, …) qui proposent aussi des environnements de développementsaccélérant la productivité des développeurs et la qualité de leurs applications.

Le terme RIA (Riche Internet Application) est dans toutes les bouches, et dans tout lesesprits ! Ce sont les mots magiques des Applications Intuitives et Riches de demain. Lavolonté de simplifier et de rendre plus interactives les interfaces utilisateurs préoccupe deplus en plus les chefs de projets IT (Technologies de l’Information) mais aussi et surtoutles managers métiers des grands groupes. En effet, cela doit permettre d’accroître laproductivité des équipes au quotidien et dans beaucoup de cas, d’acquérir et de fidéliserde nouveaux clients.

Tous les domaines d’activités sont concernés, de la finance à l’industrie en passant par legouvernement. Le monde de la banque, par exemple, proposera de nouveaux services enligne comme la consultation des comptes avec des outils pratiques d’analyse et debudgétisation. Dans l’univers de l’assurance c’est par exemple la simplification de lasouscription en ligne d’un nouveau contrat où le meilleur des technologies peut êtreutilisé, de l’application RIA guidant l’utilisateur, à la génération du contrat en PDF etl’archivage dans un coffre-fort personnel, en passant par la signature électronique !

Et demain ! Aujourd’hui déjà ! S’échappe de quelques bouches le mot RDA pour RichDesktop Application et les grands acteurs se lancent dans la bataille comme Google avecGoogle Gear ! Adobe avec Flex/AIR, Microsoft avec WPF… Qui gagnera ?

Et oui les applications RDA sont aussi riches que les applications RIA mais peuventfonctionner en mode déconnecté. C’est-à-dire, en dehors d’un navigateur Web et sans êtreconnectées à un service Internet !

Imaginez la consultation de vos comptes en ligne ! L’application RDA vous permettraitde synchroniser vos relevés de comptes lorsque vous êtes connectés au service de labanque. Et en mode déconnecté, vous pourrez analyser vos dépenses en les catégorisant,en effectuant des statistiques, ou en générant des rapports avec de beaux graphes… et cela

13

en toute transparence et de façon simple et intuitive. Plus besoin de télécharger desfichiers textes et de les importer dans un logiciel de gestion de comptes rarement intuitif !

Quelle est le devenir du Logiciel dans ce nouveau monde où les personnes seront tout letemps connectées avec du très haut débit ?

Est-ce l’annonce d’un nouveau mode de développement de produits et la fin du bon vieuxproduit en boîte développé en C / VB ? Est-ce l’avènement des applications en ligne avecde nouveaux modèles économiques, comme la location à l’usage et non plus l’achat d’unproduit ?

Personnellement, je crois en l’avenir du bureau virtuel riche, totalement personnalisableou nous ne paierons qu’en fonction de ce que nous consommons. Paiement à la duréed’utilisation ? Paiement au volume de données traitées ? … tous les modèles sont permis !

Alors pour développer vos applications RIA / RDA, les logiciels de demain, je ne peuxque vous conseiller d’utiliser Flex / Air l’une des meilleures technologies du moment !

Avec cet ouvrage découvrez la puissance et la richesse du langage et obtenez trèsrapidement des résultats impressionnants.

Bonne lecture et bon développement RIA / RDA !

Cyril Reinhard

Responsable du cursus Multimédia et Technologies de l’Information à l’EPITA

14

Introduction

C ommençons par le commencement, dans cette introduction vous allez découvrir lefameux Web 2.0 et les solutions proposées par Adobe dans ce domaine pour

satisfaire les utilisateurs.

Qu’est-ce qu’une RIA ?Datant de mars 2002, le terme RIA (Rich Internet Application) désigne des applicationsqui semblent exécutées localement alors qu’elles sont en fait des applications web.

Le conceptCe concept, développé par Macromedia (compagnie rachetée par Adobe 2005 et àl’origine du framework Flex), allie les avantages des applications traditionnelles et ceuxdes applications client-serveur comme on les retrouve habituellement sur l’Internet. Onobtient ainsi des programmes livrés sur le Web mais qui possèdent significativement lesmêmes caractéristiques que les applications que l’on installe sur un PC.

c Fig. 1 :Le monde RIA

15

Les Rich Internet Applications permettent d’effectuer de nombreux traitements côté clientqui étaient normalement effectués côté serveur. Avant les RIAs, le navigateur Internet neservait qu’à présenter les données issues des opérations effectuées sur le serveur : le clientenvoyait ses données au serveur qui calculait la réponse et la renvoyait au client quil’affichait. Dorénavant, un certain nombre de ces calculs sont déportés chez le client quieffectue des opérations non nécessairement exécutées sur le serveur ; il économise ainsides rafraîchissements du navigateur et des échanges de données qui sont coûteux entemps.

Avantage : RIALes RIA présentent aussi des avantages certains par rapport aux applications lourdesinstallées sur les postes clients. En effet, il n’est pas nécessaire de les installer, car ellessont directement utilisables via le navigateur Internet. Ainsi, la distribution et les misesà jour sont effectuées automatiquement. Les RIA facilitent également la créationd’applications multiplates-formes ; en développant avec Flex, vous n’aurez plus besoin defaire plusieurs versions de votre logiciel pour toucher les utilisateurs de différentesarchitectures ou systèmes d’exploitation, tous les ordinateurs équipés du Flash Player(près de 97 % des machines à l’heure actuelle) seront capables de lancer l’applicationsans surcoût en termes de développement. De plus, les utilisateurs sont rassurés carl’installation d’un programme collecté sur l’Internet est souvent synonyme d’invasion despywares ou de virus. Avec l’avènement des applications riches, tout est contrôlé par lenavigateur qui offre un cloisonnement par rapport au reste de la machine et prévient ainsid’éventuels logiciels malveillants.

RécapitulatifLes avantages des RIA pour les développeurs sont les suivants :

j un environnement efficace pour l’exécution du code, du contenu et descommunications ;

j une intégration accrue dans un environnement commun pour le contenu, lescommunications et les interfaces homme-machine ;

j un modèle objet puissant et facilement extensible pour l’interactivité ;j une réutilisation de composants facilitée qui permet des développements rapides et

plus riches que ce que peut offrir le langage HTML par défaut ;j la possibilité de réaliser des applications connectées et déconnectées ;j une distribution facilitée en supprimant les besoins d’installation et de

développements spécifiques aux différentes plates-formes visées.

Introduction

16

Et pour les utilisateurs, les avantages sont les suivants :

j l’intégration harmonieuse de contenus riches (vidéo, audio, graphes) de haute fidélitéqui présentent des données de façon précise, identique partout et très fidèle ;

j un meilleur temps de réponse de l’application car on peut faire transiter des donnéessans besoin de rechargement et par conséquent présenter seulement une partie de sesdonnées et en récupérer la suite en tâche de fond ;

j une meilleure interactivité et des interfaces très réactives qui ne nécessitent plus cefastidieux temps d’attente pendant le chargement et l’affichage d’une page ;

j un sentiment de contrôle de la part de l’utilisateur dans le sens où les utilisateurs ont,par exemple dans le cadre d’une application de e-commerce, la possibilité de mieuxvisualiser les produits, de personnaliser leurs achats, de pouvoir revenir en arrièresans avoir l’impression de commander trois fois le même produit ou de repasser parla phase de paiement contre leur gré…, ce qui assure un taux de satisfaction plusélevé et un engagement plus grand de leur part.

Alors aujourd’hui, pour bénéficier de tous les avantages que nous offrent les interfacesriches, il est possible de mettre en place des RIA de deux manières :

j en utilisant les technologies web normalisées telles que l’ECMAScript, le DOM etle XHTML, et en suivant la méthode AJAX ;

j en utilisant un framework de développement conçu pour les RIA tel que Flexd’Adobe, JavaFX de SUN, Silverlight de Microsoft ou XUL de Mozilla.

La méthode AJAX présente l’avantage d’être compatible avec pratiquement tous lesnavigateurs sans recourir à l’installation d’un greffon supplémentaire. Cependant, ellerequiert l’utilisation de technologies qui n’ont pas été prévues pour être manipulées de lasorte et ainsi le développement peut être fastidieux et le code dur à maintenir.

Les frameworks de développement spécialement étudiés ont besoin par contre d’élémentsextérieurs pour fonctionner ; il est nécessaire par exemple d’avoir installé le player Flashpour exécuter des applications Flex ou d’avoir le lanceur d’application XulRunner pourexécuter des applications XUL. Pensés pour la construction de RIA, ils fournissent desenvironnements de développement intégrés et des méthodes de développement quipermettent d’élaborer de manière propre et rapide des applications riches et complètes.

Quelques exemplesAujourd’hui, on retrouve déjà beaucoup de RIA sur l’Internet dont les plus connues sont :GMail de Google utilisant AJAX ou Google Analytics, Yahoo! Maps, Harley DavidsonCustomizer, Ebay San Dimas et Sony Phone Selector qui utilisent Flex, Joost réalisé avecXUL et Popfly qui utilise Silverlight.

Introduction

17

Yahoo! Mail, comme son concurrent GMail, est réalisé en AJAX : il propose denombreuses fonctionnalités que des clients e-mails statiques sont incapables de fournircomme l’auto-complétion ou la mise à jour de la boite mail sans avoir à rafraichir.

c Fig. 2 : Yahoo Mail

c Fig. 3 : Youtube

Introduction

18

Youtube Remixer est un outil de montage de vidéo lié à la fameuse plate-formemultimédia ; il est réalisé en Flex et prouve l’intérêt de la technologie Flash lorsque l’onsouhaite manipuler du contenu multimédia.

Google utilise la technologie Flex pour certains de ses outils, notamment Google Financeet Google Analytics qui profitent de la puissance des graphiques Flex. Ceux-ci ontl’avantage d’être dynamiques (informations contextuelles lors du passage de la souris surles graphes ou modification des courbes en temps réel).

c Fig. 4 : Google Finance

c Fig. 5 : Ebay San Dimas

Introduction

19

Enfin, seule vraie démonstration de la plate-forme AIR, Ebay San Dimas proposed’utiliser Ebay directement sur votre ordinateur, sans avoir à passer par le navigateur.

Introduction à Flex

Le terme Flex désigne à la fois le framework et le runtime d’application donnant lapossibilité aux développeurs de construire des interfaces riches en tirant parti du plug-inFlash. Ces applications seront connectées et en utilisant le modèle de développementn-tiers, elles permettent d’associer aux interfaces utilisateurs plusieurs technologies côtéserveur (ASP.NET, Java, PHP…) qui fournissent de l’information, soit via deswebservices, soit en attaquant directement des bases de données, ou en utilisant des objetsJava.

Flex a plus de 4 ans, il est devenu un produit open-source depuis sa version 3 sortie début2008. La prochaine version est attendue courant 2009.

Présentation de la technologieTechniquement, Adobe Flex regroupe les éléments suivants :

j ActionScript 3.0 qui est un langage de script objet. Ce langage est la transpositionpour Flex de la norme E4X (ECMAScript for XML).On peut l’apparenter au langageJavaScript dans le développement web classique.

j MXML, un langage basé sur la grammaire XMLqui permet de décrire des interfacestrès interactives et de les mettre en forme. On peut l’apparenter au langage HTMLdans le développement web classique.

j Un langage de style intégré qui reprend les spécifications de CSS 1 (Cascading StyleSheet).

j Une interface événementielle de manipulation de document basée sur laspécification 3 du DOM écrite par le W3C.

c Fig. 6 : Les solutions Adobe

Introduction

20

Le langage MXML est conçu pour être très facilement appréhendable. Combinée àl’utilisation de FlexBuilder, l’écriture d’une interface en Flex ne requiert pas unapprentissage long et fastidieux car cet éditeur permet (grâce à la complétionautomatique) d’écrire la plupart des balises à votre place.

L’autre grosse brique dans la prise en main de Flex sera l’apprentissage du langageActionScript. Les développeurs nantis de bases en programmation (de programmescompilés ou de scripts) ne seront pas déroutés outre mesure car c’est un langage objet trèscomplet et les débutants seront fortement aidés dans leur apprentissage par le toujoursfantastique FlexBuilder. De plus, si vous avez déjà eu l’occasion d’écrire du codeJavaScript ainsi (une autre implémentation de la norme ECMAScript) ; vous n’aurezmême pas à apprendre une nouvelle syntaxe.

Les concepts à appréhenderPour devenir un développeur Flex efficace, il vous faudra assimiler :

j Comment les applications Flex doivent être construites (et dans quels cas il n’est paspertinent de choisir cette solution).

j Les relations entre les objets MXML et les objets ActionScript et comment utiliserchacun d’eux.

j Bien connaître les composants fournis par Flex, comment les manipuler et créer lesvôtres.

j Les différents moyens d’interagir avec le serveur pour traiter les données.j Ce qu’ implique, en termes de performance, le code que vous écrivez et les différents

moyens d’améliorer votre application.

Un autre grand avantage de la technologie Flex est la communauté très importantequ’Adobe a déjà su développer autour de ce produit.De nombreux forums de discussionset de nombreuses listes de diffusion permettent d’être en relation avec des experts Flexprésents dans le monde entier et, n’hésitons pas à nous en féliciter, beaucoup de cesexperts sont originaires de France et parlent notre langue.

Un leaderAujourd’hui, sur le marché des RIA, Flex est la technologie la plus mûre (version 3) età la plus grande pénétration dans le marché, notamment grâce à l’utilisation de laplate-forme Flash qui est très éprouvée et très répandue (environ 97 % des machines dansle monde sont pourvues du Flash Player et peuvent donc exécuter une application Fleximmédiatement) ; elle l’est aussi grâce à son environnement de développement intégré,

Introduction

21

FlexBuilder, basé sur Eclipse (le célèbre EDI, Environnement de développement intégré,développé par l’Eclipse Foundation et initié par IBM).

De plus, cette technologie est préposée à un bel avenir car, comme écrit précédemment,la prochaine version est d’ores et déjà prévue et beaucoup de développements sont encours dans de multiples domaines : cela assure à ce framework une pérennité nonnégligeable si l’on souhaite s’investir dans cette technologie pour des développementsaussi bien professionnels que personnels.

La licenceArrive la question de la licence d’utilisation. Très importante dans le choix d’unetechnologie pour une application, la licence d’utilisation de Flex l’est d’autant plus carelle conditionne non seulement le coût des outils nécessaires pour écrire le code, maisaussi les possibilités d’explorer les "entrailles" du framework et surtout les modalités dedistribution.

Originellement, Flex était distribué en étant protégé par une licence propriétaire, ce quiempêchait quiconque d’avoir accès aux sources des classes et des composants duframework ; mais depuis le 26 avril 2007, Adobe a annoncé son intention de modifier lalicence de Flex et dorénavant la solution de développement sera disponible avec unelicence d’utilisation dite "libre" (possibilité de visualiser les sources mais en plus de s’enservir, de les modifier et de les redistribuer) : la licence MPL. Ainsi, les curieux seront àmême de fouiner dans le code source de Flex et éventuellement de le modifier à leurguise. Cependant, pour l’EDI, Flex Builder, reste "propriétaire" et bien qu’une versiond’évaluation (limitée à 30 jours) de ce logiciel soit disponible sur le site d’Adobe, laversion complète n’est disponible qu’à l’achat (environ 500 Q). Cet éditeur est de loin leplus abouti et cet investissement est donc pratiquement incontournable une fois la périoded’évaluation expirée.

Introduction à AIRAIR, pour Adobe Integrated Runtime, est le pendant "bureau" et est déconnecté de Flex.

La technologie AIR est un lanceur d’application multiplate-forme et multi-systèmed’opérations qui permet d’exécuter sur le poste client en local des programmes écrits dansles technologies Flash, Flex, HTML, etc.

Ainsi, le passage de Flex à AIR permet sans grandes modifications de rendre desapplications web disponibles hors ligne en les installant sur lePC.

Introduction

22

La première version stable de la technologie AIR (1.0) est sortie début 2008 et sonévolution, tout comme sa pérennité, est fortement liée à celle de Flex. De nombreuxgroupes ont déjà parié sur cette technologie : AOL et eBay par exemple ont développé desapplications AIR téléchargeables gratuitement sur le site d’Adobe.

Introduction

23

11.1 Initiation à Flex Builder 3 .............................. 261.2 Créer sa première application ........................ 341.3 Compiler une application Flex ........................ 441.4 Check-list ................................................. 45

Créer sonpremier projetavec Flex

Ce chapitre d’initiation va vous permettre de vousfamiliariser avec le Framework et l’environnement de

développement Flex. Nous y abordons l’installation et lamanipulation des composants nécessaires à la création denotre premier projet.

1.1 Initiation à Flex Builder 3Le premier chapitre vous a permis de comprendre les principes fondamentaux des RIA etde Flex en particulier. Il est maintenant temps de passer à la pratique et de créer unepremière application en Flex 3. C’est le but de ce chapitre.

Avant de commencer, il faut au préalable installer les outils de développement nécessaireset comprendre leur fonctionnement de base. La première partie de ce chapitre sera doncentièrement consacrée à l’IDE d’Adobe : Flex Builder 3. Une fois votre poste de travailconfiguré correctement, vous entrerez dans le vif du sujet en créant votre premier projet.

Un IDE est un programme regroupant la plupart du temps un traitement de texte et denombreux outils afin de faciliter la programmation dans un langage donné.

Flex Builder 3 est l’IDE de développement pour Flex 3 développé par Adobe. Il n’estcependant, du moins en théorie, pas indispensable au développement Flex puisque leSDK est disponible gratuitement sur le site d’Adobe. Il est donc possible de développerune application uniquement avec votre éditeur de texte favori, voire même avec Notepad.

Le SDK permet alors de compiler les applications en ligne de commande. Mais ceprocédé n’est clairement pas envisageable pour le développement d’applications de tailleconséquente. De plus, les nombreuses fonctionnalités de Flex Builder 3 vous deviendrontrapidement indispensables. L’IDE offre entre autres :

j un compilateur intégré ;j une gestion des versions ;j un débogueur interactif ;j un assistant de mise en page ;j une complétion automatique et une détection d’erreurs dans le code ;j une documentation complète.

Nous utiliserons donc cet IDE tout au long de cet ouvrage puisqu’il facilite grandementle développement Flex.

Flex Builder 3 et EclipseSi vous vous intéressez un peu à la programmation, vous vous êtes peut-être aperçu quedeux technologies sont particulièrement en vogue en ce moment. Il s’agit du Java et du.NET.

Le Java est un langage orienté objet développé par SUN Microsystems au milieu desannées 1980 et qui a la particularité d’être multiplateforme grâce à l’utilisation d’une

1 Créer son premier projet avec Flex

26

machine virtuelle. Il existe plusieurs IDE facilitant le développement Java commeNetbeans ou JBuilder par exemple. Mais le plus célèbre est sans aucun doute Eclipse.

Eclipse est un IDE polyvalent et multiplateforme développé à l’origine par IBM. Il a, enoutre, la particularité de ne pas être spécifique à un langage donné. Une des forcesd’Eclipse vient de son architecture développée autour de la notion de plug-ins. Ainsi, denombreux développeurs peuvent ajouter des fonctionnalités spécifiques ou bien encoreapporter un support à de nouveaux langages de programmation. Pour finir, sachezqu’Eclipse est entièrement gratuit. Vous trouverez plus d’informations à son sujet surwww.eclipse.org.

De son côté, Microsoft a introduit le framework .NET début 2000 ; il offre la particularitéd’être supporté par de nombreux langages adaptés par Microsoft comme le VB.NET ouencore le C#. Microsoft a donc son propre IDE spécifique à son framework : il s’agit deVisual Studio.

Adobe a fait le choix de se baser sur Eclipse pour développer son IDE, du fait de sagrande popularité auprès des développeurs et de sa capacité d’évolution grâce auxplug-ins. Ainsi, de nombreux développeurs sont déjà familiarisés avec l’environnement dedéveloppement Flex et le temps d’adaptation au développement de RIA sera d’autant pluscourt.

Flex Builder 3 est disponible sous deux formes différentes car de nombreux développeursont déjà leur environnement Eclipse configurés à leur guise :

j un plug-in ;j un package comprenant Eclipse et le plug-in intégré.

Nous utiliserons le package complet pour l’installation de l’IDE dans la partie suivante.Enfin, sachez que Flex Builder (contrairement à Eclipse) est payant mais qu’une versiond’évaluation de 30 jours est disponible.

Nous allons utiliser la version 3 qui est la plus récente disponible au moment où nousécrivons ces lignes.

Installer Flex Builder 3Commençons par l’installation de l’IDE.

1 La première étape est le téléchargement. Rendez-vous sur le site d’Adobe à l’adressesuivante : http://www.adobe.com/fr/.

2 Dans la section Produits, sélectionnez Flex. Vous arrivez alors sur une page dédiéeà la technologie Flex. Cliquez à présent sur le lien Tester Flex Builder 3. Comme

1Initiation à Flex Builder 3

27

vous pouvez le constater, il est nécessaire de créer un compte Adobe pour accéderà la page de téléchargement : entrez une adresse e-mail valide puis cliquez surContinuer.

3 Une fois arrivé sur la page suivante, entrez les informations obligatoires signaléespar un astérisque. Vous allez enfin pouvoir télécharger Flex Builder à la suite devotre inscription. Vous devriez arriver sur une page vous proposant plusieursversions à télécharger :

j une version standalone pour Mac ou Windows comprenant Eclipse et le plug-inFlex intégré ;

j une version plug-in pour Eclipse encore une fois pour Mac ou Windows.

Nous allons récupérer la version standalone qui contient tous les outils nécessaires audéveloppement d’applications Flex.

c Fig. 1.1 : Formulaire de connexion

c Fig. 1.2 : Téléchargez le standalone pour Mac ou Windows


28

4 Une fois le téléchargement terminé, lancez l’exécutable, cliquez sur Next et acceptezla licence.

5 Choisissez ensuite le répertoire d’installation (typiquement C:\ProgramFiles\Adobe\Flex Builder 3).

6 L’écran suivant va vous demander d’installer Flash Player 9 pour les navigateursinstallés sur votre système (ici Internet Explorer et Firefox). Nous vous rappelons queFlash Player 9 est indispensable pour exécuter des applications Flex. Cliquez sur Next.

c Fig. 1.3 : Contrat de licence Adobe

c Fig. 1.4 : Répertoire d’installation


29

7 Un résumé vous permet de vérifier les paramètres saisis avant l’installation effectivedes composants. Cliquez sur Next pour confirmer les paramètres d’installation.

8 Une fois l’installation Flex Builder 3 terminée, vous allez avoir le choix d’installerl’extension ColdFusion qui permet de faire le lien entre l’IDE et le middlewareColdFusion d’Adobe. Nous n’allons pas utiliser ce dernier dans cet ouvrage et il estdonc inutile d’installer l’extension.

c Fig. 1.5 : Installation du Flash Player

c Fig. 1.6 : Résumé


30

Pour les utilisateurs de Windows Vista

Il sera nécessaire de lancer Flex Builder 3 avec les droits administrateur au premier lancement del’application. Dans le menu Démarrer, cliquez sur le raccourci Flex Builder 3 avec le bouton droit dela souris et sélectionnez Lancer en tant qu’administrateur dans le menu contextuel.

c Fig. 1.7 : Extension pour ColdFusion

c Fig. 1-8 : Lancer Flex Builder 3 pour lapremière fois sous Vista


31

Comprendre l’arborescence du dossier d’installationMaintenant que Flex Builder 3 est installé, il peut être utile de comprendre comment eststructuré le kit de développement Flex. Ouvrez le répertoire d’installation. Comme vouspouvez le constater, celui-ci contient plusieurs sous-dossiers. Ces tableaux vont vouspermettre de mieux comprendre leur utilité :

Tableau 1.1 : Arborescence de Flex Builder 3

Répertoire Description

Flex Builder 3 Dossier d’installation de l’IDE et des SDK

/configuration Répertoire standard d’Eclipse contenant le fichier config.ini et leslogs d’erreurs

/features Répertoire standard d’Eclipse contenant le plug-in correspondantaux fonctionnalités de Flex Builder

/sdks Contient le SDK

/jre Contient le Java Runtime Environnement utilisé par défaut par l’IDEen mode Standalone

/Player Répertoire d’installation des différents Player Flash (versionstandard et débogueur)

/plugins Répertoire d’installation des plug-ins Eclipse utilisés par Flex Builder(rappelons qu’Eclipse est un IDE entièrement modulaire par le biaisde plug-ins)

Le tableau suivant détaille l’arborescence des deux SDK installés par défaut.

Tableau 1.2 : Arborescence du SDK

Répertoire Description

/bin Contient les différents exécutables (Compilateur mxmlc, compc ouencore adl)

/frameworks Contient les fichiers de configuration

/frameworks/libs Contient les bibliothèques SWC utilisées pour compiler lesapplications

/frameworks/projects Contient le code source du framework Flex


32

Tableau 1.2 : Arborescence du SDK

/frameworks/themes Contient les thèmes par défaut des différents composants Flex

/lib Contient des fichiers jar

/runtimes Contient les Players Flash et AIR

/samples Contient les projets d’exemples accessibles depuis la paged’accueil Flex

Présentation de l’environnement de développementVous avez normalement installé l’IDE d’Adobe et exploré son arborescence. Nous allonsmaintenant essayer de comprendre comment fonctionne le framework Flex. Il est grandtemps de passer aux choses concrètes : démarrons Flex Builder 3. Au chargement, vousdevriez voir apparaître l’écran suivant.

c Fig. 1.9 : Écran d’accueil de Flex Builder 3


33

Vous trouverez ici quelques tutoriels en anglais expliquant les concepts de base ainsiqu’un accès à l’aide de Flex Builder. Des exemples d’applications Flex sont égalementdisponibles (Flex Component Explorer et Flex Style Explorer) permettant d’avoir unaperçu rapide et fonctionnel des différents composants et styles utilisables.

Au fur et à mesure de votre progression dans cet ouvrage, vous allez probablementvouloir ouvrir les projets associés à ces exemples pour étudier leur code. Cela vous aideraà mieux comprendre les concepts étudiés en observant les résultats en situation réelle.

Vous pouvez observer les différentes fenêtres et barres d’outils qui composent l’IDE (lesutilisateurs d’Eclipse devraient vite retrouver leurs marques). D’autres fonctionnalitésseront détaillées plus tard car elles ne sont accessibles que lorsqu’un projet est ouvert.

La barre située en haut de l’IDE permet principalement d’accéder à des raccourcis :

j créer un nouveau projet ;j sauvegarder un projet ;j lancer un projet ;j déboguer un projet.

Toutes ces fonctionnalités sont cependant directement accessibles dans les différentsmenus de l’IDE.

Les vues de gauche permettent de gérer et d’explorer les différents projets créés dans FlexBuilder (Navigator) et de parcourir l’arborescence des composants insérés dans uneapplication (Outline).

Enfin, sachez que l’interface est entièrement modulable et que vous pouvez placer lesdifférents outils où bon vous semble, en fonction de vos préférences.

Maintenant que vous avez un peu exploré l’interface, il est temps de créer votre premierprojet Flex.

1.2 Créer sa première applicationPour créer une application Flex, il faut tout d’abord créer un nouveau projet. Ainsi, FlexBuilder va s’occuper de la création de l’arborescence et des fichiers nécessaires audéploiement de l’application.

c Fig. 1.10 : Barre d’outils Flex


34

Création d’un nouveau projetCommencez par créer un nouveau projet en suivant ces étapes :

1 Dans le menu, cliquez sur File/New/Flex Project. La boîte de dialogue suivantes’ouvrira :

Cette boîte de dialogue comporte deux champs :

j le nom du projet (project name)j la technologie serveur utilisée pour fournir des données à l’application.

2 Entrez Mon premier projet Flex comme nom de projet et laissez None pour le typede serveur puis cliquez sur Next (voir fig. 1.12).

Cet écran va vous permettre de choisir le dossier de destination du projet. Par défaut, unprojet est créé dans le workspace de l’IDE. Le workspace se situe par défaut dans MyDocuments/Flex Builder 3 pour cette version. Ainsi, par défaut, un nouveau projet seracréé dans My Documents/Flex Builder 3/nom_du_projet. Il est conseillé de garder lesprojets groupés dans le workspace mais ce n’est pas une obligation.

c Fig. 1.11 :Création d’un nouveauprojet

1Créer sa première application

35

Changer le chemin du workspace par défaut

Il est possible de changer le répertoire par défaut du workspace, et des projets. Pour cela, cliquez dansle menu sur File puis sur Switch Workspace.

3 Cliquez sur Finish.

Flex Builder 3 devrait maintenant avoir créé l’arborescence du projet avec les fichiersnécessaires comme vous pouvez le constater dans la vue Navigator. Remarquezégalement qu’à la place de la page d’accueil Flex, l’IDE a ouvert le fichier MonProjet.mxml dans la vue centrale qui correspond à l’éditeur où vous écrirez le code ou encoreoù vous modifierez le design de l’application. Vous devriez donc avoir une fenêtre commecelle-ci : (voir fig. 1.13)

Comme vous pouvez le constater, Flex Builder s’est chargé d’écrire un petit bout de codepour vous simplifier les choses, mais nous en reparlerons ultérieurement.

Notez également la présence de deux boutons dans l’éditeur de code.

Ils permettent de basculer entre les modes Source et Design (vous connaissez sûrementce principe si vous utilisez Dreamweaver pour créer vos pages web). Vous vous trouveznormalement en mode Source. Nous détaillerons ces deux modes de travailcomplémentaires mais vous pouvez basculer en mode Design pour avoir un premieraperçu de votre nouvelle application si vous le souhaitez.

c Fig. 1.12 : Dossier de destination


36

c Fig. 1.13 : Premier projet sous Flex Builder 3.

c Fig. 1.14 : Flex Builder en mode Design


37

Comprendre l’arborescence d’un projet FlexL’Assistant de création de projet de Flex Builder 3 a créé plusieurs éléments dansl’explorateur de projet (vue Navigator). Nous allons essayer de comprendre commentfonctionne l’arborescence d’un projet Flex.

Tableau 1.3 : Arborescence d’un projet Flex

Dossier/fichier Description

/bin C’est dans ce dossier que votre application est compilée au format .swf àchaque sauvegarde du projet. Les fichiers SWF sont déployés dans despages HTML générées automatiquement.

/html-template Contient des fichiers additionnels utilisés par certaines fonctionnalités deFlex comme le fichier de détection du Player Flash ou le Gestionnaired’historique. Ces fichiers servent principalement à générer la page HTMLdans laquelle l’application Flex au format .swf (flash) sera déployée.

MonProjet.mxml Ce fichier (nommé par défaut lors de la création du projet) permet dedécrire votre application. Il contient le tag <mx:Application> quicorrespond au composant principal.

.settings Ce fichier caché dans Flex Builder contient les préférences du projet en cours.

Nous allons maintenant voir comment décrire une application Flex grâce au langageMXML.

MXMLEn Flex, deux langages sont utilisés pour écrire une application :

j l’ActionScript 3 (détaillé dans le prochain chapitre) ;j le MXML.

Le MXML est un langage basé sur le XML permettant de définir l’interface utilisateurd’une application et de définir des relations entre ses composants.

Si vous avez déjà créé des sites web en HTML, alors vous ne devriez avoir aucunproblème avec ce nouveau langage. Le principe est en effet très similaire : on place descomposants sur une page sous forme de balises afin de définir une interface. Mais leMXML est un langage plus structuré. Il est également beaucoup plus riche et puissantgrâce aux nombreux composants par défaut du framework Flex et à la facilitéd’interaction entre eux. Enfin, le MXML permet de créer des composants personnaliséspour améliorer la réutilisabilité du code et mieux structurer une application.


38

Comme tout langage, le MXML doit respecter certaines règles simples que nous verronsau fur et à mesure.

Nommage des fichiers MXML

Les fichiers MXML doivent suivre les conventions suivantes :

j Le nom d’un fichier MXML doit commencer par un underscore (_) ou une lettre, ensuite un nom defichier ne peut contenir que des lettres, des chiffres ou des underscores.

j Les noms de fichiers ne doivent pas correspondre à une classe ActionScript existante, au nom ouà l’identifiant d’un composant et doivent être différents du mot "application".

j Les fichiers MXML doivent porter l’extension .mxml.

Nous allons maintenant ajouter des composants à notre première application.

Mode SourceAssurez-vous que le fichier MonProjet.mxml de votre projet est ouvert et que l’éditeur esten mode Source. Le fichier contient le code suivant par défaut :

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">

</mx:Application>

La première ligne du fichier permet de spécifier la version du XML ainsi que le typed’encodage. Bien qu’optionnelles, il est néanmoins conseiller de remplir ces informations.Le type d’encodage peut varier selon les pays pour prendre en compte les caractèresspécifiques à chaque langue, ici le format UFT-8 permet d’assurer une bonnecompatibilité puisqu’il est indépendant du type de plate-forme ou de la langue.

La balise <mx:Application> est le nœud racine d’une application Flex définie dansl’espace de nom http://www.adobe.com/2006/mxml ; c’est aussi le conteneur principal.Un conteneur est un composant de l’interface utilisateur Flex permettant d’associer, degrouper et de définir la disposition d’autres composants Flex, y compris d’autresconteneurs imbriqués. Ainsi, tout composant d’une application doit être contenu entre lesbalises <mx:Application>…</mx:Application>. Ce principe est en fait très similaire auxbalises <html> </html> d’une page web.

Nous allons à présent ajouter quelques éléments à notre interface. Le but est depositionner :

j un Panel avec un titre ;


39

j un Label ;j un TextInput ;j un Button.

Procédez à présent comme suit :

1 Positionnez le curseur entre les balises <mx:Application>…</mx:Application> puissaisissez au clavier un chevron ouvrant : <. La complétion de l’IDE s’activeautomatiquement et vous propose une liste de balises disponibles.

2 Saisissez à présent directement Panel puis tapez sur [Ä]. Nous allons maintenant luiajouter quelques propriétés.

3. Placez-vous dans la balise <mx:Panel> et appuyez sur la touche [T] ; là encore, lacomplétion s’active. Nous voulons associer un titre à notre composant. Tapez titleou sélectionnez cette propriété dans la liste déroulante qui vient d’apparaitre. Enfin,saisissez un titre qui apparaîtra en haut de ce composant ("Un panneau Flex" parexemple).

4 Pour finir, entrez un chevron fermant >. Flex Builder a normalement ajouté lesbalises ouvrantes et fermantes correspondant au panel. Il est maintenant possibled’ajouter d’autres composants dans le Panel que vous venez de créer puisque cecomposant est en réalité un conteneur.

c Fig. 1.15 :Complétion automatiquedans Flex Builder 3

c Fig. 1.16 :Complétion sur lespropriétés d’uncomposant


40

5 Enfin, modifiez la propriété layout de la balise <mx:Application> et remplacezabsolute par vertical.

Le layout permet de spécifier la disposition des composants au sein d’un conteneurmais nous verrons cela plus en détail dans le chapitre 3 Réaliser sa première interface.

Votre fichier MonProjet.mxml devrait maintenant contenir le code suivant :

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical">

<mx:Panel title="Un panneau Flex">

</mx:Panel></mx:Application>

Complétion Flex

Vous pouvez utiliser la complétion à tout moment dans l’éditeur en appuyant sur [Ctrl]+[Barre}d'espace].

6 Ajoutons maintenant le Label. Le Label permet d’afficher de courts textes dans uneapplication, comme un titre par exemple. Réitérez le même procédé que pour lePanel mais cette fois-ci, ajoutez une propriété text correspondant à la chaîne decaractères à afficher ("Hello World" par exemple). Pour finir, terminez cette balisepar les caractères suivants : />.

Puisque le MXML est basé sur le XML, il est possible de définir des balises de deuxmanières :

j <balise> </balise> ;j <balise/> (condensé des deux balises précédentes).

Balises fermantes

Il est souvent recommandé d’utiliser la seconde méthode pour les composants simples (Label,TextInput…) afin de rendre le code plus lisible.

Voici le résultat final :


<mx:Panel title="Un panneau Flex">


41

<mx:Label text="Hello World"/></mx:Panel>

</mx:Application>

Nous allons maintenant passer l’éditeur en mode Design afin d’avoir un premier aperçude notre travail et d’ajouter les autres composants de manière visuelle.

Cliquez sur le bouton Design dans le sélecteur de mode.

Mode DesignLe mode Design peut s’avérer très utile pour placer des composants, avoir un aperçuglobal de l’application ou encore gérer les différents états (voir le chapitre 8,Personnaliser son application). Cette vue permet également de modifier les propriétés etle design des composants grâce au panneau de droite.

Votre IDE devrait maintenant ressembler à l’écran suivant :

Vous pouvez cliquer sur les différents composants de votre application et modifier leurspropriétés. Vous pouvez ainsi sélectionner le Panel et modifier son titre qui est accessibledans le panneau des propriétés ou encore modifier la police de caractère du texte affiché ;choisissez Times New Roman dans l’onglet Style, et vous vous apercevrez que lechangement de police s’est appliqué au titre du Panel ainsi qu’au Label car tout

c Fig. 1.17 : Votre première application en mode Design


42

composant prend par défaut les propriétés du composant parent. Ici, le Label est biencontenu dans le Panel, ce qui explique ce changement.

Ajoutons maintenant les deux composants restants à notre application :

j un TextInput ;j un Button.

À cet effet, sélectionnez les composants dans la liste déroulante à gauche de l’éditeur etinsérez-les grâce à un glisser-déposer sur le Panel. Pour terminer, remplacez le textecontenu dans le bouton par "Click Me" en modifiant sa propriété label.

Repassez à présent en mode Source. Flex Builder a bien ajouté les deux dernierscomposants dans le fichier mxml et modifié la propriété fontFamily du Panel. Voici lecode final de ce premier projet :


<mx:Panel title="Un panneau Flex"fontFamily="Times New Roman">

<mx:Label text="Hello World" /><mx:TextInput/><mx:Button label="Click Me"/>


c Fig. 1.18 :Modification du style en mode Design

c Fig. 1.19 :Le résultat final en modeDesign


43

1.3 Compiler une application FlexNotre premier projet est maintenant terminé et il est temps d’observer ce premier résultatdans un navigateur. À ce titre, il suffit simplement de cliquer sur la flèche verte de la barred’outils. Flex Builder 3 se chargera alors de compiler votre projet et de le lancer dansvotre navigateur par défaut.

Du MXML au SWFQue s’est-il exactement passé quand vous avez appuyé sur le bouton Run ? En fait, uncertain nombre d’étapes ont permis de créer un fichier SWF à partir de notre fichierMXML.

La première étape consiste à transformer les balises MXML en une nouvelle classeActionScript 3 (voir le chapitre suivant), car en réalité, tout ce qui est fait en MXML estfaisable entièrement en ActionScript (mais cela peut vite devenir complexe et fastidieux).Ensuite, le compilateur crée du code qui instancie cette classe qui sera finalement compiléen fichier SWF (format standard du Flash Player).

Grâce à l’environnement de développement Flex Builder 3, ce procédé s’est déroulé demanière transparente mais le SDK fourni offre, bien entendu, les outils de compilation(mxmlc). Il est possible de compiler les fichiers MXML en ligne de commande en appelantl’exécutable mxmlc.exe se trouvant dans le répertoire /sdk/bin du dossier d’installation deFlex Builder.

Mxmlc −−show−actionscript−warnings=true −−strict=true −file−specs "c:/…/MonProjet.mxml"

Le compilateur produit alors le fichier MonProjet.swf correspondant.

Fichiers générésLors de la compilation, Flex Builder 3 a généré plusieurs fichiers dans le répertoire /binde votre projet dont trois SWF qui correspondent aux versions suivantes de l’application :

j une version Standard pour la mise en production ;j une version Debug ;j une version Profile.

c Fig. 1.20 : Compiler le projet


44

Enfin, chacun de ces fichiers est encapsulé dans une page HTML séparée afin de lesdéployer dans un navigateur web. Les pages sont générées à partir du dossierhtml-template et permettent de vérifier la présence du Flash Player 9 dans le navigateurclient et de charger le fichier SWF.

À propos du Profiler

Le Profiler est une nouvelle fonctionnalité de Flex 3. Cet outil permet de visualiser le nombre d’instanceset la taille en mémoire de tous les objets de votre application durant son exécution. Autant dire qu’ils’agit d’une mine d’informations pour toute personne souhaitant optimiser son code.

1.4 Check-listDans ce premier chapitre, vous avez :

a installé et pris en main Flex Builder 3 ;a créé une première application ;a appréhendé les bases du langage MXML ;a compilé et lancé une application Flex ;a étudié le mécanisme permettant de passer du MXML au SWF ;a travaillé en mode Source et Design.

Le chapitre suivant est entièrement consacré au second langage utilisé dans leframework Flex : l’ActionScript 3.

c Fig. 1.21 : Processus de compilation Flex

1Check-list

45

22.1 Démarrer avec ActionScript dans Flex Builder ....... 482.2 Les bases de la programmation ....................... 552.3 La programmation orientée objet dans ActionScript .. 682.4 Déboguer de l’ActionScript 3.0 dans Flex Builder .. 772.5 Check-list ................................................. 87

Découvrirl’ActionScript 3.0

Si le MXML que vous venez de découvrir est un langagede description, ActionScript est pour sa part un

langage de programmation qui vous permet d’utiliser aumaximum les possibilités du Framework Flex. Vousdécouvrirez ici les bases de ce langage et son intégrationdans Flex Builder.

2.1 Démarrer avec ActionScript dans Flex BuilderActionScript est un langage de script, orienté objet, basé sur ECMAScript. Ce langage estun standard développé par l’ECMA, une organisation de standardisation très active dansle domaine de l’informatique. Le langage ECMAScript a été développé à partir despremières versions de JavaScript en 1997, et en est aujourd’hui à sa quatrième édition.ActionScript 3.0 est basé sur cette dernière édition et en est même une desimplémentations les plus fidèles.

ActionScript est utilisé dans les applications Adobe Flex ou Flash et apporte despossibilités étendues aux développeurs. Il permet de réaliser des applications complexesen laissant un accès de bas niveau aux données et aux objets. De nombreuses APIpermettent de gérer les événements, d’interagir avec du contenu Flash et bien d’autresfonctionnalités. Un raccourci rapide serait de dire qu’il représente la partie laissée auxprogrammeurs, le reste l’étant aux designers.

Afin de pouvoir suivre les exemples qui illustreront notre découverte d’ActionScript, nousallons étudier dans un premier temps l’utilisation du code ActionScript dans uneapplication Flex. L’IDE utilisé reste Flex Builder 3. Il permet d’accéder aux fonctions lesplus simples comme les plus avancées du langage et guide l’utilisateur dans l’intégrationavec la partie interface en MXML. Cette première partie n’est qu’une introduction et nes’attardera pas sur les spécificités du langage qui sera décrit par la suite.

Créer l’application FlexNous allons commencer par créer un projet qui nous servira à suivre les exemples de codeen ActionScript 3. Nous allons donc lancer Flex Builder 3 et suivre la démarche détailléedans le chapitre 1 sur la création d’un nouveau projet. Appelons le projetActionScriptTest.

L’objectif de notre première fonction en ActionScript sera tout simplement d’afficherdans notre application le message "Hello world!". Le champ de texte contenant lemessage sera décrit dans le MXML, mais le message à afficher sera donné par la fonction.

Nous allons placer un champ de texte dans notre application. Ce champ sera non éditablepour bien montrer que son contenu est rempli de façon automatique. Nous l’appelleronstextArea pour plus de simplicité. Voici son code :

<mx:TextArea id="textArea" editable="false"/>

Ce code est à insérer entre les balises <mx:application> et </mx:application> du fichierprincipal de l’application Flex : ActionScriptTest.mxml. Ce fichier aura alors cet aspect :

2 Découvrir l’ActionScript 3.0

48

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"➥ layout="absolute">

<mx:TextArea id="textArea" editable="false"/></mx:Application>

Nous pouvons déjà exécuter notre application en cliquant avec le bouton droit de la sourissur le fichier MXML et sélectionner Run Application. Vous pourrez constater parvous-même que le champ de texte est vide.

Passons à présent à notre fonction ActionScript qui va nous permettre d’afficher notremessage.

Le code ActionScript dans vos fichiers MXMLIl existe deux façons d’organiser du code ActionScript dans une application Flex : àl’intérieur de vos fichiers MXML ou dans des fichiers séparés.

La première, et la plus simple, consiste à insérer son code entre les balises <mx:Script>et </mx:Script> dans vos fichiers MXML. On place ces balises en haut de fichier, justeaprès la balise d’ouverture de l’application. Le résultat ressemble à cela :

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"➥ layout="absolute"><mx:Script>

<![CDATA[// code ActionScript 3.O]]>

</mx:Script><mx:TextArea id="textAreaId" editable="false"/>

c Fig. 2.1 :L’application vide

2Démarrer avec ActionScript dans Flex Builder

49

</mx:Application>

Vous pourrez noter que les commentaires en ActionScript se font grâce à un double slash(//) pour des commentaires sur une ligne. Le reste de la ligne est alors ignoré par lecompilateur. Si les commentaires s’étendent sur plusieurs lignes, il faut débuter par unslash astérisque (/*) et terminer par un astérisque slash (*/). Cette façon de procéder estla même que pour le C++ et le Java.

À l’intérieur de ces balises, nous allons déclarer une fonction giveHelloWorld quirenverra une chaîne de caractères contenant le message "Hello world!" à afficher :

public function giveHelloWorld():String{

return "Hello world!";}

La syntaxe est très proche du Java. Observons quelques éléments de cette fonction :

j Le mot-clé public permet de rendre l’accès à la fonction possible en dehors dunamespace.

j Le mot-clé function déclare une fonction.j Ensuite vient le nom de la fonction, ici "giveHelloWorld".j Les parenthèses permettent de déclarer la liste d’arguments.j Il faut spécifier le type de retour de la fonction, ici on retourne une chaîne de

caractères.j Enfin vient le code de la fonction à proprement parler.j On remarquera que les instructions se terminent par un point-virgule.

Notre fonction giveHelloWorld pourrait être utilisée directement pour, par exemple,donner une valeur à l’attribut text de notre composant TextArea. Mais nous pouvonségalement y faire appel dans une autre fonction.

À présent, créons donc cette seconde fonction qui aura pour but de définir la valeur dutexte contenu dans le TextArea à chaque fois qu’on y fera appel. Appelons cette fonctionprintHello :

public function printHello():void{

textAreaId.text = giveHelloWorld();}

Cette fois-ci on ne renvoie rien, le type de retour est void. On remarque qu’on peut faireappel aux objets qui sont contenus dans le code MXML du moment que ceux-ci ont un


50

identifiant, ici textAreaId. On peut alors faire appel à leurs attributs grâce au ".". Lafonction printHello fait appel à giveHelloWorld pour affecter à l’attribut text detextAreaId la valeur de retour, en l’occurrence la chaîne "Hello world!".

Enfin, nous devons faire appel à printHello durant l’exécution pour afficher notre texte.Nous allons le faire automatiquement au chargement de l’application. Pour cela, nousutiliserons l’attribut creationComplete de la balise <mx:Application> en lui demandantd’exécuter la fonction printHello lorsque l’affichage est prêt :

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"➥ layout="absolute" creationComplete="printHello()">

On peut donc également faire appel à du code ActionScript à l’intérieur des balises. Il fautque les types de retour des fonctions correspondent à ceux des attributs. On aurait puaffecter la valeur text pour notre TextArea de cette manière :

<mx:TextArea id="textAreaId" editable="false" text="giveHelloWorld()"/>

Au final, notre fichier MXML ressemble à celui-ci :

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="absolute" creationComplete="printHello()"><mx:Script>

<![CDATA[public function giveHelloWorld():String{


public function printHello():void{

textAreaId.text = giveHelloWorld();}

]]></mx:Script>

<mx:TextArea id="textAreaId" editable="false"/></mx:Application>

Vous pouvez à présent lancer votre application et constater par vous-même que la zonede texte contient maintenant la chaîne "Hello world!" (voir fig. 2.2).

Cette façon est la plus simple mais elle est loin d’être la plus élégante. De plus, elle nepermet pas d’utiliser le code déclaré dans un fichier MXML dans un autre. Aussi, nousutiliserons la seconde façon qui est plus recommandée pour nos exemples.


51

Le code ActionScript dans des fichiers séparésLa seconde façon est de déclarer votre code ActionScript dans des fichiers séparés.Ceux-ci portent l’extension .as. Par convention, on les nomme du nom de la classe qu’ilscontiennent. Même si cette façon de faire n’est pas obligatoire, elle est fortementrecommandée par Adobe et permet de mieux se retrouver dans son code. Nousreviendrons sur la notion de classe un peu plus loin dans ce chapitre. Les fichiersActionScript permettent de mieux concevoir votre application et de la découper enmodules.

Nous allons créer notre premier fichier ActionScript. À cet effet, commençons par créerun nouveau dossier dans notre application. Sélectionnez le projet puis allez dans le menuFile/New/Folder. Nommez le dossier classes. Nous verrons par la suite que les dossierssont également des packages.

Sélectionnez ensuite le dossier nouvellement créé puis, allez toujours dans le menuFile/New/ActionScript Class. Appelez ce fichier HelloWorld. On notera que parconvention les packages ou dossiers ont une première lettre minuscule alors que lesclasses commencent par une majuscule. Vous obtiendrez au final un fichier HelloWorld.asdans le dossier classes qui ressemblera à celui-ci :

package classes{

public class HelloWorld{}

}

Attardons-nous sur certains mots-clés :

c Fig. 2.2 :Hello world!


52

j package classes signifie que le fichier fait partie du dossier classes.j le mot-clé public signifie que la classe est accessible partout en dehors du package.j class permet de définir la classe, il est suivi de son nom.

Les termes que nous évoquons sembleront familiers à des utilisateurs de Java ou d’autreslangages objet, mais si ce n’est pas votre cas, ne vous sentez pas perdu. Nous détailleronsces concepts dans la suite du chapitre.

Nous allons à présent retirer notre fonction giveHelloWorld du fichier MXML pour laplacer dans la classe HelloWorld pour obtenir ceci :

package classes{

public class HelloWorld{

public static function giveHelloWorld():String{


}}

Sauvegardez vos fichiers HelloWorld.as et ActionScriptTest.mxml. Flex Builder vouspréviendra alors d’une erreur dans ce dernier. Il ne trouve plus la fonctiongiveHelloWorld.

c Fig. 2.3 : Flex Builder ne trouve plus la fonction


53

Flex Builder vous aidera souvent à utiliser votre code ActionScript grâce notamment à lacomplétion et aux imports automatiques. Nous allons utiliser cette dernière fonction pourrésoudre notre problème et comprendre son origine.

Importer du code ActionScript dans un fichier MXMLVous allez maintenant supprimer l’appel à la fonction giveHelloWorld dans la fonctionprintHello. La fonction giveHelloWorld n’est plus définie dans notre fichier MXMLmais dans le package classes. Il va donc falloir aller la chercher dans ce dernier.

Tapez les premières lettres du mot classes et utilisez la complétion grâce à la combinaison[Ctrl]+[Barre}d'espace]. L’IDE vous proposera alors une liste déroulante contenant tous leséléments pouvant être utilisés. Continuez à taper et sélectionnez grâce aux flèchesdirectionnelles le package classes puis validez avec la touche [Ä]. Tapez alors l’opérateurpoint de façon à avoir accès au contenu de ce package. Cette fois, la complétion vousproposera la classe contenue dans classes. Il s’agit de HelloWorld.

Vous pouvez constater que lorsque vous validez le choix de cette classe, une ligne estajoutée automatiquement par Flex Builder au début de votre code ActionScript :

import classes.HelloWorld;

Cette ligne est un import. Elle permet d’utiliser le contenu déclaré en public dans la classeHelloWorld, du package classes.

Vous pouvez alors continuer à utiliser la complétion pour retrouver notre fonctiongiveHelloWorld. Entrez l’opérateur point et vous aurez accès à la liste des fonctions dela classe HelloWorld. Celle-ci est plutôt réduite pour le moment. Validez de la mêmefaçon que précédemment et terminez par un point-virgule comme vous avez maintenantl’habitude de le faire.

Votre code doit à présent ressembler à ceci :


layout="absolute" creationComplete="printHello()"><mx:Script>

<![CDATA[import classes.HelloWorld;public function printHello():void{

textAreaId.text = classes.HelloWorld.giveHelloWorld();}

]]>


54

</mx:Script><mx:TextArea id="textAreaId" editable="false"/>

</mx:Application>

À présent, vous savez comment utiliser du code ActionScript 3.0 dans vos fichiersMXML, et comment séparer les deux de façon plus élégante et organisée. Nous allonspouvoir approfondir les concepts entrevus dans cette première partie.

2.2 Les bases de la programmationCette partie sera consacrée aux possibilités basiques offertes par ActionScript 3.0. Vousverrez comment ces dernières se rapprochent des fonctionnalités proposées par deslangages comme le C++ mais surtout le Java.

Les packages et namespaces

L’utilité des packages

Les packages vont permettre d’organiser votre code à l’intérieur de votre application. Onpeut les assimiler à des dossiers et sous-dossiers à l’intérieur de votre application. Ilspeuvent également être comparés aux bibliothèques du C ou C++.

Les avantages de cette façon de procéder sont nombreux. On peut séparer différentesparties de code à l’intérieur du projet et ainsi obtenir une meilleure modularité. Lesdéveloppeurs actifs sur le projet peuvent penser leur code et nommer leurs fonctions ouméthodes sans se soucier d’éventuels conflits de nom. Plus concrètement, on pourra avoirune méthode Toto dans un package FirstPackage et une méthode Toto différente de lapremière dans un autre package SecondPackage.

Avant de commencer la réalisation de vos applications, il est utile de passer par une phasede conception en réfléchissant à l’organisation du projet. Vous pourrez par exempleregrouper les parties qui géreront les données dans un premier package, tandis que cellesqui s’occuperont des événements se trouveront dans un second package. Ceux-ci pourrontêtre subdivisés en sous-packages si vous jugez cette granularité nécessaire.

Déclaration de packages

La déclaration d’appartenance à un package se fait simplement grâce au mot-clé packagesuivi de son nom. Si l’on se réfère à l’exemple précédent avec notre fichier HelloWorld.as, on obtient :

2Les bases de la programmation

55

package classes{

public class HelloWorld{

public static function giveHelloWorld():String{


}}

Un package doit correspondre à un emplacement sur le système de fichier. Les fichierscontenus dans le package classes doivent donc se trouver dans un dossier du même nom.On pourrait également avoir un sous-package subPackage à l’intérieur. La déclaration seferait alors ainsi :

package classes.subPackage

L’arborescence serait par conséquent classes/subPackage.

Cette arborescence nous amène à parler d’une notion très importante : le CLASSPATH.Celui-ci est une liste de chemins définis par l’utilisateur dans lequel le compilateur vaaller chercher vos bibliothèques ou packages. Par défaut, le CLASSPATH inclut le répertoirede base du projet. Le compilateur trouvera donc le package classes.subPackage si lesdossiers classes/subPackage sont dans le répertoire de base. Il est déconseillé de placervos fichiers ActionScript directement dans ce répertoire. Il constitue le répertoire pardéfaut.

Les packages sont conçus pour regrouper des classes. Cette notion de classe est propre àla programmation orientée objet sur laquelle nous reviendrons dans la suite de ce chapitre.Retenez pour l’instant que le nom du fichier ActionScript doit correspondre au nom de laclasse qu’il contient, dans notre exemple HelloWorld. Cette classe doit être déclaréecomme public afin qu’elle soit accessible à l’extérieur du package. Par défaut, lavisibilité est internal : elle ne sera accessible qu’à l’intérieur du package.

À l’intérieur de cette classe seront déclarées les fonctions ou variables (que nousappellerons par la suite méthodes et attributs). Pour que ces éléments soient accessiblesen dehors du package, ils doivent être déclarés en public. D’autres options d’accessibilitéseront explicitées par la suite. Par défaut, la visibilité est interne au package.

Flex Builder vous guidera dans la création de vos packages en automatisant la plupart desdéclarations et en vous avertissant si vos classes ne sont pas visibles à l’extérieur. Pourcréer un package, il faut sélectionner dans l’arborescence de votre projet l’endroit où vousvoulez le placer. Cliquez ensuite dans le menu sur File/New/Folder. Vous remarquerez à


56

nouveau la similitude entre les répertoires et les packages. Entrez alors un nom depackage, par convention il commence par une minuscule.

Vous pouvez à présent sélectionner ce nouveau package puis créer une classe en cliquantdans le menu sur File/New/ActionScript Class. Donnez-lui un nom, par convention ildoit commencer par une majuscule, et assurez-vous que la visibilité sélectionnée est bienpublic et non internal. Validez et vous aurez alors une nouvelle classe dans votrepackage, qui sera utilisable dans votre application.

Utilisation de packages

Nous allons à présent nous intéresser à l’utilisation de nos packages et de leur contenu.

Si vous voulez utiliser la classe HelloWorld contenue dans le package classes, vous devezimporter cette classe au début de votre code ActionScript. Cette opération se fait grâce aumot-clé import, soit de façon spécifique :

import classes.HelloWorld;

Soit en important toutes les classes du package :

import classes.*;

De façon générale, il vaut mieux éviter cette façon de procéder et recourir le plus possibleaux imports spécifiques. Vous éviterez ainsi d’être confronté trop souvent à des conflitsde nom.

Vous pouvez alors faire appel aux méthodes contenues dans la classe HelloWorld àcondition qu’elles soient déclarées en public. L’accès se fait grâce à l’opérateur point (.).

La notion de namespace

Les namespaces sont des façons de contrôler la visibilité des éléments que vous déclarez.Nous avons déjà vu certains de ces éléments qui sont prédéfinis dans le langageActionScript 3.0 : public et internal. Nous découvrirons par la suite private etprotected. Si ceux-ci ne suffisent pas, vous êtes libre de déclarer vos propres namespacespour des usages assez spécifiques.

Une définition de méthode ou d’attribut se compose d’un identifiant et d’un namespace,même ci celui-ci peut être implicite (par défaut internal). Dans l’exemple suivant,myFunction est déclarée en internal :


57

class MyClass{

function myFunction():void { }}

Pour permettre l’accès à cette méthode, on peut préciser son namespace :

public function myFunction():void { }

Pour déclarer un namespace, il suffit d’utiliser le mot-clé namespace, suivi de son nom :

namespace myNamespace;

Vous pourrez alors l’utiliser comme public dans l’exemple précédent.

Un namespace doit également contenir une valeur : l’URI (Uniform Resource Identifier).C’est un identifiant qui permet de s’assurer que la définition du namespace est unique.Cette valeur est définie lors de la création du namespace :

namespace myNamespace = "http://www.adobe.com/flash";

Si vous ne spécifiez pas d’URI, le compilateur va créer pour vous un identifiant unique.

Vous pouvez également appliquer aux namespaces que vous créez les contrôles d’accèsprédéfinis. Par exemple, pour permettre l’accès à un namespace déclaré dans un package,vous allez lui appliquer le contrôle public :

package myPackage{

public namespace myNamespace;}

Pour appliquer les namespaces, c’est-à-dire placer des définitions dans ces derniers, ilsuffit de les utiliser comme les contrôles d’accès classiques lors des déclarations :

namespace myNamespace;myNamespace function myFunction() { };

Vous ne pouvez appliquer qu’un seul namespace à la fois. En d’autres termes, vous nepouvez pas cumuler myNamespace avec public ou internal par exemple.

Vous pouvez faire référence à des fonctions déclarées dans des namespaces grâce aumot-clé use suivi du nom du namespace à utiliser. Vous avez alors accès aux élémentsdéclarés dans ce namespace. Pour utiliser myFunction déclarée dans myNamespace, onprocédera ainsi :


58

use myNamespace;myFunction();

Mais cette façon peut poser de nombreux problèmes, notamment des conflits de noms siplusieurs anmespaces sont ouverts en même temps. Il n’existe en effet pas de moyen defermer explicitement un namespace. On préférera donc utiliser les :: qui permettent despécifier pour chaque appel un namespace :

myNamespace::myFunction();

Vous avez à présent les connaissances de base concernant les namespaces. Les possibilitésoffertes sont très intéressantes et permettent par exemple l’implémentation de certainsdesign patterns.

Les types de données et les variables

Les types de données de baseLes types de données sont des ensembles de valeurs. De base en ActionScript 3.0, ondispose des types primitifs suivants : Boolean (booléen), int (entier), Number (nombre),String (chaîne de caractères) et uint (entier non signé). Une valeur primitive est unevaleur qui appartient à l’un de ces types. Il est recommandé de les utiliser plutôt que desvaleurs complexes équivalentes car leur traitement est plus rapide et optimisé. Parmi lestypes complexes, nous pouvons citer les tableaux (Array), ou encore les dates (Date).Toutes les valeurs qui ne sont pas de type primaire sont des valeurs complexes. Vosclasses feront également partie de cette dernière catégorie.

Le tableau suivant permet de visualiser les propriétés des types simples énoncés :

Tableau 2.1 : Tableau des types de données primaires en ActionScript 3.0

Nom du type Valeurs Valeur pardéfaut

Note

Boolean true ou false false

int Entre- 2 147 483 648 (-2^31) et2 147 483 647 (2^31)

0 Stocké sous forme d’un entierde 32 bits. À préférer auxNumbers s’il n’y a pas dedécimale.

Number Entre Number.MAX_VALUE(1.79769313486231e+308)et Number.MIN_VALUE(4.940656458412467e-324)

NaN (Not aNumber)

À utiliser pour les nombresdécimaux ou les entiers quidépassent les valeurs du typeint.


59

Tableau 2.1 : Tableau des types de données primaires en ActionScript 3.0

String Une chaîne de caractères null Ne pas confondre null(absence de caractère) et lachaîne vide "".

uint Entre 0 et 4 294 967 295(2^32-1)

Pour les nombres entierspositifs

void undefined

Null null

La valeur par défaut est la valeur d’une variable déclarée mais pas initialisée. Les typesde données void et Null sont deux types particuliers :

j Le type void contient uniquement la valeur undefined. On peut uniquement associercette valeur aux variables qui ne sont pas typées. void peut être utilisé en type deretour d’une fonction.

j Le type Null contient uniquement la valeur null. C’est la valeur par défaut du typeString et de tous les types complexes. Si l’on essaie d’affecter null à toute variabled’un type primaire, elle sera convertie à la valeur par défaut du type.

Voyons à présent comment définir des variables en précisant leur type.

Déclaration de variables

Les variables vous permettent de stocker des valeurs nécessaires à votre application. Pourdéclarer une variable, vous devez utiliser le mot-clé var suivi du nom de la variable :

var myVar;

Cela suffit à déclarer votre variable myVar et à l’utiliser. Mais vous ne pouvez l’utilisertant que cette déclaration n’a pas été implémentée.

Il est conseillé d’ajouter à votre déclaration le type de la variable afin d’éviter desproblèmes dans la suite du code. Pour ce faire, il suffit d’ajouter le caractère : suivi dutype. Vous pouvez également affecter une valeur lors de la création de la variable :

var myVar:int = 42;

Si vous n’affectez pas de valeur à l’initialisation, la variable restera à la valeur par défautde son type, ou à undefined si le type n’est pas précisé, jusqu’à une affectation.


60

Vous pouvez utiliser des virgules pour déclarer plusieurs variables sur une même ligne :

var a:int = 42, b:String = "toto", c = 2.1;

Mais cette notation peut nuire à la compréhension de votre code.

Un concept important, lorsqu’on parle de variables, est le concept de portée (scope enanglais). Une variable globale sera définie pour toutes les parties du code alors qu’unevariable locale n’aura qu’une portée limitée. Pour déclarer une variable en globale, il fautla déclarer en dehors de toute fonction ou classe. Par contre, pour une variable locale, ilsuffit de la déclarer à l’intérieur d’une fonction. Les fonctions sont les plus petites portéespour les variables. Contrairement au C++ ou Java, il n’y a pas de portée limitée par desblocs de code.

Les opérateurs is et as

L’opérateur is est un opérateur très pratique qui vous permettra de vérifier si une variableest d’un type donné. Son utilisation est très simple :

var i:int = 42;if (i is int) // renverra true// code exécutéif (i is String) // renverra false// code non exécuté

L’opérateur as a un comportement et une utilisation similaires excepté qu’au lieu derenvoyer un booléen, il retourne la valeur de l’expression si le type est vérifié, null sinon.L’opérande de droite doit être un type. Reprenons l’exemple précédent avec as :

var i:int = 42;var res;res = i as int; // res contiendra 42res = i as String // res contiendra null

Les conversions

Il existe deux sortes de conversions de variables :

j la conversion implicite ou coercition ;j la conversion explicite ou cast.

Les conversions implicites se font à l’exécution de l’application :

j lors d’une affectation ;


61

j lors du passage d’une valeur en argument d’une fonction ;j lorsqu’une valeur est retournée par une fonction.

Dans l’exemple suivant, notre entier est converti implicitement en booléen :

var i:int = 2;var bool:Boolean;bool = i; // bool contient true

Pour faire une conversion explicite ou un cast, il suffit d’entourer la variable avec desparenthèses et d’ajouter devant le nom du type qu’on veut obtenir :

var i:int = 2;var bool:Boolean;bool = Boolean(i); // bool contient à nouveau true

Les conversions explicites permettent d’éviter certains messages d’erreur.

Une conversion qui peut se révéler très utile est celle de valeurs numériques en chaînesde caractères et inversement :

var n:Number = 3.14;var i:int = 2;var str:String;// Conversion de valeur numériques en chainesstr = String(n); // str contient "3.14"str = String(i); // str contient "2"// Conversion de chaines en valeurs numériquesstr = "21";i = int(str); // i contient la valeur 21str = "37.42";n = Number(str); // n contient la valeur 37.42

Nous étudierons d’autres possibilités de conversions dans la partie qui traite de laprogrammation objet. Les conversions de types complexes que vous aurez créées serontégalement examinées.

Les fonctions et opérateursLes fonctions sont des blocs de code que vous pouvez définir et qui vous permettent deréaliser vos propres traitements sur des variables qui seront placées en paramètre.Souvent, vos fonctions seront déclarées à l’intérieur de classes. On les appellera alors desméthodes et leurs paramètres seront des arguments.


62

Déclaration de fonctions

La déclaration d’une fonction se fait très simplement et dans l’ordre suivant :

j au mot-clé function ;j au nom de la fonction ;j à la liste des paramètres (éventuellement vide) entre parenthèses ;j au code de la fonction entre accolades.

Vous pouvez faire retourner à vos fonctions des valeurs d’un type spécifié. Il faut alorsajouter après la parenthèse fermante de la liste d’arguments, le caractère : suivi du nomdu type retourné. Dans le code, vous devrez alors renvoyer à la fin de votre traitement unevaleur du type demandé grâce au mot-clé return. Cet exemple montre une fonctionbasique qui va faire l’addition de deux entiers et renvoyer le résultat :

function add(a:int, b:int):int{

return a + b;// le code qui suit n’est plus exécuté

}

Vous pouvez également imbriquer des fonctions les unes à l’intérieur des autres si vousle jugez nécessaire.

Les paramètres

En ActionScript 3.0, tous les paramètres des fonctions sont passés par référence.C’est-à-dire qu’au lieu de faire une copie du paramètre et d’exécuter le code de lafonction sur cette copie, on travaille sur l’objet lui-même. Néanmoins, les paramètres detype primaire réagissent comme s’ils étaient passés par valeur.

Pour illustrer cette propriété, modifions quelque peu notre fonction add :

function add(a:int, b:int):int{

++a;++b;return a + b;

}var a:int = 2;var b:int = 3;var res:int;res = add(a, b); // res vaut 7res = add(a, b); // res vaut encore 7 : a et b non modifiés


63

ActionScript 3.0 permet de définir des valeurs par défaut pour les paramètres de vosfonctions. Tous les paramètres qui ont une valeur par défaut doivent être placés à la finde la liste de paramètres. Ils sont alors considérés comme optionnels. S’ils ne sont pasdéfinis lors de l’appel à la fonction, l’exécution se fera en utilisant leur valeur par défaut.Voici ce que donne notre fonction add avec une valeur par défaut pour un de sesparamètres :

function add(a:int, b:int = 8):int{

return a + b;}var a:int = 2;var res:int;res = add(a); // res vaut 10

Lorsque vous passez des paramètres à une fonction, vous pouvez utiliser l’objetarguments à l’intérieur de cette fonction. Cet objet est un tableau rempli automatiquementqui contient la liste des paramètres. Vous pouvez ainsi obtenir un argument en connaissantsa position :

function listArg(a:int, b:int, c:int):int{

return arguments[1]; // renvoie la valeur de b}

Deux propriétés intéressantes sont contenues dans arguments :

j length : donne la longueur du tableau, c’est-à-dire le nombre d’arguments ;j callee : fait référence à la fonction elle-même.

Cette dernière propriété est très utile pour des fonctions récursives comme factorielles :

function facto(i:int):int{

if (i == 0)return 1;

return i * arguments.callee(i - 1);}

Enfin, le paramètre ... permet de spécifier un tableau de paramètres de longueurindéterminée séparés par des virgules. Ce paramètre empêche l’utilisation de argumentsdans la fonction mais reprend la propriété length. Il peut être utilisé en combinaison deparamètres explicités. Voici une fonction add plus évoluée faisant la somme de tous lesparamètres :


64

function addAll(a:int, ... args):int{

var res:int = a;for (var cpt:int = 0; i < args.length; ++i)

res += args[cpt];return res;

}

Opérateurs courants

ActionScript 3.0 fournit la plupart des opérateurs déjà implémentés dans d’autreslangages. Ce tableau synthétise l’ensemble des opérateurs par ordre de prioritédécroissante (de haut en bas) :

Tableau 2.2 : Tableau des opérateurs en ActionScript 3.0

Catégorie Opérateurs

Primaire [] {x:y} () f(x) new x.y x[y] <></> @ :: ..

Postfix x++ x−−

Unaire ++x −−x + − ~ ! delete typeof void

Multiplicatif * / %

Additif + −

Décalage de bits << >> >>>

Relationnel < > <= >= as in instanceof is

Égalité == != === !==

Et (bits) &

Ou exclusif (bits) ^

Ou (bits) |

Et logique &&

Ou logique ||

Condition ? : (opérateur ternaire)

Affectation = *= /= %= += −= <<= >>= >>>= &= ^= |=

Virgule ,


65

Nous avons déjà découvert certains d’entre eux, et d’autres paraissent évidents. Nous enverrons d’autres encore par la suite.

Les boucles et conditionsLes boucles sont une des bases de la programmation. Leur fonctionnement est connu partous les développeurs. Elles permettent d’exécuter des blocs de code tant qu’unecondition est vérifiée. Adobe recommande de placer le code entre accolades. Cela estobligatoire lorsque la portion est constituée de plusieurs lignes mais optionnel lorsqu’ellene contient qu’une seule ligne.

Voici les boucles qu’il est possible d’utiliser en ActionScript 3.0 ; nous les illustrons pardes exemples.

La boucle for

Elle permet d’itérer tant qu’une valeur n’atteint pas une certaine condition. Il fautinitialiser la valeur, définir un cas d’arrêt et incrémenter la variable :

var i:int;for (i = 0; i < 5; ++i)

// code à exécuter

La boucle for in

Elle permet d’itérer sur les indices d’un tableau ou les propriétés d’un objet. Dans cedernier cas, la variable contiendra le nom de la propriété courante.

var tab:Array = ["a", "b", "c"];for (var i:int in tab)// i contient l’indice de l’élément dans le tableau et non sa valeur

La boucle for each in

Cette boucle se rapproche de la précédente puisqu’elle parcourt également un tableau, unecollection ou les propriétés d’un objet. Mais cette fois, la variable contiendra la valeur del’élément courant.

var tab:Array = ["a", "b", "c"];for each (var i:String in tab)

// i la valeur de l’élément courant


66

La boucle while

Avec la boucle while, il ne faut pas oublier de préciser dans le code à exécuterl’incrémentation de la variable. Il est donc plus facile de partir sur une boucle infinie avecun while qu’avec un for.

var i:int = 0;while (i < 5) {

// code à exécuter++i; // incrémentation obligatoire

}

La boucle do while

Pour terminer avec les boucles, voici une variante de while. La différence est que le codeest exécuté au moins une fois puisque la condition est vérifiée à la sortie.

var i:int = 0;do {

// code à exécuter++i; // incrémentation obligatoire

} while (i < 5);

Passons à présent aux conditions.

Les conditions if else et if else if

On peut choisir d’exécuter ou non une série d’instructions grâce à une condition. Commepour les boucles, Adobe recommande d’utiliser des accolades pour entourer le code àexécuter. Mais si c’est une obligation pour des instructions sur plusieurs lignes, ce n’estqu’un conseil pour du code sur une ligne. L’utilisation des conditions est très simple :

if (i < 10) {// code exécuté si i < 10

} else {// code sinon

}

Retenons que le else est optionnel. On pourrait se contenter du if s’il n’y avait rien àexécuter en cas d’échec du test. Si d’autres conditions sont à vérifier, on peut ajouter destests :

if (i < 10) {// code exécuté si i < 10

} else if (i < 20) {


67

// code exécuté si 10 < i < 20} else {

// code exécuté sinon}

La condition switch

Cette condition remplit le même rôle qu’une suite de if else if mais rend le code pluslisible. Un switch évalue une expression et utilise le résultat pour choisir quellesinstructions exécuter.

var i:int = 1;switch (i) {

case 0:// codebreak;

case 1:// code executébreak;

default:// code si aucune condition n’est vérifiée

}

Maintenant que vous avez découvert les bases du langage ActionScript 3.0, passons à unde ses aspects les plus intéressants : son orientation objet.

2.3 La programmation orientée objet dans ActionScriptCe chapitre n’a pas pour but d’être un cours exhaustif sur la programmation orientéeobjet. Nous rappellerons ses concepts de base et l’implémentation qui en est faite dansActionScript 3.0. Si vous êtes développeur web et déjà familier avec la programmationobjet, vous n’aurez certainement pas besoin de la première partie de cette description.Dans ce cas, nous vous conseillons de passer directement à l’implémentation.

Les avantages de la programmation orientée objetLa programmation orientée objet est une méthode ou paradigme de programmation quiapporte une nouvelle façon de concevoir des applications comparativement aux langagesimpératifs comme le C. Les langages objets les plus connus sont le C++, le Java et le C#.

Le paradigme objet consiste à définir et assembler des briques logicielles appelées objetspour concevoir ses applications. Cette méthode de programmation apporte une façontotalement différente de penser son code. Son utilisation permet d’obtenir, entre autres,


68

une bien meilleure modularité et donc des applications plus facilement maintenables.Elles doivent être découpées en modules de taille raisonnable qui auront chacun desfonctionnalités précises. Ces modules ont des propriétés qui leur sont propres, et desinterfaces qui permettent d’interagir avec eux.

Les objets sont des ensembles de propriétés qui leur sont propres et qu’on appelleattributs, et de méthodes qui définissent leurs comportements. Les définitions de lastructure des objets sont contenues dans des classes qui sont en quelque sorte leur patron.Lorsqu’un objet est créé à partir d’une classe, on parle d’instanciation. Les attributs etméthodes peuvent être cachés afin d’assurer uniquement un fonctionnement interne àl’objet : c’est l’encapsulation.

Un objet a un type donné mais peut également appartenir à plus d’un type : c’est ce qu’onappelle le polymorphisme. Il est souvent réalisé grâce à l’héritage qui permet despécialiser un objet. Cette notion primordiale sera expliquée plus loin.

ActionScript 3.0 est un langage complètement objet, c’est-à-dire que toutes les variablesque vous pourrez manipuler sont des objets. Observons à présent comment les conceptsque nous venons d’énoncer sont implémentés.

Les classesLa définition d’une classe se fait grâce au mot-clé class dans un fichier "as" du nom dela classe. Par convention, le nom d’une classe commence par une majuscule. Dansl’exemple suivant, on définit une classe MyClass dans le package myPackage :

package myPackage{

public class MyClass{}

}

public permet d’accéder à la classe depuis toute votre application. C’est en général lecomportement qu’on souhaite. À la place de public, on aurait pu utiliser un des attributsd’encapsulation suivants :

j dynamic : permet d’ajouter des propriétés à la classe durant l’exécution.j final : la classe ne doit pas être héritée par une autre classe.j internal : c’est le comportement par défaut, la classe est visible dans le package.

À l’intérieur des accolades qui suivent le nom de la classe, on place la définition desattributs et des méthodes.

2La programmation orientée objet dans ActionScript

69

Les attributs

Pour tout ce qui se trouve à l’intérieur d’une classe, on retrouve des propriétésd’encapsulation :

j public : les éléments déclarés ainsi seront visibles partout dans le code.j private : limite la visibilité de l’élément à l’intérieur de la classe.j protected : permet l’accès à l’élément par les classes héritées (nous verrons par la

suite la notion d’héritage).j internal : protection par défaut, qui donne la visibilité à tout le package.

Ces protections sont donc valables aussi bien pour les attributs que les méthodes.

Les attributs sont des variables attachées aux instances des classes, c’est-à-dire aux objetscréés à partir des définitions des classes. Chaque fois qu’on instancie une classe, on adonc un nouvel objet avec toutes les variables qui le constituent.

Prenons par exemple une définition de classe avec quelques attributs :

package myPackage{

public class MyClass{

public var var1:int = 1;private var var2:int = 2;protected var var3:int = 3;internal var var4:int = 4;

public const const1:int = 0;}

}

Le seul attribut qui sera accessible à l’extérieur de notre classe ou package est celuidéclaré en public : var1. Mais on aura également accès à une constante : const1. Lavaleur d’une constante, déclarée à l’aide du mot-clé const, est définie lors de la créationde l’objet et ne peut être modifiée au contraire d’un attribut déclaré avec var.

Voici comment accéder aux attributs précédents dans du code mxml :


xmlns="*" layout="vertical" creationComplete = "initApp()" >

<mx:Script><![CDATA[


70

import myPackage.MyClass;

public var objectTest:MyClass = new MyClass;

public function initApp():void{

objectValue.text = String(objectTest.var1);}

public function addVar():void{

objectTest.var1 += 1;objectValue.text = String(objectTest.var1);

}]]></mx:Script>

<mx:Button click="addVar()" label="Click me"/><mx:Label id="objectValue"/></mx:Application>

Il nous faut donner quelques explications sur ce code. Au lancement de l’application, oninstancie un objet objectTest qui est de type MyClass. Il est déclaré en public afin d’êtreaccessible dans tout le code. On se sert du label objectValue pour afficher la valeur dela variable var1. Celle-ci est modifiée à l’intérieur de la fonction addVar. On remarquequ’on accède aux attributs grâce à l’opérateur . lorsque c’est possible. On pourraitégalement se servir des opérateurs [] qui s’utilisent ainsi :

objectTest["var1"] += 1;

Nous avons vu pour l’instant que les attributs d’une classe dépendent de sesinstanciations. Mais le mot-clé static permet de faire appel à une propriété en passantpar la classe et non par une instance de la classe.

Pour illustrer ce propos, remplaçons notre déclaration de la variable var1 dans MyClass :

public var var1:int = 1;

devient alors :

public static var var1:int = 1;

On accède aux variables statiques par le nom de la classe et non par un objet de son type.Notre fonction addVar devient par exemple :


71

public function addVar():void{

MyClass.var1 += 1;objectValue.text = String(MyClass.var1);

}

Passons à présent aux méthodes.

Les méthodes

Les méthodes sont déclarées à l’intérieur des classes grâce au mot-clé function. Ellesrespectent les principes que nous avons vus lors de l’étude des fonctions. Les protectionssont les mêmes que pour les attributs, à savoir public, private, protected et internal.

Le mot-clé static peut, lui aussi, être utilisé pour définir des méthodes statiques qui nedépendront pas des instances de la classe. Les méthodes qui ne sont pas déclarées enstatique effectuent des traitements liés au contenu de l’objet à partir duquel elles sontappelées.

Il existe certaines méthodes spécifiques comme le constructeur. Celui-ci est appeléimplicitement à chaque fois qu’on instancie un objet. Mais il peut également êtreexplicité. Il s’agit d’une méthode portant le même nom que la classe. Elle estobligatoirement déclarée en public et le mot-clé est d’ailleurs optionnel. Vous pouvez,grâce à ce constructeur, initialiser des variables ; par exemple :

package myPackage{


public var var1:int;

public function MyClass():void{

var1 = 0;}

}}

Notre constructeur MyClass initialise la variable var1 à 0. Cette opération sera faitechaque fois qu’on instanciera un nouvel objet de type MyClass.

Afin de respecter les principes de la programmation objet, on utilise également desgetters et setters qui permettent d’accéder aux attributs ou de les modifier. On déclarenos attributs en private ou en protected pour les faire hériter. Pour notre classe MyClass,cela donne :


72

package myPackage{


private var var1:int;

public function get publicVariable():int{

return var1;}

public function set publicVariable(value:int):void{

var1 = value;}

}}

Plutôt que d’accéder directement à var1, on passera par publicVariable pour obtenir savaleur et pour lui affecter une nouvelle valeur :

objectTest.publicVariable += 1;

Les interfacesLes interfaces sont des collections de déclarations de méthodes qui permettent à desobjets indépendants de communiquer entre eux. Le principe repose sur la différence entreune déclaration, qui contient toutes les informations nécessaires à l’appel de la méthode(type des variables, valeur de retour…), et son implémentation qui peut être différente.

La déclaration d’une interface est très simple, grâce au mot-clé interface. Flex Buildernous guide également pour cette étape. Dans votre projet de test, cliquez avec le boutondroit de la souris sur votre package myPackage (créez-le au besoin). Choisissez alors newet ActionScript Interface. Une boîte de dialogue vous demandera alors le nom de votreinterface. Appelons-la MyInterface (par convention les noms des interfaces commencentpar une majuscule comme les classes).

Déclarons à présent une fonction addVar qui prend un entier en argument et renvoie voidà l’intérieur de cette interface. Nous obtenons le résultat suivant :

package myPackage{

public interface MyInterface{


73

function addVar(toAdd:int):void;}

}

L’interface contient uniquement les déclarations.

Pour utiliser cette interface, il suffit de spécifier à une classe qu’elle l’implémente grâceau mot-clé implements et d’implémenter chaque méthode à l’intérieur de la classe. Vousdevez respecter plusieurs points pour les méthodes implémentées :

j déclarer avec l’attribut public ;j utiliser le même nom que la méthode de l’interface ;j avoir le même nombre de paramètres et les mêmes types ;j avoir le même type de retour.

Nous allons faire implémenter l’interface MyInterface à notre classe MyClass :

package myPackage{

public class MyClass implements MyInterface{

private var var1:int;

public function addVar(toAdd:int):void{

var1 += toAdd;}

}}

Chaque classe qui implémentera notre interface pourra avoir sa propre version de lafonction addVar. On peut faire implémenter plusieurs interfaces à une classe en lesajoutant à la suite, séparées par des virgules, lors de la déclaration de la classe.

Notez que si vous avez l’intention d’implémenter des interfaces à la création de votreclasse, vous pouvez le spécifier à l’intérieur de Flex Builder qui vous préparera lesdéclarations. Il ne restera alors plus qu’à entrer le code.

L’héritageIl s’agit d’une notion fondamentale en programmation orientée objet. Elle permet deréutiliser du code, d’organiser son application mais aussi de profiter de propriétés commele polymorphisme.


74

Pour illustrer cette partie, nous allons nous servir d’un exemple concret : des formesgéométriques. Nous aurons une classe de base, Shape, dont les classes Circle et Squarehériteront. Les cercles et les carrés sont bien des formes mais ont des propriétésdifférentes.

Nous allons commencer par créer la classe Shape dans notre package myPackage. Danscette classe, créons une méthode area qui renvoie l’aire d’une forme géométrique.Puisque Shape est une forme quelconque, renvoyons une valeur quelconque :

package myPackage{

public class Shape{

public function area():Number{

return NaN;}

}}

Déclarons à présent une classe Circle. Flex Builder nous aide également à déclarer desclasses héritées : lorsque vous avez entré le nom de la classe, ne validez pasimmédiatement. En face de Superclass, vous avez un bouton Browse. Cliquez dessus etsélectionnez la classe mère de votre nouvelle classe. En l’occurrence, il s’agit de Shapesituée dans le package myPackage. Lorsque vous validerez la création de Circle, votreclasse sera tout de suite héritée.

À l’intérieur de cette nouvelle classe, nous allons déclarer une variable radius en privatequi sera le rayon de notre cercle. Puis, nous allons surcharger la méthode area. Lasurcharge est le fait de redéfinir une méthode de la classe mère. Grâce au mot-cléoverride, cette méthode sera appelée en priorité par rapport à celle de la classe Shape. Lecode de notre fonction sera propre à la classe Circle :

package myPackage{

public class Circle extends Shape{

private var radius:Number = 1;

override public function area():Number{

return Math.PI * (radius * radius);}

}}


75

Vous noterez l’utilisation du mot-clé extends pour spécifier de quelle classe dériveCircle. Vous ne pouvez hériter que d’une seule classe au contraire d’un langage commele C++, par exemple, qui permet l’héritage multiple.

Enfin, procédons de même pour notre classe Square dont le code est le suivant :

package myPackage{

public class Square extends Shape{

private var side:Number = 1;

override public function area():Number{

return side * side;}

}}

Les seuls éléments qui peuvent être redéfinis grâce à override sont les méthodes(getters et setters inclus). Les attributs (var ou const) sont seulement hérités. Lavisibilité des méthodes dans la classe mère doit être, soit public, soit protected, enaucun cas private (visibilité limitée à la classe elle-même). Vos méthodes héritéesdoivent avoir le même nom, le même nombre et type d’arguments et le même type deretour.

Grâce au polymorphisme, vous pouvez déclarer des objets Circle ou Square qui serontaussi reconnus en tant que forme :

public var forme:Shape = new Circle;

L’utilité de ce principe apparaît clairement si l’on déclare une fonction qui prend enparamètre une forme et renvoie son aire :

public function getArea(forme:Shape):Number{

return forme.area();}

On pourra passer à cette fonction aussi bien des objets de type Circle que de type Square.

Vous vous êtes maintenant familiarisé avec les principes de base de l’ActionScript 3.0.Nous allons nous lancer dans le développement à proprement parler.


76

2.4 Déboguer de l’ActionScript 3.0 dans Flex BuilderAu fur et à mesure de votre apprentissage de Flex, les applications que vous développerezatteindront une taille conséquente et différents bugs viendront inévitablement perturber lebon déroulement de vos projets. Nous allons tout d’abord réaliser une petite applicationFlex utilisant les notions ActionScript acquises dans ce chapitre puis nous utiliserons laperspective Debug de Flex Builder 3 pour corriger d’éventuelles erreurs.

Création d’une application Flex utilisant ActionScriptNous allons créer une deuxième application Flex dans le but de montrer l’utilisation dudébogueur Flex. Cette application stockera une liste d’utilisateurs et la comparera auxinformations saisies par l’utilisateur dans un champ texte. La vérification s’effectuera parune méthode action script appelée lorsqu’un clic sur un bouton sera détecté. Pour cela,créez un nouveau projet et nommez-le exemple_debug. Puis, respectez les étapessuivantes :

1 Ajoutez une VBox avec la propriété horizontalAlign sur "center" et centrez-la aumilieu de l’application (horizontalCenter="0" verticalCenter="0").

2 Dans celle-ci, ajoutez un Label avec les propriétés id="infoLbl" et text="Entrez unlogin".

3 Ajoutez ensuite un TextInput que nous nommerons loginTxtIn.

4 Enfin, ajoutez un Button avec les propriétés id="validateBtn" et label="valider"

Le code de cette application devrait donc pour l’instant être le suivant :


layout="absolute"><mx:VBox horizontalAlign="center" verticalAlign="middle"

horizontalCenter="0" verticalCenter="0"><mx:Label id="infoLbl" text="Entrez un login" /><mx:TextInput id="loginTxtIn"/><mx:Button id="validateBtn" label="valider" />

</mx:VBox></mx:Application>

Elle ne sert pour l’instant pas encore à grand-chose mais nous allons rajouter un petit boutde code ActionScript dans un instant. Mais avant cela, assurons-nous que l’applicationcompile en la lançant dans le mode Debug.

2Déboguer de l’ActionScript 3.0 dans Flex Builder

77

Le mode DebugLe mode Debug de Flex va permettre d’étudieret de contrôler l’application que vous venez deréaliser au cours de son exécution. À cet effet, il

faut lancer l’application non plus avec le bouton Run comme auparavant mais avec lebouton Debug situé juste à sa gauche.

À première vue, vous ne verrez rien de bien différent par rapport au mode normal.Cliquez avec le bouton droit de la souris, et un menu Debugger apparaît dans le menucontextuel.

Si vous cliquez dessus, une fenêtre apparaîtra pour vous permettre de choisir la machinesur laquelle se trouve l’instance de Flex Builder qui a lancé l’application. Normalement,vous devriez laisser Localhost puisque vous avez lancé le projet à partir de votre propreordinateur.

c Fig. 2.4 :Menu contextuel duDebugger dans lenavigateur

c Fig. 2.5 :Choix de l’instance duDebugger


78

Ajouter un point d’arrêtNous allons maintenant ajouter un peu d’ActionScript dans l’application afin de vérifiersi le texte saisi correspond à des données que nous stockerons dans un tableau. Il fautajouter une balise de <mx:Script> au-dessus de la VBox et procéder de la manièresuivante :

1 Déclarez une variable nommé nameList de type Array et initialisez-la avec lesdonnées suivantes : ["Joe", "William", "Jack", "Averell"]

Initialisation d’un tableau

Il existe plusieurs méthodes pour initialiser un tableau :

j Par le constructeur Array : var nameList:Array = new Array("Joe", "William", "Jack","Averell") ;

j De manière Litteral : var nameList:Array = ["Joe", "William", "Jack", "Averell"] ;j En créant un tableau vide et en ajoutant les données une à une : var nameList:Array = new

Array(); nameList.push("Joe")…

2 Créez une fonction checkName prenant en paramètre une chaîne de caractères. Cetteméthode va vous permettre de parcourir un à un les éléments du tableau afin devérifier si la chaîne passée en paramètre est bien présente dans celui-ci. La fonctionrenverra donc un booléen :

public function checkName(name:String):Boolean{

for each (var item :String in nameList){

if (name == item)return true;

}return false;

}

3 Créez une seconde fonction que nous appellerons validate et qui ne renverra pas devaleur car elle affichera simplement un message en fonction du résultat de l’appel àla fonction précédente :

public function validate():void{

var name : String = loginTxtIn.text;var test : Boolean = checkName(name);if (test)


79

Alert.show("Bienvenue " + name + " ,vous êtes bien sur la liste!");

elseAlert.show("Désolé " + name + " mais vous

n’êtes pas sur la liste...");}

4 Puis ajoutez le code suivant dans la balise Button : click=’validate()’

Voici le code final du projet :


layout="absolute"><mx:Script>

<![CDATA[import mx.controls.Alert;public var nameList:Array = ["Joe","William",

"Jack","Averell"];




}return false;

}

public function validate():void{

var name : String = loginTxtIn.text;var test : Boolean = checkName(name);if (test)

Alert.show("Bienvenue " + name + " , vous êtesbien sur la liste!");

elseAlert.show("Désolé " + name + " mais vous

n’êtes pas sur la liste...");}

]]></mx:Script>

<mx:VBox horizontalAlign="center" verticalAlign="middle"horizontalCenter="0" verticalCenter="0">

<mx:Label id="infoLbl" text="Entrez un login" /><mx:TextInput id="loginTxtIn"/>


80

<mx:Button id="validateBtn" label="valider"click=’validate()’ />


Nous avons entré notre code ActionScript et il nous reste à tester notre application. EntrezLuke et cliquez sur le bouton Valider.

Testons maintenant notre application en entrant Jack:

Remarquez tout de même que le test échoue en entrant jack en minuscule car lacomparaison de chaînes est sensible à la casse.

Ajoutons maintenant un point d’arrêt (ou breakpoint en anglais) sur la fonction validate.À cet effet, double-cliquez dans la bordure de l’éditeur de texte au niveau de ladéclaration de la méthode, ou bien cliquez avec le bouton droit de la souris et sélectionnezToggle Breakpoint dans le menu contextuel. Un point bleu devrait alors apparaître.

Relancez l’application en mode Debug, entrez à nouveau jack en minuscule et constatezle comportement de Flex Builder lorsque vous cliquez sur le bouton Valider.

c Fig. 2.6 :Le nom saisi est incorrect.

c Fig. 2.7 :Jack est bien reconnu.

c Fig. 2.8 :Point d’arrêt sur laméthode validate


81

Une fenêtre apparaît alors pour que Flex Builder ouvre la perspective Debug. Cliquez surYes.

Comme vous pouvez le constater, deux nouveaux panneaux sont apparus dans l’éditeur.

Nous allons maintenant exécuter notre programme en mode Pas à pas et nous enprofiterons pour expliquer le fonctionnement des deux panneaux.

Quelques détails sur l’ajout de points d’arrêt

Il n’est possible de placer des points d’arrêt que sur les lignes du programme qui contiennent du codeActionScript, c’est-à-dire :

j dans les fichiers ActionScript (extension .as) ou encore entre des balises <mxScript></mx:Script> ;

j dans des balises MXML gérant des événements : <mx:Button id="validateBtn" label="valider"click=’validate()’ />.

c Fig. 2.9 :Fenêtre de confirmation

c Fig. 2.10 : Pperspective Debug de Flex Builder 3


SUITE

82

Si le point d’arrêt que vous avez placé ne respecte pas ces conditions, Flex Builder va automatiquementparcourir les dix lignes suivantes pour essayer de trouver un emplacement adéquat. Si tel est le cas, lepoint d’arrêt sera automatiquement déplacé sur ce dernier à l’exécution du programme. Dans le cascontraire, le point d’arrêt sera tout simplement ignoré.

Le pas à pasLe mode Pas à pas permet de contrôler l’exécution d’un programme, instruction parinstruction Flex Builder propose plusieurs modes qui sont accessibles dans la barre dupanneau Debug ou directement depuis le menu Run de l’éditeur.

Voici donc une description des commandes les plus courantes :

j Resume ([F8]): permet de reprendre l’exécution du programme après que celui-ci aitstoppé sur un point d’arrêt. L’exécution continue normalement ou bien jusqu’auprochain point d’arrêt s’il en existe.

j Suspend : permet de stopper temporairement l’exécution d’un programme.j Terminate : quitte la session de débogage en cours.j Step Into ([F5]) : entre dans la fonction appelée.j Step Over ([F6]) : exécute la ligne courante puis passe à la suivante mais sans entrer

en mode Pas à pas dans une fonction appelée.j Step Return ([F7]) : continue l’exécution du programme jusqu’à la sortie de la

fonction en cours ou jusqu’au prochain point d’arrêt.

Reprenons l’exécution de notre application là où elle en était. Nous avions placé un pointd’arrêt sur la méthode validate(). Utilisez la fonction Step Into jusqu’à l’appel à lafonction checkName. Si vous effectuez encore un Step Into, vous entrerez dans cettefonction. En revanche, un Step Over exécutera tout de même la fonction mais l’éditeurvous emmènera directement à la ligne suivante sans entrer dans le corps de checkName.Une fois dans la fonction checkName, vous devriez exécuter la boucle étape par étape àmoins que vous ne décidiez de faire un Step Return pour retourner à la suite de lafonction Validate.

Afficher le contenu d’une variableLe deuxième onglet, qui est apparu avec la perspective Debug, permet d’inspecter lesobjets présents dans l’application au cours de son exécution. Flex Builder offre plusieursmanières d’inspecter les variables d’une application ou d’une méthode en coursd’exécution.


83

La première méthode est très pratique puisqu’il suffit de passer le curseur de la souris surn’importe quelle variable pour afficher sa valeur. Comme un exemple vaut mieux qu’unlong discours, mettons cela en pratique. Enlevez le point d’arrêt de la fonction validateet placez-en un sur la fonction checkName. Lancez l’application en mode Debug, saisissezjack en minuscule et cliquez sur Valider.

Dès que Flex Builder se sera arrêté sur la méthode checkName, nous utiliserons le modePas à pas (Step Into) pour afficher le contenu de la variable Item à chaque itération :passez la souris sur la variable aux différentes étapes pour afficher sa valeur.

Remarquez également que le panneau Variables est mis à jour à chaque instruction : ilaffiche le contenu des variables en cours d’accès.

Ce nouveau panneau permet également de rechercher une variable (ce qui devient viteindispensable dans des applications de grande taille). Appuyez en premier lieu sur la croixà droite de la variable this (qui représente l’application) pour bien vous rendre comptede toutes les variables contenues dans votre programme. Nous allons maintenant effectuerune recherche, et il vous suffit d’appuyer sur [Ctrl]+[F]. Nous souhaitons afficher l’adressede notre tableau contenant la liste de noms. Il suffit de taper le nom de la variable dansle champ de saisie (ici nameList) mais il est également possible d’utiliser les caractèresspéciaux ? (remplacement d’exactement un caractère) et * (0 ou n caractères) pourfaciliter la recherche. Nous aurions très bien pu entrer n?meL ou *eList et nous aurionsobtenu le même résultat.

c Fig. 2.11 :Affichage du contenu dela variable Item

c Fig. 2.12 : Panneau Variables


84

Une fois la variable trouvée, sélectionnez-la et cliquez sur OK ; le panneau Variables seplacera au niveau du résultat. Ici, nous affichons le contenu du tableau nameList, où nousretrouvons bien les valeurs d’initialisation.

La fonction traceLa fonction trace est une des fonctions les plus pratiques en ActionScript puisqu’ellepermet d’afficher sur la fenêtre Output de l’IDE des messages ou des variables lorsquel’application est lancée en mode Debug. Cette fonction est un complément indispensableet très simple pour afficher des variables ou s’assurer qu’un bout de code a bien étéexécuté, sans avoir recours au mode Pas à pas.

c Fig. 2.13 :Recherche d’unevariable

c Fig. 2.14 : Résultat de la recherche


85

Cependant, cette méthode souffre de quelques défauts puisque les messages ne sontaffichables que dans l’IDE ; de plus, l’affichage des objets de types complexes est plutôtlimité puisque trace ne retourne pas un descriptif complet des propriétés accessibles.

Pour utiliser cette méthode, rien de plus simple. Il suffit d’appeler trace avec une chaîneou une variable en paramètre. Par exemple, si nous reprenons l’exemple en cours :


for each (var item :String in nameList){trace(item)


}return false;

À chaque itération, le nom contenu dans la variable item sera affiché.

Corriger les erreursPour finir, nous pourrions modifier le code pour que la comparaison de chaîne ne soit plussensible à la casse. Il suffit d’appeler la méthode toLowerCase() sur chaque chaînecomparée :



if (name.toLowerCase() == item.toLowerCase())return true;

}return false;

}

Et voici le résultat :

c Fig. 2.15 :La comparaison n’estplus sensible à la casse.


86

2.5 Check-listAu cours de ce chapitre, vous avez :

a découvert les bases du langage ActionScript 3.0 ;a étudié les possibilités avancées du langage ;a intégré du code ActionScript à votre application Flex ;a étudié l’organisation correcte de votre code ;a débogué votre code ActionScript dans Flex Builder.

Dans le prochain chapitre, vous aurez l’occasion de découvrir des aspects plusgraphiques de Flex puisqu’il sera consacré à l’interface.

2Check-list

87

33.1 Les composants MXML ................................. 903.2 Les conteneurs d’agencement ......................... 963.3 Mise en forme de l’interface .......................... 1083.4 Les contrôles simples .................................... 1133.5 Mise en pratique : une interface d’annuaire ......... 1203.6 Check-list ................................................. 124

Réaliser sapremièreinterface

Toute application repose sur une interface utilisateur, etla force de l’IDE Adobe Flex Builder 3 est de rendre

cette couche de présentation la plus facile possible pourles développeurs. Ce chapitre détaille la manière deréaliser une interface avec les composants mis àdisposition par Flex.

3.1 Les composants MXMLLes composants sont à la base du framework Flex, il est indispensable de comprendre leurfonctionnement et leurs différentes utilisations. Nous verrons ensuite comment tirer partieau maximum des composants MXML.

Définition d’un composantFlex est un environnement de développement qui repose principalement sur descomposants. Plusieurs familles de composants complémentaires permettent audéveloppeur de créer non seulement une interface complexe mais également de la lier àdes données structurées. Ces composants sont des classes ActionScript instanciables avecde nombreuses caractéristiques que nous détaillerons tout au long de ce chapitre et dessuivants. Flex met à disposition des composants visuels appelés des contrôles (les Labels,les Buttons ou les Charts) ainsi que des composants non visuels permettant dedévelopper le côté logique de l’application (HTTServiceRequest pour récupérer desdonnées externes au projet, ou Timer pour contrôler l’interaction dans le temps del’application). Ce chapitre va se consacrer uniquement au premier type de composant.

Les composants sont des objets à la fois génériques et flexibles qui doivent adapter leurapparence aux besoins de l’application et réagir spécifiquement aux interactions del’utilisateur. Ces composants se prennent rapidement en main car ils partagent un grandnombre de propriétés et de méthodes. Les principales caractéristiques des composantsconcernent :

j les événements ;j le style ;j la taille ;j la position.

Tous ces composants sont instanciables via des tags MXML ou via une classeActionScript et leur API (Application Programming Interface) est également accessibledes deux manières.

De nombreux composants sont fournis par Flex pour répondre aux besoins lesplus courants, mais pour des cas plus spécifiques à votre application le chapitre 8vous explique comment créer vos propres composants ou étendre les propriétésd’autres composants.

3 Réaliser sa première interface

90

Travailler avec les contrôles FlexLes contrôles sont les composants visuels issus de Flex. La diversité de ces composantset leur nombre font la richesse du framework Flex. Travailler avec ces contrôlesnécessitera probablement d’utiliser de l’ActionScript dans votre application. Le point cléest de comprendre comment manipuler un contrôle donné.

Pour manipuler un composant en ActionScript, on définit généralement la propriété id ducomposant dans la balise MXLM. Par exemple, le code suivant attribue l’identifiantmonBouton à la propriété id :

<mx :Button id="monBouton" label="Cliquer ici” />

Cette propriété optionnelle est utile lorsque vous voulez accéder aux événements oupropriétés du composant en ActionScript. Techniquement, cette propriété indique aucompilateur MXML de générer une variable publique nommée monButton qui feraréférence à l’instance de ce bouton précisément. Vous pourrez dès alors accéder à cecomposant depuis du code ActionScript et modifier ses propriétés ou appeler sesméthodes. La variable sera disponible depuis n’importe quelle classe ou blocd’ActionScript.

Par exemple, le bloc d’ActionScript suivant permet de changer le texte du bouton enmodifiant sa propriété label lorsque l’on clique dessus.

<mx:Button id="monButon" label="Cliquer ici" click="setLabel();" /><mx:Script><![CDATA[

function setLabel():void {myButton.label = "Merci d’avoir cliqué";

}]]></mx:Script>

Vous pouvez attribuer la propriété id d’un composant directement dans le code MXMLou alors via l’interface design grâce au panel Common de l’onglet Flex Properties situépar défaut en haut à droite.

Unicité de la propriété id

Pour tout contrôle MXML possédant une propriété id, il existe une variable publique représentant lecontrôle. Si vous spécifiez deux contrôles avec le même id, l’une des variables sera écrasée et vous nepourrez plus différencier les deux objets ; il est donc nécessaire que la valeur de cette propriété soittoujours unique dans tout le document. Cela veut aussi dire que l’instance du composant sera accessibledans toute votre application (dans une fonction, une classe externe, un fichier ActionScript importé oudans un script inline).

3Les composants MXML

91

Si vous ne spécifiez pas la propriété id de votre composant, vous pouvez tout de mêmey accéder via les méthodes du contrôle parent, c’est-à-dire le contrôle qui l’enveloppe,généralement un conteneur. Les méthodes en question sont les méthodes getChildAt() etgetChildByName().

Vous pouvez également manipuler l’objet courant ou le document imbriqué courant enutilisant le mot-clé this, suivi de l’opérateur point (.). Cela revient au même qued’utiliser la valeur de l’id en ActionScript. Dans l’exemple précédent, il revient au mêmed’utiliser this.label ou myButton.label.

Enfin, vous pouvez avoir une référence sur le composant en utiliser le mot-clé this suivide la chaîne de caractères représentant son identifiant (la valeur de la propriété id ensomme) entre crochets. L’exemple suivant est une application complète utilisant ceprocédé et qui change la taille de la police du texte de chaque bouton lorsque l’on cliquedessus.

<?xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script><![CDATA[public function changeBtn(s:String):void {

s = "btn" + s;this[s].setStyle("fontSize","18");

}]]></mx:Script><mx:Button id="btn1" click="changeBtn(’2’)" label="Change l’autre" /><mx:Button id="btn2" click="changeBtn(’1’)" label="Change l’autre" />

</mx:Application>

Quand utiliser la technique this["id"]

Cette dernière technique est particulièrement intéressante lorsque l’on travaille avec les contrôles detype Repeater ou lorsque vous créez des objets en ActionScript dont vous ne connaissez pasl’identifiant.

Lorsque vous êtes en mode Design, vous pouvez modifier un certain nombre de propriétéssur le contrôle sélectionné. Certaines propriétés sont communes à de nombreuxcomposants comme la taille ou la position, et d’autres propriétés sont spécifiques àchaque contrôle. Ces informations spécifiques se trouvent dans le volet Common (lepremier volet) du panneau Flex Properties. L’image suivante montre les propriétésspécifiques au composant DateChooser qui affiche un calendrier pour sélectionner desdates.


92

Différencier les composantsFlex dispose d’une liste de composants complète afin de créer des interfaces utilisateursriches. En mode Design, vous disposez dans Flex Builder d’un panneau nomméComponents (en bas à gauche par défaut) qui contient l’intégralité des composants misà votre disposition. L’image suivante retrace l’arborescence que vous pouvez voir dans cepanneau.

Les composants Controls sont les composants typiques de l’interface utilisateur tels queles Button, les TextArea ou les ComboBox. On distingue deux types de contrôles : lescontrôles Basic et les Data provider. Le second type de contrôles regroupe lescomposants qui nécessitent des données structurées afin de les afficher comme leDataGrid par exemple qui affiche une liste de données dans un tableau. Nous ne verronsdans ce chapitre que les contrôles basiques.

c Fig. 3.1 :Panneau des propriétésd’un contrôle

c Fig. 3.2 : Les différents types de contrôles Flex


93

Les composants de type Layout et Navigator font partie de la catégorie des conteneurs :c’est-à-dire qu’ils servent à accueillir des contrôles, soit pour les agencer de diversesmanières pour les conteneurs de type Layout, soit pour gérer leur affichage en fonction dela navigation pour les conteneurs de type Navigator.

Les composants de type Adobe AIR sont réservés aux applications de bureau pour avoirdes interactions avec le système de fichier de l’ordinateur sur lequel est lancéel’application. Par exemple, un explorateur de fichier ou une boîte de dialogue poursélectionner un fichier. Ce type de composant n’est pas envisageable pour une applicationFlex destinée à être publiée sur Internet car le lecteur Flash dans un navigateur ne peutpas avoir accès aux informations contenues sur votre ordinateur (par mesure de sécurité).

Si vous disposez du plug-in Chart, vous disposez d’une catégorie supplémentaire decontrôles permettant d’afficher des graphes. Vous aurez plus de détails sur l’utilisation deces contrôles dans le chapitre dédié aux graphes.

Utiliser un composant en MXML et en ActionScriptChaque composant Flex possède une API MXML et une API ActionScript homologues.Les attributs disponibles dans un tag MXML correspondent aux propriétés, événements,styles et comportements de la classe ActionScript. Vous pouvez utiliser les deux APIselon vos préférences mais le choix se portera essentiellement sur les cas d’utilisation ducomposant. Les composants statiques verront leurs propriétés définies dans le tag MXML,a contrario, les composants dynamiques (qui verront leurs propriétés modifiées durantl’exécution du programme) seront modifiés dans un contexte ActionScript.

Ce que l’on ne peut pas faire en MXML

Deux parties de l’API des composants ne sont pas exposées dans l’API MXML : les propriétés en lectureseule ainsi que les méthodes. Il est alors nécessaire de passer par l’API ActionScript.

Lorsque vous attribuez des propriétés à un contrôle en MXML, vous avez deuxalternatives : passer directement par l’édition du code MXML en s’aidant de lacomplétion automatique ou renseigner les champs adéquats dans l’interface design. Lepanel Flex Properties est à votre disposition pour modifier les paramètres principaux devotre contrôle ou l’intégralité des propriétés et événements en passant par la CategoryView (voir fig. 3.3).

Nous allons maintenant prendre un exemple simple et comparer les deux approchesMXML et ActionScript. Nous allons créer une interface avec un bouton et une zone detexte dont le message change lorsque l’on clique sur le bouton.


94

Le tableau suivant détaille l’utilisation de MXML et d’ActionScript pour configurer voscomposants :

Tableau 3.1 : Syntaxe de modification d’un composant en MXML ou en ActionScript

Version MXML Version ActionScript

Propriété enlecture/écriture

<mx:Panel id="panel1"title="Titre" visible="true" />

panel1.title = "titre";panel1.visible = "true";

Propriété en lectureseule

Impossible d’accéder à une propriétéen lecture seule via un attribut MXML.

var myClass:String=mp1.className;

Méthode Les méthodes ne sont pas accessiblesdirectement dans un tag MXML.

myList.sortItemsBy("price", "DESC");

c Fig. 3.3 : Les modes Standard View et Category View de l’onglet Flex Properties


95

Tableau 3.1 : Syntaxe de modification d’un composant en MXML ou en ActionScript

Evénement <mx:Accordionchange="changeHandler(event);" />

private function changeHandler(event:Flash.events.MouseEvent):void {...}

Style <mx:Panel paddingTop="12"paddingBottom="12" />

Pour modifier le style : panel1.setStyle("paddingTop", 12); Pourrécupérer la valeur du style :var currentPaddingTop:Number= panel1.getStyle("paddingTop");

Comportement <mx:WipeUp id="wipeIn"duration="1000"/><mx:Button id="btn"showEffect="{wipeIn}"

btn.setStyle(’showEffect’, wipeIn);

3.2 Les conteneurs d’agencementLes conteneurs permettent de structurer hiérarchiquement la mise en forme del’application. On emploiera plus généralement le terme anglais "layout" pour parler de lamise en page. Les conteneurs (le terme anglophone étant "container") servent à contrôlerla position et la taille des différents composants qu’ils contiennent, ainsi que la navigationdans l’application. Il existe deux types de conteneurs dans Flex : les conteneursd’agencement et les conteneurs de navigation. Nous aborderons dans ce chapitre lepremier type de conteneur.

Comprendre l’utilité des conteneursUn conteneur représente une surface rectangulaire de l’application Flex. À l’intérieurd’un conteneur, vous pouvez ajouter des composants ou d’autres conteneurs quis’afficheront à l’intérieur. Les composants sont appelés les enfants du conteneur.

Nous avons déjà utilisé un conteneur jusqu’à présent sans le savoir : le conteneurApplication, qui représente l’intégralité de la zone Flash de l’application Flex et quicontient tous les autres composants.

Les conteneurs possèdent de nombreuses règles prédéfinies, notamment sur la taille et laposition des composants enfants. La partie design de l’application en sera grandementsimplifiée. Bien entendu, ces règles sont flexibles et peuvent être modifiées simplement.


96

Ces règles prédéfinies possèdent deux avantages : le premier est de permettre audéveloppeur de se concentrer sur les fonctionnalités métier de son application et non surles problématiques de mise en place d’une interface. Le second est de pouvoir miser surla connaissance de ce type d’interface de la part des utilisateurs finaux. Les RIAs utilisentgénéralement les mêmes types de conteneurs pour naviguer dans l’application. De ce fait,l’utilisateur ne se soucie plus de savoir comment marche cette application et peutdirectement focaliser son attention sur le contenu.

Le conteneur Canvas

Si vous désirez avoir un très grand contrôle sur l’affichage des composants dans un conteneur, vouspouvez utiliser le conteneur Canvas qui ne possède aucune information par défaut sur le positionnementet la taille des composants enfants.

Maîtriser les conteneurs primordiaux : HBox et VBoxBien que vous puissiez créer une application en utilisant qu’un seul conteneur, les RIAssont généralement dotées de plusieurs conteneurs. Les deux conteneurs les plus simplesà utiliser et les plus récurrents sont les conteneurs HBox et VBox, qui permettentrespectivement d’afficher les composants enfants sur une ligne et une colonne. Ces deuxconteneurs sont des raccourcis d’utilisation du conteneur Box qui est strictementéquivalent aux deux autres conteneurs cités, sauf que l’on précise alors la valeur del’attribut direction.

L’exemple suivant présente une interface avec trois conteneurs de mise en forme,organisée de deux manières différentes afin de bien de cerner leur application. Pourréaliser cette interface, créez un nouveau projet Flex nommé test−HBox et ouvrez lefichier main.mxml en mode Design.

1 Sélectionnez le composant HBox qui se trouve dans le nœud Layout de l’explorateurde composants. Faites un glisser-déposer sur l’éditeur. L’IDE vous demande la tailledu composant : précisez 50 %. Un rectangle noir apparaît dans l’éditeur.

2 Sélectionnez le composant VBox et posez-le dans la HBox. Précisez une largeur de50 % et laissez la valeur par défaut de la hauteur. Répétez l’opération, vousremarquerez que la seconde VBox se place à droite de la première. C’est le résultatattendu, vu qu’une HBox place ses contrôles enfants horizontalement.

3 Sélectionnez ensuite des composants et placez-les dans les VBox nouvellementcréées. L’exemple ci-après est composé pour la balise VBox de droite d’un composantPanel avec un titre et dans la balise VBox de gauche de plusieurs boutons. Vousremarquerez que les éléments sont placés verticalement cette fois-ci.

3Les conteneurs d’agencement

97

Vous devriez obtenir le résultat suivant :

Passez maintenant en mode Source, et analysez le code. Les boutons et les checkbox setrouvent imbriqués dans chacune des deux balises VBox qui sont toutes les deux inclusesdans la HBox. Afin de bien comprendre l’intérêt de ces conteneurs, supposons que nousvoulions présenter les boutons dans le sens opposé : les boutons doivent être maintenantalignés, et les deux séries de composants doivent se retrouver l’une en dessous de l’autre.Il suffit d’intervertir les types de conteneurs que nous avons utilisés. Voici à quoiressemble alors le code de l’application en mode Source :


<mx:VBox width="50%"><mx:HBox width="50%" height="100%">

<mx:Panel width="250" height="200"layout="absolute" title="Panel de haut">

</mx:Panel></mx:HBox><mx:HBox width="50%" height="100%">

<mx:Button label="bouton 1" /><mx:Button label="bouton 2" /><mx:Button label="bouton 3" />

</mx:HBox></mx:VBox>

</mx:Application>

Seules les balises VBox changent par rapport à l’exemple précédent et deviennent des HBoxainsi que la balise HBox qui devient une balise VBox. Et voici le nouveau résultat en modeDesign : (voir fig. 3.5)

c Fig. 3.4 :Exemple d’utilisation deconteneur VBox


98

Utilisez l’attribut layout du conteneur Application

Si vous supprimez la balise VBox qui encadre les deux HBox de l’exemple précédent, vous neremarquerez aucun changement visuel. En effet, le conteneur Application agit par défaut comme uneVBox. Cela vient de l’attribut layout qui, par défaut, a la valeur vertical. Cet attribut peut avoir lavaleur horizontal pour agir comme une HBox. Nous verrons plus loin que l’attribut peut aussi avoir lavaleur absolute.

Reconnaître les cadres d’utilisation des autres conteneursd’agencementFlex contient une dizaine de conteneurs d’agencement. Il est important de connaître cesconteneurs qui répondent généralement à tous vos besoins d’agencement dans vosapplications Flex. Nous allons voir maintenant en détail tous ces conteneurs, à l’exceptiondu conteneur Form qui fera l’objet d’une attention plus détaillée dans le chapitre Allervers une interface riche.

Le Panel

Le conteneur de mise en forme Panel inclut une barre de titre avec un titre et un messagede status, une bordure et une zone de contenu pour y insérer les autres composants. LesPanel servent à séparer le contenu de l’application en modules. Vous pouvez placerplusieurs Panel sur une même page contenant un formulaire, une liste de produits et desgraphes (voir fig. 3.6).

c Fig. 3.5 :Exemple d’utilisation duconteneur HBox


99

Le conteneur Panel possède une propriété layout, comme de nombreux conteneurs, quipermet de disposer les éléments de trois manières différentes : vertical (par défaut),horizontal et absolute. La disposition absolute permet de spécifier l’emplacement dechaque enfant en spécifiant leur coordonnées x et y alors que les deux autres modesutilisent des règles prédéfinies de positionnement horizontal et vertical. Vous pouvezmodifier ce paramètre directement dans le code MXML ou, si vous préférez l’interfacedesign, ces informations se situent dans le panel Layout de l’onglet Flex Properties situéen bas à droite par défaut.

Voici le code d’une application Flex présentant un conteneur Panel avec un formulaire.L’attribut title permet de donner un titre au module graphique, un procédé standard desGUI d’application lourde.

c Fig. 3.6 :Exemple d’utilisationd’un conteneur Panel

c Fig. 3.7 :Modifier la direction en mode Design


100


<mx:Panel id="myPanel" title="Mon application"><mx:Form width="300">

<mx:FormHeading label="Information de paiement"/>

</mx:Form></mx:Panel>

</mx:Application>

Le ControlBar

Le conteneur ControlBar s’utilise avec un Panel ou un TitleWindow pour contenir descomposants qui pourront être partagés par les autres composants enfants du conteneurPanel ou TitleWindow. Pour une application de catalogue de produit, le ControlBar peutcontenir les contrôles Flex pour spécifier la quantité désirée et ajouter le produit au paniercomme le montre l’exemple ci-après.

Pour créer un conteneur ControlBar, il faut ajouter un tag <mx:ControlBar> commedernier enfant du tag <mx:Panel>, comme le montre le code de l’exemple suivant :


<mx:Panel title="Exemple de ControlBar"><mx:HBox width="100%" height="100%">

</mx:HBox><mx:ControlBar>

<mx:Label text="Quantité"/>

c Fig. 3.8 :Exemple d’utilisation duconteneur ControlBar


101

<mx:NumericStepper/><mx:Spacer width="100%"/><mx:Button label="Ajouter au panier"/>

</mx:ControlBar></mx:Panel>

</mx:Application>

Par ailleurs, l’exemple utilise le contrôle Spacer pour faciliter l’agencement del’interface.

Utiliser le contrôle Spacer

Spacer est un contrôle invisible qui sert à positionner précisément des éléments au sein de conteneurspositionnés automatiquement. Dans cet exemple, le contrôle Spacer est le seul composant basé sur unpourcentage du conteneur ControlBar. Flex dimensionne le contrôle Spacer de façon à ce qu’il occupetout l’espace disponible dans le conteneur, autrement dit l’espace qui n’est pas nécessaire pour d’autrescomposants. Flex repousse ainsi le contrôle Button vers le bord droit du conteneur.

L’ApplicationControlBar

Le contrôle ApplicationControlBar permet de contenir des composants fournissant descommandes de navigation et d’application. L’ApplicationControlBar est une sous-classede ControlBar, néanmoins, le style du composant est bien différent. Ce conteneurcontient généralement un contrôle MenuBar afin de recréer un menu horizontal en haut del’application, ce qui est une disposition classique des éléments de contrôles dans uneapplication lourde.

Typiquement, le conteneur ApplicationControlBar est placé en haut de l’application etreste ancré grâce à la propriété dock mise à true. Cette propriété redimensionneégalement le conteneur en adaptant sa largeur à la largeur de l’application ; et lorsquel’utilisateur fait défiler le contenu de l’application, ce conteneur ne sera pas affecté par ledéfilement et restera en haut de la zone visible. Si cette propriété est à false, le conteneuraura le même comportement que les autres conteneurs d’agencement. La propriété pardéfaut est false.

c Fig. 3.9 : Exemple d’utilisation du conteneur ApplicationControlBar


102

Vous pouvez voir un exemple d’utilisation de ce conteneur dans l’exerciced’application à la fin de ce chapitre.

La HDividedBox et la VDividedBox

Les DividedBox sont des conteneurs semblables aux conteneurs Box dans la mesure où ilsdisposent leur enfants de la même manière. La différence est que ce composant placeautomatiquement un séparateur entre chaque composant enfant. Ce séparateur permet deredimensionner la surface des conteneurs allouée à chaque enfant grâce à la souris. Toutcomme les Box, la propriété direction peut avoir la valeur horizontal ou vertical, laHDividedBox et la VDividedBox sont des conteneurs DividedBox avec la propriétédirection spécifiée respectivement à horizontal et vertical.

Dans cet exemple, le conteneur principal est une HDividedBox. Le séparateur horizontalmarque la séparation entre l’arborescence du TreeControl et la VDividedBox. Celle-cicontient un contrôle Panel (en haut) et un contrôle TextArea (en bas). Le séparateurvertical marque la séparation entre les deux contrôles.

Pour que les séparateurs fonctionnent, il faut que les composants enfants des DividedBoxsoient redimensionnables. Pour cela, il faut donc s’assurer que les composants enfants ontdes tailles relatives (la hauteur et la largeur doivent être spécifiées en pourcentage) et nonabsolues (en les spécifiant en pixels). Vous pouvez agrandir les composants contenus dansces conteneurs jusqu’à une taille maximale et les réduire jusqu’à une taille minimale. Cescontraintes doivent être précisées en attribuant des valeurs aux propriétés maxWidth etmaxHeight ainsi que minWidth et minHeight.

c Fig. 3.10 : Exemple d’utilisation des conteneurs HDividedBox et VDividedDox


103

Utilisez le liveDragging

Lorsque l’utilisateur redimensionne un conteneur, l’apparence de l’application ne s’effectue qu’aumoment où il lâche le bouton de la souris. En affectant la valeur true à la propriété liveDragging, lesmodifications se feront en même temps que les mouvements de la souris. Cependant, dans certains cas,cette option peut conduire à des baisses de performance.

Le Grid

Le conteneur Grid permet d’agencer les composants dans un tableau dont le nombre decellules est variable, à la manière d’un tableau HTML. Pour ceux qui ne sont pasfamiliers avec ce type d’objet, voici un schéma décomposant les différents éléments quel’on retrouve dans un tableau et que nous allons utiliser pour décrire l’utilisation ducomposant Grid.

Pour utiliser un tel composant, il faut respecter les étapes suivantes :

1 Définissez le conteneur d’agencement avec la balise <mx:Grid> qui peut contenirautant de balises <mx:GridRow> que vous souhaitez.

2 Ajoutez des balises <mx:GridRow> qui représenteront chacune une ligne de votretableau. Cette balise doit être incluse dans une balise <mx:Grid> et peut contenirautant de <mx:GridItem> que souhaité.

3 Ajoutez des balises <mx:GridItem> qui représenteront chacune une cellule de votreligne. Cette balise doit être incluse dans une balise <mx:GridRow>.

c Fig. 3.11 : Schéma d’un conteneur Grid avec trois lignes et trois colonnes


104

4 Ajoutez un seul contrôle dans la cellule définie par la balise <mx:GridItem>. Si vousvoulez mettre plusieurs contrôles dans une même cellule, placez un conteneurd’agencement dans la cellule du tableau et rajoutez les contrôles dans le conteneur.

Vous n’êtes pas obligé de définir le même nombre de cellules sur chaque ligne.Cependant, chaque cellule définie fera la même taille que les autres cellules placées dansla même colonne.

De la même manière que les tableaux HTML, le contrôle GridItem possède deuxpropriétés rowSpan et colSpan permettant de créer des cellules occupant plusieurscolonnes ou plusieurs lignes. Fusionner plusieurs cellules ensemble n’agrandit pasforcément le composant enfant de la cellule. Il faut spécifier une taille relativement à lacellule.

L’exemple suivant montre une utilisation complète du conteneur Grid. L’image degauche est le résultat dans le navigateur de l’utilisateur. Elle représente le conteneur Griden superposition. Le bouton 4 occupe deux cellules horizontalement tandis que lebouton 5 occupe deux cellules verticalement.

<mx:Grid>

<mx:GridRow><mx:GridItem>

<mx:Button label="1" /></mx:GridItem><mx:GridItem>

<mx:Button label="2" /></mx:GridItem><mx:GridItem>

<mx:Button label="3" /></mx:GridItem>

</mx:GridRow>

<mx:GridRow>

<mx:GridItem colSpan="2">

c Fig. 3.12 :Utilisation d’unconteneur Grid avec descellules fusionnées


105

<mx:Button label="4" width="100%"/></mx:GridItem><mx:GridItem rowSpan="2">

<mx:Button label="5" height="100%"/></mx:GridItem>

</mx:GridRow>

<mx:GridRow>

<mx:GridItem><mx:Button label="6"/>

</mx:GridItem><mx:GridItem>

</mx:GridItem>

</mx:GridRow>

</mx:Grid>

Le Tile

Le conteneur Tile agence ses enfants sur plusieurs lignes ou colonnes automatiquement.Le conteneur s’occupe d’ajouter de nouvelles lignes ou colonnes si cela est nécessaire. Lapropriété direction détermine l’agencement horizontal (par défaut) ou vertical descontrôles enfants. Concrètement, si vous définissez 16 enfants dans un conteneur Tile,vous verrez se former une grille de 4 lignes par 4 colonnes. Si vous définissez 13 enfants,Flex créera toujours une grille de 4 par 4 cellules mais les 3 dernières cellules de ladernière ligne resteront vides.

c Fig. 3.13 :Exemple d’utilisation duconteneur Tile dans lesdeux directions


106

Les cellules d’un conteneur Tile sont toutes identiques, contrairement au conteneur Grid.La taille d’une cellule sera déterminée par la cellule nécessitant le plus d’espace pourafficher intégralement son composant enfant. Pour spécifier une taille arbitraire, vousdisposez des propriétés tileHeight et tileWidth. Flex dimensionne automatiquement lescontrôles enfants du conteneur Tile. Si vous définissez vous-même la taille des celluleset que l’un des composants enfants possède une taille supérieure aux cellules, cecomposant sera alors coupé.

Le code MXML suivant décrit l’utilisation du conteneur Tile :

<mx:Tile direction="horizontal"><mx:Button label="1" height="50" width="75"/><mx:Button label="2" height="50" width="75"/><mx:Button label="3" height="50" width="75"/><mx:Button label="4" height="50" width="75"/><mx:Button label="5" height="50" width="75"/>

</mx:Tile>

Vous remarquerez que les cellules ne sont pas explicitement décrites dans le code. Si vousspécifiez une taille relative aux composants enfants, sachez que le composant parent surlequel sera calculée la taille n’est pas l’objet Tile directement mais la cellule du Tilecontenant votre contrôle.

Le Canvas

Le conteneur Canvas définit une surface rectangulaire dans laquelle vous pouvez placerdes contrôles. Contrairement aux autres conteneurs, Flex n’agence pas automatiquementles contrôles enfants du Canvas. Vous devez spécifier la position des enfants en utilisantune position absolue ou basée sur des contraintes. Pour utiliser la position absolue,spécifiez les propriétés x et y de chaque composant. Pour utiliser la position basée sur descontraintes, spécifiez la taille des ancres et leur côté. Pour une information détaillée surle positionnement, regardez la section sur la mise en forme de l’interface.

L’exemple suivant montre une utilisation simple de ce conteneur en plaçant un conteneurBox dans le conteneur Canvas en utilisant à la fois une position absolue et les contraintes.

<?xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"><mx:Canvas width="150" height="150" backgroundColor="#FFFFFF"><mx:Box id="hBox2" xmlns:mx="http://www.adobe.com/2006/mxml"left="30"right="30" y="50" height="50" backgroundColor="blue"></mx:Box></mx:Canvas>


107

</mx:Application>

Le code MXML précédent produit le résultat ci-après dans votre navigateur. La zoneblanche représente le Canvas et le rectangle à l’intérieur représente la Box.

3.3 Mise en forme de l’interfaceVous savez désormais placer vos éléments les uns par rapport aux autres dans le Canvasde votre application Flex. Nous allons maintenant détailler les techniques pour arrangerces éléments en ajustant leur taille et leur position. Bien que l’un des atouts de Flex soitde pouvoir créer une interface organisée rapidement, vous aurez au final besoin de cespropriétés.

Comprendre le redimensionnent d’un composantFlex dispose de plusieurs techniques pour décider de la taille d’un contrôle ou d’unconteneur :

j La taille par défaut : Flex détermine automatiquement les tailles des contrôles.C’est ce qui se produit si vous ne renseignez pas les propriétés de hauteur ou delargeur de votre contrôle.

j La taille absolue : vous précisez la largeur et la hauteur en pixels du contrôle grâceaux propriétés width et height. Les valeurs de ces propriétés sont des nombresuniquement, il n’y a pas de mesure associée (px, em) comme c’est le cas en HTML.

j La taille relative : vous définissez une taille du contrôle par rapport à celle de sonconteneur parent avec une valeur en pourcentage (vous devez rajouter le caractère %après la valeur pour que Flex différencie votre intention de mettre une taille relativeet non une taille absolue).

j La taille par contrainte : vous ne précisez pas directement les propriétés width etheight de votre contrôle mais vous spécifiez la position des côtés du contrôle parrapport au conteneur parent. Nous détaillerons cette méthode prochainement.

Lorsque vous ajoutez un nouveau conteneur dans votre application via l’interface dedesign, Flex vous demande la taille de votre conteneur. Vous pouvez renseigner sespropriétés width et height à ce moment-là ou ultérieurement dans l’interface, grâce aupanneau Layout de l’interface de design (situé en bas à droite par défaut). Vous pouvezégalement passer directement par l’édition du code MXML si vous êtes à l’aise avec lecode MXML.


108

L’exemple suivant illustre l’utilisation de ces différents types de taille dans une petiteapplication Flex.

Vous remarquerez que la taille par défaut d’un conteneur s’adapte en fonction descomposants fils qu’il contient. Néanmoins, en taille relative et absolue, Flex ne tient pascompte des éléments fils contenus par le Panel.

Essayez de reproduire visuellement cet écran, et comparez votre code à celui del’exemple :

<?xml version="1.0"?>

c Fig. 3.14 :Modifier la taille en mode Design

c Fig. 3.15 : Les différents types de taille d’un contrôle

3Mise en forme de l’interface

109

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="horizontal">

<mx:Panel layout="vertical" title="Taille par défaut"horizontalAlign="center">

<mx:DateChooser showToday="true"/><mx:CheckBox label="activer parametre 1"/>

<mx:CheckBox label="activer paramètre 2"/><mx:Button label="Appliquer"/>

</mx:Panel><mx:Panel width="100%" height="100%" layout="absolute"

title="Taille absolue"><mx:Button label="Button"/>

</mx:Panel><mx:Panel width="250" height="200" layout="horizontal"

title="taille relative"><mx:Button label="Button"/>


Le contrôle, en taille absolue, s’adapte à son conteneur parent. Ici, il s’agit du conteneurparent des trois Panel et du conteneur principal Application. Comme nous ne lui avonspas spécifié de taille, il prend tout l’espace possible dans le navigateur Internet. Ainsi,lorsque nous redimensionnons la fenêtre, nous pouvons constater que la taille du Paneldu milieu varie.

c Fig. 3.16 : Comportement de la taille par rapport au navigateur


110

Flex s’arrange pour que le Panel central, le seul en taille absolue, occupe 100 % del’espace disponible sachant que les deux autres Panel ont une taille fixe. La tailleminimale du Panel central sera la taille limite permettant d’afficher ses contrôles fils. Sil’on continue à réduire la fenêtre, l’application sera alors rognée sur les côtés et des barresde défilement surgiront.

Comprendre le positionnement absolu et les contraintesLorsque vos conteneurs ont la propriété layout définie à vertical ou horizontal, vousne gérez pas la position des contrôles enfants. Cependant, vous pouvez spécifier la valeurabsolute à cette propriété. Dès lors, vous pouvez positionner les contrôles comme bonvous semble. Le positionnement absolu ne concerne que trois types de conteneurs, àsavoir : les conteneurs Application, Canvas et Panel.

Les propriétés x et y permettent de positionner l’élément concerné par rapport au coinhaut gauche du conteneur parent. Si vous ne renseignez pas de valeur, l’élément seraplacé aux coordonnées (0;0) autrement dit, dans le coin. En positionnement absolu, vousavez le contrôle total de la mise en forme, ce qui permet par exemple de superposer descomposants. L’exemple suivant utilise ce procédé pour placer deux balises HBoxsuperposées avec un fond coloré dans un Canvas :

<?xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

backgroundGradientColors="[#FFFFFF, #FFFFFF]"><mx:Canvas width="100" height="100" backgroundColor="yellow">

<mx:VBox width="80" height="80" x="20" y="20"backgroundColor="green ">

</mx:VBox><mx:VBox width="50" height="50" x="0" y="50"

backgroundColor="red "></mx:VBox>

</mx:Canvas></mx:Application>

L’exemple produit l’image suivante.

c Fig. 3.17 :Exemple de l’utilisation du Layout

3Mise en forme de l’interface

111

Utiliser les contraintes

Vous pouvez utiliser le système de contraintes afin de gérer la position et la taille de voscomposants dans un conteneur supportant la mise en forme absolue. Les contraintes sontdes ancres qui permettent de maintenir la disposition des contrôles dans le conteneur,spécialement lorsque la taille de celui-ci est variable. Ces contraintes permettent dedonner une distance minimale entre le contrôle et l’un des bords du conteneur ou l’axede symétrie.

L’exemple suivant utilise un Canvas contenant trois HBox. La HBox du centre possède deuxcontraintes symétriques sur les axes horizontal et vertical afin de la centrer. Les deuxautres possèdent des contraintes par rapport aux bords du Canvas plaçant les HBox à10 pixels des bords, quelle que soit la taille du conteneur.

Pour définir une contrainte, Flex dispose d’unoutil très pratique qui apparaît dans le panelLayout de l’onglet Flex Properties lorsquel’on sélectionne un composant contenu dansun conteneur en layout absolute. Un petitpanel est dessiné entouré de checkbox représentant chaque contrainte possible. Une foisla contrainte sélectionnée, un champ de saisie permet de définir la distance entre l’ancreet le composant pour créer une marge. Les images suivantes montrent l’utilisation de cetoutil pour contraindre un contrôle.

c Fig. 3.18 :Exemple d’utilisation du Canvas

c Fig. 3.19 :Conservation descontraintes sur unCanvasredimensionné

c Fig. 3.20 :Contraindre un contrôle


112

La première image contraint le composant à avoir une marge de 10 pixels en haut et àdroite entre le conteneur et lui-même. Si nous ajoutons une nouvelle contrainte pourajouter une marge à droite ou en bas, la taille du composant sera automatiquement géréepour respecter toutes les contraintes. La seconde image contraint le composant à êtrecentré dans son conteneur.

Les contraintes peuvent être spécifiées directement dans le code MXML en utilisant lespropriétés top, right, bottom et left pour définir des marges ou verticalCenter ethorizontalCenter pour centrer selon un axe.

3.4 Les contrôles simplesMaintenant que vous savez disposer et organiser des contrôles graphiques sur votreinterface, nous allons nous attarder sur le contenu visible de votre application avec lepremier type de contrôles dits contrôles simples.

Utiliser Flex Component Explorer pour appréhender les contrôlessimplesDétailler chaque contrôle du framework Flex serait fastidieux et peu intéressant.Néanmoins, il est nécessaire lorsqu’on veut utiliser un nouveau contrôle de savoircomment s’en servir et de connaître l’ensemble de ses fonctionnalités pour ne pas perdrede temps à redévelopper des actions qui sont cachées dans le composant. L’application enligne Component Explorer montre des cas d’utilisation typiques de la plupart des

c Fig. 3.21 :Définition d’une contrainte sur un contrôle

3Les contrôles simples

113

composants MXML disponibles dans le framework Flex. C’est un bon outil de départpour découvrir les possibilités du framework et un bon guide pour les utilisercorrectement.

L’application est séparée en trois zones distinctes : l’arborescence de gauche permet deretrouver des exemples d’utilisation d’un composant particulier. Une fois le composantsélectionné, la partie en haut à droite montre un exemple tel qu’il est rendu aprèscompilation, et la partie en dessous vous donne le code pour refaire exactement cetexemple. Généralement, un copier-coller de l’exemple suffit à le compiler chez soi.

Cette application en anglais est disponible à l’adresse suivante : http://www.adobe.com/go/flex_explorer_app. Cette application est aussi disponible via la page Flex Start du Flex Buil-der. Sinon, une recherche sur votre moteur de recherche favori avec la requête "Adobe FlexComponent Explorer" vous sortira le bon URL.

Afficher des imagesVous aurez rapidement besoin d’afficher des images dans votre application, que ce soit demanière statique pour un élément de décoration (le logo de votre application typiquement)ou de manière dynamique pour afficher le visuel d’un produit dans un catalogue.

c Fig. 3.22 : L’interface d’Adobe Flex Component Explorer


114

L’importation d’images à l’exécution ou à la compilation

Vous pouvez importer des images (au format .gif, .jpeg, .png, .svg et .swf) via le contrôleImage. Cette importation peut être effectuée à l’exécution ou à la compilation. Importerune image à la compilation est idéal pour les images statiques. Le chargement de l’imagesera immédiat lors du lancement de votre application car l’image sera incluse dans lefichier swf généré. Cela présente tout de même des inconvénients : si vous voulez changerl’image, vous devez obligatoirement recompiler votre application et votre fichier générésera aussi plus volumineux et donc le temps de chargement de votre application sera pluslong.

Si vous avez besoin d’afficher beaucoup d’images dans votre application (pour uncatalogue par exemple), vous ne devez pas utiliser cette méthode mais lui préférer plutôtl’importation de vos images à l’exécution. Vous pouvez charger une ressource présentedans le système de fichier local ou sur le réseau via une requête HTTP. Ces images sontindépendantes de l’application Flex, ce qui permet de modifier les images sans toucher aucode ou repasser par une étape de compilation. Cependant, le temps de chargement del’image est notable, surtout si l’on utilise des ressources sur le réseau.

Sécurité du Player Flash et importation d’images

Lorsque vous importez des images à l’exécution, vous devez être attentif aux restrictions de sécurité duPlayer Flash. En effet, les paramètres par défaut de sécurité permettent d’importer via le réseau desimages uniquement sur le même domaine que celui hébergeant l’application Flex. Si vous voulezaccéder à des images stockées sur d’autres serveurs, vous devez utiliser un fichier crossdomain.xml.

Le contrôle Image

Le contrôle Image permet de façon basique de :

j spécifier le chemin vers l’image ;j redimensionner l’image ;j positionner l’image sur le Canvas.

La propriété source de ce contrôle permet de spécifier le chemin absolu ou relatif, ou unURL de l’image que vous voulez importer. Si le chemin est relatif, Flex ira chercherl’image dans le dossier contenant le fichier utilisant le tag.

Pour importer une image à la compilation, la propriété source a l’allure suivante :

<mx:Image source="@Embed(’source=images/test.jpg’)" />


115

Dans cet exemple, la taille et la position de l’image ont les valeurs par défaut. Il s’agitd’un chemin relatif, donc Flex ira chercher l’image dans le répertoire images à la racinede l’application. Dans la mesure où il s’agit d’une image importée à la compilation, lavaleur de l’attribut source ne peut pas être un URL.

Le dossier images

Il est primordial de rester organisé et de toujours savoir où se trouvent les ressources afin de pouvoir yaccéder facilement. C’est pourquoi, lorsque vous utilisez des images, il est fortement recommandé de créerun nouveau dossier images à la racine de votre application et d’y stocker vos images statiques.

Pour importer une image à l’exécution, la propriété source a l’allure suivante :

<mx:Image source="http://www.monDomaine.com/images/test.jpg" />

Comme nous n’utilisons pas ici @Embed dans la propriété source, l’image sera importéeà l’exécution. Nous avons ici importé une image présente sur Internet mais nous aurionspu mettre un chemin local. Notez également que les images de type SVG ne peuvent pasêtre importées à l’exécution mais seulement à la compilation.

Le flag de compilation use−network

Lorsque le flag use−network est à false, vous pouvez utiliser des ressources du système de fichier local,mais pas à travers le réseau. La valeur par défaut de ce flag est à true, ce qui vous permet d’accéderaux ressources via le réseau mais pas via le système de fichier local.

Vous pouvez importer plusieurs fois la même image avec la même syntaxe ; Flex nechargera l’image qu’une seule fois et référencera ensuite cette image lors des autresappels.

Si vous voulez changer d’image pendant l’exécution (par exemple passer à la photosuivante sur un album photo), vous pouvez utiliser en ActionScript la méthode load survotre objet Image.

private function getNextImage(name:String):void {var imageSource:String = ’images/’ + name + ’.jpg’;image1.load(imageSource);}

La méthode load va chercher l’image spécifiée comme le montre le bref exemple plushaut. Il s’agit d’un chemin sur le système de fichier local or, on accède à une ressource


116

lors de l’exécution, il ne faut donc pas oublier de compiler l’application avec le flaguse−network=true.

Redimensionner une image

Le redimensionnement d’une image, via les attributs width et height qui vous sontfamiliers, conserve les proportions de l’image. Prenons pour exemple une image carréedont la taille originale est de 100 × 100 pixels et le tag suivant :

<mx:Image source="test.jpg" height="150" width="200" />

La zone du composant n’étant pas carrée, Flex redimensionne l’image au format150 × 150 pixels, la taille la plus grande possible qui conserve les proportions de notreimage. L’espace restant 50 × 150 reste vide. Cependant, cet espace est réservé au contrôleet aucun autre élément ne viendra le combler.

Si vous ne voulez pas maintenir les proportions lorsque vous redimensionnez une image,utilisez la propriété maintainAspectRatio avec la valeur false.

Utiliser les Text ControlsIl existe cinq contrôles pour gérer l’affichage de vos textes et permettre à vos utilisateursd’écrire du texte dans votre application.

Afficher du texte

Vous avez pour cela deux contrôles possibles : le Label et le Text. Ces deux contrôles nepeuvent pas être édités par vos utilisateurs et se différencient par le fait que le premieraffiche un texte sur une seule ligne tandis que le second est utilisé pour afficher un textesur plusieurs lignes.

La propriété text de ces contrôles permet de spécifier la chaîne de caractères à afficher.La manière de spécifier les caractères spéciaux dépend du contexte d’utilisation de lapropriété (en MXML ou en ActionScript). Pour éviter de trop nombreux conflits, vouspouvez utiliser une section CDATA lorsque votre texte comporte des caractères spéciaux enutilisant la propriété text comme un élément fils du contrôle Text comme ceci :


<mx:Text width="100%"><mx:text>

<![CDATA[Ce texte contient un chevron inférieur < et supérieur >,une esperluette &, une apostrophe, ’, un mot-clé du langage

➥ return,


117

et des guillemets ".]]></mx:text>

</mx:Text></mx:Application>

Vous pouvez spécifier l’affichage de votre texte en utilisant des propriétés de style sur lecontrôle comme color ou fontSize. Vous pouvez également afficher du texte formaté enHTML grâce à la propriété htmlText, et ainsi utiliser les tags courants du langage HTMLcomme <b> <i> <a> <p> <li> ou <img>. L’exemple suivant montre un texte formaté enHMTL avec des options de style provenant du contrôle :

<?xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"➥ backgroundColor="white">

<mx:Text width="100%" color="blue" fontStyle="bold" fontSize="12"><mx:htmlText>

<![CDATA[Ceci est un text<ul><li>bleu</li>

<li>de taille 12</li><li>gras</li><ul>

<i><font color="#000000" size="10">Ce texte est de taille 10 en noir et en italique.

</font></i>]]></mx:htmlText>

</mx:Text></mx:Application>

Voici le résultat à l’écran :

c Fig. 3.23 :Texte formaté dans Flex


118

Vous remarquerez que le style provenant du htmlText écrase les styles définisauparavant : la couleur noire vient de la balise HTML <font> tandis que la couleur bleuevient des propriétés du contrôle Text.

Écrire du texte

De la même manière que pour afficher du texte, on va distinguer les contrôles quipermettent de saisir du texte sur une seule ligne, le TextInput, des contrôles multilignescomme le TextArea et le RichTextEditor.

Les contrôles TextInput et TextArea s’utilisent avec une simple balise MXML et lesattributs text et htmlText permettent de mettre une valeur par défaut comme le montrel’exemple suivant :

<?xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"><mx:TextArea id="textConfirm" width="300" height="100"text="Votre messqge de confirmation! "/></mx:Application>

Pour récupérer la valeur de ce contrôle, il vous suffit de lire la valeur contenue dans lapropriété text.

Lorsque vous permettez à l’utilisateur de saisir du texte, vous voulez généralement luipermettre de formater un tant soit peu son texte, comme on le ferait dans un éditeur detexte comme Word. Flex possède un contrôle très complet afin de formater son texte auformat HTML en WYSIWYG. Le contrôle RichTextEditor est composé d’un Panel avecdeux éléments fils :

j un TextArea permettant à l’utilisateur de saisir son texte ;j une barre d’outils contenant diverses fonctionnalités classiques de mise en page (le

choix de la police, la taille ou la couleur).

c Fig. 3.24 :Le contrôle RichTextEditor


119

Nous vous donnons le code pour obtenir cet exemple. La valeur du texte est liée enActionScript pour plus de commodité. Vous en apprendrez davantage sur cette liaisondans les prochains chapitres.

<?xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"><mx:Script><![CDATA[[Bindable]public var htmlTextData:String="<b>titre1</b><br>blablabla";]]></mx:Script><mx:RichTextEditor id="rte" title="Rich Text Editor Control"➥ htmlText="{htmlTextData}"/></mx:Application>

3.5 Mise en pratique : une interface d’annuaireAvant de clôturer ce chapitre, nous allons prendre pas à pas un exemple complet intégrantles points importants que vous venez d’apprendre. Nous allons réaliser une interfaced’une application classique, à savoir : un annuaire pour gérer vos contacts.

c Fig. 3.25 : L’interface que nous allons créer


120

Mettre en place les conteneursVous allez commencer par créer un nouveau projet que vous nommerez annuaire. Ouvrezle fichier annuaire.mxml ; vous êtes fin prêt pour attaquer l’interface.

Redimensionnez la taille du conteneur Application pour former un rectangle de650 × 400 pixels et définissez le type de layout en vertical au lieu d’absolute. Déposezen premier une HDividedBox occupant tout l’espace disponible (les propriétés width etheight doivent être à 100 %). Déposez consécutivement deux Panel dans la HDividedBox.Les Panel ont une taille par défaut qu’il faut changer. Mettez leur hauteur à 100 %. Nousvoulons que le Panel de gauche soit moins large, précisez ainsi une largeur de 50 %. Lesecond Panel doit prendre tout l’espace restant, sa largeur est donc logiquement de100 %. Ajoutez un titre aux Panel grâce à la propriété title. Ajoutez maintenant danschaque Panel un ControlBar et vous devriez avoir le résultat suivant :

Ajouter les contrôles simples en mode DesignDéposez un Button dans le premier ControlBar, et trois Button dans le second. Regardezle résultat afin de connaître les textes des boutons. Il faut maintenant placer correctementles boutons. Sélectionnez le ControlBar de gauche et dans le panel Common, attribuezla valeur right à la propriété Horizontal align. Dans le ControlBar de droite, placez leconteneur Spacer entre les deux premiers boutons et attribuez-lui une largeur de 100 %pour qu’il occupe tout l’espace disponible de ControlBar. Ainsi, les deux derniersboutons sont déplacés complètement à droite tandis que le premier reste à gauche.

c Fig. 3.26 : Mise en place des conteneurs

3Mise en pratique : une interface d’annuaire

121

Nous allons maintenant compléter le Panel de gauche. Commencez par définir le layoutdu Panel en vertical. Placez ensuite une HBox avec une largeur de 100 % puis en dessousde celle-ci, ajoutez une DataGrid qui prend tout l’espace disponible. Passez en modeSource et retrouvez l’endroit où la DataGrid est définie. Modifiez le code pour supprimerla colonne supplémentaire et renommez les titres des colonnes. Votre code devraitressembler à celui-ci :

<mx:DataGrid width="100%" height="100%"><mx:columns>

<mx:DataGridColumn headerText="Prénom" dataField="firstName"/><mx:DataGridColumn headerText="Nom" dataField="lastName"/>

</mx:columns></mx:DataGrid>

Vous remarquerez que nous avons modifié les valeurs des propriétés dataField descolonnes. C’est pour pouvoir lier la DataGrid avec des données. Nous ne détaillerons ceconcept que dans les prochains chapitres, mais vous pouvez rajouter le code suivant dansle tag de la DataGrid pour rajouter des valeurs dans la grille.

<mx:dataProvider><mx:ArrayCollection>

<mx:Object firstName="Blandine" lastName="Dupont"/><mx:Object firstName="Jean" lastName="Frochen"/>

</mx:ArrayCollection></mx:dataProvider>

c Fig. 3.27 : Placement des boutons


122

Chaque propriété des tags <mx:Object> est alors liée à la colonne dont lui correspond lapropriété dataField.

Tant que vous êtes en mode Source, recherchez plus haut la définition du tag HBox etajoutez un tag TextInput et un tag Image. Trouvez sur Internet une image loupe pourreprésenter la recherche et utilisez l’URL de cette image comme valeur de la propriétésource du tag. Le code devrait ressembler à ceci :

<mx:HBox width="100%"><mx:TextInput text="recherche" width="100%" height="100%"/><mx:Image source="http://www.philatelie.free.fr/img/search.gif"

width="25" height="25" /></mx:HBox>

Bien sûr, cette image n’a aucune raison d’être chargée à l’exécution et devrait êtreimportée lors de la compilation. Dans cette optique, copiez cette image dans le dossierimages que vous aurez créé à la racine de votre application. Ensuite, importez cette imageen spécifiant le chemin vers l’image :

<mx:Image source="@Embed(images/search.gif’)" width="25" height="25" />

Repassez en mode Design ; vous remarquerez que les composants sont collés au bordintérieur du Panel. Pour rajouter une marge, sélectionnez la vue Alphabetical View del’onglet Flex Properties et descendez dans la liste jusqu’aux propriétés paddingBottom,paddingLeft, etc. Précisez une valeur de 5 pixels aux quatre marges et vous devriezmaintenant avoir quelque chose comme ceci dans votre navigateur, après avoir compilévotre application :

c Fig. 3.28 :Interface du Panelde gauche

3Mise en pratique : une interface d’annuaire

123

Il ne nous reste plus que le Panel de droite à compléter. Sélectionnez des contrôles Labelet positionnez-les dans le Panel en mode Design pour profiter des guides qui apparaissentpour aligner et répartir les contrôles. Le layout absolute permet de placer vos contrôlescomme bon vous semble. Vous pouvez vous amuser à lier les Labels avec la liste descontacts (bien que ce ne soit pas l’objectif de ce chapitre) en mettant, par exemple, pourle prénom :

<mx:Label x="105" y="10" text="{list.selectedItem.firstName}"/>

Il faut maintenant rajouter l’image de votre contact dans votre dossier images. Rajoutezun contrôle Image et spécifiez le chemin de l’image dans la source. Si vous voulez lierl’image aux noms dans la liste, ne mettez pas la directive @Embed pour pouvoir changerdynamiquement la source de l’image. Rajoutez également une contrainte de 20 pixels surla marge de droite afin que la photo ne disparaisse pas lorsque l’utilisateurredimensionnera la liste.

Rajoutez au-dessus de la HDividedBox un Label en gras et avec une taille de 18 pixels afind’intituler votre première interface : mon Annuaire !

3.6 Check-listDans ce chapitre, nous avons vu :

a ce qu’était un composant dans Flex ;

c Fig. 3.29 : L’interface que nous avons créée


124

a les principaux conteneurs et leur utilisation ;a le positionnement et le redimensionnement d’un contrôle ;a l’utilisation de quelques contrôles simples ;a la gestion des images dans Flex.

Le chapitre suivant est consacré à la gestion des événements dans Flex.

3Check-list

125

44.1 Introduction aux événements ........................... 1284.2 Utiliser les événements .................................. 1294.3 Les événements clavier ................................. 1334.4 Créer ses propres événements ........................ 1374.5 Mise en pratique : un convertisseur de devises ..... 1384.6 Check-list ................................................. 143

Gérer lesévénements

Ce chapitre présente les principes qui régissent lemodèle événementiel de Flex. Nous allons ainsi voir

comment réagir aux actions de l’utilisateur, et comment lestraiter en prenant en compte leur nature (événements liésau clavier, à la souris, etc.).

4.1 Introduction aux événementsPour un développeur web, la programmation événementielle peut se révéler quelque peudéstabilisante ; néanmoins, une fois que vous y aurez goûté, vous ne pourrez plus vousen passer !

Un événement permet au développeur de savoir ce qui se passe dans son application etde réagir en conséquence, chaque événement pouvant être récupéré et traité pour fournirune réponse adéquate. Avec Flex, toute interaction peut générer un événement, qu’ils’agisse d’un simple clic ou d’une action plus complexe. Mais les événements peuventaussi être déclenchés sans aucune interaction, quand l’apparence ou l’état d’un composantest modifié.

Avant de passer à la pratique, il va falloir s’initier à un peu de théorie : nous allons doncvous expliquer le flux des événements puis détailler les principaux objets utilisés par Flexpour gérer ces derniers. Nous pourrons ensuite passer sereinement à la pratique.

Comprendre le flux des événementsLorsque Flash déclenche un événement, l’objet correspondant Event effectue unaller-retour entre l’objet émetteur et l’objet récepteur. Le flux des événements sedécompose en trois phases :

j La phase de "capture" : dans cette phase, le lecteur Flash parcourt tous les nœuds del’application pour voir si l’un d’eux attend l’événement envoyé, et si c’est le cas,l’action associée à cet événement est lancée.

j La phase de "ciblage" : cette phase concerne simplement le nœud émetteur. Flashinitialise l’objet Event, cherche si une fonction est associée à cet événement (on parlede listener) et la déclenche le cas échéant.

j La phase de "bouillonnement" : cette étape au nom assez étonnant désigne lemoment où Flash remonte l’intégralité des nœuds de l’application et déclenche leslisteners associés à l’événement.

À propos de l’objet EventNous avons précédemment évoqué l’objet Event. Il s’agit à présent de décrire sa structureet son fonctionnement pour mieux comprendre les subtilités du modèle événementiel.

On parle d’objet Event mais il s’agit plus précisément de la classe flash.events.Eventd’ActionScript, classe qui contient de nombreuses propriétés qui définissent l’événementdéclenché. On ne crée pas un Event, il est créé implicitement par l’application lors de sondéclenchement. Cependant, une fois l’objet instancié, nous pouvons le récupérer pour

4 Gérer les événements

128

obtenir des informations sur l’origine et la nature de l’événement. Pour pouvoir récupérerun Event, il suffit de le passer en paramètre de notre listener, et lorsque celui-ci seradéclenché, on pourra accéder au paramètre et donc à l’Event.

La classe EventDispatcherVoici un nom un peu barbare mais qui désigne l’une des classes de base de Flex. En effet,la majorité des éléments qui constituent une interface Flex héritent de cette classe qui estla clé de voûte du modèle événementiel.

De manière concrète, cela signifie que tous ces éléments peuvent utiliser la méthodeaddEventListener() qui permet d’écouter un événement en particulier afin d’y associerune réaction particulière.

Il ne s’agit pas de la seule méthode de la classe EventDispatcher ; elle permet aussi, viala méthode dispatchEvent(), de déclencher un événement personnalisé. On peutégalement mentionner la méthode hasEventListener() qui permet de vérifier si unlistener est présent sur l’objet pour un événement en particulier. Enfin, la méthodewillTrigger() parcourt toute la hiérarchie des composants de notre interface pourvérifier la présence d’un listener.

4.2 Utiliser les événementsLa mise en place d’un événement s’effectue en deux étapes.

Dans un premier temps, il s’agit de déclarer une fonction : on parle de listener, quidéclenche une réaction. Cette fonction utilise souvent l’objet Event (mentionnéprécédemment) pour accéder aux propriétés qui définissent l’événement.

Dans un second temps, il s’agit de lier notre listener à un objet, en spécifiant le typed’événement attendu (un clic de souris par exemple). Pour accomplir cette étape, nousdisposons de deux méthodes : utiliser du code inline directement dans l’interface enMXML, ou bien lier l’événement dans le code.

Pour illustrer ces mécanismes, nous allons commencer par déclarer une fonction que nousutiliserons comme listener :


import mx.controls.Alert;

private function myListener(event:Event):void {Alert.show("Evénement déclenché");

4Utiliser les événements

129

}

]]></mx:Script>

Cette fonction est volontairement très simple. Nous aurons l’occasion de voir un exempleun peu plus complexe dans la mise en pratique à la fin de ce chapitre.

Cette fonction utilise la classe Alert de Flex qui permet, via la méthode show(), dedéclencher un pop-up très utile pour déboguer une application.

Utiliser les événements inlineNous allons commencer par le plus simple. En effet, cette méthode permet d’utiliser ungrand nombre d’événements en ajoutant une simple propriété à l’un des objets de votreinterface MXML.

Concrètement, si l’on veut exécuter la fonction précédemment déclarée lorsque l’onclique sur un bouton, il suffit d’ajouter l’attribut click à la balise <mx:Button> de lamanière suivante :

<mx:Button id="myButton" label="Cliquer ici" click="myListener()"/>

Vous pouvez admirer le résultat.

Cette fonctionnalité permet de mettre en œuvre des événements de manière simple etrapide ; vous serez amené à l’utiliser régulièrement lors de vos conceptions d’interfacesFlex. Notez que vous n’êtes pas limité au simple clic, car de nombreux autres typesd’événements peuvent être déclenchés de la même manière. Nous tâcherons d’énumérerles principaux types ultérieurement.

Utiliser les événements dans le codeÀ présent, nous allons voir comment associer un listener à un composant côtéActionScript. Si cette méthode n’est pas fondamentalement plus compliquée à mettre enplace, elle requiert une certaine connaissance des différents types d’événements.

c Fig. 4.1 :Notre premier événement


130

Voyons donc comment associer la fonction myListener au bouton caractérisé par l’idmyButton. Comme nous l’avons vu précédemment, vous pouvez déclarer le bouton côtéMXML, ou bien côté ActionScript. Le code que nous allons voir ne changera pas :

myButton.addEventListener(MouseEvent.CLICK, myListener);

Nous obtenons le même résultat qu’avec la méthode inline. Tâchons cependantd’expliciter cet extrait de code : le composant myButton dispose de la méthodeaddEventListener qui permet de lui signifier qu’il doit réagir à un événement particulier.Cette méthode prend deux arguments, le type d’événement attendu, ici un clic de souris,et la méthode à associer à cet événement, ici myListener, notre listener déclaréprécédemment.

Manipuler l’objet EventÀ présent, vous êtes capable de déclencher un événement. Il pourrait être intéressantd’avoir accès aux propriétés de l’événement dans notre méthode listener. Même si celane vous paraît pas évident à première vue, vous serez certainement ravi de connaîtrel’origine ou le type de l’événement traité.

Nous allons commencer avec un exemple pratique simple. Imaginons que nous voulionseffectuer un débogage rapide de notre application, en l’occurrence nous aimerions savoirquel type d’événement a été déclenché dans notre application. Il suffit de reprendre notrefonction myListener déclarée plus haut et la modifier de la manière suivante :

function myListener(event:Event):void {Alert.show("Evénement "+event.type+" déclenché");

}

Et voilà le travail.

c Fig. 4.2 :Type d’événement

4Utiliser les événements

131

Si vous avez encore du mal à comprendre l’utilité de cette fonctionnalité, nous allons voirune autre propriété intéressante de l’objet Event. L’attribut currentTarget désigne lecomposant cible, autrement dit le composant à l’origine de l’événement. Un attributhautement intéressant, donc, dans la mesure où il permet d’accéder aux propriétés ducomposant source.

En gardant le même bouton que dans nos exemples d’utilisation d’événements, nouspouvons illustrer l’utilité de cette fonctionnalité :

function myListener(event:Event):void {Alert.show("Bouton ’"+event.currentTarget.Label+"’ cliqué");

}

Nous obtenons alors le résultat suivant :

Notez que si en général la déclaration de l’événement comme un simple Event suffit, ilarrive que vous ayez besoin d’accéder à des propriétés spécifiques à un type d’événement,par exemple un KeyboardEvent : il suffit alors de déclarer notre objet commeKeyboardEvent au lieu d’Event pour résoudre ce problème.

Type non reconnu

Il arrive que l’inclusion de la classe de l’événement soit nécessaire pour déclarer cet événement. Pensezdonc à l’importer dans votre ActionScript.

Les événements à connaîtreVous savez désormais comment utiliser les événements, et comment manipuler l’objetEvent, mais encore faut-il connaître les différents événements et leur cas d’utilisationdans votre future application. Nous avons déjà vu comment réagir à un clic de souris ;beaucoup d’autres événements existent et certains sont indispensables. Vous devez lesconnaître.

c Fig. 4.3 :Accéder à un attribut


132

Voici donc une liste d’événements génériques que vous serez amené à utiliser dès votrepremière application :

Tableau 4.1 : Les événements à connaître

Attribut Description

creationComplete Voici un événement des plus sympathiques pour gérer votre initialisation. Ilest déclenché lorsqu’un composant et tous ses fils sont créés : on peut alorsinitialiser les valeurs de certaines variables ou composants.

Error L’une des méthodes permettant de rattraper et de traiter les erreurs est derécupérer et de traiter cet événement.

Scroll Cet événement est déclenché à chaque fois que l’utilisateur défile avec sasouris dans son application : il peut se révéler utile dans un tableau bienfourni.

Change C’est un événement au nom plutôt évocateur. Il est déclenché dès qu’uncomposant subit une modification, et il se révèle très utile lors del’utilisation d’une ComboBox ou d’un composant personnalisé.

4.3 Les événements clavierIl existe un point important, à savoir distinguer les RIA du reste des applications web :il s’agit de la possibilité d’utiliser le clavier pour interagir avec l’interface. Flex soumetdonc à cet impératif en proposant, dans le cadre de son système événementiel, une gestionsimple et complète des raccourcis clavier. Nous nous efforcerons de vous présenter cettefonctionnalité tout au long de cette partie.

Gérer les événements clavierNous allons voir dans un premier temps comment réagir aux frappes du clavier, sansdistinguer une touche en particulier. À cet effet, Flex propose deux types d’événements,l’un correspond au moment où l’utilisateur appuie sur une touche, l’autre au moment ouil la relâche. Ces événements sont appelés KeyboardEvent.KEY_DOWN et KeyboardEvent.KEY_UP, et ils sont tous les deux déclenchés à chaque fois que l’utilisateur appuie sur unetouche de son clavier. Notez cependant que les listeners doivent être attachés à uncomposant dit actif, par exemple s’il s’agit d’un TextInput, le focus doit y être présent.

4Les événements clavier

133

Priorité des événements

Le composant <mx:Application /> est toujours actif dans votre interface. Si vous attachez vos listenersà ce composant, ils seront donc pris en compte quel que soit le focus dans l’application.

Nous allons voir un exemple concret de l’utilisation de ces deux événements.Commençons par déclarer un TexInput et un Label :

<mx:TextInput id="my_input" /><mx:Label id="my_label" />

Puis une fonction qui va nous servir de listener :

private function autoFill():void {my_label.text = my_input.text;

}

Il ne nous reste plus qu’à relier le tout. Voyons d’abord comment le réaliser de manièreprogrammatique :

my_input.addEventListener(KeyboardEvent.KEY_UP, autoFill);

Vous pouvez aussi, bien entendu, utiliser la méthode inline, plus simple à mettre enplace :

<mx:TextInput id="my_input" keyUp="autoFill()" />

Dans tous les cas, le résultat sera le suivant :

Notez que les équivalents à KeyboardEvent.KEY_UP et KeyboardEvent.KEY_DOWN sont bienlogiquement les attributs keyUp et keyDown en MXML.

c Fig. 4.4 :Utilisation des événements clavier


134

Récupérer les codes clavierMaintenant que vous savez comment réagir à un événement clavier, il pourrait êtreintéressant de récupérer le code de la touche pressée pour réagir de manière différente enfonction de la touche appuyée.

Flex vous permet de réaliser ce genre de manipulation en utilisant le keyCode (spécifiqueà la touche pressée) ou le charCode (spécifique au caractère correspondant, suivant lecode ASCII, numérotation standard utilisée dans l’informatique pour représenter lescaractères alphanumériques). Pour récupérer ces valeurs, il suffit de passer à nouveau parl’objet Event, véritable boîte à outils du modèle événementiel.

En partant de l’exemple précédent, nous allons simplement modifier la fonction autoFill(notre listener), afin qu’elle ne réagisse plus qu’à un caractère :

private function autoFill(event:KeyboardEvent) {if (event.charCode == 97)

my_label.text = my_input.text;}

Désormais, notre texte ne sera recopié dans le Label uniquement si l’on appuie sur latouche [a], 97 correspondant à la lettre a en ASCII.

Récupérer un code clavier

Peu de gens connaissent bien les codes clavier, il existe cependant une façon relativement simple de lesrécupérer. Il suffit d’afficher votre code via un Alert.show() ou dans un label, et vous pourrez alorsconnaître rapidement le code de la touche que vous souhaitez utiliser.

Il existe cependant quelques exceptions à ce système de code clavier ; en effet, les touches[Maj], [Alt] et [Ctrl] disposent chacune d’un attribut particulier dans l’objet KeyboardEventpour vérifier si l’utilisateur a appuyé sur l’une de ces touches.

Voici un nouvel exemple montrant comment détecter une combinaison de touches, enl’occurrence les touches [Ctrl]+[A] :

private function autoFill(event:KeyboardEvent):void {if (event.ctrlKey){

if (event.charCode == 97)my_label.text = my_input.text;

}}

4Les événements clavier

135

Une fois votre application lancée, appuyez simultanément sur [Ctrl]+[A] :

Tout le texte contenu dans notre TextInput est reporté dans le Label.

Les événements clavier-sourisNous allons terminer ce tour d’horizon des événements clavier en voyant commentcombiner le clavier et la souris dans les interactions avec notre interface.

Lors d’un clic de souris, Flex déclenche un événement de type MouseEvent. Cet objetdispose de plusieurs propriétés permettant de vérifier si une touche a été pressée :

Tableau 4.2 : Vérifier si une touche est pressée

Attribut Description

altKey Si la touche [Alt] est pressée, la valeur de cette propriété est true.

ctrlKey Si la touche [Ctrl] est pressée, la valeur de cette propriété est true.

shiftKey Si la touche [Maj] est pressée, la valeur de cette propriété est true.

Voyons à présent comment utiliser cette fonctionnalité. On reprend le même listener queprécédemment, mais à un détail près : il s’agit cette fois de l’attacher à un clic de boutonau lieu d’un pressage de touche :

<mx:Button id="myButton" label="Ctrl+click" click="autoFill()"/>

La fonction modifiée donnera ceci :

private function autoFill(event:MouseEvent) {if (event.ctrlKey)

my_label.text = my_input.text;}

c Fig. 4.5 :Combinaison de touches


136

Nous commençons par écrire dans notre TextInput, puis, à l’aide d’un petit [Ctrl] clic,voici le résultat :

Ceci conclut notre partie sur les événements clavier. Bien entendu, vous aurez souventl’occasion d’utiliser ces fonctionnalités dans vos applications car c’est ce qui fait ladifférence entre une RIA et une autre application web.

4.4 Créer ses propres événementsNous allons, à présent, voir comment déclencher les événements manuellement. Danscertains cas, vous pouvez avoir envie de faire réagir votre application de manièrepersonnalisée pour déclencher une réaction particulière.

La méthode dispatchEvent()Pour déclencher vous-même un événement, il suffit d’utiliser dispatchEvent(). Cetteméthode s’utilise de la manière suivante :

myObject.dispatchEvent(myEvent:Event);

Cette fonction retourne un booléen. Avant de pouvoir envoyer un événement, il fautcependant l’instancier ; on va donc créer un nouvel objet Event :

myEvent:Event = new Event(Event.CHANGE);myInput.dispatchEvent(myEvent);

On choisit d’utiliser l’événement CHANGE, qui correspond à la méthode onChange() telleque nous l’avons évoquée précédemment, puis on le déclenche en utilisant la fonctiondispatchEvent().

c Fig. 4.6 :Ctrl+clic

4Créer ses propres événements

137

Déclencher un événement en MXMLVoyons à présent comment déclencher un événement en MXML, en reprenant l’exempleappliqué précédemment en ActionScript :

<mx:Button id="myButton" label="Click"click="myInput.dispatchEvent(new Event(Event.CHANGE))"/>

Il suffit d’utiliser la méthode dispatchEvent directement dans la propriété click de notrebouton. Lorsque vous cliquerez sur ce dernier, l’événement CHANGE sera directementdéclenché sur le TextInput.

Notez que si aucun listener n’attend l’événement déclenché, il ne va rien se produire.Typiquement, on devra dans notre cas déclarer un listener change sur notre TextInputpour obtenir une réaction.

Personnaliser votre événementMaintenant que vous savez comment créer et envoyer un événement manuellement, ilpourrait être judicieux de le personnaliser. Dans un premier temps, nous allons voircomment modifier ses propriétés.

Prenons par exemple un événement de type clic de souris : nous avons vu que pour gérerle clavier et la souris simultanément, nous pouvions utiliser la propriété ctrlKey pourvérifier que l’utilisateur appuie simultanément sur la touche [Ctrl]. Voici comment utilisercette propriété dans votre événement :

var myEvent:MouseEvent = new MouseEvent(MouseEvent.CLICK,false,false);myEvent.shiftKey = true;myButton.dispatchEvent(myEvent);

Notez que si vous désirez ajouter une propriété personnalisée à votre événement, vousdevrez créer une classe dérivée de la classe Event, mais nous verrons plus tard commentcréer des classes dérivées.

4.5 Mise en pratique : un convertisseur de devisesVous avez compris le fonctionnement du système événementiel dans Flex. Il est grandtemps de passer à la pratique. Nous allons réaliser ensemble une petite application deconvertisseur en dollars, ce qui nous permettra de voir quelques exemples d’événementssur une véritable application.


138

Mise en place du projetSi vous avez lu attentivement les parties précédentes, cette étape ne devrait pas vousposer de problème. Créez donc un nouveau projet appelé USDConvert puis ouvrez lefichier USDConvert.mxml, vous devriez voir ceci :


</mx:Application>

L’interfaceIl s’agit, à ce stade, de mettre en place l’interface de notre application. Commencez parpasser en mode Design, car il est plus facile de construire l’interface de cette manière.

Tout d’abord, ajoutez un Panel, puis initialisez ses propriétés de la manière suivante :

j Title : Mon petit convertisseur ;j Width : 500 ;j Height : 200 ;j X : 20 ;j Y : 20.

Puis ajoutez un TextInput, deux Labels et un Button, organisés de la manière suivante :

Sélectionnez le premier Label et entrez Prix en euros, puis sélectionnez le TextInput etaffectez priceInput à son id et 20 à la propriété fontSize afin d’améliorer la lisibilité denotre résultat.

c Fig. 4.7 :Mise en forme del’interface

4Mise en pratique : un convertisseur de devises

139

Sélectionnez maintenant le bouton et affectez convertBtn à la propriété id et Convertiren dollars à la propriété label. Même manipulation avec le dernier Label, effacez toutd’abord le texte du Label, puis affectez resultText à la propriété id.

Passez en mode Source. Le code de votre application devrait normalement ressembler àceci :

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">

<mx:Panel x="20" y="20" width="500" height="200"layout="absolute"

title="Mon petit convertisseur"><mx:Label x="25" y="37" text="Prix en euros"/><mx:Label x="120" y="65" id="resultText"/><mx:TextInput x="120" y="35" id="priceInput"/><mx:Button x="290" y="35" label="Convertir en dollar"/>

</mx:Panel>

</mx:Application>

Mettre en place la logique métierÀ présent, il s’agit d’ajouter un peu de code à notre interface. Nous allons donc réaliserla logique de l’application. Dans la mesure où il s’agit d’une application simple, vouspouvez directement ajouter le code dans le fichier USDConvert.mxml.

Commencez par ajouter une balise <mx:Script> dans votre fichier, créez une fonctionpriceCopy puis créez une fonction priceConvert. La première se contentera de recopierle montant entré par l’utilisateur, la seconde assurera la conversion de notre montant eneuros vers des dollars lorsque l’utilisateur clique sur le bouton.


private function priceCopy():void{resultText.text = priceInput.text;

}

private function priceConvert():void{var result:int = parseInt(priceInput.text);

result = result * 1.38;resultText.text += " euros = " + result.toString() + " dollars";


140

}]]>

</mx:Script>

Comme vous le voyez, ce code est assez simple. Quelques petites remarques cependantsont à retenir. La fonction parseInt permet de transformer une String en int afin depouvoir manipuler le montant en euros. L’affichage du résultat dans le Label est prévu àcet effet ; nous gardons le montant en euros récupéré dans la fonction priceCopy, nousenrichissons quelque peu la phrase du résultat et nous ajoutons le résultat en dollars.

Notons que le taux de change a été rentré en dur. Nous pourrions bien sûr imaginer lerécupérer à partir d’un Service Web, mais cela fera l’objet d’un exemple plus loin danscet ouvrage.

Associer la logique à l’interface avec MXMLVoici la partie la plus facile. Il s’agit juste d’affecter notre TextInput et notre Labelrésultat de la manière suivante :

<mx:TextInput x="120" y="35" id="priceInput" keyUp="priceCopy()"/><mx:Button x="290" y="35" label="Convertir en dollars"

click="priceConvert()"/>

Le TextInput réagira donc à la frappe du clavier et le bouton à un clic.

Au final, votre code devrait ressembler à ceci :

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"><mx:Script>

<![CDATA[private function priceCopy():void{

resultText.text = priceInput.text;}

private function priceConvert():void{var result:int = parseInt(priceInput.text);

result = result * 1.38;resultText.text += " euros = " + result.toString() + " dollars";

}]]>

</mx:Script>

4Mise en pratique : un convertisseur de devises

141

<mx:Panel x="20" y="20" width="500" height="200" layout="absolute"title="Mon petit convertisseur">

<mx:Label x="25" y="37" text="Prix en euros"/><mx:Label x="120" y="65" id="resultText" fontSize="20"/><mx:TextInput x="120" y="35" id="priceInput" keyUp="priceCopy()"/><mx:Button x="290" y="35" label="Convertir en dollar"

click="priceConvert()"/></mx:Panel>

</mx:Application>

Nous vous donnons le résultat en image :

Associer la logique à l’interface avec ActionScriptCette partie est un peu plus difficile mais ne présente rien d’insurmontable. Nous allonssimplement relier nos listeners à nos composants côté ActionScript.

Nous commençons par créer une nouvelle fonction appelée initEvents qui va se chargerd’initialiser la liaison au démarrage de l’application :

public function initEvents():void {priceInput.addEventListener(KeyboardEvent.KEY_UP, priceCopy);convertBtn.addEventListener(MouseEvent.CLICK, priceConvert);

}

Pour que cette initialisation fonctionne, nous devons à présent utiliser la propriétécreationComplete de la balise <mx:Application> :

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute" creationComplete="initEvents()">

Et voilà le travail.

c Fig. 4.8 :L’application finale


142


a comment appréhender le fonctionnement des événements en Flex ,a comment utiliser les événements en ligne et dans le code ActionScript ,a comment utiliser les événements clavier, souris et clavier/souris ;a comment apprendre à déclencher les événements soi-même ;a comment utiliser les événements dans une véritable application ;

Le chapitre suivant est consacré à la gestion des données dans Flex.

4Check-list

143

55.1 Définir un data model .................................. 1465.2 Lier des données ........................................ 1565.3 Valider des données .................................... 1615.4 Formater les données ................................... 1685.5 Travailler avec XML ..................................... 1715.6 Check-list ................................................. 175

Gérer lesdonnées

Aujourd’hui, la gestion des données est un domaine clépour le développement Web. Ce chapitre vous

permet de découvrir la gestion des données au sein deFlex. Vous y apprenez ainsi à organiser, traiter et présenterles données avec cette technologie.

5.1 Définir un data modelAfin d’apporter un plus à vos applications riches, il peut s’avérer utile de pouvoirmanipuler des données pour les afficher, les modifier ou les transmettre à d’autresapplications. Flex permet une manipulation avancée des données qu’il est utile deconnaître pour vous faciliter certaines tâches.

La gestion des données ne sert pas qu’à récupérer des informations distantes ou à lesenvoyer vers un serveur. On peut également manipuler des données internes à sonapplication pour les sauvegarder, les afficher ou simplement les utiliser. Cette partie vousmontrera comment définir des data models qui sont en quelque sorte les patrons quiguident le stockage des données. Ces modèles de données sont la partie Modèle del’architecture MVC (Modèle Vue Contrôleur).

Création d’un formulaireCe chapitre ne traitera pas des données distantes mais uniquement de la manipulation dedonnées internes à notre application. Nous allons donc commencer par créer un squelettebasique qui nous fournira des données à récupérer. Un moyen simple d’obtenir desinformations saisies par l’utilisateur est un formulaire.

C’est l’occasion de développer l’utilisation d’un conteneur très pratique : le conteneurForm. Grâce aux balises <mx:Form>, vous pourrez utiliser des propriétés qui voussimplifieront la tâche au quotidien :

j organisation des composants en les alignant à gauche ;j accès à un bouton de soumission du formulaire ;j définition de champs obligatoires ;j validation de vos données ;j génération de messages d’erreur.

À l’intérieur du conteneur, vous pourrez utiliser certaines balises dont voici les propriétéset les utilisations basiques :

j <mx:FormHeading> : permet d’afficher des titres pour des groupes d’items. C’est unélément optionnel.

j <mx:FormItem> : ce sont les champs du formulaire mais également des conteneurs.Leur titre est la valeur de l’attribut label. L’attribut direction permet de spécifierla disposition des boîtes de texte ou des boîtes de sélection qui seront contenues parles FormItems (par défaut : verticale).

La disposition des éléments du formulaire est gérée par la balise principale <mx:Form>mais certains de ses attributs permettent de jouer avec des paramètres comme les

5 Gérer les données

146

espacements. Un autre attribut intéressant est le defaultButton qui permet de spécifier lebouton qui validera le formulaire par défaut.

Notre formulaire sera une sorte de bulletin d’inscription. Il contiendra :

j le statut ;j un nom ;j un prénom ;j une date de naissance ;j un numéro de téléphone ;j une adresse e-mail ;j un code postal.

Nous ajouterons à la suite un bouton print qui fera appel à une méthode printUser. Cetteméthode affichera pour l’instant une alerte toute simple. En déclarant print commebouton par défaut du formulaire, vous pourrez constater qu’il est appelé lorsqu’on appuiesur la touche [Ä] à partir de n’importe quel champ.

Voici le code de notre application Inscription :



import mx.controls.Alert;public function printUser():void{

Alert.show("Données de l’utilisateur.","Nouvel utilisateur !");

}]]>

</mx:Script><mx:Panel title="Inscription">

<mx:Form defaultButton="{print}"><mx:FormHeading label="Détails"/>

<mx:FormItem><mx:ComboBox id="title">

<mx:dataProvider><mx:String>Mr</mx:String><mx:String>Mme</mx:String><mx:String>Mlle</mx:String>

</mx:dataProvider></mx:ComboBox>

</mx:FormItem>

5Définir un data model

147

<mx:FormItem label="Prénom"><mx:TextInput id="firstname"/>

</mx:FormItem><mx:FormItem label="Nom">

<mx:TextInput id="lastname"/></mx:FormItem><mx:FormItem label="Date de naissance">

<mx:TextInput id="birthday"/></mx:FormItem><mx:FormItem label="Numéro de téléphone">

<mx:TextInput id="phone"/></mx:FormItem><mx:FormItem label="Adresse email">

<mx:TextInput id="email"/></mx:FormItem><mx:FormItem label="Code postal">

<mx:TextInput id="zipcode"/></mx:FormItem>

</mx:Form><mx:ControlBar horizontalAlign="center">

<mx:Button id="print" label="Afficher l’utilisateur"click="printUser()"/>


</mx:Application>


Nous avons la base de notre application ; intéressons-nous à présent aux modèles dedonnées.

c Fig. 5.1 :Notre formulaire


148

La balise <mx:Model>Les data models sont des objets ActionScript. Le moyen le plus simple de créer un datamodel est d’utiliser la balise <mx:Model> en MXML. Nous verrons par la suite que cen’est pas la méthode la plus conseillée pour des applications gérant beaucoup de données.Elle peut néanmoins se révéler utile pour de petites applications et le stockage de donnéessimples.

La façon la plus simple de procéder est de déclarer votre modèle dans le fichier MXMLde votre application. Il suffit pour cela d’ouvrir une balise <mx:Model> et de lui donnerun id. Cette balise contient une arborescence XML et contiendra donc obligatoirement unnœud racine. À l’intérieur de celui-ci, vous trouverez les nœuds fils qui décriront votremodèle.

Pour notre utilisateur, nous pouvons définir le modèle suivant à l’intérieur de notreapplication :

<mx:Model id="usermodel"><user>

<title/><name>

<first/><last/>

</name><birthday/><phone/><email/><zipcode/>

</user></mx:Model>

Vous remarquerez bien sûr que ce modèle ne contient aucune donnée. Pour l’instant, tousles champs ont la valeur nulle. Nous allons donc remplir notre modèle afin qu’ilcontienne des données statiques prêtes à être utilisées :


<title>Mr</title><name>

<first>Edouard</first><last>Ruiz</last>

</name><birthday>10/05/1984</birthday><phone>0654321098</phone><email>[email protected]</email>


149

<zipcode>94130</zipcode></user>

</mx:Model>

Afin de vérifier que ces données sont bien prises en compte, modifions la fonctionprintUser afin d’afficher le contenu du modèle. Vous accédez aux fils du nœud racinegrâce à des . :

public function printUser():void{

var message:String = "";message += usermodel.title + " ";message += usermodel.name.first + " ";message += usermodel.name.last + "\r";message += usermodel.birthday + "\r";message += usermodel.phone + "\r";message += usermodel.email + "\r";message += usermodel.zipcode;Alert.show(message, "Nouvel utilisateur !");

}

Vous pouvez à présent lancer l’application et constater par vous-même que les donnéesdu modèle s’affichent bien lorsqu’on appuie sur le bouton.

Si vous voulez qu’un champ contienne une chaîne vide, il faut le lui spécifier grâce à desaccolades :

<title>{""}</title>

Les accolades permettent la liaison des données (le binding) : nous y reviendronsultérieurement. Nous allons pour l’instant l’utiliser afin d’afficher des donnéesdynamiques, saisies par l’utilisateur. Pour ce faire, nous modifions notre modèle afin deremplacer les chaînes de caractères par des liaisons vers les champs de texte de notreformulaire. Ces liaisons se font simplement en plaçant entre accolades l’id de l’élémentet l’attribut qui contient la valeur à utiliser (vous pouvez utiliser la complétion deFlex Builder pour accéder aux éléments) :


<title>{title.value}</title><name>

<first>{firstname.text}</first><last>{lastname.text}</last>

</name><birthday>{birthday.text}</birthday>


150

<phone>{phone.text}</phone><email>{email.text}</email><zipcode>{zipcode.text}</zipcode>

</user></mx:Model>

Maintenant, votre application affichera le contenu des champs du formulaire :

Stockage des modèles dans des fichiers externes

Vous pouvez également définir vos modèles dans des fichiers externes, ce qui facilite leur réutilisation.Il suffit de placer le contenu des balises Model dans un fichier XML valide (commençant par la balise<?xml version="1.0"?> par exemple). Ce fichier XML est situé côté serveur et non côté client. Vousdevez ensuite utiliser l’attribut source de la balise Model pour lui spécifier l’emplacement du fichier(chemin relatif ou URL).

Dans notre cas, pour un modèle contenu dans un fichier User.xml au même niveau que l’application, onobtiendrait le data model : <mx:Model source="User.xml" id="usermodel"/>.

Bien évidemment, le patron contenu dans le fichier XML peut contenir aussi bien des données statiquesque des liaisons vers des champs.

La balise <mx:XML>À la place de la balise <mx:Model>, vous pouvez utiliser <mx:XML> dans notre codeMXML. La seule différence avec la précédente, c’est qu’elle permet d’accéder auxfonctions avancées qui gèrent le XML dans ActionScript 3. Celles-ci suivent lesspécifications d’ECMAScript pour XML (E4X). Pour s’assurer du respect de ce format,il suffit de définir l’attribut format à e4x.

c Fig. 5.2 :Affichage du contenu duformulaire


151

Voici le modèle précédent avec la balise <mx:XML> :

<mx:XML id="usermodel" format="e4x"><user>

<title>{title.value}</title><name>

<first>{firstname.text}</first><last>{lastname.text}</last>

</name><birthday>{birthday.text}</birthday><phone>{phone.text}</phone><email>{email.text}</email><zipcode>{zipcode.text}</zipcode>

</user></mx:XML>

Le comportement est le même.

Stockage des modèles dans des fichiers externes

Les similitudes entre les deux balises ne s’arrêtent pas là puisque <mx:XML> permet également despécifier un attribut source qui rend possible le stockage des modèles dans des fichiers externes.

Les modèles basés sur du scriptLes modèles peuvent aussi être intégrés en tant que variable à l’intérieur des balises<mx:Script>. Cette méthode n’apporte rien de plus que les balises Model et XML et estmême plus contraignante puisqu’elle ne permet pas la liaison des données avec lesaccolades.

Pour permettre la liaison des données, il faudrait ajouter une fonction permettantd’écouter les changements sur les boîtes de texte du formulaire. À chaque modification,elle mettrait à jour le modèle que nous allons créer. La liaison des données n’étant pasl’objet de cette partie et la méthode des modèles dans du script n’étant pas conseillée,nous allons nous contenter de données statiques.

Il suffit de créer une variable de type Object à l’intérieur de vos balises <mx:Script> etd’intégrer entre accolades votre modèle :

public var usermodel:Object ={

title:"Mr",name:{


152

first:"Edouard",last:"Ruiz"

},birthday:"10/05/1984",phone:"0654321098",email:"[email protected]",zipcode:"94130"

}

Passons à présent à la méthode que nous vous recommandons d’utiliser pour vos modèles.

Les modèles basés sur des classes ActionScriptCette dernière méthode est celle que vous devrez choisir si vous comptez manipuler desdonnées complexes et éventuellement leur faire subir des traitements. Elle permetégalement le typage des propriétés des modèles. Jusqu’à présent, les champs n’étaient quedes chaînes de caractères. Vous allez pouvoir à présent spécifier pour chacun d’eux untype de donnée spécifique.

Commencez par créer un package model puis une nouvelle classe UserModel à l’intérieurde celui-ci. Dans cette classe, mettez en public toutes les propriétés de l’utilisateur. Afinde montrer l’utilité des modèles déclarés dans des classes, créez une méthode getResumequi va servir à afficher les coordonnées de l’utilisateur. Choisissez également des typesdifférents pour vos propriétés. Voici la classe UserModel :

package model{

[Bindable]public class UserModel{

public var title:String = "Mr";public var firstname:String;public var lastname:String;public var birthday:Date;public var phone:String;public var email:String;public var zipcode:uint;

public function getResume():String{

return title + " " + firstname + " " + lastname + "\r"+ birthday.toDateString() + "\r" + phone + "\r"+ email + "\r" + zipcode;

}}

}


153

Vous noterez l’utilisation d’une métadonnée [Bindable]. Elle permet la liaison desdonnées sur toutes les propriétés public de la classe. Pour des propriétés private ouprotected, il faudrait ajouter la métadonnée à chaque fois, ce qui rendrait notre exempleun peu plus lourd.

Retournez sur votre fichier MXML. Commençons par créer le modèle. Déclarez dans labalise <mx:Application>, le namespace model (ou tout autre nom) :

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute" xmlns:model="model.*">

Toutes les classes du package model seront accessible grâce à ce namespace.

La création du data model se fait très simplement dans votre code MXML :

<model:UserModel id="usermodel"/>

UserModel est le nom de votre classe (la complétion de Flex Builder sera encore utile).

À partir de là, vous pouvez accéder à votre modèle grâce à son identifiant dans le codede votre application. Modifiez la fonction printUser afin qu’elle fasse appel à la méthodegetResume de votre objet usermodel. Utilisez ensuite l’attribut change de vos boîtes dedialogue afin de modifier la valeur des propriétés lorsqu’elles sont saisies.

Voici le résultat :

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute" xmlns:model="model.*">


import mx.controls.Alert;public function printUser():void{

Alert.show(usermodel.getResume(), "Nouvel utilisateur !");}

]]></mx:Script>

<model:UserModel id="usermodel"/>

<mx:Panel title="Inscription"><mx:Form defaultButton="{print}">

<mx:FormHeading label="Détails"/><mx:FormItem>

<mx:ComboBox id="title"


154

change="{usermodel.title = title.text;}"><mx:dataProvider>

<mx:String>Mr</mx:String><mx:String>Mme</mx:String><mx:String>Mlle</mx:String>

</mx:dataProvider></mx:ComboBox>

</mx:FormItem><mx:FormItem label="Prénom">

<mx:TextInput id="firstname"change="{usermodel.firstname = firstname.text;}"/>

</mx:FormItem><mx:FormItem label="Nom">

<mx:TextInput id="lastname"change="{usermodel.lastname = lastname.text;}"/>

</mx:FormItem><mx:FormItem label="Date de naissance">

<mx:TextInput id="birthday"change="{usermodel.birthday = new Date(birthday.text);}"/>

</mx:FormItem><mx:FormItem label="Numéro de téléphone">

<mx:TextInput id="phone"change="{usermodel.phone = phone.text;}"/>

</mx:FormItem><mx:FormItem label="Adresse email">

<mx:TextInput id="email"change="{usermodel.email = email.text}"/>

</mx:FormItem><mx:FormItem label="Code postal">

<mx:TextInput id="zipcode"change="{usermodel.zipcode = uint(zipcode.text);}"/>

</mx:FormItem></mx:Form><mx:ControlBar horizontalAlign="center">

<mx:Button id="print" label="Afficher l’utilisateur"click="printUser()"/>


</mx:Application>

Vous remarquerez le typage de birthday ou zipcode tandis que les autres propriétésrestent en chaînes de caractères.

Nous allons à présent étudier un autre aspect de la manipulation des données en Flex : laliaison des données.


155

5.2 Lier des donnéesLe data binding, ou liaison de données, permet d’automatiser le passage de données entredes parties de votre application. Cette propriété est très utile lorsque vous avez besoin, parexemple, de faire évoluer un élément en fonction de données saisies ou reçues : ungraphique qui va se mettre à jour, un texte qui se modifie…

Les accolades en MXMLVous avez déjà eu un aperçu de la liaison de données en utilisant les accolades. C’est lemoyen le plus simple d’utiliser la liaison de données.

Commençons par un petit exemple. Créez une application contenant un formulaire avecun unique champ de texte qui servira à entrer un nom. À la suite de ce formulaire, créezun label :


layout="absolute"><mx:Panel title="Data binding">

<mx:Form><mx:FormItem label="Nom">

<mx:TextInput id="lastname"/></mx:FormItem>

</mx:Form><mx:Label id="res"/>


Pour utiliser la syntaxe des accolades, il suffit de placer entre elles la source de donnéeset d’affecter le tout en tant que valeur d’une propriété qui sera la destination. Notre labelres devient donc :

<mx:Label id="res" text="{lastname.text}"/>

Le texte de ce dernier évoluera automatiquement en fonction des données saisies dans lechamp de texte. Vous pouvez constater le fonctionnement par vous-même :

Mais les possibilités des accolades sont bien plus évoluées.

c Fig. 5.3 :Le texte s’affiche au fur et à mesure de lafrappe.


156

Utiliser du code ActionScript dans les accoladesIl est possible, en effet, de faire appel à du code ActionScript à l’intérieur des accolades.Il suffit juste que l’expression renvoie une valeur. On peut citer comme possibilités desexpressions conditionnelles, des concaténations de chaînes, des calculs ou encore desfonctions.

Intégrons-les dans un nouvel exemple toujours basé sur un formulaire et une phrase quiévoluera en fonction de la saisie. Cette fois, vous allez effectuer la liaison des donnéesdans un data model et vous afficherez le contenu de ce modèle. Il représentera unepersonne avec son titre, son nom et son âge. Dans le formulaire, un RadioButtonpermettra de sélectionner le titre, et les autres champs seront des boîtes de texte. Voici lecode de l’application :


layout="absolute"><mx:Model id="personn">

<personn><title>{man.selected ? "Mr" : "Mme"}</title><name>{"De " + lastname.text}</name><age>{int(age.text) / 2}</age>

</personn></mx:Model><mx:Panel title="Data binding">

<mx:Form><mx:FormItem>

<mx:RadioButton id="man" label="Mr" groupName="title"selected="true"/>

<mx:RadioButton id="woman" label="Mme" groupName="title"/></mx:FormItem><mx:FormItem label="Nom">

<mx:TextInput id="lastname"/></mx:FormItem><mx:FormItem label="Age">

<mx:TextInput id="age"/></mx:FormItem>

</mx:Form><mx:Label id="res" text="{personn.title + ’ ’ + personn.name

+ ’ a ’ + personn.age + ’ ans.’}"/></mx:Panel>

</mx:Application>

Vous avez ainsi une expression conditionnelle pour le titre, une concaténation pour lenom et un calcul pour l’âge.

5Lier des données

157


La balise <mx:Binding> en MXMLAu lieu d’utiliser les accolades, vous pouvez également faire appel à la balise<mx:Binding> en MXML. Cette façon de faire est un moyen de respecter l’architectureMVC puisqu’elle sépare totalement la vue du modèle tandis que la balise est lecontrôleur.

L’utilisation de cette balise est très simple. Il suffit de lui spécifier un attribut source d’oùproviennent les données, et un attribut destination qui sera mis à jour.

Pour exemple, reprenez l’application des accolades. Nous allons cette fois utiliser labalise Binding pour mettre à jour le label :


<mx:Binding source="lastname.text" destination="res.text"/><mx:Panel title="Data binding">


<mx:TextInput id="lastname"/></mx:FormItem>



Vous constaterez que le résultat est le même qu’avec les accolades :

c Fig. 5.4 :Plusieurs types de liaison de données

c Fig. 5.5 :La liaison de données avec la balise Binding


158

Vous pouvez également utiliser du code ActionScript, comme on l’a vu précédemment àl’intérieur de la balise source :

<mx:Binding source="’Texte : ’ + lastname.text" destination="res.text"/>

ou avec des accolades :

<mx:Binding source="{’Texte : ’ + lastname.text}" destination="res.text"/>

et :

<mx:Binding source="’Texte : ’ + {lastname.text}" destination="res.text"/>

Mais la balise Binding a d’autres atouts.

Plusieurs sources ou plusieurs destinationsQue ce soit avec les accolades ou avec la balise <mx:Binding>, vous pouvez lier unemême source de données à plusieurs destinations. La première méthode se faitintuitivement tandis que la seconde nécessite plusieurs balises Binding.

Dans l’exemple précédent, ajoutez un label res2 et une seconde balise :

<mx:Binding source="lastname.text" destination="res2.text"/>

Vous observerez que les deux labels évoluent en même temps :

Mais il n’y a seulement qu’avec la balise Binding que vous pourrez lier plusieurs sourcesde données à une même destination. Il faudra encore utiliser plusieurs de ces balises etleur spécifier cette fois des sources différentes. La destination contiendra la valeur de ladernière source mise à jour.

Ajoutez un champ qui représentera le prénom de votre formulaire. Supprimez le labelres2 et modifiez votre seconde balise Binding en lui affectant res.text en destinationtandis que la source sera l’attribut text du champ firstName. Voici le corps de votreapplication une fois modifiée :

<mx:Binding source="lastname.text" destination="res.text"/>

c Fig. 5.6 :Plusieurs destinations

5Lier des données

159

<mx:Binding source="firstname.text" destination="res.text"/><mx:Panel title="Data binding">


<mx:TextInput id="lastname"/></mx:FormItem><mx:FormItem label="Prénom">

<mx:TextInput id="firstname"/></mx:FormItem>


</mx:Panel>

En remplissant alternativement les deux champs du formulaire, vous observerez que seulle dernier champ renseigné reste affiché dans votre label :

Lier des données en ActionScriptEnfin, une dernière méthode permet de réaliser la liaison de données. Il suffit d’utiliser laclasse mx.binding.utils.BindingUtils et sa méthode statique bindProperty. Il faut luipréciser l’identifiant et l’attribut concernés de la destination et de la source.

Reprenons l’application précédente. Supprimez les balises Binding et remplacez-les pardes balises de script. À l’intérieur de ces dernières, créez une fonctioninitializeHandler qui fera appel à la méthode bindProperty lors du lancement del’application. N’oubliez pas de préciser son appel dans l’attribut initialize de la baliseApplication. Voici le résultat :


import mx.binding.utils.BindingUtils;private function initializeHandler():void{

BindingUtils.bindProperty(res, "text", lastname, "text");}

]]></mx:Script>

Vous connaissez à présent les bases de la liaison de données en Flex.

c Fig. 5.7 :Deux sources pour une même destination


160

5.3 Valider des donnéesLes données saisies par l’utilisateur peuvent parfois être incorrectes. Il faut de temps àautre guider l’utilisateur pour qu’il entre des données correctement formatées oucorrespondant à ce qu’on attend de lui. La validation des données est essentielle côtéserveur, mais Flex fournit également des éléments qui permettent une première étape devalidation côté client : les validators.

Dans cette partie, nous allons découvrir les possibilités offertes par ces éléments etcommencer à les utiliser.

Les validateurs prédéfinisFlex fournit à l’utilisateur des validateurs prédéfinis qui permettent de vérifier que lesentrées respectent certains critères. Vous pouvez, par exemple, valider un numéro detéléphone ou de carte de crédit, un code postal ou plus simplement une chaîne decaractères.

Voici les validateurs prédéfinis et les données qu’ils valident :

j CreditCardValidator : les numéros de carte de crédit ;j CurrencyValidator : les sommes d’argent ;j DateValidator : les dates ;j EmailValidator : les e-mails ;j NumberValidator : les nombres ;j PhoneNumberValidator : les numéros de téléphone ;j RegExpValidator : les expressions régulières ;j SocialSecurityValidator : les numéros de sécurité sociale ;j StringValidator : les chaînes de caractères selon des critères ;j ZipCodeValidator : les codes postaux.

Pour utiliser un validateur en MXML, il faut utiliser la balise <mx:Validator> avec lenom du validateur spécifique que vous voulez utiliser à la place de Validator. Vous devezégalement spécifier les attributs source et property qui contiennent respectivementl’objet, lié grâce aux accolades, et son attribut à valider.

Validons de cette façon un champ de texte servant à entrer un numéro de téléphone :


layout="absolute">

5Valider des données

161

<mx:PhoneNumberValidator id="phoneValidator" source="{phone}"➥ property="text"/>

<mx:Panel title="Validation"><mx:TextInput id="phone"/><mx:TextInput id="nothing"/>


Lancez l’application et essayez de tromper le validateur. Ne tapez rien pour commencermais sélectionnez la seconde boîte de texte. La première qui sert à entrer le numéro detéléphone s’entoure de rouge et un message apparaît vous signalant le problème lorsquevous laissez votre curseur dessus :

Entrez alors un numéro de moins de dix chiffres et changez à nouveau le focus. Unnouveau message apparaît :

À partir du moment où votre numéro fait dix chiffres, il est validé :

En ActionScript, la validation est tout aussi simple. Vous devez créer votre validateurdans une variable et associer les attributs source et property lorsque la création ducomposant d’entrée est terminée :

c Fig. 5.8 : Un premier message d’erreur

c Fig. 5.9 : Le second message d’erreur

c Fig. 5.10 : Le champ est validé !


162


import mx.validators.PhoneNumberValidator;private var validator:PhoneNumberValidator = new PhoneNumberValidator();private function linkValidator():void{

validator.source = phone;validator.property = "text";

}]]>

</mx:Script><mx:Panel title="Validation">

<mx:TextInput id="phone" creationComplete="linkValidator();"/><mx:TextInput id="nothing"/>

</mx:Panel>

Le résultat est le même que précédemment.

Utiliser des validateurs dans un formulaireNous allons utiliser quelques-uns des validateurs prédéfinis pour valider un formulaired’enregistrement comme nous en avons vu au début de ce chapitre. Dans une nouvelleapplication, créez un formulaire contenant les champs : prénom, anniversaire, numéro detéléphone, adresse e-mail et code postal. Ajoutez un bouton à la fin qui servira à validerce formulaire. Mais, ce bouton ne sera activé qu’une fois tous les champs valides. Créezensuite les validateurs associés aux champs.

À l’intérieur de balises de script, créez une variable booléenne formIsValid initialisée àfalse qui servira à définir l’état du bouton. Permettez qu’elle puisse être liée à unedestination grâce à [Bindable]. Créez ensuite une méthode validateForm qui servira àvalider le contenu du formulaire. Vous ferez appel à cette méthode à chaque fois qu’unchangement sera détecté dans un des champs du formulaire à l’aide de l’attribut changedes champs de texte. Cette façon de faire permet de guider plus facilement l’utilisateuren lui précisant au fur et à mesure de la frappe si son entrée est valide. Voici le code denotre application :


layout="absolute" creationComplete="focusManager.setFocus(firstname);"><mx:Script>

<![CDATA[import mx.validators.Validator;import mx.events.ValidationResultEvent;import mx.controls.Alert;


163

[Bindable]public var formIsValid:Boolean = false;private function printUser():void{

Alert.show("Formulaire validé.", "Nouvel utilisateur !");}private function validateForm(event:Event):void{

var resultTmp:ValidationResultEvent;formIsValid = false;if (firstname.text == "")

return;resultTmp = firstnamevalid.validate();if (resultTmp.type == ValidationResultEvent.INVALID)

return;if (birthday.text == "")

return;resultTmp = birthdayvalid.validate();if (resultTmp.type == ValidationResultEvent.INVALID)

return;if (phone.text == "")

return;resultTmp = phonevalid.validate();if (resultTmp.type == ValidationResultEvent.INVALID)

return;if (email.text == "")

return;resultTmp = emailvalid.validate();if (resultTmp.type == ValidationResultEvent.INVALID)

return;if (zipcode.text == "")

return;resultTmp = zipcodevalid.validate();if (resultTmp.type == ValidationResultEvent.INVALID)

return;formIsValid = true;

}]]>

</mx:Script><mx:StringValidator id="firstnamevalid" source="{firstname}"

property="text" minLength="2"/><mx:DateValidator id="birthdayvalid" source="{birthday}" property="text"/><mx:PhoneNumberValidator id="phonevalid" source="{phone}" property="text"/><mx:EmailValidator id="emailvalid" source="{email}" property="text"/><mx:ZipCodeValidator id="zipcodevalid" source="{zipcode}" property="text"/><mx:Panel title="Inscription">

<mx:Form defaultButton="{print}">


164

<mx:FormHeading label="Détails"/><mx:FormItem label="Prénom">

<mx:TextInput id="firstname" change="validateForm(event);"/></mx:FormItem><mx:FormItem label="Date de naissance">

<mx:TextInput id="birthday" change="validateForm(event);"/></mx:FormItem><mx:FormItem label="Numéro de téléphone">

<mx:TextInput id="phone" change="validateForm(event);"/></mx:FormItem><mx:FormItem label="Adresse email">

<mx:TextInput id="email" change="validateForm(event);"/></mx:FormItem><mx:FormItem label="Code postal">

<mx:TextInput id="zipcode" change="validateForm(event);"/></mx:FormItem>

</mx:Form><mx:ControlBar horizontalAlign="center">

<mx:Button id="print" label="Afficher l’utilisateur"click="printUser();" enabled="{formIsValid}"/>


</mx:Application>

Notre exemple valide les champs dans l’ordre de remplissage s’ils contiennent quelquechose. Nous nous servons pour cela de la méthode validate des validateurs. Cetteméthode permet d’activer la vérification dans du code ActionScript et renvoie unValidationResultEvent qui sert à déterminer le résultat de la validation.

Tant que tous les champs ne sont pas remplis et valides, l’utilisateur ne peut pas envoyerle formulaire :

c Fig. 5.11 : Formulaire en cours de remplissage


165

Dès que toutes les conditions sont respectées, on peut soumettre le formulaire :

Personnalisation de la validationL’utilisation des validateurs est donc assez basique. Il existe néanmoins de nombreusespossibilités d’extension si vous voulez personnaliser votre application.

Vous pouvez ainsi personnaliser les messages d’erreur des validateurs prédéfinis. À ceteffet, il suffit de modifier certains attributs. Pour remplacer le message d’erreur d’unPhoneNumberValidator lorsque le numéro entré n’a pas atteint le nombre de chiffresrequis, il faudra définir une nouvelle chaîne à l’attribut wrongLengthError :

<mx:PhoneNumberValidator id="phonevalid" wrongLengthError="Nouveau➥ message"/>

Plus avancé : vous pouvez créer vos propres validateurs en faisant hériter une classeActionScript de la classe mx.validators.Validator, ou étendre les possibilités desvalidateurs prédéfinis en faisant hériter de la classe appropriée.

Nous allons définir un nouveau validateur qui va vérifier qu’une chaîne de caractères estbien composée d’au moins deux mots qui seront le nom et le prénom. Appelons cecomposant FullNameValidator. Créez une classe ActionScript de ce nom dans unpackage components et faites-la dériver de la classe Validator en n’oubliant pas degénérer le constructeur. À l’intérieur de cette classe, vous devrez redéfinir la méthodedoValidation qui prend en argument l’objet à valider et renvoie un tableau contenant leserreurs de validation. À l’intérieur de cette fonction se trouve le code qui valide votreobjet. Voici la classe FullNameValidator :

package components{

import mx.validators.Validator;

c Fig. 5.12 : Formulaire valide


166

import mx.validators.ValidationResult;

public class CompleteNameValidator extends Validator{

private var results:Array;

public function CompleteNameValidator(){

super();}

override protected function doValidation(value:Object):Array{

results = [];results = super.doValidation(value);if (results.length > 0)

return results;var baseString:String = String(value);var fullName:Array = baseString.split(’ ’);if (fullName.length < 2) {

results.push(new ValidationResult(true, null, "notFullName","Vous devez entrer un nom et prénom."));

return results;}return results;

}}

}

La méthode ValidationResult permet de définir une erreur lors de la validation enspécifiant le message d’erreur. On retourne enfin le tableau qui est vide si l’objet estvalidé ou contient des erreurs, dans le cas contraire.

Vous pouvez à présent utiliser ce composant dans une application en définissant lenamespace correspondant :

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute" xmlns:Comp="components.*">

<Comp:CompleteNameValidator source="{fullName}" property="text"/><mx:Panel title="Validation">

<mx:TextInput id="fullName"/><mx:TextInput id="nothing"/>


Le résultat est similaire aux autres validateurs :


167

Vous êtes à présent armé pour intégrer la validation de données dans vos applications.

5.4 Formater les donnéesIl peut arriver que vous souhaitiez afficher de façon standard des données saisies parl’utilisateur. Flex fournit pour cela des outils : les Formatters. Ces éléments déclenchentla mise en forme des données avant qu’elles ne soient affichées. Nous allons découvrirdans ce chapitre l’utilisation de ces formateurs.

Utiliser les formateurs de baseComme pour les validateurs, Flex fournit des éléments qui permettent de gérer des typesde données courants. Voici la liste des formateurs et les données correspondantes :

j CurrencyFormatter : des sommes d’argent ;j DateFormatter : les dates ;j NumberFormatter : les nombres ;j PhoneFormatter : les numéros de téléphone ;j ZipCodeFormatter : les codes postaux.

Toutes ces classes dérivent de mx.formatters.Formatter. Il est, bien entendu, possibled’étendre cette classe afin de définir vos propres formateurs. Mais intéressons-nous toutd’abord aux formateurs prédéfinis.

Prenons comme exemple le CurrencyFormatter. Il faut le déclarer dans le code MXMLavec la balise <mx:CurrencyFormatter> puis appeler sa méthode format à l’intérieur desaccolades pour réaliser la liaison des données. Elle prend en argument la valeur à

c Fig. 5.13 : Champ invalide

c Fig. 5.14 : Champ validé


168

formater. L’entrée utilisateur se fera grâce à un champ de texte et vous afficherez lerésultat dans un Label.


<mx:CurrencyFormatter id="formatter"precision="2"alignSymbol="right"

decimalSeparatorTo="."thousandsSeparatorTo=" "currencySymbol=" "rounding="nearest"/>

<mx:Panel title="Formatage de données"><mx:TextInput id="currency"/><mx:Label id="formattedCurrency" text="Prix :

➥ {formatter.format(currency.text)}"/></mx:Panel>

</mx:Application>

De nombreux paramètres permettent de configurer votre CurrencyFormatter. Leur nomest assez explicite : ici, notre entrée numérique sera convertie avec une précision de deuxchiffres après la virgule et arrondie au plus près, et le symbole de monnaie sera placé àdroite.

Voici le résultat :

Récupérer les erreurs de formatageEn cas d’erreur lors de la saisie utilisateur, lorsque la chaîne est impossible à formater,une erreur est produite par le formateur. La raison de cette erreur est contenue dansl’attribut error. Afin d’observer ce message d’erreur, ajoutez à votre exemple unefonction printError qui affichera une alerte le contenant :

<mx:Script><![CDATA[import mx.controls.Alert;private function printError():void{

Alert.show(formatter.error, "Erreur du formateur");}

c Fig. 5.15 :Un nombre formaté en euros

5Formater les données

169

]]></mx:Script>

Cette fonction sera appelée par un bouton situé dans le panel :

<mx:Button id="prError" label="Affiche l’erreur" click="printError();"/>

Le message d’erreur, si l’on entre des lettres au lieu de chiffres, est "Invalid value" :

Un autre message d’erreur est disponible pour le CurrencyFormatter : "Invalidformat" si l’un des attributs du formateur contient une valeur invalide.

Les messages d’erreur peuvent être plus ou moins explicites, aussi il peut parfois êtreutile de définir vos propres fonctions d’erreur.

Formater à l’intérieur d’une liste de donnéesLe formatage peut également servir à mettre en forme une liste de données. Nous allonscréer une liste de dates que nous remplirons grâce à un champ de texte. Cette liste seramise en forme grâce à un itemRenderer et un DateFormatter. Voici l’exemple :

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute" defaultButton="{addDate}">

<mx:ArrayCollection id="dates"/><mx:Panel title="Formatage de données">

<mx:List id="datesList" dataProvider="{dates}"><mx:itemRenderer>

<mx:Component><mx:VBox>

<mx:DateFormatter id="dateFormatter"formatString="EEEE, MMMM DD, YYYY"/>

<mx:Label text="{dateFormatter.format(data)}"/></mx:VBox>

</mx:Component></mx:itemRenderer>

</mx:List><mx:TextInput id="input"/>

c Fig. 5.16 :Le message d’erreur


170

<mx:ControlBar><mx:Button id="addDate" click="dates.addItem(input.text)"

label="Ajouter une date"/></mx:ControlBar>


Et son rendu :

Pour simplifier l’exemple, il n’y a pas de validation de la saisie utilisateur : la chaîne àsaisir l’est sous forme américaine, autrement dit MM/JJ/AAAA. À vous de réfléchir surl’ajout d’une fonctionnalité pour valider une date formatée à la française par rapport à ceque vous avez déjà vu.

Passons à présent à la manipulation de données en XML.

5.5 Travailler avec XMLAujourd’hui, XML est un langage qu’il est essentiel de savoir manipuler. Il est en effetprésent partout et permet à la fois le stockage de données et la transmissiond’informations au travers de Services Web par exemple. Comme nous l’avons déjàsignalé, ActionScript 3 fournit aux développeurs des outils basés sur ECMAScript forXML (E4X) qui permettent le traitement simple et puissant de données XML. Nous allonsnous intéresser d’un peu plus près à la manipulation de données en XML.

Accéder aux élémentsVous pouvez déclarer des variables contenant des données XML en ActionScript. En effet,XML est un type de données natif. Créons par exemple une liste d’utilisateurs avec unnom et prénom, un âge et une adresse e-mail. Notre liste contient deux nœuds :

c Fig. 5.17 :Une liste de dates formatée

5Travailler avec XML

171

[Bindable]private var userList:XML =

<users><user id="1">

<name><firstname>Edouard</firstname><lastname>Ruiz</lastname>

</name><age>23</age><email>[email protected]</email>

</user><user id="2">

<name><firstname>Vianney</firstname><lastname>Baron</lastname>

</name><age>21</age><email>[email protected]</email>

</user></users>

Vous allez ensuite accéder aux nœuds et aux attributs de votre liste d’utilisateurs. Si vousavez l’habitude du XML, vous ne serez pas surpris par l’accès aux nœuds qui se fait grâceà l’opérateur point (.) : userList.user vous donnera accès à la liste des nœuds user. Sivous voulez accéder à un nœud particulier, vous pouvez utiliser la notation des tableauxc’est-à-dire avec des crochets ([]) : userList.user[0].age, par exemple, vous donneraaccès au contenu du nœud age de l’utilisateur ayant l’indice 0 dans le tableau desutilisateurs, autrement dit, le premier.

Vous pouvez également vouloir accéder à un nœud en fonction d’un de ses attributs. Pourcela, il faut préfixer le nom de l’attribut par un @ : userList.user.(@id == 2).name.firstname qui vous donnera le prénom de l’utilisateur ayant comme identifiant lavaleur 2.

Voici le résultat de nos requêtes dans des labels :

<mx:Panel title="Données en XML"><mx:Text id="all" text="{’Objet XML :\r’+ userList.user}"/><mx:Label id="age" text="{’Age de l\’utilisateur en position 0 : ’ +

➥ userList.user[0].age}"/><mx:Label id="firstname" text="{’Prénom de l\’utilisateur ayant l\’id

➥ 2 : ’ + userList.user.(@id == 2).name.firstname}"/></mx:Panel>

Vous pouvez constater la cohérence du résultat :


172

On peut également effectuer des requêtes plus complexes : userList.user.(age >22).name.firstname vous donnera les prénoms des utilisateurs dont l’âge est strictementsupérieur à 22.

Modifier les donnéesSi vous pouvez accéder aux nœuds de votre objet XML grâce au point et à l’arobase, ilest également possible de les modifier avec les mêmes opérateurs. Il suffit d’affecter unnouveau résultat à un élément auquel on accède.

Conservez la variable userList définie dans l’exemple précédent mais remplacez leslabels par ce formulaire :

<mx:Form><mx:FormItem label="Prénom">

<mx:TextInputid="firstname"text="{userList.user[0].name.firstname}"change="{userList.user[0].name.firstname = firstname.text}"

/></mx:FormItem><mx:FormItem label="Nom">

<mx:TextInputid="lastname"text="{userList.user[0].name.lastname}"change="{userList.user[0].name.lastname = lastname.text}"

/>

c Fig. 5.18 :Accès aux données XML

5Travailler avec XML

173

</mx:FormItem><mx:FormItem label="Age">

<mx:TextInputid="age"text="{userList.user[0].age}"change="{userList.user[0].age = age.text}"

/></mx:FormItem><mx:FormItem label="Email">

<mx:TextInputid="email"text="{userList.user[0].email}"change="{userList.user[0].email = email.text}"

/></mx:FormItem>

</mx:Form>

Les champs de texte mettront à jour l’utilisateur en position 0 dans la liste userList. Bienentendu, il pourrait être intéressant d’utiliser une DataGrid, par exemple, pour naviguerdans cette liste et ainsi pouvoir modifier tout son contenu.

Remplacez donc le champ de texte all par une DataGrid :

<mx:DataGrid id="list" dataProvider="{userList.user}"><mx:columns>

<mx:DataGridColumn dataField="@id"/><mx:DataGridColumn headerText="name">

<mx:itemRenderer><mx:Component>

<mx:Label text="{data.name.firstname + ’ ’ +➥ data.name.lastname}"/>


</mx:DataGridColumn><mx:DataGridColumn dataField="age"/><mx:DataGridColumn dataField="email"/>


Remplacez aussi l’indice 0 qui vous permettait d’accéder au premier élément de la listed’utilisateurs par list.selectedIndex qui vous donne la position courante dans la liste.Vous pouvez à présent naviguer dans la grille et modifier l’élément :


174

Créer ou assembler des objets XMLVous pouvez également créer des objets XML et les ajouter ou les insérer dans une listedéjà existante. Les méthodes prependChild et appendChild permettent respectivementd’ajouter avant ou après une liste de propriétés : userList.prependChild(xmlUserVar) ouuserList.appendChild(xmlUserVar) ajouteront à la liste d’utilisateurs une variablexmlUserVar de type XML contenant un schéma d’utilisateur correct.

Si vous souhaitez ajouter un élément à l’intérieur d’une liste par rapport à l’élémentcourant, il faudra utiliser les méthodes insertChildBefore ou insertChildAfter.Celles-ci prennent en argument l’élément par rapport auquel on se positionne ainsi quel’élément à ajouter, tous deux de type XML.

Enfin, la suppression se fait grâce à la méthode delete. Ainsi, l’appel à delete(userList.user[0]) supprimera le premier nœud de la liste d’utilisateurs.

Vous êtes prêt à présent pour stocker, afficher ou manipuler des données en Flex.


a comment définir des modèles de données ;a comment découvrir la liaison de données ;a comment utiliser des méthodes de validation ;a comment mettre en forme des données ;a comment utiliser XML.

Le prochain chapitre sera consacré à l’amélioration et à l’enrichissement de votre interface.

c Fig. 5.19 :Modification desdonnées

5Check-list

175

66.1 Les contrôles avancés .................................. 1786.2 Créer ses propres composants ........................ 1826.3 Mise en pratique : une interface maître-détail ....... 1906.4 Check-list ................................................. 201

Aller vers uneinterface riche

Flex permet aux développeurs d’interfaces d’utiliser denombreux composants comme cela a été vu dans les

précédents chapitres. Certains de ces composantspermettent d’afficher de manière « ordonnée » lesdonnées que vous souhaitez présenter à vos utilisateurs.Aussi, vous bénéficiez d’importantes possibilités pourcréer vous-même vos composants, afin de personnaliservotre application jusque dans les moindres détails ou de ladécouper en différents modules.

6.1 Les contrôles avancésDans Flex, les contrôles qui sont considérés comme contrôles avancés sont ceux dirigéspar les données qu’ils sont chargés d’afficher. Ainsi, nous retrouvons dans ces contrôlesavancés les Tree, les List et les HorizontalList, les ComboBox et les DataGrid.

Ces composants qui sont tous hérités de la classe ListBase ont peu ou prou le mêmemode de fonctionnement et permettent de présenter des données organisées à l’utilisateur.

Les List, les HorizontalList et les ComboBox

Ces trois composants sont des listes avec despositionnements d’éléments différents. La balise<mx:List> dispose les éléments de façon verticaleavec une barre de défilement latérale, la balise<mx:HorizontalList> dispose les différents itemshorizontalement et <mx:ComboBox> crée une liste déroulante.

Ces contrôles ont de multiples propriétés pour positionner les items et paramétrer leurapparence qu’il vous sera facile de découvrir grâce au Flex Builder et sa complétionautomatique. Nous ne nous attarderons donc pas sur cet aspect de l’utilisation descomposants avancés mais nous allons étudier leur utilisation fonctionnelle.

Remplir une List

Le remplissage des List et HorizontalList se fait en utilisant la propriété dataProvider.Aussi, le moyen le plus simple est de spécifier des balises <mx:String> comme balisesfilles de <mx:List>. En effet, Flex interprète une succession de balises <mx:String>comme un tableau :


<mx:List id="ville_nievre"><mx:dataProvider>

<mx:String>Nevers</mx:String><mx:String>Château-Chinon</mx:String><mx:String>Cosne-sur-Loire</mx:String>

</mx:dataProvider></mx:List>

</mx:Application>

c Fig. 6.1 :Exemple de List

c Fig. 6.2 :Exemple de HorizontalList.

6 Aller vers une interface riche

178

L’indexation des éléments d’une liste se fait à partir de 0, ainsi dans notre exemple"Nevers" aura l’index 0 et "Cosne-sur-Loire" l’index 2.

La propriété selectedItem

Les listes sont pourvues de multiples méthodes et propriétés qui aident à leur manipulation.

La plus couramment utilisée est selectedItem. Cette propriété est une copie de l’objetsélectionné dans la liste. Ainsi, des opérations peuvent être effectuées en fonction duchoix de l’utilisateur :

<?xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"><mx:Script>

<![CDATA[import mx.controls.Alert;

public function printData() : void

{Alert.show("La ville sélectionnée par l’utilisateur est "+ville_nievre.selectedItem.data);

}]]>

</mx:Script><mx:List id="ville_nievre" click="printData()">

<mx:Object label="Ne" data="Nevers"/><mx:Object label="CC" data="Château-Chinon"/><mx:Object label="CL" data="Cosne-sur-Loire"/>

</mx:List></mx:Application>

Remplir la liste avec des imagesIl peut aussi être pertinent de faire des listes d’images. Pour cela, on suit le même principe quepour une liste comme expliqué précédemment, mais il faut préciser un "moteur de rendu", ouitemRenderer, spécifique au type de données que l’on veut présenter à l’utilisateur :

c Fig. 6.3 :Exemple de List utilisée avec l’attributselectedItem

6Les contrôles avancés

179


layout="absolute"><mx:Script>

<![CDATA[import mx.collections.*;import mx.controls.Image;private var imgArray:ArrayCollection;private var cat:Array = ["img\\Alien1.bmp", "img\\Alien2.bmp",

"img\\Balloon.bmp", "img\\Bear.bmp"];

private function initImgList(items:Array):void{

imgArray = new ArrayCollection(items);imgList.dataProvider = imgArray;

}]]>

</mx:Script><mx:HorizontalList id="imgList" columnWidth="50" rowHeight="50"columnCount="4"itemRenderer="mx.controls.Image"creationComplete="initImgList(cat)"/>

</mx:Application>

Ainsi, nous avons simplementcréé un ArrayCollection (dans lecode ActionScript) contenant leschemins vers les images voulues,et nous avons fourni ce tableau comme source de notre HorizontalList. Cependant, nousavons précisé un itemRenderer qui est présent dans les bibliothèques de Flex.

Les DataGridCe composant fonctionne sur le même principe que les trois types de liste étudiésprécédemment en affichant plusieurs champs sur une seule ligne. Ainsi, la collection dedonnées n’est pas seulement composée d’éléments mis bout à bout mais également decolonnes pour former une matrice.

Cette possibilité d’avoir plusieurs colonnes permet d’afficher plusieurs informations (vousen verrez une application dans l’exemple pratique à la fin de ce chapitre), et permet enoutre à l’utilisateur de trier la liste comme il l’entend en cliquant simplement sur lesintitulés de colonnes.

Le remplissage de ce type de contrôle se fait grâce à des ArrayCollection et les différentstypes de champs font les différentes colonnes. Vous découvrirez à la fin de ce chapitrecomment utiliser les DataGrid dans un exemple pratique.

c Fig. 6.4 :Exemple de liste d’images


180

Les TreeEncore un type de liste différent qui permet d’afficher des données hiérarchisées. Les Treepermettent par exemple de présenter une arborescence de système de fichiers comme lefait l’explorateur Windows.

Bien sûr, du fait de la hiérarchisation des données, le remplissage d’un Tree ne se fait pasà partir de simples Array ou ArrayCollection, mais nécessite l’utilisation des XML, et desXMLList.

Possibilité de remplissage

Il est possible de remplir un Tree en utilisant des ArrayCollection, sachant que les enfants sont contenusdans des objets appelés children.

Voici un exemple de remplissage d’un Tree avec un XMLList :


<mx:Tree labelField="@label"><mx:XMLListCollection id="C">

<mx:XMLList><folder label="C:\">

<folder label="Windows"/><folder label="Program Files">

<Pfolder label="Office" /><Pfolder label="Flex" />

</folder><folder label="Documents and Settings" /><folder label="Corbeille" />

</folder></mx:XMLList>

</mx:XMLListCollection></mx:Tree>

</mx:Application>

c Fig. 6.5 :Exemple de composant Tree

6Les contrôles avancés

181

6.2 Créer ses propres composantsL’une des grandes forces de Flex est de permettre aux développeurs de créer leurs proprescomposants à partir des composants déjà existants. Ainsi, il est possible de spécialiser uncomposant existant pour le rendre intégrable directement dans beaucoup d’applications types.

La création de composants Flex est très aisée. Un composant personnalisé se stocke sousforme de fichier MXML ou ActionScript dans le répertoire components de votre projetFlex. Si ce répertoire n’existe pas encore, il est temps de le créer : cliquez avec le boutondroit de la souris sur le projet Flex puis sur New, Folder et appelez-le components.

Choix du dossier pour placer ses composants

Nous vous indiquons ici de placer vos nouveaux composants dans le dossier components. Ce nom dedossier n’est qu’une indication pour vous aider à vous y retrouver dans l’arborescence de votre projetFlex. Vous pouvez, si vous le désirez, appeler ce dossier autrement ou même placer les nouveauxcomposants créés à la racine du projet. En revanche, vous devrez modifier le chemin au moment de ladéclaration du namespace.

Un nouveau conteneur racine pour les composants MXMLTout d’abord dans le menu de Flex Builder cliquez sur File puis sur New et MXMLcomponents.

c Fig. 6.6 :La fenêtre du Flex Builderpour la création descomposants MXML


182

Vous remarquez alors qu’il vous est demandé de choisir le dossier dans lequel lecomposant va être placé. Sélectionnez donc le dossier components et indiquez un nompour votre composant. Surtout, indiquez à partir de quel composant Flex vous voulezdémarrer.

Choix du composant de base

Si vous choisissez Box comme composant de base, vous aurez beaucoup de possibilités mais le travaild’affinement sera long. Aussi, nous vous conseillons de cibler au mieux le composant de base pour vousfaciliter le travail dans le cas de création d’un composant spécifique.

Si vous avez choisi Form comme composant de base et que vous appelez votre composantmon_composant, Flex Builder vous ouvre le fichier :

mon_composant.mxml

<?xml version="1.0" encoding="utf-8"?><mx:Form xmlns:mx="http://www.adobe.com/2006/mxml"

width="400" height="300">

</mx:Form>

À ce moment, il est judicieux de noter que le nœud racine du fichier n’est pas un nœudmx:Application mais un nœud mx:Form et aurait été un nœud mx:Canvas si vous aviezsélectionné Canvas comme composant de base. Aussi, comme les fichiers MXML doiventavoir comme racine un conteneur, vous comprenez qu’il faut baser vos composants surdes conteneurs de navigation ou de layout.

Dorénavant, vous pouvez, comme vous en avez l’habitude, modifier le fichier MXML enmode Source ou en mode Design et ainsi personnaliser votre composant.

Si vous voulez réaliser un formulaire type pour que vos utilisateurs s’enregistrent surl’application, il est intéressant de modifier le composant Form pour qu’il soit composé debase des champs login, password et d’un bouton validation. Grâce au mode Design,vous ajoutez donc ces champs et le bouton et vous obtenez dans la source :

login_form.mxml

<?xml version="1.0" encoding="utf-8"?><mx:Form xmlns:mx="http://www.adobe.com/2006/mxml" width="268"➥ height="124">

<mx:FormItem label="Login :"><mx:TextInput id="login" displayAsPassword="false" editable="true"/>

6Créer ses propres composants

183

</mx:FormItem><mx:FormItem label="Password :">

<mx:TextInput id="password" displayAsPassword="true"editable="true"/>

</mx:FormItem><mx:FormItem>

<mx:Button label="S’enregistrer"/></mx:FormItem>

</mx:Form>

Vous allez pouvoir ensuite en une seule ligne ajouter ce nouveau composant dans vosapplications Flex.

Utilisons nos nouveaux composants

Un nouveau namespace

Maintenant que notre composant personnalisé est créé et se trouve dans le dossiercomponents, il est plus qu’intéressant de savoir comment l’appeler et l’utiliser dans lereste de l’application.

c Fig. 6.7 :Le composant créé pour l’enregistrement desutilisateurs

c Fig. 6.8 :Le nouveau composant est visible dansl’arborescence du projet Flex


184

Dans un premier temps, il vous faut comprendre que l’appel de ce nouveau composant vanécessiter la création d’un nouvel espace de noms, ou namespace. Tous les composantsfournis par Flex s’appellent dans le namespace mx. Or, notre composant n’est pas fournipar Flex. Nous allons donc devoir lui créer un namespace pour ne pas risquer decollisions et pour séparer ce que l’on crée de ce qui existe déjà. Aussi, l’utilisation d’unnouveau namespace permet de définir un nom simple pour faire référence à un chemind’arborescence.

Pour déclarer un nouveau namespace, et lui affecter un chemin dans l’arborescence, ilsuffit de faire comme dans l’exemple suivant en utilisant la syntaxexmlns:mon_namespace :

<?xml version="1.0" encoding="utf-8"?><mx:Application

xmlns:mx="http://www.adobe.com/2006/mxml"xmlns:mcmp="components.*"layout="absolute">

Vous remarquez que dans l’exemple précédent deux namespaces sont déclarés :

j mx, qui pointe à tous les composants fournis avec Flex et référencés dans le fichiersur lequel pointe l’adresse Internet.

j mcmp, qui fait référence à tous les composants se trouvant dans le dossiercomponents.

Ne faire référence qu’à un seul composant du dossier

Il est tout à fait possible de ne faire pointer un namespace que sur un seul composant du dossier. Pourcela, il faut remplacer : components.* par components.mon_composant.

Dorénavant, lorsque vous ouvrirez une balise MXML en indiquant le namespace mcmp,Flex Builder vous proposera en complétion automatique tous les composants auxquelsfait référence mcmp.

c Fig. 6.9 :Exemple de complétionautomatique pour lenouveau namespace


185

Un simple ajout de balise

Maintenant que le nouveau namespace est créé, l’ajout de votre nouveau composant dansl’application Flex se fait en utilisant la même méthode que celle appliquée depuis le débutavec les composants traditionnels : un simple ajout de balise dans le code MXML.

Bien entendu, il faut utiliser le namespace déclaré à la place de mx. Par exemple, vousavez créé le composant Form_login que vous voulez intégrer dans votre application :

<?xml version="1.0" encoding="utf-8"?><mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"xmlns:mcomp="components.*"layout="absolute">

<mx:Panel title="login"><mcomp:Form_login />


L’insertion de votre nouveau composant Form_login dans un Panel s’est faite simplementet votre application Flex utilise dorénavant un composant réalisé par vos soins.

Définir les nouvelles propriétés et les nouvelles méthodes pour uncomposant

En MXML

Le langage MXML permet l’utilisation des balises <mx:String>, <mx:Boolean> et<mx:Number> définies pour des propriétés de type chaîne de caractères, booléen etnombre. Le nom de la propriété est alors l’id précisé dans la balise.

Il est possible de définir une valeur par défaut pour les propriétés que vous insérez dansvos composants en renseignant le corps des balises de propriétés :

<mx:String id="test_de_propriete">Valeur par défaut</mx:String>

Cette valeur par défaut peut être soit une valeur statique comme dans l’exempleprécédent, soit un URL si on définit celle-ci dans la propriété source ou bien une donnéeliée :

<mx:String id="maPropriete">Bonjour, {NomUtilisateur}.</mx:String><mx:String id="maPropriete1"

source="http://www.exemple.com/fichier_test"/>


186

<mx:Number id="maPropriete2">15</mx:Number><mx:Number id="heures">{numJours * 24}</mx:Number>

<mx:Boolean id="maPropriete3">true</mx:Boolean><mx:Boolean id="status_connection">{isConnected}</mx:Boolean>

Maintenant, vous imaginez que pour utiliser ces propriétés dans vos propres composantsMXML, il suffit d’indiquer grâce aux balises que nous venons d’étudier quelles sontcelles dont vous avez besoin. Ensuite, la valeur de la propriété est passée en paramètrelors de l’appel du composant :

ComboBoxRemplie.mxml


<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml"><mx:String id="maPropriete"/><mx:dataProvider>

<mx:Array><mx:String>A</mx:String><mx:String>B</mx:String><mx:String>{maPropriete}</mx:String>

</mx:Array></mx:dataProvider>

</mx:ComboBox>

Voici comment renseigner la propriété maPropriete lors de l’appel du composantComboBoxPreRemplie :


xmlns:mcmp="components.*"><mcmp:ComboBoxPreRemplie id="test" maPropriete="C" />

</mx:Application>

Vous pouvez donc remarquer qu’il est très aisé de renseigner la propriété définie dans lecomposant MXML personnalisé.

En ActionScript

La balise <mx:Script> permet bien sûr de définir des propriétés ou des méthodes dans lescomposants que vous fabriquez vous-même.


187

Position de la balise <mx:Script>

La balise <mx:Script> doit être un enfant immédiat de la racine du fichier MXML.

Toute déclaration publique de fonctions ou de variables devient alors une méthode ou unepropriété du composant créé.

Par exemple, voici un bout de code dans lequel maPropriete et get_propriete() sont unepropriété et une méthode du composant monTextArea :

<?xml version="1.0"?><mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml">


// Ici la variable qui devient de fait propriété du composant :public function get_propriete() : String {

// Cette fonction est une méthode du composantpublic function get_propriete() {return "Le nombre indiqué dans la propriété maPropriete est : "

+ maPropriete;}

]]></mx:Script>

</mx:TextArea>

Vous pouvez utiliser la méthode ainsi définie dans votre application Flex :

<?xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"xmlns:mcmp="components.*">

<mcmp:monTextArea id="mta" maPropriete="4"change="ta1.text = mta.get_propriete();"/>

<mx:TextArea id="ta1" width="300" height="150" /></mx:Application>

À l’exécution, vous allez voir que lorsque adviendra un changement dans le TextAreamta, le TextArea ta1 se remplira de la valeur : "Le nombre indiqué dans la propriétémaPropriete est : 4".


188

La création de composants en ActionScriptNous avons vu comment créer de nouveaux composants grâce au langage MXML. Nousallons maintenant étudier comment faire la même chose en ActionScript.

Les composants ainsi créés peuvent être référencés dans vos applications Flex par destags MXML. Ils peuvent contenir des éléments graphiques, définir leur propre logique detravail (procédures, fonctions, événements… qui permettent au composant de calculer oud’agir sur le reste de l’application) ou compléter des composants Flex déjà existants.

Voici par exemple le code d’un bouton personnalisé hérité du contrôle Button de Flex :

class components.MonButton extends mx.controls.Button {function MonButton() {

// Le code de la fonctionsuper() ; // Appel au constructeur du composant parent

}// La suite du code

}

Il ne reste plus qu’à enregistrer ce bout de code dans le fichier mon_button.as dans ledossier components (comme pour les composants créés en MXML). Ensuite, l’utilisationde ce nouveau composant se fera comme pour les composants MXML :

j déclaration d’un namespace ;j utilisation d’une balise MXML pour insérer le composant dans l’application Flex en

cours de création.

ActionScript vs MXML pour la création de nouveaux composantsEn ActionScript, vous aurez la possibilité de créer des composants visuels comme desboutons, des conteneurs… mais aussi des composants non visuels qui seront plusefficaces au lancement de l’application.

c Fig. 6.10 :Exemple avec lesTextArea dont celui quenous avons créé


189

Alors qu’en MXML, on se cantonne seulement au "visuel" du nouveau composant,l’ActionScript permet d’écrire, ou de modifier des comportements procéduraux,événementiels ou fonctionnels.

Remarquez que souvent le plus pratique est de mêler les deux techniques, MXML pourle design avec de l’ActionScript pour le fonctionnel.

Pourquoi créer ses propres composants ?La création d’un nouveau composant permet, outre la personnalisation de composantsexistants afin de les spécialiser pour votre application, de rendre vos applications Flexplus modulaires.

Vous découvrirez que la découpe d’une grosse application en de multiples composantsrend sa maintenance plus efficace. Ainsi, vous pourrez faire évoluer différemment lesdivers modules de votre programme et travailler à plusieurs de façon indépendante.

Aussi, avec le temps vous allez créer des composants de plus en plus génériques quiseront réutilisables dans vos différentes applications. Ne pas réinventer la roue est unprincipe fondamental dans n’importe quel développement de logiciel mais en plus decela, en cas de bug ou de faille de sécurité, l’utilisation de composants génériques permetdes corrections aisées et rapides à déployer.

Ainsi, la création de composants personnalisés n’est pas seulement utile pour créer denouveaux composants révolutionnaires mais cette fonctionnalité doit être détournée pourmodulariser vos applications Flex.

6.3 Mise en pratique : une interface maître-détailMaintenant que vous savez comment utiliser de façon avancée les composants Flex etnotamment leur création, il est temps de mettre en pratique ces connaissances enprogrammant une interface maître-détail.

Nous verrons comment découper une application Flex en plusieurs modules, et commentles utiliser en les faisant interagir.

Qu’est-ce qu’une interface maître-détail ?Principe récurrent dans la création d’interfaces d’applications, les interfaces"maître-détail" permettent de zoomer sur un objet sélectionné dans une liste.

La partie "maître" affiche une collection d’objets et la partie "détail" permetd’implémenter un zoom sur les objets de la collection qui affiche des détails sur l’objetsélectionné dans la première. Ainsi, lorsque l’utilisateur modifie sa sélection dans la partiemaître, la partie détail est mise à jour afin d’inspecter le nouvel objet sélectionné.


190

L’inspecteur d’objet (partie détail) n’affiche rien quand l’utilisateur n’a sélectionné aucunou plusieurs éléments de la collection.

Affichage de plusieurs éléments

Dans certaines implémentations de l’interface maître-détail, l’inspecteur d’objet permet d’afficherplusieurs objets en cas de sélection multiple. De même, souvent les détails sont éditables mais vousconviendrez aisément que les changements nécessaires sont maintenant à votre portée sans besoin dedescription dans cette courte mise en pratique.

Mise en place du projetRien de nouveau dans notre cas : nous allons créer un nouveau projet que nousnommerons MasterDetail dans la suite de l’explication. Créez aussi tout de suite ledossier components qui, comme vous le savez maintenant, servira à stocker les différentsmodules.

Vous retrouvez l’arborescence qui vous est maintenant familière :

Et le fichier MasterDetail.mxml qui ne contient pour le moment que les déclarations XMLde base :


layout="absolute">

</mx:Application>

Le découpage du projetCe mini-projet sera découpé en deux modules principaux. Un module maître quicontiendra l’interface maître et un module détail qui contiendra l’interface… détail.

Le développement se fera de façon séparée et nous allons voir à la fin comment lesassembler et les faire interagir. Ces deux modules seront des modules MXML quiincluront le code métier nécessaire à leur fonctionnement.

c Fig. 6.11 :Arborescence du projet MasterDetail

6Mise en pratique : une interface maître-détail

191

Pour une organisation plus propre, chaque module sera placé dans un dossier spécifiqueafin de séparer les fichiers nécessaires au fonctionnement de chacun.

Le module maîtrePour la création du module maître, nous allons partir sur le composant Box que nousallons modifier afin de pouvoir insérer un DataGrid que nous allons remplir avec lesdonnées de la collection.

Vous obtenez ainsi le fichier master.mxml dans le dossier components\master\ quis’articule avec comme nœud racine <mx:Box> :

<?xml version="1.0" encoding="utf-8"?><mx:Box xmlns:mx="http://www.adobe.com/2006/mxml">

</mx:Box>

Paramétrage du DataGrid

La collection utilisée pour l’exemple est une liste d’enregistrements de personnes quicontient le nom, le prénom, et un identifiant. Exemple : 1 Dupont Etienne.

Nous avons besoin de trois colonnes pour afficher ces différents champs.

Tout d’abord, insérez en mode Design un DataGrid dans votre module.

L’ajout de colonnes dans un DataGrid se fait grâce à la balise <mx:columns> qui est unconteneur pour les trois éléments <mx:DataGridColumn>. De plus, modifiez la propriétéheaderText des trois colonnes afin de leur donner des noms significatifs :


<mx:DataGrid id="masterList" columnWidth="200" ><mx:columns>

<mx:DataGridColumn headerText="Id" dataField="col1"/><mx:DataGridColumn headerText="Nom" dataField="col2"/><mx:DataGridColumn headerText="Prénom" dataField="col3"/>

</mx:columns>

c Fig. 6.12 :La nouvelle arborescence du projet avecséparation des modules


192

</mx:DataGrid></mx:Box>

Notez que nous donnons à notre DataGrid l’id masterList pour nous permettre depouvoir l’appeler plus tard et y insérer les données de la collection.

Stockage de la collection

Pour cet exemple, nous allons stocker les éléments de la collection (la liste de personnes)dans un model Flex qui sera enregistré dans le fichier collection.xml dans le dossiercomponents car ce fichier sera utilisé aussi par le composant Detail. Ce modèle comportepour chaque enregistrement user plusieurs champs : id pour l’identifiant, lastname etfirstname (pour le nom et le prénom), birthday (pour la date de naissance), ainsi quephone, email et zipcode pour respectivement le numéro de téléphone, l’adresse e-mail etle code postal de chaque personne enregistrée.

Pour plus de renseignements sur le stockage et le chargement des données enFlex, veuillez-vous reporter au chapitre Gérer les données.

Vous devriez obtenir le fichier collection.xml sur le même type que celui-ci :

<?xml version="1.0" encoding="utf-8"?><collec>

<user><id>1</id><firstname>Edouard</firstname><lastname>Ruiz</lastname><birthday>10/05/1984</birthday><phone>0654321098</phone><email>[email protected]</email><zipcode>94130</zipcode>

</user><user>

<id>2</id><firstname>Vianney</firstname><lastname>Baron</lastname><birthday>14/07/1985</birthday><phone>0658982345</phone><email>[email protected]</email><zipcode>75017</zipcode>

</user><user>

<id>3</id><firstname>Jessy</firstname><lastname>Bernal</lastname>


193

<birthday>23/01/1985</birthday><phone>0698235455</phone><email>[email protected]</email><zipcode>94800</zipcode>

</user></collec>

Il nous reste à indiquer au composant que nous utilisons ce modèle ainsi que l’endroit oùcelui-ci est stocké en insérant la balise :

<mx:Model source="..\collection.xml" id="col"/>

Remplissage du DataGrid avec les données de la sélection

Afin de remplir le DataGrid, nous allons lier les données du modèle avec la propriétédataProvider de notre DataGrid qui porte l’identifiant masterList :

<mx:Binding source="col.user" destination="detail.dataProvider" />

Il va falloir indiquer aux colonnes quels champs du modèle afficher. Pour cela, nousallons nous servir de la propriété dataField de la balise <mx:DataGridColumn> :


<mx:Model id="col" source="..\collection.xml" /><mx:Binding source="col.user" destination="masterList.dataProvider" /><mx:DataGrid id="masterList" columnWidth="200" >

<mx:columns><mx:Array>

<mx:DataGridColumn headerText="Id" dataField="id"/><mx:DataGridColumn headerText="Nom" dataField="lastname"/><mx:DataGridColumn headerText="Prénom" dataField="firstname"/>

</mx:Array></mx:columns>

</mx:DataGrid></mx:Box>

En faisant appel à ce nouveau module dans le fichier MasterDetail.mxml, nous obtenonsle résultat escompté :

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

xmlns:master="components.master.*"><master:master />

</mx:Application>


194

Élaboration du code métier

Notre liste maîtresse est en place et il est dorénavant nécessaire de doter notre module ducode permettant à l’interface détail d’afficher tous les renseignements concernant l’objetsélectionné.

ActionScript est un langage objet. Nous allons donc écrire une classe qui va permettre detransférer les informations de l’élément sélectionné. Cet objet sera récupéré dansl’interface détail afin de remplir les champs utiles.

La classe User

Stockées dans le fichier User.as lui-même placé dans le dossier components afin de larendre facilement accessible aux deux modules, cette classe contient les sept propriétésqui vont contenir toutes les informations qui caractérisent un utilisateur, ainsi que lesgetters et setters.

Elle fait partie du package components :

Package components{

Public class User{

private var id : int;private var firstName : String;private var lastName : String;private var birthDay : String;private var email : String;private var phone : String;private var zipCode : String;

public function User(id:int, firstName:String, lastName:String,birthDay:String, email:String,phone:String,zipCode:String) : void{

this.setId(id);this.setFirstName(firstName);this.setLastName(lastName);this.setBirthDay(birthDay);

c Fig. 6.13 :L’interface Master duprojet après remplissagedu DataGrid


195

this.setEmail(email);this.setPhone(phone);this.setZipCode(zipCode);

}

/* Getters et setters normaux dont voici deux exemples. */public function setEmail(value:String) : void{

this.email = value;}

public function getPhone() : String{

return this.phone;}

..}}

Cette classe sera instanciée lors d’un événement click sur un élément de la collection, etcet objet sera alors transmis à l’interface détail.

La fonction getUser()

Vous l’avez sûrement déjà compris, il est maintenant nécessaire d’ajouter quelques petitsbouts de code dans le fichier master.mxml.

Pour gagner en simplicité, nous laisserons le code ActionScript dans le fichier MXML,entre les balises : <mx:Script> et </mx:Script>.

Dans un premier temps, importez la classe User nouvellement créée dans le packagecomponents afin de pouvoir l’utiliser :

import components.User;

Ensuite, le principe de la fonction getUser() va être de récupérer l’index de l’itemsélectionné (grâce à la méthode getItemIndex() du ArrayCollection que vous allez trèsvite découvrir) puis de récupérer l’objet correspondant à cet index avec la méthodegetItemAt() afin de pouvoir en extraire les différents champs.

Afin de pouvoir récupérer un objet correspondant à la ligne sélectionnée, nous allonsdevoir insérer une nouvelle étape dans la construction du DataGrid. Au lieu de le remplirdirectement à partir du Model, nous allons "binder" tout d’abord le Model col dans unecollection (ArrayCollection) puis nous allons ensuite remplir la liste à partir duArrayCollection. Pour cela, il va falloir modifier la balise <mx:Binding> et en rajouterune nouvelle :


196

/* …Début du fichier… */<mx:Model id="col" source="..\collection.xml" /><mx:Binding source="col.user" destination="arrayUser.source" /><mx:Binding source="arrayUser" destination="masterList.dataProvider" /><mx:ArrayCollection id="arrayUser"/><mx:DataGrid id="masterList" allowMultipleSelection="false">/* …Fin du fichier… */

Insertion d’une nouvelle propriété dans le DataGrid

Vous remarquerez que nous avons ajouté une nouvelle propriété dans la balise <mx:DataGrid> afind’interdire les sélections multiples.

La fonction getUser() est très simple grâce aux multiples méthodes fournies par Flex :

public function getUser() : User{/* Déclaration de la variable currentId qui contient l’index de *//* la ligne sélectionnée */

var currentId : int = arrayUser.getItemIndex(masterList.selectedItem);

/* currentItem contient l’objet du ArrayCollection correspondant *//* à la ligne sélectionnée */

var currentItem : Object = arrayUser.getItemAt(currentId);

/* Instanciation de la classe User, le constructeur de la *//* classe permet de remplir toutes les propriétés de l’objet */

var user : User = new User(int(currentItem.id),currentItem.firstname, currentItem.lastname,

currentItem.birthday, currentItem.email,currentItem.phone, currentItem.zipcode) ;

return user;}

Cette fonction sera appelée par la classe MasterDetail (la classe principale de notremini-projet) au moment où nous assemblerons les différentes parties du projet.

Le module détailPour le module détail, il faut partir comme pour le module maître. À savoir, nous allons partirdu composant Flex <mx:Box> et nous allons y ajouter les éléments dont nous avons besoin.

Vous devez donc obtenir le fichier detail.mxml dans le dossier components\detail\ de votreprojet Flex.


197

L’affichage des renseignements dans la partie détail de votre interface maître-détail sefera grâce à un formulaire et à des champs TextInput. Par un glisser-déposer en modeDesign, ou en tapant vous-même le code, vous devriez obtenir :

<mx:Form><mx:FormItem label="Nom :">

<mx:TextInput id="lastname" text=""/></mx:FormItem><mx:FormItem label="Prénom :">

<mx:TextInput id="firstname"/></mx:FormItem><mx:FormItem label="Date de naissance :">

<mx:TextInput id="birthday"/></mx:FormItem><mx:FormItem label="Adresse email :">

<mx:TextInput id="email"/></mx:FormItem><mx:FormItem label="Numéro de téléphone :">

<mx:TextInput id="phone"/></mx:FormItem><mx:FormItem label="Code postal :">

<mx:TextInput id="zipcode"/></mx:FormItem>

</mx:Form>

Faites bien attention à fournir à chaque balise <mx:TextInput> une propriété id qui vouspermettra par la suite de remplir les champs grâce à une fonction ActionScript.

c Fig. 6.14 :Le module détail enmode Design dans leFlex Builder


198

Le code ActionScript n’est pas non plus très dur. Il se compose d’une seule fonctionapplyChange() et de l’import de la classe User. Cette fonction prend en paramètre unobjet de type User et remplit ensuite tous les champs TextInput en renseignant lapropriété text de chacun :


import components.User;

public function applyChange (user:User) : void{

lastname.text = user.getLastName();firstname.text = user.getFirstName();birthday.text = user.getBirthDay();email.text = user.getEmail();phone.text = user.getPhone();zipcode.text = user.getZipCode();

}]]>

</mx:Script>

Lors de l’appel à cette fonction, les champs se rempliront avec les données contenuesdans l’objet user.

L’assemblage des deux modulesC’est certainement la partie la plus simple.

Nous retournons à présent dans le fichier MasterDetail.mxml, que nous n’avons pasbeaucoup modifié depuis le départ. Dans un premier temps, vous allez devoir déclarerdeux namespaces (un par module) :

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"

xmlns:master="components.master.*" xmlns:detail="components.detail.*">

Et ensuite, vous insérez la balise correspondante à chaque module dans le corps dufichier :

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"

xmlns:master="components.master.*" xmlns:detail="components.detail.*">


199

<master:master id="masterInterface"/><detail:detail id="detailInterface"/>

</mx:Application>

Vous avez sans doute noté que nous avons identifié chaque module en leur fournissantune propriété id. Ainsi, nous allons pouvoir faire appel à masterInterface.getUser() etfournir le résultat de cette dernière à la méthode detailInterface.applyChange() :

private function transfertUser() : void{

detailInterface.applyChange(masterInterface.getUser());}

Cette nouvelle fonction, transfertUser(), va être appelée du déclenchement del’événement click de l’élément <master:master> afin de mettre à jour les champs de lapartie détail. Après avoir rajouté pour des raisons esthétiques un conteneur VBox et un traitHRule, vous obtiendrez un fichier MasterDetail.mxml ressemblant au suivant :

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"

xmlns:master="components.master.*" xmlns:detail="components.detail.*"><mx:Script>

<![CDATA[private function transfertUser() : void

{detailInterface.applyChange(masterInterface.getUser());

}]]>

</mx:Script><mx:VBox horizontalAlign="center">

<master:master id="masterInterface" click="transfertUser()"/><mx:HRule width="338" height="3"/><detail:detail id="detailInterface"/>


Nous avons pour ainsi dire créé une interface maître-détail fonctionnelle quiest, rappelons-le, présente dans un très grand nombre de développements eninformatique.


200


a quels étaient les composants avancés de Flex ;a comment se servir sommairement de ces composants ;a comment créer nos propres composants ;a la modularisation d’une application ;a les interfaces maître-détail.

Le prochain chapitre va vous initier à la navigation dans les applications Flex en utilisantles conteneurs avancés.

c Fig. 6.15 :L’interface maître-détailsans aucun élémentsélectionné

c Fig. 6.16 :L’interface maître-détailaffichant les informationsde l’élément sélectionné

6Check-list

201

77.1 Introduction à la navigation ........................... 2047.2 Manipuler une ViewStack .............................. 2047.3 Les contrôles TabNavigator et Accordion ............ 2157.4 Mise en pratique : mon CV en ligne ................. 2187.5 Check-list ................................................. 225

Naviguerdans sonapplication

Ce chapitre est dédié à la navigation au sein d’uneapplication riche. Les conteneurs de navigations

fournis par le framework Flex permettent d’enrichir vosinterfaces et de mettre en œuvre des scénarios en fonctiondes choix de l’utilisateur.

7.1 Introduction à la navigationVous devriez maintenant avoir un bon aperçu des composants et conteneurs du frameworkFlex. Cependant, nous n’avons pas encore abordé le problème de la navigation au seind’une application. En effet, contrairement à un site web standard, une application Flexn’est pas divisée en pages dynamiques distinctes. Le principe se rapproche nettement plusd’une application de bureau classique où tous les composants sont associés à une fenêtre.En MXML, c’est la balise <mx:Application> qui représente le conteneur parent et nousy avons jusqu’à présent ajouté des composants toujours affichés.

Nous allons aborder dans ce chapitre les composants permettant de fournir un système denavigation afin de guider les utilisateurs dans nos applications. Ce type de composants esttrès souvent utilisé pour réaliser des processus de validation multi-étapes (panier d’achatou remplissage de plusieurs formulaires) et permettent d’alléger un écran trop chargé enle décomposant en plusieurs sous-catégories.

De manière générale, les conteneurs de navigation permettent de contrôler les actions del’utilisateur en affichant ou en masquant certains composants de manière à ce qu’un seulet unique conteneur enfant ne soit visible.

Vous pouvez d’ores et déjà avoir un aperçu des huit composants de navigation que nousdétaillerons dans ce chapitre. Les composants sont accessibles dans Flex Builder 3 dansla catégorie Navigator.

7.2 Manipuler une ViewStackNous allons utiliser notre premier composant de navigation : le conteneur ViewStack estl’élément le plus simple et le plus générique.

Introduction au composant ViewStackLe composant ViewStack est au cœur du système de navigation dans Flex puisque tousles autres conteneurs de la catégorie en dérivent ou implémentent des méthodes oupropriétés similaires. Comme nous l’avons mentionné plus haut, une ViewStack est un

c Fig. 7.1 :Composants de navigation du frameworkFlex

7 Naviguer dans son application

204

conteneur : elle peut donc contenir d’autres objets avec comme particularité de devoirobligatoirement être aussi des conteneurs. Dans le cas contraire, une erreur se produiraità l’exécution du programme. Le diagramme suivant va vous permettre de mieuxcomprendre le lien entre ces différents contrôles de navigation :

En fait, une ViewStack fonctionne de la manière suivante. Le composant stocke en interneune collection de conteneurs enfants qui sont empilés les uns sur les autres (stacked enanglais). La particularité de ce composant est qu’un seul et unique conteneur enfant nepeut être visible à la fois. Il faut ensuite utiliser du code ActionScript (en utilisant les

c Fig. 7.2 : Diagramme de classe des contrôles de navigation

7Manipuler une ViewStack

205

méthodes et propriétés du composant) ou d’autres composants afin de choisir quelconteneur devra être affiché par la ViewStack. L’image suivante schématise desconteneurs encapsulés dans une ViewStack :

Notez également que ce composant adopte certaines propriétés par défaut :

j Taille par défaut : une ViewStack adopte la largeur et la hauteur du conteneuraffiché par défaut.

j Redimensionnement : une ViewStack ne change pas de taille lorsque le conteneuractif change, il faut pour cela utiliser la propriété resizeToContent.

j Positionnement des conteneurs enfants : les conteneurs enfants sont positionnéspar défaut dans le coin supérieur gauche de la ViewStack. Si l’un des conteneursenfants est plus grand que la ViewStack, alors il sera tronqué.

Ajouter une ViewStack dans une applicationNous allons maintenant utiliser un composant ViewStack pour stocker plusieurs autresconteneurs de type HBox par exemple. Comme vous vous en doutez, la balise<mx:ViewStack> est utilisée pour déclarer ce type de composant : nous la nommerons"myVs".

Nous allons placer trois HBox que nous remplirons avec un Label permettant dereconnaître le composant visible. Nous allons également fixer une largeur et une hauteur

c Fig. 7.3 :Schéma dufonctionnement d’uneViewStack


206

communes à l’exception du dernier élément qui sera plus large de 200 pixels. Nousajouterons enfin un Spacer puis un second Label pour bien montrer le comportement pardéfaut d’une ViewStack lorsque le conteneur enfant nécessite une taille supérieure.

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical"><mx:ViewStack id="myVs" borderStyle="solid"backgroundColor="white">

<mx:HBox id="hb1" label="conteneur 1"width="600" height="600" >

<mx:Label text="Le conteneur 1 est affiché"fontSize="26"/>

</mx:HBox>

<mx:HBox id="hb2" label="conteneur 2" width="600" height="600"><mx:Label text="Le conteneur 2 est affiché"

fontSize="26"/></mx:HBox>

<mx:HBox id="hb3" label="conteneur 3" width="800" height="600"><mx:Label text="Le conteneur 3 est affiché"

fontSize="26"/><mx:Spacer width="200"/><mx:Label text="tronqué" fontSize="26" />

</mx:HBox></mx:ViewStack></mx:Application>

Essayez à présent d’ajouter un composant classique dans la ViewStack comme un simpleLabel par exemple. L’application compile correctement, mais une erreur se produit àl’exécution car le Player ne peut pas forcer un composant de type <mx:label> enconteneur.

c Fig. 7.4 :Une ViewStackn’accepte que desconteneurs commecomposant enfant.


207

Normalement, votre ViewStack devrait ressembler à ceci :

Nous vous l’accordons, pour l’instant, cela n’est guère pratique car nous ne pouvons paschoisir le composant de type HBox à afficher puisque le conteneur ViewStackn’implémente pas de mécanisme de navigation par défaut.

Nous allons arranger tout cela en créant une fonction ActionScript qui changera lecomposant à afficher. Cette fonction utilisera les propriétés des ViewStack. Les plusimportantes pour manipuler ce type de composant sont les suivantes :

Tableau 7.1 : Propriétés essentielles de ViewStack

Propriété Utilisation

SelectedIndex Cette propriété donne l’indice du composant actuellement actif (c’est-à-direvisible) s’il y a des conteneurs enfants dans la ViewStack. Les indices desconteneurs commencent à 0 comme tous les tableaux en Flex, et s’il n’y apas de composant, alors cette propriété a comme valeur -1.Il est également possible d’utiliser cette propriété dans la balise MXML dela ViewStack pour choisir le composant qui sera affiché par défaut de lamanière suivante : <mx:ViewStack id="myVs" selectedIndex="1">.

SelectedChild Cette propriété a un fonctionnement similaire à SelectedIndex ;cependant, c’est ici l’ensemble du composant enfant qui est utilisé au lieude son indice.

numChildren Correspond au nombre de composants enfants contenu dans uneViewStack.

Nous allons maintenant ajouter une HBox au-dessus de notre composant ViewStack auquelnous ajouterons un label qui affichera les détails du composant grâce au binding (liaisonavec les données) de Flex et une ComboBox que nous nommerons cb_switch et qui serainitialisé avec un tableau de chaînes allant de 1 à 3. Enfin, la méthode ActionScript

c Fig. 7.5 : Premier exemple du composant ViewStack


208

permettant de changer le conteneur sera appelée sur l’événement change de la ComboBox.Voici donc le code à ajouter au-dessus de notre ViewStack :


public function switchconteneur(event:Event) : void{

myVs.selectedIndex =parseInt(cb_switch.selectedLabel) - 1;

}]]>

</mx:Script><mx:HBox>

<mx:ComboBox id="cb_switch"change="switchconteneur(event)">

<mx:dataProvider><mx:Array>

<mx:String>1</mx:String><mx:String>2</mx:String><mx:String>3</mx:String>


</mx:ComboBox><mx:Label text="Le conteneur actif est le numéro

{myVs.selectedIndex + 1} / {myVs.numChildren} :{myVs.selectedChild.name} "/>

</mx:HBox>

Relancez l’application puis sélectionnez le conteneur 3 grâce à la liste déroulante. Unascenseur s’affiche en bas du conteneur car nous lui avons assigné une taille plus largeque le composant par défaut (indice 0) qui est le conteneur hb1.

Pour changer ce comportement et redimensionner la ViewStack à chaque changement deconteneur, il suffit d’activer la propriété resizeToContent de la manière suivante :

c Fig. 7.6 : Le conteneur 3 est tronqué.


209

<mx:ViewStack id="myVs" borderStyle="solid"backgroundColor="white"resizeToContent="true">

Vous devriez maintenant avoir le conteneur 3 affiché en entier :

Manipuler une ViewStack avec les contrôles de type navigation barComme vous venez de le constater, une ViewStack seule n’est pas très pratique à utiliserpour une navigation aisée au sein d’une application. En effet, des composants dérivant decette classe ou implémentant les mêmes propriétés et méthodes lui sont souvent préféréstels que les composants TabNavigator et Accordion que nous aborderons prochainement.

Si vous regardez plus attentivement la liste des composant classés dans la catégorieNavigator ou encore le diagramme de classe au début de ce chapitre, vous remarquerezplusieurs composants héritant de la classe NavBar.

Nous allons voir les quatre composants suivants en détail :

j ButtonBar ;j ToggleButtonBar ;j LinkBar ;j TabBar.

Si ces composants sont classés dans la catégorie Navigator, c’est parce qu’ils permettenttous d’implémenter directement un système de navigation pour le composant ViewStacken spécifiant simplement le dataProvider adéquat (ici le nom de la ViewStack).

Les contrôles ButtonBar et ToggleButtonBar

Les contrôles ButtonBar et ToggleButtonBar représentent des groupes de boutonsordonnancés de manière horizontale ou verticale et ayant une apparence commune. La

c Fig. 7.7 : Le conteneur 3 est affiché en entier.


210

principale différence entre ces deux composants vient de leur comportement lorsquel’utilisateur clique sur un bouton du contrôle. Sur un composant ButtonBar, le boutonchange d’apparence lors d’un clic puis il reprend son état normal. Le composantToggleButtonBar, quant à lui, ne revient pas à son apparence initiale et garde l’apparenced’un bouton enfoncé même si l’utilisateur relâche le bouton. Cela permet d’informerl’utilisateur de manière visuelle quel conteneur est actif, lorsque la ToggleButtonBar estutilisée avec un composant ViewStack. Voici à quoi ressemblent visuellement ces deuxcomposants :

Et voici le code associé :

<mx:ButtonBar dataProvider="myVs" />

Le code à nouveau est le suivant :

<mx:ToggleButtonBar dataProvider="myVs" />

Comme vous pouvez le voir sur l’image précédente, la seule différence notable vient dufait que le composant ToggleButtonBar garde le bouton sélectionné sur l’état enfoncé. Sivous cliquez de nouveau dessus, le bouton reste toujours sélectionné. Pour l’éviter, vousdevez modifier la propriété toggleOnClick qui est à false par défaut.

Dans ces deux exemples, une valeur a été affectée à la propriété dataProvider ; nousavons passé en paramètre le nom du composant ViewStack que nous avionsprécédemment déclaré. Les deux composants ont alors créé un bouton pour chaquesous-conteneur de la ViewStack, et leur propriété label a servi pour le texte de chaquebouton. Vous pouvez maintenant utiliser les barres de contrôle pour naviguer trèssimplement dans votre application.

Cependant, les dataProvider des composants ButtonBar ne sont pas limités à laViewStack ; il est ainsi possible de déclarer ses propres dataProvider en utilisant destableaux de chaînes ou des tableaux d’objet. Dans ce dernier cas, le composant recherchetrois propriétés pour définir les boutons :

j label : le nom qui sera affiché sur le bouton ;j icon : une image à éventuellement inclure avant le label ;

c Fig. 7.8 :Une ButtonBar

c Fig. 7.9 :Une ToggleButtonBar


211

j toolTip : affiche une description au passage de la souris.

Voici donc un petit exemple MXML avec un tableau d’objets décrit de manière statique :

<mx:ButtonBar><mx:dataProvider>

<mx:Array><mx:Object label="conteneur 1"

toolTip="Afficher le premier conteneur"icon="@Embed(source=’soleil.gif’/>

<mx:Object label="conteneur 2"toolTip="Afficher le deuxième conteneur"/>

<mx:Object label="conteneur 3"toolTip="Afficher le dernier conteneur"/>


</mx:ButtonBar>

Le résultat visuel est le suivant :

Bien sûr, il ne se passe plus rien quand l’utilisateur clique sur le bouton puisque ledataProvider n’est plus une ViewStack. C’est que nous allons examiner.

Les deux composants ButtonBar et ToggleControlBar fournissent un seul et uniqueévénement pour la gestion des boutons. Il s’agit de l’événement ItemClick, de typeItemClickEvent, qui contient des informations relatives au bouton cliqué :

j label : titre du bouton cliqué ;j index : indice du bouton (de 0 jusqu’à n-1 où n est le nombre d’éléments du

dataProvider).

Le composant LinkBar

Le composant LinkBar est relativement similaire aux deux composants que nous venonsde voir, la différence la plus notable se situant à nouveau dans le design. Cette fois, leséléments ne sont plus représentés par des contrôles Button mais par des LinkButton quiont l’apparence de liens HTML classiques. Là encore, il est possible de spécifier undataProvider de type ViewStack ou d’en déclarer un via un tableau de chaîne de

c Fig. 7.10 :ButtonBar associé à untableau d’objets


212

caractères. Nous allons donc ajouter un élément LinkBar et un bout de code ActionScriptqui se déclenchera sur l’événement itemClick que nous venons de voir.

Commençons par la définition de l’élément avec son dataProvider :

<mx:LinkBar id="lBar"><mx:dataProvider>

<mx:Array><mx:String>Adobe</mx:String><mx:String>Google</mx:String><mx:String>Sun</mx:String>


</mx:LinkBar>

Ce qui devrait donner ceci :

Ajoutons maintenant une méthode pour ouvrir une nouvelle page web lorsque l’utilisateurclique sur un élément de la barre en utilisant les propriétés d’un objet ItemClickEvent.Nous allons à cet effet utiliser la méthode NavigateToUrl qui prend en paramètre un objetde type URLRequest et une chaîne indiquant le mode d’ouverture. Voici le résultat final :


public function openWindow(event:ItemClickEvent) : void{navigateToURL(new URLRequest(’http://www.’ +String(event.item).toLowerCase() + ’.com’), ’_blank’);

}]]>

</mx:Script><mx:LinkBar id="lBar" itemClick="openWindow(event)">


<mx:String>Adobe</mx:String><mx:String>Google</mx:String><mx:String>Sun</mx:String>


</mx:LinkBar></mx:Application>

c Fig. 7.11 :Le composant LinkBar


213

Le composant TabBar

Le comportement de ce composant est très similaire aux trois autres contrôles. Encore unefois, la différence la plus notable se situe au niveau du design. Nous allons donc enprofiter pour vous parler d’une dernière propriété de ce type d’élément. Dans l’exempledu composant ButtonBar, le nom du bouton était indiqué par la propriété label de l’objetcar c’est celle-ci que Flex recherche par défaut.

C’est d’ailleurs exactement comme cela que les boutons sont nommés : lorsque ledataProvider est une ViewStack (collection de conteneur), c’est la propriété label dessous-conteneurs qui est alors utilisée. Il est cependant possible d’en spécifier une autregrâce à la propriété labelField de la manière suivante :

<mx:TabBar labelField="autreNom"><mx:dataProvider><mx:Object autreNom="Menu 1"/>

<mx:Object autreNom="Menu 2"/><mx:Object autreNom="Menu 3"/></mx:dataProvider>

</mx:TabBar>

Dimension des conteneurs enfantsComme nous vous l’avons indiqué en début de chapitre, une ViewStack et ses composantsdérivés ne se redimensionnent pas automatiquement lors du changement du conteneuractif. Bien sûr, vous pouvez choisir de changer ce comportement grâce à la propriétéresizeToContent mais il vaut mieux éviter qu’un conteneur de navigation ne change detaille à chaque modification, car cela déplacerait les composants voisins par la mêmeoccasion.

Le plus simple serait donc que la ViewStack adopte la taille du plus grand de seséléments, et comme vous avez pu le constater ce n’est pas le cas puisque c’est la tailledu premier composant affiché qui est utilisée. Vous avez donc plusieurs solutions pourdimensionner une ViewStack :

j Imposer une taille au conteneur ViewStack (en valeur absolue ou en utilisant lepourcentage) avec les propriétés width et height.

j Mettre tous les composants à la même taille de manière explicite (encore la propriétéwidth et height mais cette fois sur chaque sous-conteneur).

c Fig. 7.12 :Aspect visuel d’une TabBar


214

j Mettre le composant le plus grand en premier (ce qui n’est cependant pas trèspratique).

7.3 Les contrôles TabNavigator et AccordionIl est relativement facile d’associer une ViewStack à une barre de navigation, mais il seraitcependant bien plus pratique de réunir les deux en un seul et unique composant. C’est lerôle du TabNavigator et de l’Accordion.

Le composant TabNavigatorUn TabNavigator pourrait être comparé au niveau visuel et fonctionnel à une ViewStackassociée à un composant TabBar puisqu’il propose d’afficher un ensemble de conteneurssous la forme d’onglets navigables. Il se déclare également de façon identique :

<mx:TabNavigator id="myTn" borderStyle="solid" backgroundColor="white"width="400" height="250">

<mx:HBox id="hb12" label="conteneur 1"icon="@Embed(source=’soleil.gif’)" >

<mx:Label text="Le conteneur 1 est affiché" fontSize="26"/></mx:HBox><mx:HBox id="hb23" label="conteneur 2" >

<mx:Label text="Le conteneur 2 est affiché" fontSize="26"/></mx:HBox><mx:HBox id="hb34" label="conteneur 3" >

<mx:Label text="Le conteneur 3 est affiché" fontSize="26"/></mx:HBox>

</mx:TabNavigator>

c Fig. 7.13 :Rendu visuel ducomposant

7Les contrôles TabNavigator et Accordion

215

Le nommage des onglets se base encore sur la propriété label des conteneurs enfants. Ilest aussi possible d’ajouter une icône grâce à la propriété icon de chaque élément commedans l’exemple précédent.

Les éléments sont rangés de gauche à droite dans l’ordre où ils ont été déclarés et ils sontvisibles par défaut, à moins de cacher un conteneur en mettant la propriété enabled àfalse. Dans ce cas, l’onglet est toujours présent mais il n’est plus cliquable.

Enfin, ce composant, comme la ViewStack, rend accessible un événement change qui estdéclenché à chaque changement de conteneur actif.

Le composant AccordionLe composant Accordion est un peu différent : c’est une variation intéressante ducomposant ViewStack. Les conteneurs enfants ne sont ici plus affichés les uns par-dessusles autres, mais ils sont simplement réduits verticalement de manière à ne laisserapparaître qu’une barre de titre cliquable. Un clic entraîne la réduction du conteneur actifet, évidemment, une restauration de l’élément sélectionné.

Ce composant peut se révéler très utile dans le cadre de formulaires assez longs et qui netiendraient pas sur une page. Il est plus adapté qu’une navigation en forme d’onglet pourainsi rentrer des coordonnées, une adresse de livraison et un numéro de carte de crédit quisont souvent séparés en trois pages distinctes sur les sites web classiques.

Nous allons donc illustrer ce composant en se basant sur cet exemple. Il va falloir déclarerun Accordion qui contiendra les trois formulaires (seul le premier formulaire sera réalisépour cet exemple) :

<mx:Accordion id="ExempleAccordion"><mx:Form label="1. Informations personnelles"

width="400"><mx:FormHeading label="Informations personnelles"/><mx:FormItem label="Nom">

<mx:TextInput/></mx:FormItem><mx:FormItem label="Prénom">

<mx:TextInput/></mx:FormItem><mx:FormItem label="Adresse">

<mx:TextInput/><mx:TextInput/>

</mx:FormItem><mx:FormItem label="Code postal" >

<mx:TextInput maxChars="5"/></mx:FormItem>


216

<mx:FormItem label="Ville"><mx:TextInput/>

</mx:FormItem><mx:FormItem label="Numéro de téléphone">

<mx:TextInput/></mx:FormItem>

</mx:Form><mx:Form label="2. Coordonnées bancaires">

</mx:Form><mx:Form label="3. Passer la commande">

</mx:Form>

</mx:Accordion>

Voici le résultat visuel d’un conteneur de type Accordion :

Navigation au clavierLorsqu’un composant de type Accordion ou TabNavigator est sélectionné, les touches duclavier peuvent être utilisées pour remplacer la navigation à la souris. Flex définit uneaction spécifique par défaut aux touches suivantes :

Tableau 7.2 : La navigation au clavier

Touche Fonctionnalité

[Ä] et [Barre}d'espace] Ouvre l’onglet sélectionné

c Fig. 7.14 :Simulation d’unformulaire d’achat avecle composant Accordion

7Les contrôles TabNavigator et Accordion

217

Tableau 7.2 : La navigation au clavier

[Ö] Ouvre le premier onglet

Fin Ouvre le dernier onglet

[’] / [‘] Ouvre l’onglet suivant/précédent

[ÿ] et [ï] Sélectionne (sans l’ouvrir) l’onglet précédent

[Ÿ] et [î] Sélectionne (sans l’ouvrir) l’onglet suivant

Ajouter des boutons pour faciliter la navigationAu début de ce chapitre, nous avons implémenté une navigation manuelle dans lecomposant ViewStack en utilisant une ComboBox. Pour les composants Accordion ou unTabNavigator, une méthode de navigation est fournie par défaut. Cependant il peut êtreenvisageable de rajouter des boutons pour avoir un second mode d’accès aux conteneurs.Il suffirait ainsi dans notre exemple précédent de rajouter des boutons Suivant etPrécédent à chaque formulaire en utilisant ActionScript pour changer l’affichage :

<mx:Button id="prec" label="Précédent"click="ExempleAccordion.selectedIndex =(( ExempleAccordion.selectedIndex➥ - 1) % ExempleAccordion.numChildren);"/>

<mx:Button id="suiv" label="Suivant"click="ExempleAccordion.selectedIndex =(( ExempleAccordion.selectedIndex➥ + 1) % ExempleAccordion.numChildren);"/>

Le principe est très simple. L’onglet sélectionné est modifié en incrémentant ou endécrémentant la propriété selectedIndex du composant, et un modulo utilisant lapropriété numChildren (nombre total d’onglets) permet de rendre la navigation circulaire.On peut donc passer du dernier onglet au premier et vice versa.

7.4 Mise en pratique : mon CV en ligneNous allons mettre en pratique la navigation dans une application Flex en réalisant unexemple de CV en ligne. Nous utiliserons plusieurs conteneurs pour mettre en forme leséléments, le composant HtmlText pour structurer les informations et également unAccordion pour séparer les différentes catégories.


218

Création du projetCommencez par créer un nouveau projet que vous appellerez MyResume. Nous allonstout de suite changer l’apparence du fond ainsi que la disposition de l’application.

Mettez le layout de l’application à vertical et changez la couleur de fond par undégradé de couleurs, par exemple de la manière suivante :

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical" backgroundGradientColors="[#007ab7,#FFFFFF]"

pageTitle="MyResume">

</mx:Application>

Ajoutez une VBox qui représentera la page du CV. Le conteneur aura une taille fixe(600 × 700 par exemple). Nous allons également ajouter un contour et mettre un fondblanc. Le mieux est d’utiliser les outils du mode Design de Flex Builder 3.

Ensuite, ajoutez une ombre portée. Il vous faut utiliser la balise <mx:Filter> qui permetd’appliquer les effets de Flash à n’importe quel composant Flex. Nous utiliserons ici leDropShadowFilter comme ceci :

<mx:filters><flash.filters:DropShadowFilter

xmlns:flash.filters="flash.filters.*" angle="60"blurX="5" blurY="5" distance="4" alpha="0.6" color="0x000000" /></mx:filters>

Ce qui donnera le rendu visuel suivant :

Vous devez maintenant rajouter dans la partie supérieure de votre CV les informationssuivantes :

j nom et prénom ;j coordonnées ;j photographie.

c Fig. 7.15 :Utilisation du filtre DropDownShadow

7Mise en pratique : mon CV en ligne

219

Nous allons utiliser un conteneur de type HBox qui ne concernera que la partie supérieurede la page. La HBox contiendra elle-même deux VBox et un Label pour afficher le titre duCV. Nous séparerons les composants grâce à des Spacer. Les informations personnellesseront placées dans le conteneur de gauche et la photo dans celui de droite. Voici le codeMXML pour l’instant :

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical" backgroundGradientColors="[#007ab7,#FFFFFF]"

pageTitle="MyResume"><mx:VBox width="600" height="700" borderStyle="outset"

borderColor="Black" backgroundColor="#FFFFFF" ><mx:filters>

<flash.filters:DropShadowFilterxmlns:flash.filters="flash.filters.*"angle="60" blurX="5" blurY="5"distance="4" alpha="0.6" color="0x000000" />

</mx:filters><mx:HBox width="100%" verticalAlign="middle"

color="#0E4084" backgroundColor="#8cbbfa"backgroundAlpha="0.2">

<mx:VBox height="100%" paddingLeft="10" paddingTop="5"><mx:Label text="Mr Stan Smith"

fontFamily="Verdana"fontSize="13"fontWeight="bold"

<mx:Label text="22, rue des Petits-Hôtels"fontFamily="Verdana" fontSize="11"/>

<mx:Label text="75010 Paris" fontFamily="Verdana"fontSize="11"/>

<mx:Label text="+33 1 42 37 ** **"fontFamily="Verdana" fontSize="11"/>

<mx:Label text="[email protected]"fontFamily="Verdana" fontSize="11"/>

</mx:VBox><mx:Spacer width="50%"/><mx:Label text="Ingénieur en Informatique"fontFamily="Verdana" fontSize="20" enabled="true"/><mx:Spacer width="50%"/>

<mx:VBox height="100%" verticalAlign="bottom"><mx:Image source="photo.jpg"/>

</mx:VBox></mx:HBox>

</mx:VBox>

</mx:Application>


220

Ajout d’un composant de navigationNous allons maintenant ajouter le composant Accordion qui représentera les différentescatégories de votre CV, à savoir :

j formation ;j expérience ;j compétences ;j langues ;j divers.

Chaque catégorie sera évidemment classée dans un conteneur puisque l’Accordionn’accepte que ce type de composants :

<mx:Accordion width="100%"><mx:VBox label="Formation"></mx:VBox>

<VBox label="Expérience"></mx:VBox>

<mx:VBox label="Compétences"></mx:VBox>

<mx:VBox label="Langues"></mx:VBox>

<mx:VBox label="Divers"></mx:VBox>

</mx:Accordion>

Ajout des informationsIl faut maintenant ajouter des informations pour chaque catégorie. Le plus simple pourformater le texte est d’utiliser la propriété htmlText qui, comme son nom l’indique,permet d’afficher correctement du code HTML dans un composant Text standard :

<mx:Text><mx:htmlText>

<![CDATA[]]>

</mx:htmlText></mx:Text>


221

Le code HTML des sous-catégories ne sera pas affiché pour des raisons de place. Nousvous laissons donc le soin d’y mettre vos propres informations.

Mise en forme et designVous allez à présent modifier légèrement l’apparence des boutons de votre composantAccordion.

Pour le design des composants, nous vous conseillons d’utiliser le Flex Style Explorerque vous pouvez lancer à partir de l’écran d’accueil de Flex Builder 3. Vous pourrez ainsimodifier les paramètres de chaque composant et avoir un aperçu direct du résultat. Aufinal, il ne restera plus qu’à copier le CSS généré, comme celui-ci par exemple :

Accordion {borderStyle: none;headerHeight: 25;textIndent: 3;fillAlphas: 0.21, 0.19, 0.3, 0.3;fillColors: #ffffff, #8cbbfa, #8cbbfa, #8cbbfa;selectedFillColors: #8cbbfa, #8cbbfa;themeColor: #8cbbfa;headerStyleName: "myaccordionHeader";

}

.myaccordionHeader {letterSpacing: 1;

}

Résultat finalVoici le code final (sans la partie HTML) de cet exemple de CV en ligne :


layout="vertical" backgroundGradientColors="[#007ab7,#FFFFFF]"➥ pageTitle="MyResume"><mx:Style>

Accordion {borderStyle: none;headerHeight: 25;textIndent: 3;fillAlphas: 0.21, 0.19, 0.3, 0.3;fillColors: #ffffff, #8cbbfa, #8cbbfa, #8cbbfa;selectedFillColors: #8cbbfa, #8cbbfa;themeColor: #8cbbfa;


222

headerStyleName: "myaccordionHeader";}

.myaccordionHeader {letterSpacing: 1;

}</mx:Style><mx:VBox width="600" height="700" borderStyle="outset"

borderColor="Black"backgroundColor="#FFFFFF" >

<mx:filters><flash.filters:DropShadowFilterxmlns:flash.filters="flash.filters.*" angle="60"blurX="5" blurY="5"

distance="4" alpha="0.6" color="0x000000" /></mx:filters><mx:HBox width="100%" verticalAlign="middle" color="#0E4084"backgroundColor="#8cbbfa" backgroundAlpha="0.2">

<mx:VBox height="100%" paddingLeft="10" paddingTop="5"borderStyle="none" backgroundAlpha="0.11">

<mx:Label text="Mr Stan Smith" fontFamily="Verdana"fontSize="13" fontWeight="bold"/><mx:Label text="22, rue des Petits-Hôtels"fontFamily="Verdana" fontSize="11"/><mx:Label text="75010 Paris" fontFamily="Verdana"fontSize="11"/><mx:Label text="+33 1 42 37 ** **" fontFamily="Verdana"fontSize="11"/><mx:Label text="[email protected]" fontFamily="Verdana"fontSize="11"/>

</mx:VBox><mx:Spacer width="50%"/><mx:Label text="Ingénieur en Informatique"fontFamily="Verdana" fontSize="20" enabled="true"color="#0E4084"/><mx:Spacer width="50%"/>

<mx:VBox height="100%" verticalAlign="bottom"><mx:Image source="photo.jpg"/>

</mx:VBox></mx:HBox><mx:Accordion width="100%" height="100%">

<mx:VBox label="Formation"><mx:Text>

<mx:htmlText><![CDATA[

PARTIE HTML]]>

</mx:htmlText>


223

</mx:Text></mx:VBox><mx:VBox label="Expérience"><mx:Text>


PARTIE HTML]]>

</mx:htmlText></mx:Text></mx:VBox><mx:VBox label="Compétences"><mx:Text>


PARTIE HTML]]>

</mx:htmlText></mx:Text>

</mx:VBox><mx:VBox label="Langues"><mx:Text>


PARTIE HTML]]>

</mx:htmlText></mx:Text></mx:VBox><mx:VBox label="Divers"><mx:Text>


PARTIE HTML]]>

</mx:htmlText></mx:Text></mx:VBox>

</mx:Accordion></mx:VBox>

</mx:Application>



224


a comment manipuler le composant ViewStack et ajouter des conteneurs enfants ;a comment gérer la navigation de manière manuelle ;a comment manipuler les barres de navigation ;a comment automatiser la navigation avec le concept de dataProvidera comment utiliser les composants de navigation intégrés (TabNavigator et

Accordion) ;a comment naviguer au clavier.

c Fig. 7.16 : Exemple de CV utilisant la navigation Flex

7Check-list

225

88.1 Utiliser les comportements .............................. 2288.2 Ajouter des effets ........................................ 2348.3 ViewStates et transitions ................................ 2388.4 Styliser l’interface ........................................ 2428.5 Item renderers et editors ............................... 2448.6 Check-list ................................................. 249

Personnalisersonapplication

L’avantage d’utiliser des technologies telles que Flex estde pouvoir créer des applications fonctionnelles aussi

agréables à voir et à utiliser. Ainsi, les animationspermettent notamment la mise en exergue deschangements de mise en page et de modifications dansl’agencement des différents composants de vosapplications.

8.1 Utiliser les comportementsÀ ce stade de lecture, Flex commence à ne plus avoir de secrets pour vous. Bienévidemment, vous savez comment créer une application Flex, comment gérer les donnéesnécessaires au fonctionnement de celle-ci, comment les afficher et les mettre en forme,mais le chemin reste long avant de maîtriser toutes les possibilités qu’Adobe vous offreà travers la technologie Flex.

Ainsi, dans ce chapitre, il vous est proposé de découvrir comment améliorergraphiquement votre application grâce aux multiples effets graphiques mis à votredisposition ainsi qu’aux styles MXML qui se rapprochent beaucoup des traditionnellesCSS (Cascading Style Sheets).

Les comportements sont des mouvements ou des animations qui serviront de réponsesanimées aux actions des utilisateurs de votre application.

C’est, par exemple, grâce aux comportements qu’une boîte de dialogue apparaîtradoucement comme sortant de l’interface principale.

Comment fonctionnent les comportements ?Pour mettre en œuvre les comportements, il faut en fait utiliser deux notions de Flex : lestriggers, qui se rapprochent dans leur fonctionnement des événements, et les effets.

Un trigger est une action telle que cliquer sur un bouton à l’instant où un composantdevient visible tandis qu’un effet est un changement visuel d’un composant cible pendantun laps de temps décompté en millisecondes. Les effets les plus connus sont lesmouvements, les redimensionnements ou les fondus.

Différence entre les événements et les triggers

Il ne faut pas confondre les événements et les triggers. Par exemple, un <mx:TextArea> possède à la foisl’événement creationComplete et le trigger creationCompleteEffect. Bien sûr, l’événement va fairecommencer le trigger correspondant, mais alors que l’événement exécute l’action décidée lorsqu’ilarrive, le trigger ne fait que s’associer avec un effet.


<mx:WipeRight id="monPremierEffet" duration="1000"/><mx:TextArea creationCompleteEffect="{monPremierEffet}"/>

</mx:Application>

8 Personnaliser son application

228

Dans l’exemple suivant, vous découvrirez comment déclarer un effet grâce à une baliseMXML. Ensuite, il suffit de le faire correspondre au trigger voulu en utilisant la liaisonde données. Ainsi, le TextArea apparaîtra comme en se répandant de la gauche vers ladroite.

Les effets disponibles dans FlexAvant d’apprendre à créer vous-même des effets, nous allons étudier tout d’abord quelssont les effets fournis par Flex que nous pourrons ajouter à nos applications.

Tableau 8.1 : Liste des effets disponibles dans Flex

Effet Description

AnimateProperty Cet effet propose de faire évoluer une propriété numérique (property)d’un composant d’une valeur (fromValue) vers une autre (toValue) durantun laps de temps défini (duration). Par exemple, vous pouvez fairegrandir un <mx:Button> en agissant sur sa propriété width.

Blur Cet effet fait apparaître un flou sur les bords du composant sur lequel il estappliqué comme s’il se dissolvait dans le reste de l’interface.

Dissolve Cet effet permet de faire baisser la valeur alpha (transparence) ducomposant en partant de la valeur alphaFrom jusqu’à alphaTo (0.0= totalement transparent, 1.0 = totalement opaque). La transition estpossible dans les deux sens. Attention, la propriété color de l’effet permetde régler la couleur de la couche dans laquelle disparaît le composant.

Fade Cet effet est le contraire de l’effet Dissolve. On fait apparaître uncomposant en augmentant progressivement sa valeur alpha.

Glow Cet effet affiche un halo lumineux autour de l’élément sur lequel l’effet estappliqué.

c Fig. 8.1 :Le début de l’affichage du TextArea

c Fig. 8.2 :La fin de l’affichage du TextArea

8Utiliser les comportements

229

Tableau 8.1 : Liste des effets disponibles dans Flex

Iris Cet effet Iris est une animation qui fait apparaître le composant commeun rectangle qui s’agrandit des dimensions scaleXFrom et scaleYFrom auxdimensions scaleXTo et scaleYTo.

Move Cet effet permet le déplacement d’un composant de la position (xFrom,yFrom) à la position (xTo, yTo).La valeur de départ ou d’arrivée peut être omise si vous spécifiez la valeurxBy ou yBy qui donne le nombre de pixels de déplacement.

Pause Cet effet ne fait rien pendant une période de temps définie.Cet effet est utile lorsque vous composez plusieurs effets comme nous leverrons par la suite.

Resize Cet effet permet le redimensionnement d’un composant des valeurswidthFrom et heightFrom aux valeurs widthTo et heightTo. De mêmeque pour l’effet Move, il peut être spécifié la valeur widthBy et/ouheightBy qui permet d’omettre une des propriétés expliquéesprécédemment.

Rotate Cet effet fait effectuer une rotation au composant de angleFrom à angleToautour du point originX et originY.

SoundEffect Cet effet joue un son MP3 lors du déclenchement du trigger. Le MP3 estspécifié dans la propriété source de cet effet.

WipeLeft, WipeRight,WipeUp, WipeDown

Cet effet affiche un composant comme "s’il sortait de lui-même" vers lagauche, la droite, le haut ou le bas, suivant l’effet utilisé.

Zoom Cet effet permet de faire un zoom grossissant ou rapetissant sur uncomposant. Le zoom part de la taille zoomHeightFrom et zoomWidthFrompour afficher en fin d’animation le composant en taille zoomHeightTo etzoomWidthTo.Ces quatre propriétés spécifient en nombre de fois la taille initiale ducomposant.

Appliquer les comportements aux composantsLes comportements sont, comme la plupart des concepts Flex, applicables en MXML ouen ActionScript.

En MXML

Pour appliquer un comportement en MXML, nous utilisons la propriété correspondanteau nom du trigger désiré. À cette propriété, nous affectons la valeur d’un effet déclaréplutôt en liant le trigger avec l’identifiant de l’effet.


230

Par exemple, on déclare l’effet <mx:WipeUp> en lui assignant l’identifiant monWU :

<mx:WipeUp id="monWU" duration="500"/>

Puis on l’affecte à notre bouton en utilisant la propriété creationCompleteEffect :

<mx:Button label="Mon Bouton" creationCompleteEffect="{monWU}" />

Ainsi, le bouton apparaîtra de bas en haut.

Il est aussi pertinent de pouvoir faire évoluer les comportements en fonction de donnéesprovenant de l’utilisateur. Imaginons une application qui afficherait une image surlaquelle l’utilisateur pourrait zoomer en indiquant une valeur de zoom dans un TextInputpuis en cliquant sur l’image :


<mx:Zoom id="monZoom" zoomHeightTo="{Number(zoomValue.text)}"zoomWidthTo="{Number(zoomValue.text)}"/>

<mx:Image source="img\Alien1.jpg" mouseDownEffect="{monZoom}"/><mx:Label text="Indiquez le zoom voulu pour l’image puis cliquez

➥ dessus."/><mx:TextInput id="zoomValue" text=""/>

</mx:Application>

Vous pouvez donc observer que la valeur de zoom est en fait liée avec la valeur contenuedans la balise <mx:TextInput>.

Conversion du texte en nombre

Pour ne pas obtenir d’erreurs avec cet exemple, il faut bien penser à utiliser la méthode Number() dulangage ActionScript afin de convertir le texte en nombre.

Vous pouvez également appliquer des comportements en utilisant les styles MXML (quevous découvrirez plus en détail dans la suite de ce chapitre). Chaque trigger est aussiimplémenté dans un style MXML, ce qui permet de l’associer à un effet en utilisant lesbalises <mx:Style> ou en utilisant les méthodes ActionScript : setStyle() etgetStyle() :

<?xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Style>Image { mouseDownEffect: monZoom; }


231

</mx:Style><mx:Zoom id="monZoom" zoomHeightTo="{Number(zoomValue.text)}"

zoomWidthTo="{Number(zoomValue.text)}"/><mx:Image source="img\Alien1.jpg"/><mx:Label text="Indiquez le zoom voulu pour l’image puis cliquez

➥ dessus."/><mx:TextInput id="zoomValue" text=""/>

</mx:Application>

En ActionScript

Pour appliquer des effets sans forcément passer par les triggers, il est possible d’utiliserdirectement les effets en ActionScript en utilisant la méthode play().

Le principe est de paramétrer un effet en ActionScript en s’aidant d’une fonctiond’événement, puis de l’appliquer (en appelant sa méthode play()) sur un composant, lorsd’un événement concernant un autre composant. Par exemple, le clic sur un boutonpermettra la dissolution (<mx:Dissolve>) d’une image.

Dans un premier temps, voyons comment paramétrer un effet en ActionScript :

// On importe d’abord les classes nécessaires :import mx.effects.Dissolve// puis on déclare l’effet qu’on instancie immédiatementprivate var monDiss:Dissolve = new Dissolve();//ensuite on déclare une fonction qui sera appelée//lors de l’événement creationComplete de l’applicationprivate function creerEffet(eventO:Event) :void{

//On remplit les différentes propriétés nécessaires à l’effetmonDiss.alphaTo = 0.0;monDiss.duration = 2000;//On assigne une cible pour notre effetmonDiss.target = monImage;

}

Et ensuite nous demandons à l’événement click du <mx:Button> d’appeler la méthodeplay() de l’effet déclaré en ActionScript :

<mx:Button label="Dissoudre" click="monDiss.play();"/>

Nous rajoutons une image dans notre application pour enfin obtenir le fichier :

<?xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"creationComplete="creerEffet(event);">


232


// On importe d’abord les classes nécessaires :import mx.effects.Dissolve// puis on déclare l’effet qu’on instancie immédiatementprivate var monDiss:Dissolve = new Dissolve();//ensuite on déclare une fonction qui sera appelée//lors de l’événement creationComplete de l’applicationprivate function creerEffet(eventO:Event) :void{

//On remplit les différentes propriétés nécessaires à l’effetmonDiss.alphaTo = 0.0;monDiss.duration = 2000;//On assigne une cible pour notre effetmonDiss.target = monImage;

}]]>

</mx:Script><mx:Image source="img\Alien1.jpg" id="monImage"/><mx:Button label="Dissoudre" click="monDiss.play();"/>

</mx:Application>

Utilisation de la méthode end()

Il est conseillé d’appeler avant la méthode play() la méthode end() qui permet de s’assurer quel’effet voulu n’est pas déjà en cours d’application, auquel cas il serait stoppé pour appliquer le nouveleffet.

Vous pouvez également spécifier à l’effet d’agir sur plusieurs composants en passant untableau de composants à la propriété targets de l’effet. C’est ce que montre l’exemplesuivant :


<mx:Resize id="monRes" widthTo="50" heightTo="50"targets="{[button1, button2, button3]}" duration="500"/>

<mx:Button id="button1"/><mx:Button id="button2"/><mx:Button id="button3"/><mx:Button label="On agrandit !" click="monRes.end();

➥ monRes.play();"/></mx:Application>


233

8.2 Ajouter des effetsMaintenant que nous avons abordé les effets simples, nous allons voir comment lescombiner ou comment utiliser les fonctions avancées des effets.

Retarder le lancement d’un effetLa propriété startDelay est utile lorsque vous combinez plusieurs effets comme nousallons le voir dans le point suivant. Elle permet de définir une durée au terme de laquellel’effet démarrera. Il suffit d’indiquer dans la propriété le nombre de millisecondes désiréespour le lancement de l’effet :

<mx:Rotate duration="1000" id="rotationRetardee" startDelay="100"/>

Combiner plusieurs effetsSouvent, les effets simples atteignent leurs limites et vous aimeriez pouvoir les combinerde manière à obtenir des "animations" plus agréables. Il existe deux méthodes qui sont lessuivantes :

j la mise en parallèle, qui exécute les effets en même temps ;j la mise en séquence, qui exécute les effets les uns après les autres.

<mx:Parallel>Cette classe Flex permet le lancement simultané de plusieurs effets. Si vous voulezeffectuer un redimensionnement tandis que votre composant subit une rotation, il voussuffit de mettre en parallèle les effets Resize et Rotate :


<mx:Parallel id="zoomAndResize"><mx:Zoom zoomHeightTo="1.5" zoomWidthTo="1.5"/><mx:Rotate />

</mx:Parallel><mx:Image source="img\Alien1.bmp" mouseDownEffect="{zoomAndResize}"/>

</mx:Application>

Vous pouvez observer maintenant votre image qui s’agrandit en tournant sur elle-mêmelorsque vous cliquez dessus.


234

<mx:Sequence>Il peut être aussi intéressant d’appliquer plusieurs effets à un composant les uns après lesautres.

Par exemple, vous voulez d’abord voir s’agrandir votre TextArea par le milieu avant dele voir bouger vers la droite. Pour cela, il faut ajouter les effets Iris et Move dans le corpsde la balise <mx:Sequence> :


<mx:Sequence id="irisThenMove"><mx:Iris /><mx:Move xBy="10" />

</mx:Sequence><mx:TextArea text="Exemple de séquence d’effets"mouseDownEffect="{irisThenMove}"/>

</mx:Application>

Combinaison de… combinaisons !

À présent, vous pouvez multiplier les combinaisons presque sans fin, car vous pouvezimbriquer des Sequence dans des Parallel et inversement :


<mx:Sequence id="combinaisonOfCombinaison"><mx:Parallel duration="2000">

<mx:Iris /><mx:Rotate />

</mx:Parallel><mx:Move xBy="10" />

</mx:Sequence><mx:TextArea text="Exemple de combinaisons d’effets"mouseDownEffect="{combinaisonOfCombinaison}"/>

</mx:Application>

La propriété duration

La propriété duration comme startDelay ou d’autres propriétés de temps s’appliquent à chacun deseffets présents dans la combinaison.

8Ajouter des effets

235

Combiner en ActionScript

Bien évidemment, et vous en avez maintenant l’habitude, vous disposez d’un équivalentActionScript de ce que nous venons de voir précédemment.

En effet, les classes ActionScript Parallel et Sequence disposent de la méthodeaddChild() qui prend en argument un objet de type Effect. Vous pouvez donc ajouter deseffets enfants aux objets de type Parallel et Sequence et ensuite les utiliser comme nousl’avons déjà vu avec les effets simples.

Créer son propre effet d’apparitionVoyons comment créer un effet du type MaskEffect comme le sont Iris et la famille des"Wipe". Ces effets sont en fait le résultat du mouvement d’un masque rectangulaire pourles Wipe* et de l’agrandissement d’un masque rectangulaire centré pour Iris.

Pour créer vos propres effets, il faudra créer un nouveau masque en utilisant la propriétécreateMaskFunction.

Nous allons ainsi réaliser l’effet Iris qui, au lieu d’un rectangle qui s’agrandit, feraapparaître le composant avec un disque qui s’agrandit.

Tout d’abord, nous devons fabriquer l’objet de type Shape qui sera transmis à notre effetIris. Pour cela, nous instancions un objet Shape puis nous lui donnons lescaractéristiques nécessaires afin que notre disque ait le bon diamètre final, la bonneposition, etc.

public function createRoundMask(targ:Object, compDest:Rectangle):Shape{

// On instancie l’objet.var roundMask:Shape = new Shape();// Puis on dessine un disqueroundMask.graphics.beginFill(0x00000, 0.0);// On place notre disque de façon à le centrer sur le composant// ainsi nous avons besoin d’avoir le centre du disque// au centre du rectangleroundMask.graphics.drawCircle(compDest.width/2,compDest.height/2,

Math.sqrt((compDest.height * compDest.height) +(compDest.width * compDest.width)));

// La dimension du rayon est calculée grâce au théorème de// Pythagore ( !) afin d’obtenir un cercle circonscrit au rectangle.roundMask.graphics.endFill();

return roundMask;}


236

Ensuite, nous déclarons notre effet, en déclarant quelle est la fonction qui va créer notremasque (vous aurez compris que c’est celle que l’on vient de coder) grâce à la propriétécreateMaskFunction :

<mx:Iris duration="2000" id="showWL"createMaskFunction="createRoundMask"showTarget="true"/>

La propriété showTarget

La propriété showTarget sert à indiquer à Flex si nous voulons afficher le composant sur lequel estappliqué l’effet ou pas à la fin de l’animation. Dans le cadre d’un effet de disparition de composant,cette propriété sera à false. Or, nous voulons que notre effet fasse apparaître le composant : nousréglons donc la propriété sur true.

Enfin, nous obtenons :


<mx:Script><![CDATA[public function createRoundMask(targ:Object,

➥ compDest:Rectangle):Shape{

var roundMask:Shape = new Shape();roundMask.graphics.beginFill(0x00000, 0.0);roundMask.graphics.drawCircle(compDest.width/2,compDest.height/2,

Math.sqrt((compDest.height * compDest.height) +(compDest.width * compDest.width)));

roundMask.graphics.endFill();

return roundMask;}

]]></mx:Script><mx:Iris duration="2000" id="showWL"

createMaskFunction="createRoundMask" showTarget="true"/><mx:Image source="@Embed(’img\Alien1.jpg’)"mouseDownEffect="{showWL}"/>

</mx:Application>

8Ajouter des effets

237

8.3 ViewStates et transitionsLes ViewStates sont les différents affichages de votre application. Par exemple, votreinterface peut avoir un écran général qui va être enrichi si l’utilisateur s’enregistre afind’afficher un nouveau menu, un panneau qui récapitule les informations de l’utilisateur,etc.

Flex permet grâce au mécanisme de ViewStates de structurer votre application afin degérer efficacement les différents affichages de votre interface sans avoir à gérer desévénements qui pourraient être complexes sans ce mécanisme.

De leur côté, les transitions sont l’application des effets vus précédemment auxchangements de ViewStates.

Mettre en œuvre les ViewStatesEn premier lieu, vous devez retenir que les ViewStates sont applicables à n’importe quelcomposant Flex, y compris le composant principal : <mx:Application>. La propriétécurrentState devra être nulle pour signifier que le composant appartient à la vue de baseet sera changée afin de n’afficher que les composants qui appartiennent à telle ou tellevue.

Nous allons à présent découvrir les ViewStates à travers un exemple qui affichera lesdétails d’une image si l’utilisateur clique sur un lien, et les cachera s’il clique de nouveausur ce même lien.

c Fig. 8.3 :Début de l’effet Iris personnalisé

c Fig. 8.4 :L’effet Iris personnalisé en cours


238

Tout d’abord, nous devons créer l’interface basique qui consistera à afficher une image,avec en dessous d’elle juste son nom et un lien pour afficher par la suite des détails surl’image :


<mx:Panel id="presObj" title="Image"><mx:Image id="imgExp" source="img\Balloon.bmp"/><mx:ControlBar>

<mx:VBox id="vBoxInfo"><mx:Label text="{imgExp.source}"/>

</mx:VBox></mx:ControlBar>


Jusque-là, rien de bien difficile, nous avons juste défini un Panel qui contient une imageet une barre de contrôle pour afficher le chemin vers cette image.

Maintenant, nous allons ajouter dans la barre de contrôle le lien qui permettra de passerde la vue de base, celle-ci (currentState="") à la vue détaillée(currentState="details") :

<mx:LinkButton label="Afficher les détails"id="affDetails" click="currentState=’details’"/>

C’est à ce moment précis que nous devons déterminer ce que nous voulons dans la vuedétaillée :

j un label affichant les dimensions de l’image ;j un champ de texte pour éventuellement ajouter des mots-clés à l’image ;j un lien pour revenir à la vue simple.

c Fig. 8.5 :Notre image et son chemin

8ViewStates et transitions

239

Définissons donc notre vue détaillée grâce à la balise <mx:State>. Nous inclurons cettebalise dans une liste d’états grâce à : <mx:states>. La méthode AddChild permetd’ajouter des composants qui seront enfants du composant renseigné dans la propriétérelativeTo. Ensuite, il ne nous reste plus qu’à modifier le titre du panel pour indiquerque l’on est en vue détaillée, puis à supprimer le lien affDetails qui n’a plus lieu d’être :

<mx:states><mx:State name="details">

<mx:AddChild relativeTo="{vBoxInfo}"position="lastChild" creationPolicy="all"><mx:Label text="96 * 96"/>

</mx:AddChild><mx:AddChild relativeTo="{vBoxInfo}"

position="lastChild" creationPolicy="all"><mx:TextInput text="mots clefs"/>


position="lastChild" creationPolicy="all"><mx:LinkButton label="Retour à la vue simple"

click="currentState=’’"/></mx:AddChild><mx:SetProperty target="{presObj}"

name="title" value="Détails de l’image"/><mx:RemoveChild target="{affDetails}"/>

</mx:State></mx:states>

Ce qui donne le fichier suivant :


<mx:states><mx:State name="details">

<mx:AddChild relativeTo="{vBoxInfo}"position="lastChild" creationPolicy="all"><mx:Label text="96 * 96"/>


position="lastChild" creationPolicy="all"><mx:TextInput text="mots clefs"/>


position="lastChild" creationPolicy="all"><mx:LinkButton label="Retour à la vue simple"click="currentState=’’"/>

</mx:AddChild>


240

<mx:SetProperty target="{presObj}"name="title" value="Détails de l’image"/>

<mx:RemoveChild target="{affDetails}"/></mx:State>

</mx:states>

<mx:Panel id="presObj" title="Image"><mx:Image id="imgExp" source="img\Balloon.bmp"/><mx:ControlBar>

<mx:VBox id="vBoxInfo"><mx:Label text="{imgExp.source}"/><mx:LinkButton label="Afficher les détails"

id="affDetails" click="currentState=’details’"/></mx:VBox>


</mx:Application>

Appliquer des transitionsLes transitions permettent des changements de vue de l’interface très esthétiques. Ellespermettent de redimensionner, ou de bouger les composants de l’application lors d’unchangement de ViewState de celle-ci.

c Fig. 8.6 :Exemple d’utilisation d’une ViewState enmode Simple

c Fig. 8.7 :Exemple d’utilisation d’une ViewState enmode Détail

8ViewStates et transitions

241

Ainsi, les changements dans l’interface seront moins brusques et pourront faire apparaîtrede manière moins abrupte les nouveaux composants du nouvel état.

Grâce aux propriétés toState et fromState, nous définissons pour chaque transition àquel moment elle doit agir. Il existe cependant la wildcard (*) qui permet de prendre encompte tous les états.

Les transitions sont regroupées dans un élément <mx:transitions> et elles contiennentdes éléments Parallel, Sequence, ou directement les effets voulus pour lesquels on aprécisé les cibles grâce aux propriétés target (si la cible est unique) et targets (si lescibles sont multiples).

Vous pouvez tester ce que sont les transitions en ajoutant à l’exemple concernant lesViewStates le morceau de code suivant :

<mx:transitions><mx:Transition fromState="*" toState="*">

<mx:Rotate duration="2000" target="{imgExp}"/></mx:Transition>

</mx:transitions>

Les transitions sont dans leur fonctionnement et leurs possibilités identiques aux effets.Nous vous conseillons dans cette optique de vous reporter à la section traitant de cesderniers.

8.4 Styliser l’interfacePour les développeurs web chevronnés, la notion de style d’un élément ou d’une page n’apas de secret.

En Flex comme en HTML traditionnel, vous avez la possibilité de changer l’apparencevisuelle de votre application en utilisant des styles qui reprennent la syntaxe CSS. Unautre point commun avec le HTML est la possibilité de styler son application de troismanières : en utilisant une feuille de style extérieure, en incluant tous les styles entre lesbalises <mx:Style> ou alors en incluant directement les déclarations de style dans lesbalises concernées en utilisant les propriétés adéquates.

Plusieurs choses ne sont cependant pas paramétrables grâce aux CSS. En effet, lescoordonnées de positionnement, la hauteur et la largeur des composants sont despropriétés de classes Flex et non des styles. Ainsi, nous devons continuer de passer parles propriétés pour pouvoir les modifier.

Par ailleurs, nous verrons qu’il est aussi possible de modifier le style des composants enpassant par l’ActionScript.


242

La balise <mx:Style>Cette balise est la base de tout le système de décoration de vos applications. En effet, quece soit pour l’inclusion de feuilles de style externes ou la déclaration locale de style, nousfaisons appel à cette balise :

<mx:Style source="maCSS.css"/><mx:Style>

.monStyle { text-align : center;}</mx:Style>

Les classes de styleNous appelons classe de style la déclaration d’un ensemble de propriétés d’affichageregroupées sous un même nom, qui vont ensuite être appliquées à tous les composantsdont la propriété styleName contiendra le nom du groupe.

En plus simple, soit la déclaration de la classe de style maClasseStyle :

<mx:Style>.maClasseStyle {text-align : center;fontSize : 10;color : #FFFF ;}

</mx:Style>

Tous les composants qui ont maClasseStyle comme valeur de leur propriété styleNameauront leur texte affiché en mode Centré, avec une police de taille 10 et de couleurblanche.

Par extension, nous pouvons déclarer des styles pour toute une catégorie de composants :

<mx:Style>TextArea {text-align : center;fontSize : 10;color : #FFFF ;}

</mx:Style>

Ainsi, tous les TextArea bénéficieront des styles déclarés comme précédemment.

Le StyleManagerLa classe StyleManager permet d’atteindre les styles de toutes les instances d’une classeà l’exécution. Par exemple :

8Styliser l’interface

243

StyleManager.getStyleDeclaration("Image").setStyle("Border", 0)

De cette façon, toutes les images de l’application vont avoir leur propriété de style Bordermise à 0.

Cette classe permet de remettre à jour tous les styles d’un type de composant aulancement de l’application.

Le style inlinePour chaque composant, vous avez la possibilité de modifier ses propriétés de styledirectement dans la balise.

Suivant le type du composant, plusieurs propriétés sont à votre disposition pour modifierl’aspect visuel de vos applications Flex :

<mx:HBox width="100" height="100" backgroundColor="{couleur}"/>

Ce qui permet de modifier le style du composant en utilisant un événement :



[Bindable]public var color:uint= 0x0;public function changeColor() : void{color = 0xFFFFFF;

}]]>

</mx:Script><mx:HBox backgroundColor="{color}" width="50" height="50"/><mx:Button click="changeColor()"/>

</mx:Application>

8.5 Item renderers et editorsLes items renderers et editors permettent aux contrôle-listes fournis par Flex d’afficheret d’éditer correctement un certains type de données grâce à des connecteurs spéciaux.Pour reprendre l’exemple le plus courant, vous pouvez grâce aux items renderers faireafficher à vos listes des images qui seront présentées visuellement sous forme d’image etnon seulement sous forme de chemin comme elles pourraient l’être sans ces derniers.


244

Les composants Flex qui sont des listes sont les suivants :

j DataGrid ;j HorizontalList ;j List ;j TileList ;j Tree ;j Menu.

Ces derniers permettent d’afficher une collection d’objets que l’utilisateur pourraparcourir, et dans laquelle il pourra sélectionner un ou plusieurs items. De plus, les Tree,les DataGrid et les List permettent aux utilisateurs (si cela a été précisément formulédans le code : editable="true") d’éditer les données affichées dans leurs cellules. C’estici qu’interviennent les items editors.

Par défaut, l’item renderer du DataGrid ne permet que d’afficher des chaînes decaractères, tandis que les autres permettent d’afficher du texte combiné à des images. Flexnous permet de créer nos propres items renderers et editors afin d’afficher des donnéesmises en forme dans les composants de type List.

Nous allons maintenant voir comment créer nos propres items afin de pouvoir afficher ceque nous souhaitons dans une liste.

Vous verrez qu’il existe trois façons de le faire :

j en appelant les renderers et editors fournis par Flex, c’est la méthode drop−in ;j en appelant les renderers et editors fournis par Flex et en les paramétrant comme

des composants traditionnels, c’est la méthode inline ;j en créant un composant personnalisé qui sera utilisé ensuite en mode Inline ou

Drop-in.

Vous pouvez vous reporter au chapitre 6 Aller vers une interface riche pour plusde précisions sur la création de composants personnalisés.

Utiliser des renderers et des editors en méthode drop-inFlex fournit des composants prêts à utiliser des données pour l’affichage dans lescomposants listes. Ainsi, grâce aux propriétés itemRenderer et itemEditor, il est facile demodifier le comportement par défaut.

Voici comment insérer dans un DataGrid un éditeur permettant d’incrémenter ou dedécrémenter un nombre :

8Item renderers et editors

245



[Bindable]public var itemListe:Array = [

{name:"Item 1", qte:58},{name:"Item 2", qte:51},{name:"Item 3", qte:37}];

]]></mx:Script><mx:DataGrid variableRowHeight="true" dataProvider="{itemListe}"

editable="true">

<mx:columns><mx:DataGridColumn dataField="name" headerText="Nom"/><mx:DataGridColumn dataField="qte" headerText="quantité"

itemEditor="mx.controls.NumericStepper"editorDataField="value"/>


</mx:Application>

L’éditeur qui s’appelle donc NumericStepper travaille sur des nombres (c’est pourquoinous déclarons directement le tableau (array) avec des entiers (int)) et permetd’incrémenter ou de décrémenter de un. En revanche, vous avez sûrement remarqué qu’endépit des valeurs données, l’éditeur se borne à ne pas vouloir dépasser la valeur 10. Eneffet, cette méthode ne permet pas de configurer l’éditeur et l’on se trouve vite limité.

Utilité de la propriété editorDataField

La propriété editorDataField permet de configurer quelle propriété du composant éditeur va devenir lanouvelle valeur du champ modifié. Par défaut, la valeur de cette propriété est text ; cependant, leNuméricStepper ne contient pas une telle propriété (c’est un éditeur spécialisé sur les nombres). Ainsi,nous devons préciser le nom de la propriété qui nous intéresse.

La méthode inlineCette méthode est la même que la méthode drop−in à la différence que l’on utilise unebalise <mx:itemEditor> pour faire appel à l’éditeur voulu.

Nous avons juste à modifier l’exemple précédent pour obtenir :



246

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"><mx:Script>

<![CDATA[[Bindable]public var itemListe:Array = [

{name:"Item 1", qte:58},{name:"Item 2", qte:51},{name:"Item 3", qte:37}];

]]></mx:Script><mx:DataGrid variableRowHeight="true" dataProvider="{itemListe}"

editable="true">

<mx:columns><mx:DataGridColumn dataField="name" headerText="Nom"/><mx:DataGridColumn dataField="qte" editorDataField="value">

<mx:itemEditor><mx:Component>

<mx:NumericStepper stepSize="1" maximum="100"/></mx:Component>

</mx:itemEditor></mx:DataGridColumn>


</mx:Application>

Ainsi, nous avons précisé à l’éditeur que le pas de progression était 1 et qu’il pouvaitmonter jusqu’à 100, ce qui permet d’éditer au final les valeurs indiquées dans le tableau :

Quels sont les composants Flex qui peuvent servir de renderer oud’editor ?Beaucoup de composants Flex sont conçus pour pouvoir être utilisés en tant que tels.Vous pouvez donc vous servir pour afficher vos données ou les éditer des composantssuivants :

c Fig. 8.8 :Un DataGrid pour lequel on a paramétré unitem editor.

8Item renderers et editors

247

j Button ;j CheckBox ;j DateField ;j Image ;j Label ;j NumericStepper ;j Text ;j TextArea ;j TextInput.

Utiliser des items renderers et editors complexesVous pouvez naturellement combiner plusieurs composants Flex afin de mettre en formeou d’éditer vos données comme bon vous semble. Si vous avez une collection d’objetscomplexes (comprenant à la fois des liens, des images et du texte), vous pouvez utiliserla méthode inline pour combiner différents contrôles.

Bien entendu, il est possible et même préférable de créer un module séparé et de l’appelerensuite.

Prenons par exemple un tableau d’enregistrements composés chacun du nom d’un objet,d’un lien vers le site Internet de l’objet et d’une image représentant cet objet. Il est alorsjudicieux d’utiliser un item renderer personnalisé pour afficher le tout dans une liste.

Voici le tableau utilisé :

public var itemListe:Array = [{name:"Alien", url:"http://www.monsite.com/alien",img:"img\\Alien1.bmp"},{name:"Balloon", url:"http://www.balloon-site.com/",img:"img\\Balloon.bmp"},{name:"Bear", url:"http://bear.test.com/", img:"img\\Bear.bmp"}];

Et le renderer :

<mx:itemRenderer><mx:Component>

<mx:VBox><mx:Image height="32" source="{data.img}"/><mx:HBox>

<mx:Label text="{data.name}"/><mx:Label text=’{String("URL :") + data.url}’/>

</mx:HBox>


248

<mx:HRule width="100%"/></mx:VBox>




a comment utiliser les comportements et les associations triggers-effets ;a comment créer ses propres effets en les composant ;a comment modifier soi-même un effet ;a la structuration d’applications en ViewStates ;a les transitions entre les différentes vues qui permettent d’insérer des animations ;a comment ajouter des styles à nos interfaces Flex ;a comment utiliser les items renderers et editors ;a comment fabriquer soi-même ses propres renderers et editors.

Dans le prochain chapitre, vous apprendrez à améliorer l’expérience utilisateur de vosRIA en utilisant des notions propres aux applications lourdes.

c Fig. 8.9 :Exemple d’affichage personnalisé dans uneliste

8Check-list

249

99.1 Le glisser-déposer (drag-and-drop) .................... 2529.2 L’historique de navigation (deep linking) ............. 2569.3 Impression ............................................... 2609.4 Internationalisation ...................................... 2639.5 Check-list ................................................. 267

Améliorerl’expérienceutilisateur

Ce chapitre vous donne quelques solutions à certainsproblèmes récurrents dans les projets Flex, et plus

généralement, les projets web. Une bonne gestion del’impression, de l’internalionalisation et de l’historique devotre application la démarquera de ses concurrents.L’utilisation du glisser-déposer fait également beaucoup desensation quand son utilité se fait ressentir.

9.1 Le glisser-déposer (drag-and-drop)Le Drag and Drop Manager permet à l’utilisateur de déplacer un élément de votreapplication Flex d’un point à un autre. Cette fonctionnalité est très pratique pour desapplications visuelles où les données sont représentées dans des listes, comme des imagesou des composants Flex.

L’opération glisser-déposer se décompose en trois temps, à savoir l’initialisation, ledéplacement (dragging), et la pose (dropping) :

1 L’utilisateur initie un drag-and-drop (glisser-déposer) en utilisant le clic gauche de lasouris pour sélectionner un composant Flex et en déplaçant le pointeur de la sourisde quelques pixels tout en gardant le bouton appuyé. Le composant sélectionné estl’initiateur du drag (drag initiator).

2 L’utilisateur déplace sa souris dans l’application Flex en maintenant le boutongauche de la souris enfoncé. Flex affiche une image pendant le drag, appelé le dragproxy. Le drag source (un objet DragSource) contient la donnée qui est déplacée.

3 Quand l’utilisateur déplace le drag proxy au-dessus d’un composant Flex, celui-cidevient une cible potentielle pour le drop (drop target). Le drop target inspecte ledrag source pour déterminer si oui ou non le format des données est compatible. Sic’est le cas, une petite icône verte indique que le dropping est possible et l’objet seraaccepté dans le nouveau composant si l’utilisateur relâche le bouton de la souris.Sinon, rien n’est modifié. Lorsque l’opération réussit, Flex ajoute la donnée dans lecomposant cible et, optionnellement, supprime la donnée du composant initial.

Les contrôles suivants possèdent un support par défaut pour le drag-and-drop :

j DataGrid ;j HorizontalList ;j List ;j Menu ;j PrintDataGrid ;j TileList ;j Tree.

Pour déplacer les éléments d’un de ces contrôles, il suffit de mettre la propriétédragEnabled à true. Vous n’avez pas besoin de définir un listener pour commencer ledéplacement. Flex vous permet directement de déplacer les items du contrôle ou de lescopier si vous maintenez la touche [Ctrl] appuyée. Pour que le composant cible puisseaccepter des nouveaux éléments via le déplacement, il faut également lui spécifier unepropriété, dropEnabled, à true.

9 Améliorer l’expérience utilisateur

252

L’exemple suivant utilise la fonctionnalité de drag-and-drop entre deux List :

<?xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="500"

height="200" borderStyle="solid" creationComplete="initApp();"><mx:Script><![CDATA[

private function initApp():void {srclist.dataProvider = [’Lire’, ’Courrir’, ’Danser’];destlist.dataProvider =[];

}]]></mx:Script><mx:HBox>

<mx:VBox><mx:Label text="Activités disponibles"/><mx:List id="srclist" height="100" dragEnabled="true"/>

</mx:VBox><mx:VBox>

<mx:Label text="Activités que j’aime"/><mx:List id="destlist" height="100" dropEnabled="true"/>


</mx:Application>

Vous devriez obtenir le résultat suivant lorsque vous essayez de faire glisser une activitédisponible dans celles que vous aimez :

Vous remarquerez lors de l’utilisation de cette application que les données sont copiéesdans la nouvelle liste, mais pas supprimées de l’ancienne. Si vous voulez que la donnéesoit supprimée, il faut que vous ajoutiez la propriété dragMoveEnabled avec la valeur trueau composant initiant le drag-and-drop. La valeur par défaut est false. Remplacez la listesrclist du code précédent par celle-ci :

<mx:List id="srclist" height="100" dragEnabled="true"dragMoveEnabled="true" />

L’action par défaut sera de déplacer la donnée d’une liste à l’autre. Si vous voulez copierla donnée, il faudra maintenir obligatoirement la touche [Ctrl] appuyée pendant l’opération.

c Fig. 9.1 :Exemple dedrag-and-drop dans uneliste

9Le glisser-déposer (drag-and-drop)

253

Vous pouvez également autoriser le déplacement de plusieurs éléments à la fois grâce àla propriété allowMultipleSelection, comme nous le montre le code suivant :

<mx:List id="srclist" height="100" dragEnabled="true"allowMultipleSelection="true" />

Un composant peut avoir les deux rôles en même temps, initier un drag-and-drop etrecevoir des données des autres composants. Voyons un exemple avec un autrecomposant, le DataGrid :

<?xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"creationComplete="initApp();">


private function initApp():void {srcGrid.dataProvider = [

{Artist:’Marcus Miller’, Album:’Free’, Price:16.98},{Artist:’Diana Krall’, Album:’From This Moment On’, Price:9.99},{Artist:’Sum 41’, Album:’UnderClass Hero’, Price:14.95},{Artist:’Prince’, Album:’Planet Earth’, Price:11.95}

];destGrid.dataProvider =[];

}]]></mx:Script><mx:HBox>

<mx:VBox><mx:Label text="Album Dispo"/><mx:DataGrid id="srcGrid" allowMultipleSelection="true"

dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"><mx:columns>

<mx:DataGridColumn dataField="Artiste"/><mx:DataGridColumn dataField="Album"/><mx:DataGridColumn dataField="Prix"/>


</mx:VBox><mx:VBox>

<mx:Label text="Mon Panier"/><mx:DataGrid id="destGrid" allowMultipleSelection="true"dragEnabled="true" dropEnabled="true" dragMoveEnabled="true">

<mx:columns><mx:DataGridColumn dataField="Artiste"/><mx:DataGridColumn dataField="Album"/><mx:DataGridColumn dataField="Prix"/>


254



</mx:Application>

Le composant Tree permet de déplacer les éléments à l’intérieur de lui-même ou vers unautre composant Tree. L’exemple suivant utilise un contrôle Tree avec les fonctionnalitésde drag-and-drop :

<?xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"creationComplete="initApp();">


private function initApp():void {firstList.dataProvider = treeDP;

}]]></mx:Script><mx:XML id="treeDP">

<node label="Mail"/><node label="Recus"/>

<node label="Dossier perso"><node label="Demo"/>

</node><node label="Envoyes"/><node label="Corbeile"/>

</mx:XML><mx:Tree id="firstList" height="200" width="200"

showRoot="false"labelField="@label"dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"allowMultipleSelection="true" />

</mx:Application>

Vous devriez avoir le résultat suivant :

c Fig. 9.2 :Exemple de drag-and-drop dans un arbre

9Le glisser-déposer (drag-and-drop)

255

Valeurs par défaut des propriétés de drag-and-drop

Les valeurs par défaut de certaines de ces propriétés sont différentes selon les composants. Par exemple,la propriété dragMoveEnabled est par défaut à false pour la DataGrid et la List mais à true pour leTree.

Ces composants répondent à la majorité des cas d’utilisation d’un drag-and-drop. Si vousvoulez utiliser cette fonctionnalité avec d’autres composants, vous devrez implémenterces fonctionnalités vous-même. Pour y parvenir, vous aurez besoin des classes décritesci-après. Nous ne rentrerons pas plus dans les détails de l’implémentation manuelle dudrag-and-drop mais n’hésitez pas à consulter la documentation officielle de ces classes sicela s’avère nécessaire.

Tableau 9.1 : Classes utilisées pour la fonctionnalité de drag-and-drop

Classe Description

DragManager Gère les opérations de drag-and-drop, comme la méthode doDrag() quiinitie le déplacement.

DragSource Identifie et contient la donnée déplacée.

DragEvent Contient les événements de drag-and-drop comme celui appelé lorsquel’utilisateur déplace la donnée au-dessus d’un contrôle cible.

9.2 L’historique de navigation (deep linking)Le deep linking permet d’utiliser les fonctionnalités de navigation de votre navigateurInternet (boutons Précédent, Suivant, Favoris) au sein de votre application Flex.

Pour quoi faire ?Les applications web classiques possèdent une adresse URL différente pour chaque pagede leur site. Ainsi, quand vous cliquez sur un lien, le navigateur enregistreautomatiquement dans l’historique votre action. Les applications AJAX et Flex nefonctionnent pas de la même manière. Afin d’améliorer l’expérience utilisateur, on évitele plus possible les rafraîchissements de page, pour pouvoir faire par exemple destransitions plus élégantes. Cependant, le navigateur n’enregistre aucune action dansl’historique. En effet, l’application Flex est sur une page uniquement, et toute lanavigation du site ne se fait que dans le fichier Flash. Ainsi, lorsque vous arrivez sur uneapplication Flex, si vous naviguez dans l’application pendant un certain temps en passantd’onglet en onglet, lorsque vous cliquerez sur le bouton précédent de votre navigateur,


256

vous reviendrez sur la page qui pointait l’application. De même, vous ne pouvez pasarriver sur un état particulier de l’application : à titre d’exemple, en rafraîchissant votrenavigateur, vous remarquerez que l’application est relancée intégralement. Toute votrenavigation est perdue.

Comment ça marche ?Flex 3.0 propose une nouvelle solution pour permettre à vos utilisateurs de se servir desfonctionnalités classiques d’un navigateur. Cette solution est basée sur la modification del’URL de la page de l’application Flex en lui rajoutant des paramètres du style#view=1;details=true. L’application Flex écoute les modifications de navigateur etréagit en conséquence.

L’implémentation du deep linking passe par le BrowserManager. Il permet à votreapplication web de créer des fragments et d’en être avertie lorsque ces fragments sontmodifiés. Vous disposez de la classe URLUtil pour récupérer et convertir les fragmentsd’URL en objets et vice versa. Malheureusement, cela n’est pas lié directement auxcontrôles Flex et risque de nécessiter quelques étapes :

1 Désactiver l’HistoryManager (qui ne gère l’historique basique que de quelquescontrôles).

2 Initialiser le BrowserManager avec un fragment par défaut.

3 Mettre à jour le fragment lorsque l’utilisateur interagit avec un composant et lorsquevous voulez que cette action soit enregistrée dans l’historique.

4 Écouter les événements du BrowserManager pour savoir quand un utilisateur utiliseles fonctionnalités de son navigateur.

5 Interpréter un fragment et modifier l’application en conséquence lorsqu’un nouvelévénement est reçu par l’application.

Support du deep linking du template HTML

Le deep linking est géré d’un côté par Flash mais également par du code généré en ActionScript quiva permettre de communiquer avec le navigateur. Il faut donc vous assurer d’utiliser un template HTMLqui supporte le BrowserManager. Pour cela, allez dans les propriétés de votre projet et, dans les optionsde Flex Compiler, vérifiez que la case "Enable integration with browser navigation" est bien cochée.

Concrètement ?Ce sera sûrement plus facile à comprendre et à refaire avec un exemple basique sous lesyeux. Voici une application MXML simple. Elle contient un TabNavigator avec deux

9L’historique de navigation (deep linking)

257

Panels et une CheckBox pour chacun. L’application va mettre à jour l’URL à chaque foisque l’utilisateur changera d’onglet ou sélectionnera une case à cocher.

Créez une nouvelle application et modifiez la balise Application comme ceci afin dedésactiver l’HistoryManager :

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"creationComplete="appInitialize()" historyManagementEnabled="false">

Maintenant, rajoutez une balise Script dans votre application. Nous allons tout de suiteinitialiser notre BrowserManager. Vous aurez besoin des imports suivants, rajoutez-les :

import mx.events.BrowserChangeEvent;import mx.managers.IBrowserManager;import mx.managers.BrowserManager;import mx.utils.URLUtil;

Déclarons maintenant notre browserManager pour pouvoir l’utiliser dans d’autresfonctions et écrivons la fonction d’initialisation appInitialize, appelée après la créationde l’application :

public var browserManager:IBrowserManager;

private function appInitialize():void {browserManager = BrowserManager.getInstance();browserManager.init("", "Onglet 1");browserManager.addEventListener(BrowserChangeEvent.BROWSER_URL_CHANGE,parseURL);

}

Nous initialisons ici notre objet avec un fragment par défaut "". Cela signifie qu’il n’y arien de plus dans l’URL de notre navigateur. Nous ajoutons ensuite un listener qui écouteles modifications d’URL du navigateur de l’utilisateur qui appellera la fonction parseURL.

Après votre balise Script, rajoutons le code de notre interface en spécifiant qu’on veutappeler la méthode updateURL lorsque l’utilisateur change d’onglet ou coche une case :

<mx:TabNavigator id="tabNav" change="updateURL()" width="300" ><mx:Panel label="Onglet 1">

<mx:CheckBox id="checkBox1" label="case 1" change="updateURL()" /></mx:Panel><mx:Panel label="Onglet 2">

<mx:CheckBox id="checkBox2" label="case 2" change="updateURL()" /></mx:Panel>

</mx:TabNavigator>


258

Occupons-nous maintenant de la fonction parseURL :

private var parsingURL:Boolean = false;private function parseURL(event:Event):void {

parsingURL = true;

var o:Object = URLUtil.stringToObject(browserManager.fragment);if (o.view == undefined)

o.view = 0;tn.selectedIndex = o.view;tabNav.validateNow();

if (tabNav.selectedIndex == 0)checkBox1.selected = o.is_selected;

elsecheckBox2.selected = o.is_selected;

parsingURL = false;}

Nous expliquerons l’intérêt de la variable parsingURL un peu plus loin. L’objet o contientles fragments de l’URL sous forme d’entier. Le fragment view contient l’index del’onglet à afficher (0 ou 1) et le fragment is_selected vaut false ou true. L’URL devotre application ressemble à #view=1;details=true.

Pour que cela marche, il faut que nous créions ces fragments avec les bonnes valeurs.C’est la tâche qui incombe à la fonction updateURL() :

private function updateURL():void {if (!parsing)

callLater(realUpdateURL);}

private function realUpdateURL():void {var o:Object = {};if (tabNav.selectedIndex == 1) {

o.view = tabNav.selectedIndex;if (checkBox1.selected)

o.details = true;}else {o.view = tabNav.selectedIndex;if (checkBox2.selected)

o.details = true;}var fragment:String = URLUtil.objectToString(o);browserManager.setFragment(fragment);

}

9L’historique de navigation (deep linking)

259

Vous avez peut-être déjà compris l’utilité de la variable parsing : elle sert à éviter demettre à jour l’URL alors que celle-ci est en train d’être traitée par la fonctionparseURL(). Ces fonctions sont asynchrones, c’est-à-dire qu’elles peuvent être appeléesen même temps (si l’utilisateur appuie trop vite et répétitivement sur les onglets). Lafonction realUpdateURL() crée le nouveau fragment en créant un objet avec les propriétéscorrespondant aux paramètres que l’on veut envoyer. Nous utilisons ensuite la fonctioninverse de la classe URLUtil pour transformer l’objet en une chaîne que l’on envoie aunavigateur, la fonction objectToString().

Malheureusement, Flex utilise des fonctionnalités du langage JavaScript qui ne sont pasimplémentées de la même manière dans les différents navigateurs. Ainsi, cette techniquene fonctionne que sur :

j Internet Explorer 6, 7 ;j Mozilla Firefox ;j Safari.

La bibliothèque URLKit

Si l’historique est pour votre application une priorité et s’applique à de nombreux contrôles, cettetechnique peut devenir très fastidieuse. Adobe conseille alors de vous orienter vers la bibliothèqueOpen Source URL Kit. Vous aurez des règles à définir pour lier les contrôles aux fragments, mais vousn’aurez pas à vous occuper des méthodes comme updateURL() ou parseURL() qui sont gérées par labibliothèque. Cette bibliothèque est expliquée et peut être téléchargée sur :

http://joeberkovitz.com/blog/urlkit/.

9.3 ImpressionVos utilisateurs auront certainement besoin d’imprimer tôt ou tard des éléments de votreapplication Flex. Par exemple, la confirmation du bon déroulement d’une transactionbancaire est une information souvent imprimée par les utilisateurs pour archiver. Ilspeuvent bien sûr utiliser les fonctionnalités classiques des navigateurs web pour imprimerl’écran, mais il se peut que la page ne soit pas assez grande, ou mal adaptée à l’écranqu’ils veulent imprimer.

Il existe alors plusieurs solutions pour imprimer et si vous avez de bonnes notions enActionScript, vous connaissez probablement déjà la classe PrintJob. Nous allons icidétailler la classe FlexPrintJob, qui peut imprimer un ou plusieurs objets. Cette classedécoupe automatiquement les gros objets pour les imprimer sur plusieurs pages et inclutdes méthodes et propriétés pour ajouter de nombreux paramètres d’impression (commel’échelle par exemple).


260

Pour imprimer avec le FlexPrintJob, il faut créer une nouvelle tâche d’impression etl’envoyer à l’imprimante en suivant la procédure suivante :

1 Créez une instance de la FlexPrintJobClass.

var printJob:FlexPrintJob = new FlexPrintJob();

2 Démarrez une nouvelle tâche d’impression (en anglais : print job) qui va obliger lesystème d’exploitation à lancer une boîte de dialogue classique pour l’impression :

printJob.start();

3 Ajoutez un ou plusieurs objets à la tâche et spécifiez comment les redimensionner :

printJob.addObject(anyObject, FlexPrintJobScaleType.MATCH_WIDTH);

4 Envoyez la tâche à l’imprimante :

printJob.send();

Gestion des ressources utilisateurs

Parce que vous interagissez avec le système d’exploitation de l’utilisateur entre les appels aux méthodesstart() et send(), vous devez limiter le code entre ces deux appels. Le code intermédiaire doit être liéà l’impression en cours. Par exemple, évitez des interactions avec l’utilisateur entre ces deux appels.

La méthode start() va ouvrir une boîte de dialogue pour l’impression et retournera truesi l’utilisateur lance l’impression et false s’il annule la demande d’impression. Vous nepouvez avoir qu’une seule tâche d’impression à la fois. Vous ne pouvez donc effectuerune seconde tâche que si :

j la méthode start() a renvoyé false (la tâche a été annulée par l’utilisateur).j la méthode send() s’est terminée.

La méthode addObject() permet d’ajouter des objets à imprimer. Chaque appel va lancerl’impression de l’objet concerné sur une nouvelle page. Le second paramètre de cetteméthode est le type d’échelle voulu pour imprimer l’objet. Ce paramètre est optionnel eta par défaut la valeur MATCH_WIDTH qui va redimensionner l’objet pour qu’il rentre enlargeur dans la page. Vous avez également à votre disposition les constantesMATCH_HEIGHT, SHOW_ALL, FILL_PAGE et NONE.

Terminons cette partie avec un exemple concret d’impression en imprimant un tableau :

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

9Impression

261


import mx.printing.*;

private function doPrint():void {var printJob:FlexPrintJob = new FlexPrintJob();// Démarre la tâcheif (printJob.start() != true) return;// Ajoute l’objet à la tâche.printJob.addObject(myDataGrid);// Envoie la tâche à l’imprimanteprintJob.send();

}]]></mx:Script><mx:DataGrid id="myDataGrid" width="300">

<mx:dataProvider><mx:Object Country="Paris 19" Code="75019"/><mx:Object Country ="Villejuif" Code="94800"/>

</mx:dataProvider></mx:DataGrid><mx:Button label="Imprimer" click="doPrint();"/>

</mx:Application>

Si vous voulez imprimer le tableau et le bouton, vous devez rajouter un conteneurinvisible autour et lui spécifier un id pour pouvoir l’ajouter dans le printJob. Si vousvoulez imprimer le tableau et le bouton séparément, rajoutez un appel à addObject enprécisant l’id du bouton.

Vous pouvez également rajouter des objets supplémentaires pour compléter lesinformations à imprimer puis les supprimer lorsque l’impression est terminée. Supposonspar exemple que dans l’exemple précédent, nous avions une VBox avec la propriétéid=myVBox. Nous voulons rajouter sur la page imprimée un titre à notre tableau ; voici ceque nous devons donc ajouter après l’appel à la méthode printJob.start() :

var title:Label = new Label();title.text = "liste des villes";myVBox.addChild(title);

printJob.addObject(myVBox);printJob.send();removeChild(title);

Dans la mesure où l’on ne rend pas la main à l’utilisateur entre les deux appels start()et send(), le Label ne sera vu par l’utilisateur que sur la page imprimée et jamais à


262

l’écran. Vous pouvez ainsi formater à votre guise le rendu de l’impression en ajoutant etmodifiant les contrôles de l’application.

9.4 InternationalisationVous avez besoin d’une application gérant plusieurs langues ? Flex 3 propose une solutioncomplète pour prendre en charge l’internationalisation de votre application et pourmodifier la langue de votre application à l’exécution. Le but est d’être très flexible :

j Vous pouvez mettre les fichiers de langues dans des modules, plutôt que dansl’application elle-même. Vous pouvez initialiser l’application avec la langue de votrechoix et charger ou changer de langue ultérieurement lors de l’exécution de l’application.

j Vous pouvez compiler les différentes versions dans une seule application ou module.j Vous pouvez accéder aux ressources grâce au ResourceManager, qui peut gérer les

ressources pour plusieurs langues.j Vous pouvez aussi utiliser des images, sons, etc., comme ressources en plus des

chaînes de caractères.

Voyons ceci avec un exemple concret dans la section suivante.

Faire une application localisée pas à pasNous allons créer une petite application qui sera en français et en anglais et quicomportera une ComboBox pour changer dynamiquement la langue de l’application.Commencez par créer un nouveau projet.

Comme cela se fait généralement lorsque l’on veut une application i18n(internationalisée), vous devez séparer tout texte écrit en dur dans l’application dans unfichier par langue (appelé bundle). On associe une variable (appelée une ressource) quel’on utilise dans le code et que l’on associe au texte traduit dans les bundles.

Pour créer un nouveau bundle, créez un dossier locale à la racine de votre application.Ensuite, créez un dossier pour chaque langue de votre application (que vous nommerezconventionnellement en_US et fr_FR). Enfin, ajoutez dans chacun de ces dossiers unfichier myRessources.properties comportant les ressources et leurs traductions respectives.Le contenu du bundle français ressemble à ceci :

GREETING=Bonjour!WELCOME_MESSAGE=Bienvenue dans votre application en français.

Le bundle anglais comporte la même chose, mais en anglais bien évidemment.

GREETING=Hello!WELCOME_MESSAGE=Welcome in your application in English.

9Internationalisation

263

Un bundle est identifié par le nom de ce fichier. Ainsi, vous pouvez avoir plusieursbundles pour une même langue dans votre application. Cela permet pour une grosseapplication d’organiser les fichiers de traduction. Ici, nous avons donc créé le bundlemyRessources.

Encodage des bundles

Le compilateur MXML s’attend à avoir un bundle encodé en utf-8. Si votre fichier n’est pas en utf-8, vousaurez des problèmes d’affichage pour les caractères accentués. Pour passer un fichier en utf-8, ouvrezla boîte de dialogue des Propriétés du fichier et changez l’encoding.

Maintenant, ajoutez un Label dans votre application au lieu d’écrire en dur la chaîne decaractères comme ceci :

<mx:Label text="Hello!" />

Vous pouvez utiliser la directive @Ressource() du compilateur MXML pour dire que lapropriété text du contrôle Label doit être affectée avec une valeur localisée. Cettedirective prend deux paramètres, le bundle que vous voulez utiliser et la ressource quevous voulez afficher pour le message traduit. Le code ressemble alors à ceci :

<mx:Label text="@Resource(bundle=’myResources’, key=’GREETING’)" />

Avant de compiler votre application, il va falloir rajouter des options de compilation afinque les langues soient prises en compte. Ajoutez des options de compilation, ouvrez lesboîtes de dialogue des Propriétés du projet, sélectionnez le panel Flex Compiler, etentrez ce qui suit dans Additional compiler arguments :

-locale=en_US -source-path=locale/{locale} -allow-source-path-overlap=true

Si vous compilez et lancez votre application, vous devriez voir affiché le message "Hello!".

Si vous voulez voir le texte affiché en français, remplacez :

-locale=en_US

par :

-locale=fr_FR

Recompilez et lancez votre application. Le tour est joué.

Passons aux choses sérieuses maintenant. Nous ne voulons pas recompiler à chaque foisnotre application pour passer d’une langue à une autre. Cela ne présenterait guèred’intérêt. Voyons comment changer la langue dynamiquement, sans avoir à recompiler.


264

Pour commencer, compilons notre application avec les deux langues, l’anglais et lefrançais, et ajoutons le code pour pouvoir alterner.

Changeons l’option de compilation −locale pour ceci :

-locale=en_US,fr_FR

Modifions maintenant notre fichier pour qu’il ressemble au suivant :

<?xml version="1.0" encoding="utf-8"?><br><mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Metadata>[ResourceBundle("myResources")]

</mx:Metadata>


[Bindable]private var locales:Array = [ "en_US" , "fr_FR" ];private function

➥ localeComboBox_initializeHandler(event:Event):void{

localeComboBox.selectedIndex =➥ locales.indexOf(resourceManager.localeChain[0]);}

private function localeComboBox_changeHandler(event:Event):void{

// Attribue à localeChain [ "en_US" ] ou [ "fr_FR" ].resourceManager.localeChain = [ localeComboBox.selectedItem ];

}]]></mx:Script>

<mx:Label text="{resourceManager.getString(’myResources’,’GREETING’)}" /><mx:ComboBox id="localeComboBox" dataProvider="{locales}"

initialize="localeComboBox_initializeHandler(event)"change="localeComboBox_changeHandler(event)"/>

</mx:Application>

Lorsque vous compilez et lancez l’application, celle-ci s’initialise en anglais car en_US estspécifié en tant que première locale (langue). Mais lorsque vous choisissez fr_FR dans laComboBox, le texte passe en français.

9Internationalisation

265

Vous avez sans doute remarqué l’objet resourceManager. C’est un singleton qui gèrel’internationalisation de toute l’application Flex, non seulement vos textes maiségalement les composants du framework. Ainsi, vous pouvez utiliser cette instance pourlier vos Labels aux ressources :

text="{resourceManager.getString(’myResources’, ’GREETING’)}"

Vous constaterez que nous n’utilisons pas la même technique pour afficher le textelorsque nous souhaitons le changer à la volée. La langue est définie par la propriétélocaleChain du resourceManager (attention, cette valeur est un tableau contenant lachaîne de la langue). Enfin, vous noterez l’ajout d’un tag au début de notre application :

<mx:Metadata>[ResourceBundle("myResources")]

</mx:Metadata>

Ce tag est utilisé car lorsque nous utilisons resourceManager.getString(bundleName,key) au lieu de la directive @Resource(), le compilateur n’est pas assez malin pour savoirde quels bundles votre application va avoir besoin.

Mettre autre chose que des objets string dans les ressourcesVous n’êtes pas limité à des chaînes de caractères dans vos fichiers de ressources. Prenonspar exemple le fichier .properties suivant :

VALUE=24.90DISTANCE=37JUNIOR=false

Le compilateur ne va pas lire le fichier et décider tout seul que false doit être interprétécomme un booléen plutôt qu’une chaîne de caractères. Néanmoins, l’objetresourceManager possède d’autres méthodes pour accéder aux ressources quegetString();. Par exemple :

resourceManager.getNumber("myResources", "VALUE");// retourne le Number 24.90, et non la String "24.90"

resourceManager.getInt("myResources", "DISTANCE");// retourne l’entier int 37, et non la String "37"

resourceManager.getBoolean("myResources", "SENIOR")// retourne le Boolean false, et non la String "false"


266

Ces méthodes sont en réalité des simples surcharges de la méthode getObject() quiretourne la valeur de la ressource sans conversion.

Vous pouvez également utiliser des directives dans les fichiers .properties pour chargerdes images, des sons ou des classes différentes selon la langue, comme :

LOGO=Embed("logo.jpg")SORTER=ClassReference("sorters.Urdu")

Charger les fichiers de langue à l’exécutionVous avez bien compris que ces langues sont incluses dans le SWF lors de la compilation.Vous pouvez avoir besoin de charger vos bundles autrement, en allant par exemplechercher les ressources dans une base de données ou un fichier XML.

Le ResourceManager peut charger un bundle que vous pouvez créer à l’exécution. Le codesuivant crée un nouveau bundle, lui ajoute quelques ressources et l’ajoute auResourceManager :

var moreResources:ResourceBundle =new ResourceBundle("fr_FR", "moreResources");

moreResources.content["OPEN"] = "Ouvrez";moreResources.content["CLOSE"] = "Fermez";resourceManager.addResourceBundle(moreResources);

Une fois le bundle dans le ResourceManager, vous pouvez utiliser la méthodegetString() sur celui-ci pour trouver vos ressources :

resourceManager.localeChain = [ "fr_FR" ];trace(resourceManager.getString("moreResources", "OPEN"));

// écrit "Ouvrez" sur la sortie


a comment gérer le glisser-déposer dans une application ;a comment utiliser l’historique de navigation de Flex ;a comment gérer les subtilités de l’impression d’une application Flex ;a comment créer une application multilangues.

Le prochain chapitre abordera la communication avec un serveur.

9Check-list

267

1010.1 Comprendre les possibilités de récupération

de données .............................................. 27010.2 HTTPService ............................................. 27410.3 Services web ............................................ 28510.4 RemoteObject ........................................... 29010.5 Mise en pratique : une application avec Amazon .. 29110.6 Check-list ................................................. 301

Communiqueravec unserveur

Ce chapitre aborde les notions essentielles pourcomprendre le fonctionnement des communications

client/serveur dans une application Flex. Vous allezbientôt pouvoir interagir avec des données ou des servicesexternes pour alimenter vos composants et chargerdynamiquement des ressources.

10.1 Comprendre les possibilités de récupération de donnéesDepuis le début de cet ouvrage, nous avons manipulé des données statiques sous la formed’objets ActionScript, de modèle avec le composant <mx:Model> ou encore de donnéesXML directement incluses dans le code. Vous en conviendrez, il serait nettement plusintéressant de travailler avec des données extérieures provenant d’un flux XML ou encored’une base de données comme c’est le cas pour la plupart des sites web.

Comme vous le savez, Flex est utilisé pour le tiers de présentation côté client et n’a doncpas vocation à gérer la logique métier d’une application web (traitement en base dedonnées notamment). Flex laisse alors le soin à des applications côté serveur d’effectuerce type de tâches.

Il existe donc un ensemble de classes permettant d’interagir avec d’autres applicationspour récupérer ou encore transmettre des objets en utilisant des protocoles standardisés.C’est ce que nous allons voir au cours de ce chapitre. Mais avant toute chose, nous allonsvoir comment récupérer des données du projet à l’exécution afin d’alléger la taille denotre fichier SWF.

Chargement dynamique des données XMLVous avez appris à manipuler des ensembles de données lors du chapitre 5 avec lesdifférents composants Flex afin d’inclure les données directement dans votre codeMXML ou dans un fichier séparé dans le projet tout en utilisant la propriété source ducomposant <mx:XML> par exemple. Dans ces deux cas, les données sont dites incluses dansl’application. Elles seront chargées à la compilation dans le fichier SWF généré, ce quiimplique forcément une recompilation à chaque modification des données. Il est doncimportant de prendre en considération les questions suivantes :

j Les données vont-elles changer ?j Le volume de l’ensemble des données est-il important ?

Si la réponse à l’une de ces questions est oui, alors il serait peut-être plus judicieux decharger dynamiquement les données du projet. Le fichier XML par exemple, ou pourquoipas une image, ne sera alors chargé qu’à l’exécution de l’application. Cela implique certesune légère latence au premier chargement mais le fichier sera ensuite stocké en cachedans le navigateur. En conclusion, il est préférable d’utiliser le chargement dynamique àla place de l’inclusion à la compilation.

Pour charger dynamiquement des ressources (fichier XML, image…), il faut utiliser laclasse URLoader d’ActionScript qui possède un système événementiel complet permettantde notifier plusieurs types d’événements (Event.COMPLETE, ProgressEvent.PROGRESS,

10 Communiquer avec un serveur

270

etc.). Nous allons utiliser les classes URLLoader et URLRequest pour gérer un chargementdynamique d’un fichier XML dans un objet ActionScript :

Nous devons créer une application nommée dynamiqueXML ainsi qu’un fichier test.xmlqui contiendra les données suivantes :

<Mall><Shop>

<Name>Random Shop</Name><Article>

<Name>Pant</Name><Price>120</Price>

</Article><Article>

<Name>tshirt</Name><Price>30</Price>

</Article><Article>

<Name>Shoes</Name><Price>100</Price>

</Article><Article>

<Name>Sweaters</Name><Price>60</Price>

</Article><Article>

<Name>Suit</Name><Price>600</Price>

</Article></Shop>

</Mall>

Le but est de charger le contenu de ce fichier dynamiquement puis de l’afficher dans notreapplication dont voici la structure :

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:XML id="sourceCode"/><mx:Panel>

<mx:TextArea width="300" height="300" text="{sourceCode}"/><mx:Button label="Afficher le code source" click="loadXML()"/>


Ce qui importe dans cette application n’est pas vraiment le design. Il s’agit ici d’utiliserla classe URLLoader pour charger le contenu dynamiquement. Remarquez tout de mêmela présence d’un élément XML nommé sourceCode et ne contenant pour l’instant aucune

10Comprendre les possibilités de récupération de données

271

donnée incluse. C’est dans cet objet que nous stockerons les données chargées. Voici doncle code ActionScript :


public var loader:URLLoader = new URLLoader() ;public function loadXML():void{

var url:String = "test.xml" ;

var request:URLRequest = new URLRequest( url ) ;

loader.addEventListener(Event.COMPLETE, onLoad);loader.load( request ) ;

}

public function onLoad(evt:Event):void{sourceCode= new XML(loader.data);

}]]>

</mx:Script>

La première étape consiste à déclarer une variable de type URLoader que nous avons icinommée tout simplement loader. La fonction loadXML sera appelée sur l’événement clickdu bouton de l’application. Cette méthode déclare une variable URLRequest avec le nom dufichier cible dans le constructeur. Nous ajoutons ensuite un listener à notre loader (laméthode onLoad qui aura pour seul rôle de remplir notre variable XML nomméesourceCode). Finalement, nous demanderons explicitement à notre loader de charger lesdonnées pointées par notre URLoader (la variable request). Une fois le chargement terminé,l’événement complete est levé et récupéré par la méthode onLoad. Et voici le résultat final :

c Fig. 10.1 :Chargement dynamiqued’un fichier XML


272

La prochaine étape consistera à charger un fichier XML sur un autre serveur web. Nousallons auparavant faire un point sur les règles de sécurité du Player Flash.

Un point sur le Player Flash et la sécuritéNous allons bientôt utiliser les composants Flex permettant la communication entre uneapplication et des serveurs web distants. Le Player Flash définit cependant des règles desécurité assez strictes en ce qui concerne ce type de communication.

Le Player Flash d’Adobe tourne dans une zone sécurisée appelée sandbox (on parle ausside bac-à-sable) afin d’éviter que du code malveillant soit exécuté sur le client. De ce fait,les règles suivantes sont toujours appliquées par défaut :

j Les ressources contenues dans une même sandbox sont toujours accessibles entre elles.j Les fichiers SWF d’une sandbox distantes ne peuvent jamais accéder aux fichiers et

données locales.

Pour définir les droits d’accès, le Player Flash définit quatre types différents de zones de sécurité :

Tableau 10.1 : Les types de zones de sécurité

Zone Description

Distant (remote) Correspond aux ressources situées sur un autre domaine Internet.

Local et système defichiers

Permet d’accéder aux ressources locales et aux fichiers locaux mais sansaccès au réseau.

Local et réseau Les fichiers SWF peuvent accéder au réseau mais pas aux fichiers locaux.

Local autorisé (localtrusted)

Pas de restriction d’accès. L’accès aux fichiers locaux est permis sil’utilisateur l’autorise.

L’appel à des ressources distantes est donc soumis à des règles d’accès. Tout d’abord,l’application doit tourner dans une sandbox avec un accès vers l’extérieur (Local et réseaupar exemple). Ensuite, il est possible d’accéder à des médias distants sans restriction(image, vidéos…) mais ce n’est pas le cas pour les données. En effet, dans ce cas précis,il faut que vous soyez autorisé par le serveur distant à utiliser les données par le biais d’unfichier situé à la racine du serveur : le fichier crossdomain.xml. Ce fichier qui définit uneliste d’URL permet d’indiquer que les données du serveur sont disponibles aux fichiersSWF situés sur les domaines listés.

En fait, le principe est le suivant : quand un document Flash tente d’accéder à desdonnées distantes situées sur un autre domaine, le fichier crossdomain.xml est récupéré

10Comprendre les possibilités de récupération de données

273

sur le serveur appelé puis si le domaine du document Flash est inclus dans le fichier, alorsles données sont automatiquement accessibles.

Si nous abordons ce sujet, c’est que ce type de restriction peut poser des problèmesd’accès aux données lors d’appel à des méthodes distantes une fois que vous déploierezvotre application sur un serveur web. Pour plus de détails, nous vous conseillons de vousreporter à la documentation officielle.

10.2 HTTPServiceNous allons maintenant entrer dans le cœur du sujet : l’accès à des données distantes.Nous allons pour cela commencer par la classe HTTPService qui permet de récupérer unflux XML par le biais d’une requête http. Un composant HTTPService peut être créé aussibien en MXML qu’en ActionScript. Une fois l’objet créé, il est possible d’effectuer unappel asynchrone à l’adresse URL spécifiée pour récupérer un flux statique ou dynamiqueprovenant de n’importe quel type de source (PHP, Ruby, JSP, .Net…) grâce à la méthodesend() qui retourne alors les données demandées. Le diagramme suivant schématisel’interaction entre le client et le serveur par le biais des composants Flex.

c Fig. 10.2 : Communication client/serveur


274

Récupération de données via une requête httpNous allons maintenant recourir au MXML pour lancer une requête distante. Nous allonsutiliser une des API Yahoo! pour rechercher un restaurant de San Francisco. Pour plus dedétails sur l’API Yahoo!,, nous vous invitons à vous rendre à cette adresse : http://developer.yahoo.com/search/.

Nous stockerons ensuite le résultat dans une ArrayCollection, et nous afficherons lepremier résultat de la recherche.

L’API sera la LocalSearch maintenant disponible en version 3 ; la documentation estdisponible sur http://developer.yahoo.com/search/local/V3/localSearch.html.

Comme vous le constatez, il est nécessaire de passer des arguments pour obtenir unrésultat. Deux sont obligatoires. Il s’agit de :

j appid : applicationID qui identifie de manière unique votre application. Vouspouvez en créer un ou utiliser YahooDemo.

j query : le texte recherché.

Nous recherchons les restaurants de San Francisco dont l’un des codes postaux est 94108.Nous allons donc construire notre requête à partir de l’URL de base du service :

http://local.yahooapis.com/LocalSearchService/V3/localSearch.

Puis nous allons ajouter les trois paramètres suivants :

j appid=YahooDemo ;j query=restaurant ;j zip=94108.

Ce qui donne : http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=restaurant&zip=94108.

À présent, lancez le résultat dans un navigateur et observez le résultat final (voirfig. 10.3).

La requête a retourné un flux XML contenant une mine d’informations comme :

j le nombre total de résultats ;j le nombre de résultats retournés ;j un lien Yahoo! Maps.

Et pour chaque restaurant :

j les coordonnées (adresse, téléphone ainsi que longitude et latitude) ;

10HTTPService

275

j une note (bien pratique) ;j la dernière critique ;j le type de cuisine ;j un lien Yahoo! Maps ;j etc.

Il est temps d’appeler cet URL depuis une application Flex et d’utiliser le composantHTTPService. Créez une nouvelle application. Nous y ajouterons un bouton pour appelerla requête, et cinq champs pour afficher les informations de base du premier résultat :


c Fig. 10.3 : Résultat de la requête dans un navigateur


276

<mx:Label id="Nom"/><mx:Label id="Adresse"/><mx:Label id="Telephone"/><mx:Label id="Note"/><mx:Label id="URL"/><mx:Button label="Lancer la recherche" />

</mx:Application>

Ajoutons maintenant le HTTPService que nous nommerons restaurant :

<mx:HTTPService id="restaurant"➥ url="http://local.yahooapis.com/LocalSearchService/V3/localSearch➥ ?appid=YahooDemo&query=restaurant&zip=94108"/>

L’URL est spécifié par la propriété URL, ce qui est logique ; cependant, le code justeau-dessus ne marche pas et Flex Builder vous signale le message d’erreur suivant :

The reference to entity "query" must end with the ’;’ delimiter. <Enrichissement ?>

En fait, il n’est pas possible de construire la requête "à la main" comme dans unnavigateur. À défaut, il faut utiliser la balise <mx:Request> de la manière suivante :

<mx:HTTPService id="restaurant"url="http://local.yahooapis.com/LocalSearchService/V3/localSearch"><mx:request>

<appid>YahooDemo</appid><query>restaurant</query><zip>94108</zip>

</mx:request></mx:HTTPService>

Comme vous le constatez, il faut ensuite créer une balise XML pour chaque paramètre dela requête.

Maintenant que la requête est définie correctement, il va falloir l’appeler et stocker lerésultat dans le tableau que nous avons défini précédemment. Il ne restera plus qu’àremplir les champs associés à chaque propriété.

Appeler une requête http

Pour appeler une requête http, il faut invoquer la méthode send() d’un objet de typeHTTPService. Cette méthode effectue une requête http ou https en mode GET, POST, HEAD,OPTIONS, PUT, TRACE, ou DELETE. Une réponse http est ensuite renvoyée avec les résultatsde la requête. Les résultats sont récupérés dans la propriété lastResult d’un objetHTTPService.

10HTTPService

277

Nous allons maintenant passer à la pratique en commençant par appeler la méthodesend() dès que notre application est chargée grâce à l’événement creationComplete dela balise <mx:Application>. Il ne reste plus qu’à exploiter le résultat avec une méthodequi remplira nos cinq champs grâce au contenu de lastResult. Voici donc le code final :

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx=http://www.adobe.com/2006/mxml

layout="vertical" creationComplete="restaurant.send()"><mx:Script>

<![CDATA[public function appel() : void{

Nom.text = restaurant.lastResult.ResultSet.Result[0].Title;Adresse.text = restaurant.lastResult.ResultSet.Result[0].Address;Telephone.text = restaurant.lastResult.ResultSet.Result[0].Phone;Note.text =

restaurant.lastResult.ResultSet.Result[0].Rating.AverageRating;URL.text = restaurant.lastResult.ResultSet.Result[0].BusinessUrl;

}]]>

</mx:Script><mx:HTTPService id="restaurant"

url="http://local.yahooapis.com/LocalSearchService/V3/localSearch"><mx:request>

<appid>YahooDemo</appid><query>restaurant</query><zip>94108</zip>


<mx:Label id="Nom"/><mx:Label id="Adresse"/><mx:Label id="Telephone"/><mx:Label id="Note"/><mx:Label id="URL"/><mx:Button label="Lancer la recherche" click="appel()"/>

</mx:Application>

Veillez à la manière dont vous accédez aux éléments de la réponse dans la méthodeappel(). Nous accédons aux différentes informations en suivant l’arbre XML récupérédirectement dans la propriété lastResult. Souvenez-vous également que l’appel à laméthode send() est indispensable (ici appelée en réponse à l’événementcreationComplete de l’application) avant de l’utiliser, car dans le cas contraire, lapropriété lastResult serait égale à null.


278

Voici enfin un visuel de l’application affichant les informations du premier restaurant dela recherche :

Comme vous le constatez, les résultats correspondent bien aux flux XML que vous aviezprécédemment affichés dans votre navigateur.

Type de retour d’une requête http

Il est possible de choisir le type de retour de la réponse http grâce à la propriétéresultFormat de la classe HTTPService qui accepte les valeurs suivantes :

Tableau 10.2 : Les options pour resultFormat

Valeur Description

array Tableau d’objets représentant l’ensemble des nœuds d’un même niveaudans l’arborescence XML.

e4x Le résultat est renvoyé sous la forme d’une instance XML pouvant êtremanipulée par les opérateurs ECMAScript for XML (e4x).

flashvars Les valeurs sont stockées sous forme de texte de type nom=valeur séparéespar le caractère &.

object Les valeurs XML sont parsées en un arbre d’objets ActionScript.

text L’ensemble du résultat est stocké directement dans une chaîne sans aucuntraitement.

XML Le résultat est stocké dans une instance de la classe XMLNode représentantle nœud parent.

XML ou e4x

Lorsque les données retournées par un objet HTTPService correspondent à un document XML, il estpréférable d’utiliser e4x comme format de résultat car le format XML est utilisé à titre de compatibilitéavec les versions précédentes d’ActionScript.

c Fig. 10.4 :Visuel de l’application

10HTTPService

279

Utiliser le bindingNous venons d’utiliser la classe HTTPService pour récupérer des données XMLdynamiques à partir d’une requête http statique. Les informations pertinentes du premierrésultat ont ensuite été récupérées par une méthode ActionScript pour être affichéescorrectement dans des Labels. Mais il serait bien plus pratique de pouvoir formuler notrerequête http en fonction des informations saisies par l’utilisateur et de mettre à jourautomatiquement les données à chaque nouvelle requête. C’est bien évidement possiblegrâce au binding de données que nous avons abordé au chapitre 5.

Nous allons donc légèrement modifier l’application précédente en remplaçant dans unpremier temps les Labels par une DataGrid puis en rajoutant un formulaire pour saisir lesdonnées nécessaires à la requête. Enfin, nous changerons la place de l’appel à la requêtehttp qui se trouve actuellement dans l’événement creationComplete de l’application pourl’appeler sur l’événement click du bouton.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical" >

<mx:HTTPService id="restaurant"url="http://local.yahooapis.com/LocalSearchService/V3/localSearch" ><mx:request>

<appid>YahooDemo</appid><query>{formQuery.text}</query><zip>{formZip.text}</zip>


<mx:Form label="paramètres de la requête"><mx:FormItem label="Query">

<mx:TextInput id="formQuery" /></mx:FormItem><mx:FormItem label="Code postal">

<mx:TextInput id="formZip" /></mx:FormItem>

</mx:Form><mx:DataGrid dataProvider="{restaurant.lastResult.ResultSet.Result}"

width="900" height="300"><mx:columns>

<mx:DataGridColumn dataField="Address"/><mx:DataGridColumn dataField="Title"/><mx:DataGridColumn dataField="BusinessClickUrl" headerText="URL"/><mx:DataGridColumn dataField="City"/><mx:DataGridColumn dataField="Phone"/>

</mx:columns>


280

</mx:DataGrid><mx:Button label="Lancer la recherche" click="restaurant.send()"/>

</mx:Application>

Comme vous le constatez, les champs du formulaire ont été liés aux paramètres contenusdans la balise <mx:Request> du HTTPService. C’est également le cas pour la propriétéDataProvider de la DataGrid qui est directement liée aux nœuds ResultSet.Result duXML renvoyés en réponse. Le nombre de colonnes a également été limité afin den’afficher que les informations utiles.


Récupérer les résultats de manière événementielleJusqu’à présent, nous avons récupéré les données directement dans la propriétélastResult d’un objet HTTPService qui stocke le résultat de la réponse retournée aprèsl’appel à la requête. Le résultat en question n’est cependant pas accessible directementaprès l’appel de la méthode send() puisque la requête peut prendre plus ou moins detemps en fonction du débit. Un accès prématuré à la propriété lastResult peut doncentraîner des erreurs à l’exécution comme vous pouvez le constater avec ce petit bout decode ActionScript qu’il est possible d’insérer dans l’application précédente :

public function accessResult():void{

restaurant.send();formQuery.text = restaurant.lastResult.toString();

}

c Fig. 10.5 : Recherche de restaurants à San Francisco en utilisant la liaison de données

10HTTPService

281

Son exécution provoquera l’erreur suivante :

TypeError: Error #1009: Cannot access a property or method of a null object reference.<Enrichissement ?>

En effet, la réponse n’a pas encore eu lieu lorsque l’on tente d’accéder au résultat ; enconséquence, la valeur de lastResult est null, ce qui provoque cette erreur classique.

La meilleure méthode pour se prémunir de ce genre d’exception si l’on souhaite accéderau résultat de la réponse est d’utiliser l’événement result de la classe HTTPService.Celui-ci se déclenche lorsque la réponse a été correctement envoyée par le serveur. Nousallons donc mettre cela en pratique en déclarant une fonction qui se chargera d’afficherle nombre de résultats total de la recherche.

Il suffit simplement de procéder comme suit :

1 Rajoutez un Label sous le bouton que vous nommerez nbResult

<mx:Label id="nbResult"/>

2 Créez une fonction ActionScript (ici processResult) prenant en argument unévénement de type ResultEvent


import mx.rpc.events.ResultEvent;public function processResult(evt:ResultEvent):void{

nbResult.text = "Nombre total de résultats : ";nbResult.text += evt.result.ResultSet.totalResultsAvailable;

}]]>

</mx:Script>

3 Affectez la fonction à l’événement result de notre HTTPService

<mx:HTTPService id="restaurant"url="http://local.yahooapis.com/LocalSearchService/V3/localSearch"result="processResult(event)" ><mx:request>




282

La recherche avec les paramètres restaurant et 94108 pour le code postal nous indiquequ’il existe 8 432 restaurants référencés à San Francisco.

Gérer les erreursNous venons d’utiliser un gestionnaire d’événements pour traiter les résultats d’unerequête http effectuée avec succès, mais malheureusement tout ne se passe pas toujoursaussi bien. Une requête peut échouer pour un grand nombre de raisons comme lessuivantes :

j un serveur injoignable ;j une requête mal formatée ;j un temps d’attente dépassé ;j et bien d’autres raisons encore.

Il est donc nécessaire de prendre en compte ce genre d’éventualités afin d’éviter ledéclenchement d’exception à l’exécution du code. Vous pouvez tester par vous-même lesconséquences d’une mauvaise requête. Il suffit de ne pas remplir le champ query de notreapplication. Comme spécifié sur la documentation Yahoo!, ce champ est obligatoire pourtoute requête (il en est de même pour le champ appid que nous avons mis en directementdans notre code) (voir fig. 10.7).

L’envoi de la requête sans le paramètre query provoque l’erreur suivante :

RPC Fault faultString="HTTP request error" faultCode="Server.Error.Request"faultDetail="Error: [IOErrorEvent type="ioError" <Enrichissement ?>

c Fig. 10.6 : Utilisation d’un gestionnaire d’événements

10HTTPService

283

Flex propose donc d’intercepter les erreurs de type RPC grâce à un gestionnaire d’événements.À chaque erreur déclenchée lors d’un appel à la méthode send() d’un HTTPService, unévénement de type FaultEvent est envoyé. Ce dernier contient entre autres :

j un objet de type Fault (propriété fault) descendant de la classe Error et contenantles détails liés à l’incident (FaultCode, FaultDetail, FaultString et RootCause) ;

j un message (qui contient l’ensemble des informations précédentes).

C’est l’événement fault d’un HTTPService qui permet d’intercepter ce type d’erreur.Nous allons maintenant afficher un pop-up en cas d’erreur lors de l’envoi de notrerequête. Il suffit de procéder comme suit :

1 Créez une méthode ActionScript prenant en paramètre un objet de type FaultEvent :

import mx.controls.Alert;import mx.rpc.events.FaultEvent;import mx.rpc.events.ResultEvent;

public function faultHandler(evt:FaultEvent):void{

Alert.show("Une erreur s’est produite\n : " +"\nDetails\n" +"faultCode : " + evt.fault.faultCode + "\n" +"faultDetail : " + evt.fault.faultDetail + "\n" +"faultString : " + evt.fault.faultString + "\n");

}

2 Affectez cette méthode à l’événement fault de votre HTTPService :

<mx:HTTPService id="restaurant"url="http://local.yahooapis.com/LocalSearchService/V3/localSearch"

c Fig. 10.7 : Erreur à la suite d’une mauvaise requête http


284

result="processResult(event)"fault="faultHandler(event)"><mx:request>



Voici un exemple d’erreur produite par notre gestionnaire d’événements (ici, nousn’avons pas rempli le champ query).

La propriété message d’un objet FaultEvent

Le message contenu dans un événement de type FaultEvent contient une mine d’informations pouvantvous aider à trouver la cause de cette erreur. Cependant, ce message reste peu explicite pour unutilisateur lambda. Il est donc conseillé de le remplacer par un message plus simple lorsque vousentrerez en phase de production.

10.3 Services webEn plus des requêtes http standard, le framework Flex permet d’interagir avec desservices web qui prennent une importance croissante dans les architectures orientéesservices (SOA en anglais pour Service Oriented Architecture).

À titre de rappel, le concept de services web signifie simplement que vous pouvez accéderà des fonctionnalités ou méthodes que vous pouvez invoquer sur un serveur distant afinde déclencher un traitement spécifique et/ou obtenir une réponse ou un résultat en retour.Les services web définissent également leurs propres standards avec notamment SOAPpour l’échange des messages et WSDL pour la description des messages et des types dedonnées à travers le protocole http.

c Fig. 10.8 :Gestion d’une erreurRPC

10Services web

285

Utiliser des services web de type SOAPL’utilisation des services web en Flex est assez similaire aux HTTPServices. Cependant,pour une adresse donnée il peut exister plusieurs méthodes différentes. En effet, imaginezun serveur proposant des informations sur la finance. Ce serveur pourrait proposer deconnaître le cours d’un indice ou d’une matière première donnée par exemple ou encoreproposer des taux de change entre les monnaies. Il pourrait donc exister une méthodedistincte par type d’informations recherchées.

Un service web se définit donc en Flex par :

j l’adresse du document wsdl décrivant le service (propriété wsdl) ;j une ou plusieurs méthodes à appeler (balise <mx:operation>).

Nous allons à présent déclarer un service web dans une application afin de traduire untexte du français à l’anglais ou de l’anglais au français. Pour cela, nous allons utilisercelui situé à l’adresse suivante :

http://www.webservicex.net/WCF/ServiceDetails.aspx?SID=47

Vous y trouverez un lien vers le document wsdl ainsi qu’une description des méthodesdisponibles (dans notre cas seulement translate).

La méthode translate prend en paramètre deux arguments :

1 le type de traduction limité à une énumération de valeurs (comme frenchToEnglishpar exemple d’après le document wsdl) ;

2 le texte à traduire.

Créez une nouvelle application (myTranslator) et déclarez-y un composant WebServicecomme ceci :

<mx:WebService id="translatorService"wsdl="http://www.webservicex.net/TranslateService.asmx?wsdl">

</mx:WebService>

Vous pouvez, tout comme un HTTPService, définir un certain nombre de propriétés ou deméthodes à appeler sur des événements spécifiques. Le tableau suivant vous donnera unaperçu des fonctionnalités les plus importantes.

Tableau 10.3 : Fonctionnalités essentielles d’un compoant WebService

Propriété Description

Id Le nom de l’instance de l’objet WebService créée dans Flex.


286

Tableau 10.3 : Fonctionnalités essentielles d’un compoant WebService

Wsdl L’emplacement du service web à utiliser.

Load Spécifie une action à effectuer après le chargement de l’objet WebService. Cetévénement est souvent utilisé pour invoquer une méthode distance immédiatement aprèsque l’application et le service ont été chargés.

result Le gestionnaire d’événements est appelé lorsque les données sont retournées par leservice web.

Fault Le gestionnaire d’événements est appelé lorsqu’une erreur est retournée par le service web.

Appeler des méthodes distantesComme nous l’avons dit précédemment, un service web peut offrir plusieurs méthodes àappeler. Il n’est donc pas envisageable d’utiliser une seule et unique fonction pour invoquerces méthodes comme c’est le cas avec le send() du HTTPService. Il faut donc définirchaque méthode à appeler au sein de la balise <mx:WebService>. Chaque méthode seradéfinie dans une balise <mx:operation> spécifique comme le montre le code suivant :

<mx:WebService id="translatorService"wsdl="http://www.webservicex.net/TranslateService.asmx?wsdl"><mx:operation name="Translate">

<mx:request xmlns="">

</mx:request></mx:operation>

</mx:WebService>

La page de description du service nous indique qu’il fournit une unique méthode nomméeTranslate qui prend en paramètre deux arguments (le type de traduction et le texte àtraduire). Pour invoquer cette méthode, il suffit d’appeler le service web avec le nomcorrespondant suivi de la méthode send(). Cela donne donc translatorService.Translate.send() pour le code précédent.

Enfin, le résultat de cet appel se trouvera logiquement dans translatorService.Translate.lastResult.

Passer des arguments aux méthodes de services webDe la même manière que pour un HTTPService, il est possible de passer des argumentsau service web de deux manières distinctes :

j par la liaison de données dans la balise <mx:request> (vu précédemment pour lesHTTPService) ;

10Services web

287

j directement dans l’appel de la méthode en ActionScript de la manière suivante :translatorService.Translate(arg1,arg2).

Nous allons donc compléter notre application pour pouvoir appeler le service webcorrectement. Pour cela, il faut procéder comme suit :

1 Ajoutez un bouton pour appeler la méthode distante.

2 Complétez le service web pour prendre en compte les deux paramètres.

3 Ajoutez deux TextInput pour saisir le texte à traduire et afficher le résultat.

4 Ajoutez une ComboBox pour choisir le type de traduction.

Voici le code final :


layout="vertical" verticalAlign="middle"><mx:WebService id="translatorService"

wsdl="http://www.webservicex.net/TranslateService.asmx?wsdl"><mx:operation name="Translate">

<mx:request xmlns=""><LanguageMode>{mode.selectedItem.value}</LanguageMode><Text>{input.text}</Text>

</mx:request></mx:operation>

</mx:WebService><mx:TextInput id="input"/><mx:TextInput id="output" editable="false"

text="{translatorService.Translate.lastResult}"/><mx:Spacer height="20"/><mx:ComboBox id="mode">


<mx:Object value="FrenchTOEnglish" label="Français à anglais"/><mx:Object value="EnglishTOFrench" label="Anglais à français"/>


</mx:ComboBox><mx:Button id="process" label="Traduire"

click="translatorService.Translate.send()"/></mx:Application>

Nous avons tout simplement lié les paramètres de la requête avec les champs input etmode et le bouton appelle la méthode distante. Le résultat de cette requête est directementlié au champ output pour afficher la traduction.


288

Différence d’utilisation entre service web et HTTPServiceComme vous l’avez constaté, le fonctionnement des composants WebService etHTTPService sont relativement similaires. Voici donc un tableau récapitulatif desdifférences entre ces deux composants :

Tableau 10.4 : Méthodes d’accès aux données distantes

Demande de données Résultat

HTTPService serviceId.send() serviceId.lastResult

WebService serviceId.methodeId.send() serviceId.methodeId.lastResult

Tableau 10.5 : Adresse des ressources

Propriété Description

HTTPService url= Adresse web de la ressource demandée

WebService wsdl= Adresse du document wsdl de description duservice

Tableau 10.6 : Paramètres et méthodes

Nombres de méthodes/paramètres Détail

HTTPService Méthodes : 1 Paramètres : n(<mx:request>)

Le composant ne fournit un accès qu’àune unique ressource externe.

WebService Méthodes : n : autant que deméthodes décrites dans le fichier wsdlParamètres : n (<mx:request>)

Le composant permet de définirplusieurs méthodes au sein du mêmeservice web par le biais de la balise<mx:operation>.

c Fig. 10.9 :Résultat d’une traduction de l’anglais vers lefrançais grâce au service web

10Services web

289

10.4 RemoteObjectEn plus des requêtes http et des services web, il existe une troisième et dernière méthodepour utiliser des données externes dans Flex. Il s’agit des RemoteObject. Ils sontgénéralement utilisés pour appeler des méthodes directement sur des composantsColdFusion ou des objets Java situés sur un serveur d’application grâce àLiveCycle Data Services (reportez-vous à cet effet au chapitre 13).

Les RemoteObject peuvent également s’interconnecter avec des applications tierces etainsi appeler des méthodes sur des objets .Net, PHP ou Ruby par exemple. Les principalesapplications permettant de réaliser cela sont les suivantes :

j AMFPHP : http://amfphp.sourceforge.net/ ;j SabreAMF : http://www.osflash.org/sabreamf ;j Midnight Coders WebORB : http://www.themidnightcoders.com/.

Les composants HTTPService et WebService utilisent principalement le XML pouréchanger des données avec une application Flex. Ce n’est cependant pas le cas desRemoteObject qui utilisent le protocole AMF3 (Action Message Format). Les donnéessont ainsi sérialisées dans un format binaire directement compris par le Player Flash.Ainsi, les données circulent plus rapidement et peuvent être désérialisées en moins detemps que des données XML. Cela se traduit donc par un gain de performance notableen particulier lorsque de grandes quantités de données sont échangées.

Les services web utilisent un fichier wsdl pour déterminer à quoi doit ressembler lemessage SOAP. Les RemoteObjects ne fonctionnent pas de cette façon et nécessitent unfichier de configuration (service-message.xml) qui permet de déterminer commenteffectuer les appels au serveur.

Voici un exemple de fichier service-message.xml pour utiliser le composant RemoteObjectavec AMFPHP1.9 :

<services-config><services>

<service id="amfphp-flashremoting-service"class="flex.messaging.services.RemotingService"messageTypes="flex.messaging.messages.RemotingMessage"><destination id="amfphp">

<channels><channel ref="my-amfphp"/>

</channels><properties>

<source>*</source></properties>


290

</destination></service>

</services><channels>

<channel-definition id="my-amfphp"class="mx.messaging.channels.AMFChannel"><endpoint uri="http://localhost:88/amfphp/gateway.php"

class="flex.messaging.endpoints.AMFEndpoint"/></channel-definition>

</channels></services-config>

Nous déclarons un service utilisant amfphp1.9 auquel nous affectons une destination quisera utilisée plus tard par le composant RemoteObject pour utiliser ce service, et unchannel qui spécifie l’adresse du serveur hébergeant les objets distants.

Ensuite, nous devons déclarer le composant RemoteObject dans une application Flex :

<mx:RemoteObject id="myservice" fault="faultHandler(event)"showBusyCursor="true" source="tutorial.HelloWorld" destination="amfphp"><mx:method name="sayHello" result="resultHandler(event)" />

</mx:RemoteObject>

Certaines propriétés ont fait leur apparition par rapport aux deux composants précédents :

j source : le chemin de l’objet distant ;j destination : le nom du service déclaré dans le fichier XML ;j une balise <mx:method> qui fonctionne de la même manière que la balise

<mx:operation> du composant WebService.

Enfin, il ne reste plus qu’à invoquer la méthode déclarée de la manière suivante :

Myservice.sayHello();

10.5 Mise en pratique : une application avec AmazonNous allons maintenant mettre en pratique les connaissances acquises au cours de cechapitre en réalisant une petite application permettant de rechercher et d’afficher desmusiques grâce aux services web fournis par le site Amazon.

Le principe est simple : il suffira d’entrer un texte dans un champ puis de cliquer surRechercher pour afficher les résultats associés dans la base de données du site Amazon.Le résultat final, comme vous le constatez, vous permet de vous faire une idée de ce quenous allons faire.

10Mise en pratique : une application avec Amazon

291

Nous allons donc commencer par créer l’interface utilisateur. Celle-ci se compose d’uneVBox regroupant les éléments suivants :

j une zone pour la saisie et la recherche ;j une grille pour afficher les résultats ;j une deuxième zone pour afficher des détails sur un élément de la recherche :

- une image ;- le titre ;- la date de sortie ;- le label ;- le numéro de produit Amazon ;

- des critiques ou commentaires.

Voici le code MXML de l’interface :

c Fig. 10.10 : Exemple avec Amazon


292

<mx:VBox width="600" horizontalAlign="center"paddingTop="20" paddingBottom="20" backgroundAlpha="0.5"backgroundColor="#ffffff"><mx:HBox>

<mx:Label text="Rechercher une musique :"/><mx:TextInput id="inputBox"/><mx:Button id="btn_Search" label="Rechercher" click="search()"/>

</mx:HBox><mx:DataGrid width="90%" height="350" id="dtg_res"dataProvider="{res}">

<mx:columns><mx:DataGridColumn headerText="Artiste"/><mx:DataGridColumn headerText="Titre"/><mx:DataGridColumn headerText="Label"/><mx:DataGridColumn headerText="ASIN" dataField="ASIN"/>

</mx:columns></mx:DataGrid><mx:Spacer height="20"/><mx:HBox paddingLeft="10" paddingRight="10"

paddingTop="10" paddingBottom="10" backgroundAlpha="0.7"borderStyle="solid" dropShadowEnabled="true" width="90%"><mx:Image width="250" height="250"

id="pochette" scaleContent="true" /><mx:Spacer width="50"/><mx:VBox width="100%">

<mx:Label id="lbl_title" fontSize="12" fontWeight="bold"/><mx:HBox>

<mx:Label text="Date : "/><mx:Label id="lbl_date"/>

</mx:HBox><mx:HBox>

<mx:Label text="Label : "/><mx:Label id="lbl_label"/>

</mx:HBox><mx:HBox>

<mx:Label text="Nombres de CD : "/><mx:Label id="lbl_nbcd"/>

</mx:HBox><mx:HBox>

<mx:Label text="ASIN : "/><mx:Label id="lbl_asin"/>

</mx:HBox></mx:VBox><mx:Spacer width="50"/><mx:VBox>

<mx:Label text="Commentaires"/><mx:TextArea id="txt_comment" width="250"


293

height="250" editable="false"wordWrap="true" backgroundAlpha="0.0"/>


</mx:VBox>

Comme vous le remarquez, les colonnes à afficher ont été explicitement décrites afin den’afficher que les informations utiles. Vous noterez également la présence d’une méthodesearch() et de divers objets permettant de stocker les données. Nous allons les ajouterdans un instant.

Avant cela, nous allons ajouter les services web d’Amazon. Nous allons tout d’abordcommencer par créer un compte (qui est gratuit) à l’adresse suivante : http://aws.amazon.com/.

Nous allons utiliser le service e-commerce (ECS) qui permet d’accéder aux informationssur les produits du catalogue d’Amazon. Vous trouverez la documentation complète àcette adresse : http://www.amazon.com/gp/browse.html?node=12738641.

Une fois votre inscription validée, vous recevrez un identifiant vous permettant d’accéderau service en ligne. Une fois ces formalités remplies, ajoutons le service web à notreprojet. Nous allons ajouter le service que nous nommerons WS_amazon et dans lequel nousajouterons deux opérations :

j ItemSearch qui permet de rechercher tous les articles correspondant à notre saisie ;j ItemLookup qui permet d’obtenir des détails sur un produit sélectionné.

c Fig. 10.11 : Page d’accueil du service d’Amazon


294

Il faudra également ajouter les paramètres nécessaires aux deux requêtes que nous venonsjuste de décrire. Voici à présent le code MXML permettant de déclarer le service webdont le wsdl se situe à l’adresse suivante : http://webservices.amazon.com/AWSECommerceService/AWSECommerceService.wsdl.

<mx:WebService id="WS_amazon"wsdl="{’http://webservices.amazon.com/’ +’AWSECommerceService/AWSECommerceService.wsdl’}"showBusyCursor="true" fault="Alert.show(event.fault.faultString)"><mx:operation name="ItemSearch" resultFormat="object"

result="processResult(event)"><mx:request>

<AWSAccessKeyId>****************</AWSAccessKeyId><Shared>

<Keywords>{input}</Keywords><SearchIndex>Music</SearchIndex><Count>20</Count>

</Shared></mx:request>

</mx:operation><mx:operation name="ItemLookup" resultFormat="object"

result="Alert.show(’ok’)"><mx:request>

<AWSAccessKeyId>****************</AWSAccessKeyId><Shared>

<ItemId>{dtg_res.selectedItem.ASIN}</ItemId><ResponseGroup>

ItemAttributes,Images,Tracks,EditorialReview</ResponseGroup>


</mx:operation></mx:WebService>

Dans notre cas, l’identifiant Amazon Web Service a été remplacé par des étoiles ; c’estentre les balises <AWSAccessKeyId></AWSAccessKeyId> que vous devez mettre celui quevous avez récupéré il y a un instant.

Notez également que les données retournées le seront sous la forme d’objets ActionScriptgrâce à la propriété resultFormat. Un objet input est lié à la propriété keywords de larequête et une méthode processResult est appelée pour gérer les données reçues. Nousallons également déclarer la méthode search() qui est appelée sur l’événement click dubouton de recherche :

<mx:Script>


295

<![CDATA[import mx.rpc.events.ResultEvent;import mx.controls.Alert;import mx.collections.ArrayCollection;[Bindable]private var input:String = "";

[Bindable]private var res:ArrayCollection;

private function processResult(evt:ResultEvent):void{

res = evt.result.Items.Item;}private function search():void{input = escape(inputBox.text);WS_amazon.ItemSearch.send();

}]]>

</mx:Script>

La méthode escape() permet ici de renvoyer une chaîne correctement formatée pour unerequête (les espaces sont simplement remplacés par %20).

Nous allons à présent apporter quelques modifications sur la DataGrid pour affichercorrectement les informations grâce à la propriété labelFunction des DataGridColumn :

private function getArtist(item:Object, column:DataGridColumn):String{

return item.ItemAttributes.Artist;}private function getTitle(item:Object, column:DataGridColumn):String{

return item.ItemAttributes.Title;}private function getLabel(item:Object, column:DataGridColumn):String{

return item.ItemAttributes.Manufacturer;}

Nous allons maintenant afficher les détails de l’album sélectionné dans notre DataGridgrâce à la seconde méthode du service web que nous appellerons à chaque fois quel’élément sélectionné changera.


296

Commençons par déclarer deux variables qui seront utilisées par la suite pour la liaisonde données avec les différentes informations affichées :

[Bindable]private var selectedItem:Object;

[Bindable]private var selectedItemDetail:Object;

Il ne reste ensuite qu’à créer la fonction qui formatera correctement les données etremplira ces deux variables :

private function showDetail(evt:ResultEvent):void{

selectedItem = evt.result.Items.Item;selectedItemDetail = selectedItem.ItemAttributes;

var titre:String = "";if (!selectedItemDetail.Artist)titre = "Inconnu - " + selectedItemDetail.Title;

elsetitre = selectedItemDetail.Artist + " - " + selectedItemDetail.Title;

lbl_title.text = titre;

var comments:String = "";if (selectedItem.EditorialReviews is ArrayCollection){

for each (var rev:Object in selectedItem.EditorialReviews)comments += rev.Content + "<br /><br />";

}txt_comment.text = comments;

if(selectedItem.LargeImage)pochette.source = selectedItem.LargeImage.URL;

}

Il faut ensuite appeler celle-ci sur l’événement result de la seconde méthode distante :

<mx:operation name="ItemLookup" resultFormat="object"result="showDetail(event)">

Et il faut également appeler la méthode distante sur l’événement change :

<mx:DataGrid width="90%" height="350" id="dtg_res"dataProvider="{res}" change="WS_amazon.ItemLookup.send()">

Et enfin, il ne reste plus qu’à lier les données avec les composants de type Label.


297

Voici donc le code complet de l’application avec un effet visuel de flou (<mx:blur>) quia été rajouté lors du changement de l’image :


layout="vertical" backgroundGradientColors="[#000000,#ffffff]"><mx:Script>

<![CDATA[import mx.rpc.events.ResultEvent;import mx.controls.Alert;import mx.collections.ArrayCollection;[Bindable]private var input:String = "";

[Bindable]private var res:ArrayCollection;

[Bindable]private var selectedItem:Object;

[Bindable]private var selectedItemDetail:Object;

private function processResult(evt:ResultEvent):void{

res = evt.result.Items.Item;}private function search():void{

input = escape(inputBox.text);WS_amazon.ItemSearch.send();

}

private function getArtist(item:Object,column:DataGridColumn):String

{return item.ItemAttributes.Artist;

}private function getTitle(item:Object,

column:DataGridColumn):String{

return item.ItemAttributes.Title;}private function getLabel(item:Object,

column:DataGridColumn):String{

return item.ItemAttributes.Manufacturer;}


298

private function showDetail(evt:ResultEvent):void{

selectedItem = evt.result.Items.Item;selectedItemDetail = selectedItem.ItemAttributes;blurMain.target = pochette;blurMain.play();

var titre:String = "";if (!selectedItemDetail.Artist)

titre = "Inconnu - " + selectedItemDetail.Title;else

titre = selectedItemDetail.Artist +" - " + selectedItemDetail.Title;

lbl_title.text = titre;

var comments:String = "";if (selectedItem.EditorialReviews is ArrayCollection){

for each (var rev:Object in selectedItem.EditorialReviews)comments += rev.Content + "<br /><br />";

}txt_comment.htmlText = comments;

if(selectedItem.LargeImage)pochette.source = selectedItem.LargeImage.URL;

blurMain.end();unblurMain.target = pochette;unblurMain.play();

}]]>

</mx:Script>

<mx:Blur id="blurMain" duration="1000"

blurXFrom="0.0" blurXTo="10.0"blurYFrom="0.0" blurYTo="10.0" />

<mx:Blur id="unblurMain" duration="1000"blurXFrom="10.0" blurXTo="0.0"blurYFrom="10.0" blurYTo="0.0" />

<mx:WebService id="WS_amazon"

wsdl="{’http://webservices.amazon.com/’ +’AWSECommerceService/AWSECommerceService.wsdl’}" showBusyCursor="true"fault="Alert.show(event.fault.faultString)">

<mx:operation name="ItemSearch" resultFormat="object"result="processResult(event)"><mx:request>


299

<AWSAccessKeyId>********************</AWSAccessKeyId><Shared>

<Keywords>{input}</Keywords><SearchIndex>Music</SearchIndex><Count>20</Count>


</mx:operation><mx:operation name="ItemLookup" resultFormat="object"

result="showDetail(event)"><mx:request>

<AWSAccessKeyId>********************</AWSAccessKeyId><Shared>

<ItemId>{dtg_res.selectedItem.ASIN}</ItemId><ResponseGroup>

ItemAttributes,Images,Tracks,EditorialReview</ResponseGroup>


</mx:operation></mx:WebService>

<mx:VBox width="900" horizontalAlign="center" paddingTop="20"paddingBottom="20" backgroundAlpha="0.5" backgroundColor="#ffffff"id="main">

<mx:HBox><mx:Label text="Rechercher une musique :"/><mx:TextInput id="inputBox"/>

<mx:Button id="btn_Search" label="Rechercher" click="search()"/></mx:HBox><mx:DataGrid width="90%" height="350" id="dtg_res"

dataProvider="{res}" change="WS_amazon.ItemLookup.send()" ><mx:columns>

<mx:DataGridColumn headerText="Artiste"labelFunction="getArtist"/>

<mx:DataGridColumn headerText="Titre" labelFunction="getTitle"/><mx:DataGridColumn headerText="Label" labelFunction="getLabel"/><mx:DataGridColumn headerText="ASIN" dataField="ASIN" />

</mx:columns></mx:DataGrid><mx:Spacer height="20"/><mx:HBox paddingLeft="10" paddingRight="10" paddingTop="10"

paddingBottom="10" backgroundAlpha="0.7" borderStyle="solid"dropShadowEnabled="true" width="90%">

<mx:Image width="250" height="250" id="pochette"scaleContent="true" />


300

<mx:Spacer width="50"/><mx:VBox width="100%">

<mx:Label id="lbl_title" fontSize="12" fontWeight="bold"/><mx:HBox>

<mx:Label text="Date : "/><mx:Label id="lbl_date"

text="{selectedItemDetail.OriginalReleaseDate}"/></mx:HBox><mx:HBox>

<mx:Label text="Label : "/><mx:Label id="lbl_label" text="{selectedItemDetail.Label}"/>

</mx:HBox><mx:HBox>

<mx:Label text="Nombres de CD : "/><mx:Label id="lbl_nbcd"

text="{selectedItemDetail.NumberOfDiscs}"/></mx:HBox><mx:HBox>

<mx:Label text="ASIN : "/><mx:Label id="lbl_asin" text="{selectedItem.ASIN}"/>

</mx:HBox>

</mx:VBox><mx:Spacer width="50"/><mx:VBox>

<mx:Label text="Commentaires"/><mx:TextArea id="txt_comment" width="250" height="250"

editable="false" wordWrap="true" backgroundAlpha="0.0"/></mx:VBox>

</mx:HBox>

</mx:VBox>

</mx:Application>


a comment charger des ressources externes à l’exécution avec la classe URLLoader ;a comment récupérer des données par des requêtes http avec le composant

HTTPService ;a comment invoquer des méthodes distantes avec les services web ;a comment passer des arguments aux méthodes distantes.

10Check-list

301

1111.1 Introduction à Flex Charting ........................... 30411.2 Les différents types de graphiques .................... 30511.3 Mettre en forme les graphiques ....................... 30911.4 Interaction avec les graphiques ....................... 31511.5 Mise en pratique : un module de statistiques ........ 32111.6 Check-list ................................................. 327

Présenter lesdonnéesgraphiquement

Lorsque vous manipulez beaucoup de données, il esttoujours plus parlant pour l’utilisateur de voir un

graphique synthétique plutôt qu’une interminable liste dedonnées. L’interprétation sera beaucoup plus simple etl’interface sera plus esthétique. Ce chapitre va vousrévéler comment y parvenir grâce à Flex.

11.1 Introduction à Flex ChartingFlex propose des composants simples d’utilisation pour créer de multiples types degraphiques, avec beaucoup de variations possibles dans chaque type.

Ces composants sont inclus dans le framework Flex lors de son installation, mais fontl’objet d’une licence séparée. Vous pouvez jouer avec les composants de Flex Chartingpendant la période d’essai de Flex Builder mais vous aurez un watermark sur vosgraphiques. Nous partons du principe dans ce chapitre que Flex Charting est installé etqu’il est activé ou en période d’essai, avec toutes les fonctionnalités activées.

Utiliser un composant de Flex ChartingLes graphiques, comme toujours dans Flex, sont des composants. Bien que la présentationsoit très différente d’un type à l’autre, le code pour les créer est très similaire. Vouspouvez voir des exemples de graphiques dans l’application de démonstration descomposants Flex à l’adresse : http://www.adobe.com/go/flex_explorer_app. L’image suivantemontre que vous pouvez faire avec Flex des camemberts lorsque vous sélectionnez lecomposant PieChart situé dans le dossier Chart de l’application.

c Fig. 11.1 : Le composant PieChart dans Flex Component Explorer

11 Présenter les données graphiquement

304

Attardons-nous quelques instants sur le code du PieChart ci-après ; nous détailleronschaque partie dans le chapitre.

Pour travailler avec les graphiques, vous n’avez pas d’autres alternatives que de passerpar le code MXML. L’interface design ne permet que de poser le type de graphique, maiscela ne suffira pas à voir vos données s’afficher. Vous remarquerez que le graphique secompose de plusieurs contenus dans le tag père définissant le type de graphique :<mx:PieChart>. Nous verrons que c’est dans ce tag que nous spécifions notre source dedonnées (dataprovider) ou l’affichage de bulles d’information (DataTips).

Dans ce tag, nous avons le conteneur <mx:series>. Ce conteneur permet de lier un champde vos données à un affichage. Un camembert ne présente généralement qu’une seule listed’information mais des composants comme le LineChart ou le ColumnChart peuventprésenter plusieurs données pour les comparer. Nous aurons alors plusieurs séries.

11.2 Les différents types de graphiquesComme vous avez peut-être pu déjà le constater en naviguant dansFlex Component Explorer, il existe différentes sortes de graphiques qui répondent auxbesoins les plus fréquents. Nous allons vous les présenter ainsi que leurs variationspossibles.

Le PieChartLe contrôle PieChart permet de créer des camemberts. Les valeurs des données sontautomatiquement calculées pour adapter la taille de chaque partie entre elles.

c Fig. 11.2 : Code pour créer un camembert

11Les différents types de graphiques

305

Le PieChart peut prendre plusieurs séries dans le même graphique, ce qui se traduitgraphiquement par des anneaux pour chaque série. Vous pouvez également personnaliserl’affichage du camembert en le présentant comme un donut en spécifiant un rayonintérieur avec la propriété innerRadius. Vous pouvez aussi exploser le camembert avecla propriété explodeRadius qui, tout comme la propriété innerRadius, attend commevaleur un flottant entre 0 et 1.

L’AreaChartLe contrôle AreaChart permet de présenter des données sous forme d’aire sous une lignedélimitant les valeurs. Vous pouvez utiliser des images ou des symboles pour différencierchaque point de la ligne ou n’afficher qu’une simple ligne. L’image suivante représenteun simple AreaChart :

Vous pouvez utiliser l’AreaChart pour représenter des variations entre plusieurs donnéesen superposant les aires ou en faisant un rapport entre les aires en utilisant la propriététype avec les valeurs suivantes :

j clustered ;

c Fig. 11.3 : Les différents types de PieChart

c Fig. 11.4 :Un simple AreaChart


306

j overlaid ;j stacked ;j 100%.

Vous aurez alors les résultats suivants :

Le type de série

Ce type de présentation s’applique également au BarChart et au ColumnChart.

Le ColumnChart et le BarChartLe ColumnChart permet de présenter les données en colonnes tandis que le BarChartpermet de les présenter en lignes. Les deux composants sont fort similaires et partagentde nombreuses propriétés.

c Fig. 11.5 : Les différents types d’AreaChart

c Fig. 11.6 : Un ColumnChart et un BarChart

11Les différents types de graphiques

307

Le LineChartLe contrôle LineChart permet d’afficher dans un espace cartésien des couples de donnéesqui seront liés aux deux axes de graphiques. Chaque donnée représente un point dugraphique qui est lié à la donnée précédente et à la suivante. Il existe plusieurs types deformes pour relier les points entre eux. Vous pouvez les changer simplement en utilisantl’attribut form du tag LineSeries avec l’une des valeurs suivantes :

j segment ;j curve ;j step ;j reverseStep ;j vertical ;j horizontal.

Parce qu’il existe un vieil adage qui dit qu’une image vaut mieux que mille mots, voiciune image qui illustre les diverses formes du LineChart listées précédemment :

Le BubbleChart et le PlotChartLe contrôle PlotChart permet de représenter les données avec des coordonnéescartésiennes où chaque point est déterminé par deux valeurs pour chaque axe. Vouspouvez spécifier à Flex la forme de chaque point affiché.

c Fig. 11.7 : Les différentes allures du LineChart


308

Le BubbleChart possède une information supplémentaire qui est la taille de la bulle àafficher. La taille maximale de la bulle peut être définie grâce à l’attribut maxRadius dutag <mx:BubbleChart>. Flex calculera une taille proportionnelle à la plus grande pourtoutes les bulles. La valeur par défaut est de 30 pixels.

11.3 Mettre en forme les graphiquesNous allons prendre un exemple simple pas à pas pour comprendre les principauxconcepts.

Créez un nouveau projet Flex avec le nom et l’emplacement qui vous plairont.Commençons par définir les donnés que nous voulons présenter.

Les donnéesVous allez créer un simple tableau contenant des données relatives à des statistiques devente de livres. Nous voulons afficher le nombre de livres vendus par catégorie. Il nousfaut donc un tableau contenant le nom de la catégorie, associé au nombre de livresvendus. Copiez le code MXML suivant dans votre application :


<mx:Script><![CDATA[[Bindable]private var bookStats:Array = [

{bookCat: "Science-fiction", Sales: 346},{bookCat: "Drame", Sales: 234},{bookCat: "Classique", Sales: 89},

c Fig. 11.8 : Un BubbleChart et un PlotChart

11Mettre en forme les graphiques

309

{bookCat: "Enfant", Sales: 109} ];]]></mx:Script>

</mx:Application>

Vous pouvez récupérer vos données d’où vous voulez, comme vous l’avez appris dans lechapitre 5. Notre exemple est simple mais il suffit à étayer notre propos.

Ajoutez maintenant un camembert. Pour lier les données à un graphique, il fautcommencer par lui spécifier quelle source il doit prendre en compte. Pour cela, il fautrenseigner la propriété dataProvider du composant. Si vous ne vous sentez pas à l’aisesur le sujet, reportez-vous encore une fois au chapitre 5. Sinon, copiez le code suivant àla suite de votre application :

<mx:PieChart width="50%" height="50%" dataProvider="{bookStats}">

</mx:PieChart>

Si vous lancez l’application à cet instant, vous n’aurez pas d’erreur mais vous ne verrezrien s’afficher. En effet, une fois que vous avez lié votre source de données à votregraphique, il faut encore préciser quel champ de vos données vous voulez présenter. Celase passe au niveau des séries.

Les sériesComme nous venons de le voir, Flex ne sait pas quel champ afficher ni commentl’afficher. Une série est associée à un champ de vos données. Un graphique peut avoirplusieurs séries pour comparer plusieurs séries de données. Vous devez donc ajouter le tag<mx:series> dans lequel nous allons rajouter nos séries.

<mx:PieChart width="50%" height="50%" dataProvider="{bookStats}"><mx:series>

</mx:series></mx:PieChart>

Dans ce conteneur, nous allons ajouter un élément PieSeries (car nous avons créé unPieChart) et lui préciser qu’il doit afficher les données du champ sales grâce à l’attributfield.

<mx:PieChart width="50%" height="50%" dataProvider="{bookStats}"><mx:series>

<mx:PieSeries field="Sales" /></mx:series>

</mx:PieChart>


310

Vous remarquerez que vous ne devez pas mettre la valeur de l’attribut field entreaccolades.

Vous pouvez maintenant lancer votre application, vous aurez le résultat suivant :

Le composant a effectué lui-même les calculs pour rendre un camembert avec les bonnesproportions pour chaque catégorie. Le composant, dans l’état actuel, est ce qu’il y a deplus basique.

Nous ne savons pas, par exemple, quelles zones représentent quelles catégories. Nousallons donc ajouter les labels. Rajoutez l’attribut labelPosition comme ceci :

<mx:PieSeries field="Sales" labelPosition="inside" />

Vous avez maintenant les valeurs qui s’affichent, mais toujours pas de catégories. Flex nepeut pas deviner que vous voulez afficher les valeurs des autres champs de votre sourcede données. Pour arriver à nos fins, nous devons définir une fonction qui va prendreexactement quatre paramètres et retourner une chaîne de caractères. La signature de cettefonction doit être respectée pour que Flex puisse l’interpréter correctement. De plus, cettefonction change d’un type de graphique à l’autre. Retournez dans le bloc de script etrecopiez la fonction suivante :

private function chartLabel(dataItem:Object, field:String, index:int,dataPercent:Number):String{

c Fig. 11.9 :Le PieChart minimal

c Fig. 11.10 :Le PieChart avec des labels


311

return dataItem.bookCat + " (" + Math.round(dataPercent) + "%)";}

La fonction affiche la catégorie des livres puis le pourcentage arrondi qui est calculé parle composant. Appliquez alors cette fonction à notre camembert :

<mx:series><mx:PieSeries field="Sales" labelPosition="inside"labelFunction="chartLabel" />

</mx:series>

Nous avons alors le résultat suivant :

Vous pouvez également modifier la position du label pour le mettre à l’extérieur ducamembert en remplaçant la valeur de l’attribut labelPosition par la valeur callout.Vous aurez alors le résultat suivant :

Les axesNous avons jusqu’à présent suivi la construction du PieChart ; or, c’est un graphique quia la particularité de ne pas avoir d’axe. Des graphiques comme le ColumnChart ou leLineChart reposent sur deux axes. Nous allons voir par l’exemple comment utiliser lesaxes.

c Fig. 11.11 :Le PieChart avec des labels personnalisés

c Fig. 11.12 :Le PieChart avec deslabels à l’extérieur


312

Reprenez le tableau du projet précédent, et créez un ColumnChart lié à ce tableau commevous l’avez fait pour le PieChart. Voici le code que vous devez avoir dans un premiertemps :

<mx:ColumnChart dataProvider="{bookSales}" width="50%" height="50%">

</mx:ColumnChart>

Si vous lancez l’application, vous aurez un squelette de graphique avec deux axesdessinés, mais aucune colonne.

La première chose à faire est de définir l’axe horizontal. Nous voulons ici afficher noscatégories de livres. Nous allons donc rajouter dans le ColumnChart l’élémenthorizontalAxis. Ensuite, à l’intérieur de cet élément, nous allons rajouter le composantCategoryAxis et l’associer au champ bookCat de notre source de données via l’attributcategoryField de l’élément. Vous devriez aboutir au code suivant :

<mx:ColumnChart dataProvider="{bookStats}" width="50%" height="50%"><mx:horizontalAxis>

<mx:CategoryAxis categoryField="bookCat"/></mx:horizontalAxis>

</mx:ColumnChart>

Nous verrons plus tard qu’il existe d’autres axes.

Si vous lancez l’application à cet instant, vous verrez apparaître le nom des catégories delivres sur l’axe horizontal.

Ajoutons finalement les données en ajoutant une série. Procédez comme nous l’avons faitpour la série du PieChart. Notez cependant que nous utilisons actuellement unColumnChart et qu’il faut donc utiliser un ColumnSeries. La différence avec la PieSeriesest que le ColumnSeries doit être lié avec les données sur les deux axes, autrement dit,

c Fig. 11.13 :Mise en place descatégories sur l’axehorizontal


313

il faut lier d’une part les ventes sur l’axe vertical via l’attribut yField, et d’autre part lescatégories sur l’axe horizontal via l’attribut xField. Vous aurez finalement le codesuivant :

<mx:ColumnChart dataProvider="{bookStats}" width="50%" height="50%"><mx:horizontalAxis>

<mx:CategoryAxis categoryField="bookCat"/></mx:horizontalAxis><mx:series>

<mx:ColumnSeries xField="bookCat" yField="Sales"/></mx:series>

</mx:ColumnChart>

Ce qui vous donnera un graphique exploitable lorsque vous lancerez l’application :

Les axes numériques

Nous venons de voir les CategoryAxis qui permettent d’afficher des valeurs discrètesreprésentant des catégories. La valeur de cet axe est typiquement une chaîne decaractères. Mais il se peut que notre axe horizontal représente des données continuescomme une plage dans le temps ou une plage d’entiers (des volumes de vente ou dessalaires). Il existe alors trois types d’axes pour répondre à ces besoins :

j LinearAxis ;j LogAxis ;j DateTimeAxis.

Le LinearAxis est le plus simple d’utilisation. Il permet d’associer les valeurs desdonnées entre un minimum et un maximum et il répartit correctement les valeurs entre lesdeux bornes. Par défaut, Flex calcule automatiquement le minimum et le maximum enfonction des données que vous lui donnez, mais vous pouvez forcer les bornes de cet axesi vous en avez besoin comme le montre l’exemple suivant :

<mx:verticalAxis>

c Fig. 11.14 :Mise en place desdonnées sur les axes


314

<mx:LinearAxis minimum="30" maximum="50"/></mx:verticalAxis>

Le DateTimeAxis est un composant très intéressant et très puissant qui vous simplifieragrandement la présentation des données basée sur le temps. Il calcule automatiquementles dates minimale et maximale selon vos données ainsi que l’intervalle idéal pour quel’affichage des labels sur l’axe reste lisible. Nous étudierons plus en détail cet axe lors dela mise en pratique dans ce chapitre.

11.4 Interaction avec les graphiquesContrairement aux graphiques statiques que vous pouvez voir sur les applications webactuelles, et qui sont généralement des images, Flex permet d’avoir une réelle interactionentre l’utilisateur et les graphiques qu’il visionne.

Les bulles d’informationLorsque vous utilisez le PieChart, vous pouvez choisir de ne pas afficher les informationsen permanence via l’attribut labelPosition mais ne les afficher que lorsque l’utilisateurpositionne sa souris sur l’une des zones du camembert. De même, lorsque vous utilisezle composant LineChart, vous pouvez faire en sorte d’afficher les valeurs précises d’unedonnée en affichant une bulle d’aide générée par Flex. L’écran suivant montre l’affichaged’une bulle d’information sur un composant AreaChart.

Il suffit de rajouter simplement l’attribut showDataTips au composant du graphiquecomme le montre la portion de code suivante :

<mx:Script>[Bindable] public var datas:Array = [

{date: "12/01", field1: 6, field2:1},

c Fig. 11.15 :Affichage d’une bulled’information

11Interaction avec les graphiques

315

{date: "13/01", field1: 7, field2:4},{date: "14/01", field1: 4, field2:3},{date: "15/01", field1: 8, field2:3},

];</mx:Script><mx:AreaChart id="chart" height="100%" width="100%"dataProvider="{datas}" showDataTips="true">

<mx:horizontalAxis><mx:CategoryAxis dataProvider="{datas}" categoryField="date"/>

</mx:horizontalAxis><mx:series>

<mx:AreaSeries yField="field1" /><mx:AreaSeries yField="field2" />

</mx:series></mx:AreaChart>

Bien que l’affichage du DataTip dépende du type de graphique, il affiche généralement lenom du champ dans le dataProvider et sa valeur. Ici, ce n’est pas le cas, et pour quel’information soit compréhensible par l’utilisateur, il faut encore spécifier l’affichage dunom du champ dans la série. Modifiez donc les séries pour rajouter l’attribut displayNamecomme le montre le code suivant :

<mx:AreaSeries yField="field1" displayName="Total livres vendus"/><mx:AreaSeries yField="field2" displayName="Total livres invendus"/>

Nous avons encore un détail à régler. Lorsque vous nommez l’axe de la catégorie, celle-cis’affiche en italique également, ce qui rend la bulle d’information plus complète :

<mx:horizontalAxis><mx:CategoryAxis dataProvider="{datas}"

categoryField="date" displayName="Date"/></mx:horizontalAxis>

c Fig. 11.16 :Affichage d’une bulled’information pluscompréhensible


316

Vous avez maintenant une bulle d’information plus intéressante pour l’utilisateur :

Enfin, de la même manière que l’on a pu choisir l’affichage du texte dans le PieChart,nous pouvons choisir comment présenter le texte de cette bulle d’aide bien que dans laplupart des cas, Flex génère une bulle d’information très complète. Supposons que notredataProvider soit le tableau utilisé précédemment pour formater nos graphiques ; voicila fonction à appliquer pour avoir un DataTip personnalisé :

public function dtFunc(e:ChartItemEvent):String {return e.hitData.item.bookCat + ": <b>$" + e.hitData.item.Sales +"</b>";

}

Les légendesVous avez également la possibilité d’ajouter des légendes à vos graphiques. Vousutiliserez à cet effet le composant <mx:Legend> et vous le lierez au graphique souhaité enindiquant l’identifiant du graphique à l’attribut dataProvider du composant. Le contrôleva chercher les informations dans le graphique pour coller automatiquement les bonnescouleurs aux légendes. Pour que ce contrôle fonctionne, il faut nommer les séries dugraphique à légender en utilisant l’attribut displayName. Si vous ne le faites pas, rien nes’affichera dans la légende. L’exemple suivant montre chaque série avec la propriétédisplayName qui se lie au label des légendes :


layout="horizontal" backgroundColor="white"><mx:Script>import mx.collections.ArrayCollection;[Bindable] public var expenses:Array = [

{Person: "Pierre", Sport: 6, Reading:1, Tv:4},

c Fig. 11.17 :Affichage d’une bulled’information complète


317

{Person: "Marie", Sport: 2, Reading:6, Tv:3},];

</mx:Script><mx:BarChart id="chart" dataProvider="{expenses}">

<mx:verticalAxis><mx:CategoryAxis dataProvider="{expenses}"

categoryField="Person"/></mx:verticalAxis><mx:series>

<mx:BarSeries xField="Sport" displayName="Sport"/><mx:BarSeries xField="Reading" displayName="Lecture"/><mx:BarSeries xField="Tv" displayName="Télévision"/>

</mx:series></mx:BarChart>

<mx:Legend dataProvider="{chart}"/>

</mx:Application>

Vous obtenez le résultat suivant :

Vous pouvez disposer les éléments de la légende horizontalement en utilisant l’attributdirection avec la valeur horizontal. Modifiez le layout de l’application pour qu’il soitnon plus horizontal mais vertical et vous aurez alors ceci :

c Fig. 11.18 :Le composant Legend

c Fig. 11.19 :La légendehorizontalement


318

Animer un graphiqueSupposons que vous vouliez comparer les données de deux sources différentes. AvecFlex, vous pouvez créer des transitions animées d’un graphique à l’autre. Vous verrez quecet effet spectaculaire n’est pas difficile à mettre en place.

Pour assimiler ce concept, nous allons prendre un exemple. Nous allons comparer lesventes et les invendus de livres de deux libraires selon les catégories des livres.

Commençons par créer un nouveau projet et deux sources de données, une pour chaqueboutique. Voici un exemple de ce que vous pouvez écrire :

[Bindable]private var bookStats1:Array = [

{bookCat: "Science-fiction", Sales: 250, NoSales:46},{bookCat: "Drame", Sales: 234, NoSales:56},{bookCat: "Classique", Sales: 89, NoSales:156},{bookCat: "Enfant", Sales: 109, NoSales:56} ];

[Bindable]private var bookStats2:Array = [

{bookCat: "Science-fiction", Sales: 246, NoSales:15},{bookCat: "Drame", Sales: 52, NoSales:250},{bookCat: "Classique", Sales: 189, NoSales:56},{bookCat: "Enfant", Sales: 39, NoSales:15} ];

Ajoutez maintenant un ColumnChart, associez le dataProvider de la première librairie etajoutez deux séries pour avoir une colonne représentant les ventes et une autre pour lesinvendus.

Vous devriez avoir le code suivant :

<mx:ColumnChart dataProvider="{bookStats1}" width="50%" height="50%"id="myChart">

<mx:horizontalAxis><mx:CategoryAxis categoryField="bookCat"/>

</mx:horizontalAxis><mx:series><mx:ColumnSeries xField="bookCat" yField="Sales"

displayName="Livres vendus" /><mx:ColumnSeries xField="bookCat" yField="NoSales"

displayName="Livres invendus" /></mx:series>

</mx:ColumnChart>

Nous voulons maintenant animer notre graphique. Nous avons trois transitions possibles :

j SeriesInterpolate ;


319

j SeriesSlide ;j SeriesZoom.

Nous allons commencer par la transition SeriesInterpolate, qui est la plus simple àfaire.

Juste au-dessus du tag du graphique, rajoutez le tag de la transition, avec un identifiantet une durée de transition, comme le montre le code suivant :

<mx:SeriesInterpolate id="chartTransition" duration="1500"/>

Il faut maintenant lier cette transition aux séries via l’attribut showDataEffect. Les tagsdes deux séries doivent ressembler à ceci :

<mx:series><mx:ColumnSeries xField="bookCat" yField="Sales"

displayName="Livres vendus" showDataEffect="{chartTransition}"/><mx:ColumnSeries xField="bookCat" yField="NoSales"

displayName="Livres invendus" showDataEffect="{chartTransition}"/></mx:series>

Pour que la transition ait lieu, il faut que le dataProvider du graphique change. Nousallons donc rajouter deux RadioButton qui sélectionneront l’une au l’autre des sources dedonnées. Rajoutez finalement le code suivant :

<mx:VBox><mx:RadioButton groupName="bookShop" label="Statistiques de la

➥ librairie 1"selected="true" click="myChart.dataProvider=bookStats2;"/>

<mx:RadioButton groupName="bookShop" label="Statistiques de la➥ librairie 2"

click="myChart.dataProvider=bookStats1;"/></mx:VBox>

C’est tout ce qu’il y a à faire. Vous pouvez lancer l’application, et vous devriez avoir lerésultat suivant :

c Fig. 11.20 : Le graphe s’anime lorsqu’on change de boutique


320

Quand vous sélectionnez un ou l’autre des RadioButton, la source de données dugraphique change, provoquant une transition. Le fond du graphique se redimensionnepour coller aux nouvelles valeurs et les colonnes s’animent pour correspondre auxnouvelles valeurs.

Pour les deux autres types de transition, il faut opérer de façon légèrement différente carnous aurons besoin de deux effets : un effet pour faire glisser les colonnes dans un senset un autre effet pour les faire glisser dans l’autre sens.

Remplacez le tag SeriesInterpolate par deux tags SeriesSlide comme ceci :

<mx:SeriesSlide id="chartSlideIn" duration="1500" direction="up"/><mx:SeriesSlide id="chartSlideOut" duration="1500" direction="down"/>

Vous remarquerez que vous devez spécifier en plus cette fois la direction de l’effet : upou down. L’un permet de faire croître les colonnes tandis que l’autre les fait s’effondrer.Remplacez dans les séries les valeurs des attributs showDataEffect par chartSlideIn etrajoutez à chacun l’attribut hideDataEffect avec la valeur du second effet :chartSlideOut. Vous aurez le code suivant :

<mx:series><mx:ColumnSeries xField="bookCat" yField="Sales"

displayName="Livres vendus" showDataEffect="{chartSlideIn}"hideDataEffect="{chartSlideOut}"/>

<mx:ColumnSeries xField="bookCat" yField="NoSales"displayName="Livres invendus" showDataEffect="{chartSlideIn}"hideDataEffect="{chartSlideOut}"/>

</mx:series>

Vous n’avez rien d’autre à modifier. Lancez l’application et admirez le résultat : lescolonnes existantes disparaissent et les nouvelles augmentent.

Pour tester l’effet de zoom des SeriesZoom, remplacez le nom des éléments SeriesSlidepar SeriesZoom et supprimez les attributs direction. Toutes les autres fonctionnalitéssont identiques ; vous pouvez lancer l’application et voir l’effet de zoom et de dézoom.

Comme vous avez pu le constater, créer des effets pour animer des graphiques dans Flexn’est pas compliqué et le résultat est toujours spectaculaire.

11.5 Mise en pratique : un module de statistiquesNous allons réaliser une petite application qui permettra à un libraire de visualiser lacroissance des ventes de livres dans ses différentes boutiques ainsi que la répartition des

11Mise en pratique : un module de statistiques

321

catégories d’ouvrages vendus. Nous allons rester simple pour l’exemple et supposer quele libraire n’a que deux boutiques.

La première étape, vous la connaissez maintenant, c’est de créer un nouveau projet Flex.Libre à vous de trouver un nom et un emplacement pour ce petit projet.

Nous allons commencer par définir les sources de données qu’il faudra présentergraphiquement. Nous utiliserons pour cela deux fichiers XML, un pour chaque boutique.Nous resterons sur des fichiers statiques car c’est plus rapide. Créez un fichierstatistiques_paris.xml dans le dossier bin. Nous devons placer ce fichier dans le dossierbin car lorsque vous lancerez l’application, Flex cherchera le fichier dans le répertoirelocal, autrement dit, le répertoire où se trouve l’application compilée. Votre fichier XMLdoit avoir la structure suivante :

<stats><salesStats>

<record><date>01/01/2007</date><total>34</total>

</record></salesStats><categoryStats>

<record><category>Science-fiction</category>

<total>55</total><record>

</categoryStats></stats>

Complétez ce fichier en rajoutant des données. À cet effet, rajoutez des éléments recordavec leur descendance en modifiant les valeurs des éléments enfants. Créez ensuite unsecond fichier que vous nommerez statistiques_lyon.xml et qui comportera le mêmeschéma mais avec des données différentes.

Format des dates

Flex s’attend à lire des dates au format américain, qui est différent du format français. Vos dates doiventrespecter le format suivant : MM/JJ/AAAA.

Nous allons maintenant entamer le code de notre application. Nous allons dans unpremier temps placer les différents éléments. Utilisez judicieusement les conteneurs etpositionnez les différents contrôles pour aboutir au résultat suivant dans Flex Builder :


322

Vérifions maintenant que vous avez un code similaire à celui-ci :


layout="vertical" backgroundColor="white"><mx:Script source="as/application.as" />

<mx:Label text="Statistiques des librairies Dupont" fontSize="24"/><mx:RadioButtonGroup id="bookShop"/>

<mx:RadioButton groupName="bookShop" value="paris"label="Boutique à Paris" selected="true"/><mx:RadioButton groupName="bookShop" value="lyon"label="Boutique à Lyon" /><mx:HBox width="100%" height="100%">

<mx:Panel layout="vertical" width="100%" height="100%"><mx:AreaChart id="areaChart" width="100%" height="100%"></mx:AreaChart><mx:Legend/>

</mx:Panel><mx:Panel width="40%" height="100%"><mx:PieChart id="pieChart" width="100%" height="100%"></mx:PieChart>

<mx:Legend height="30%" /></mx:Panel>

</mx:HBox></mx:Application>

Veillez à nommer à l’identique les identifiants des contrôles qui en possèdent.Assurez-vous également que l’un des deux RadioButton ait l’attribut selected à true etqu’ils aient tous les deux un attribut value.

Nous allons maintenant lier les données du fichier XML aux graphiques. Nous allonsutiliser un HTTPService. Rajoutez le tag suivant dans votre application :

c Fig. 11.21 : Le design de l’application dans Flex Builder


323

<mx:HTTPService id="httpService" result="{setCharts()}" />

Rappelez-vous, l’événement result signifie que la méthode setCharts sera appelée àchaque fois que l’on aura fait une requête avec httpService. Nous allons d’ailleurs toutde suite préciser quand nous voulons faire cette requête : la première fois lorsquel’application est lancée, puis à chaque fois que l’on sélectionne une boutique. Rajoutezl’attribut creationComplete au tag Application et l’attribut click aux tags RadioButtonavec comme valeur l’appel à la fonction getStats :

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"backgroundColor="white" creationComplete="{getStats()}">

…<mx:RadioButton groupName="bookShop" value="paris" selected="true"click="{getStats()}"/><mx:RadioButton groupName="bookShop" value="lyon" click="{getStats()}" />

Voyons maintenant le code des deux fonctions que nous venons de citer. Créez un tagScript et copiez les deux fonctions suivantes :

<mx:Script>[Bindable]public var SalesStats:Object;[Bindable]public var CategoryStats:Object;

public function setCharts():void {SalesStats = httpService.lastResult.stats.salesstats.stat;CategoryStats = httpService.lastResult.stats.categorystats.stat;

}

public function getStats():void {httpService.url = "statistiques_"+bookShop.selectedValue+".xml";httpService.send();

}</mx:Script>

La fonction getStats permet de spécifier quel fichier XML nous voulons récupérer enfonction du RadioButton sélectionné. C’est pour cette raison que l’un des deuxRadioButton doit être sélectionné dès le lancement de l’application car cette fonction estappelée en tout premier lieu.

La fonction setCharts permet de récupérer les données de la requête et de la mettre dansdeux variables SalesStats et CategoryStats. Ces deux variables vont être bien entendules dataProvider de nos deux graphiques.Occupons-nous de notre camembert en premier et de sa légende :


324

<mx:PieChart width="100%" id="pieChart" dataProvider="{CategoryStats}"showDataTips="true" height="100%">

<mx:series><mx:PieSeries field="total" nameField="category" displayName="Nombre

➥ de visiteurs" /></mx:series>

</mx:PieChart><mx:Legend height="30%" dataProvider="{pieChart}" />

Attaquons-nous maintenant à notre AreaChart. Commençons par définir les axes :

<mx:AreaChart width="100%" id="areaChart" dataProvider="{SalesStats}"showDataTips="true" height="100%">

<mx:horizontalAxis><mx:DateTimeAxis labelFunction="dateTimeAxisLabel"/>

</mx:horizontalAxis><mx:verticalAxis>

<mx:LinearAxis interval="100"/></mx:verticalAxis>

</mx:AreaChart>

Vous remarquerez tout d’abord l’utilisation du tag LinearAxis pour l’axe vertical. Cetusage permet juste de spécifier nous-même l’intervalle de l’axe et d’avoir un axe un peumoins chargé.

Vous remarquerez ensuite l’utilisation du tag DateTimeAxis pour l’axe horizontal. Flex vanous faciliter grandement la tâche car ce tag va trier lui-même les données et les placerchronologiquement. Il va également se charger de calculer l’intervalle idéal pour afficherles dates en abscisse. Ainsi, il choisira un affichage par jour, par mois ou par année selonl’étendue des données.

Nous allons maintenant nous occuper de la série en la personnalisant quelque peu. Nousallons choisir les couleurs de la courbe et de la surface en dessous de la courbe :

<mx:AreaChart width="100%" id="areaChart" dataProvider="{SalesStats}"showDataTips="true" height="100%">

...<mx:series>

<mx:AreaSeries yField="total" xField="date"displayName="Nombre de ventes"showDataEffect="{chartInterpolate}">

<mx:areaStroke><mx:Stroke color="0xA3C643" alpha="1" weight="2" />

</mx:areaStroke><mx:areaFill>

<mx:SolidColor color="0xA9BAC3" alpha=".6"/>


325

</mx:areaFill></mx:AreaSeries>

</mx:series></mx:AreaChart>

L’application est fonctionnelle. Vous pouvez d’ores et déjà la lancer et vérifier que vousobtenez le résultat suivant :

Nous allons rajouter encore quelques petites choses. Tout d’abord, animons ces deuxgraphes lorsque nous changeons de boutique. Ajoutez à cet effet un tagSeriesInterpolate ainsi que des attributs showDataEffect aux séries des graphiques :

<mx:SeriesInterpolate id="chartInterpolate" duration="2000" />...<mx:AreaSeries yField="total" xField="date"

showDataEffect="{chartInterpolate}">...<mx:PieSeries field="total" nameField="category"showDataEffect="{chartInterpolate}" />

Modifions également l’affichage des dates qui ne sont pas très esthétiques. Nous allonsdans cette optique dire au graphique que nous voulons utiliser notre propre méthode pourafficher la date :

<mx:DateTimeAxis labelFunction="dateTimeAxisLabel"/>

Nous codons finalement notre fonction d’affichage. Rajoutez à présent dans la baliseScript le code suivant :

c Fig. 11.22 : L’application dans votre navigateur Internet


326

import mx.formatters.DateFormatter;

public function dateTimeAxisLabel(cat:Object,pcat:Object,

ax:Object):String {var dateFormat:DateFormatter = new mx.formatters.DateFormatter();dateFormat.formatString = "MMMMMMMMMM DD, YYYY";return dateFormat.format(cat);

}

Nous avons maintenant fini. Voici à quoi ressemble notre application :

Vous maîtrisez maintenant les bases des graphiques dans Flex. Si vous voulez poursuivrel’exercice, utilisez les autres sortes de graphiques tout en gardant les mêmes données.


a comment différencier les types de graphiques ;a comment utiliser un composant de Flex Charting ;a comment rendre un graphique interactif ;a comment animer un graphique.

Le prochain chapitre abordera le développement d’applications lourdes riches en utilisantla technologie AIR.

c Fig. 11.23 : Amélioration de l’affichage des dates sur l’axe horizontal

11Check-list

327

1212.1 Passer de Flex à AIR .................................... 33012.2 Utiliser HTML ............................................ 33712.3 Gérer des fichiers ....................................... 34412.4 Utiliser SQLite ........................................... 35212.5 Personnaliser ses fenêtres .............................. 35712.6 Check-list ................................................. 361

Utiliser AIR

Poussée par le succès de Flex, Adobe lance AIR, unenouvelle plateforme basée sur Flex, qui pourrait

révolutionner le développement d’applications de bureau.Elle leur apporte ainsi les bénéfices de Flex que vous avezpu découvrir jusqu’à présent en adaptant la technologieaux développement hors du Web. Découvrons à présentquelques points forts de AIR.

12.1 Passer de Flex à AIRAIR (pour Adobe Integrated Runtime), anciennement Apollo, est une plate-forme dedéveloppement créée par Adobe pour étendre vos RIA à votre Bureau. Cette plate-formeest basée sur les mêmes langages que Flex, à savoir MXML et ActionScript maiségalement HTML/CSS, AJAX, Flash ou PDF. AIR intègre également une base dedonnées SQLite.

Pour faire tourner les applications créées avec le framework AIR, vous aurez besoin duruntime, ou moteur d’exécution. À l’heure actuelle, celui-ci est encore en version bêtamais permet déjà d’exploiter les possibilités de AIR. Les applications que vous pouvezcréer sont variées : widgets divers, magasins virtuels, gestionnaires d’album photo ou dedocuments, éditeur de texte, lecteur multimédia… La partie AIR du laboratoire Adobepropose une galerie contenant de nombreux exemples de ce qu’il est possible de réaliser.

Les avantages de cette technologie sont nombreux. Vous bénéficierez d’une gestion dumode Connecté ou Déconnecté très simplement. Vos applications seront portablespuisqu’il suffit d’installer le moteur d’exécution pour les lancer (actuellement ce moteurest disponible pour Mac OS et Microsoft Windows). Vous pourrez accéder aux fichiers devotre ordinateur contrairement aux applications Flex. Enfin, vous retrouverez leur stylequi est assez design et dans l’air du temps.

Les outils pour utiliser et développer une application AIRLa première chose à installer pour utiliser les applications AIR est le moteur d’exécution.Vous le trouverez (en version bêta pour le moment) à cette adresse : http://labs.adobe.com/downloads/air.html. Il vous permettra d’exécuter les applications dont l’extension est pardéfaut .air.

Une fois le téléchargement terminé, vous pourrez vous lancer dans l’installation guidée :

c Fig. 12.1 :Validation de la licence

12 Utiliser AIR

330

En moins de trente secondes, vous aurez la possibilité de lancer des applications AIR.

Pour le développement à proprement parler, il existe deux méthodes : Flex Builder 3, quiintègre les possibilités du framework AIR, ou le SDK AIR qui installera les binairesnécessaires à la compilation de vos fichiers de code. Il est en effet possible d’éditer vosfichiers avec un éditeur de texte classique et de les compiler en ligne de commande.

Comme Flex Builder 3 vous est familier et que son utilisation est beaucoup plusconviviale que la seconde méthode, nous allons uniquement détailler la création deprojets AIR avec le logiciel d’Adobe.

Flex Builder et AIR

Seule la version 3 de Flex Builder permet de créer des projets AIR. Les projets Apollo créés avecFlex Builder 2.0.1 ne sont pas compatibles avec la nouvelle version du framework.

Un projet AIR dans Flex Builder 3Flex Builder permet de gérer les projets AIR aussi bien que les projets Flex. Vous serezainsi guidé dans votre développement grâce aux aides, à la complétion et aux diverses

c Fig. 12.2 :Installation en cours

c Fig. 12.3 :Fin de l’installation

12Passer de Flex à AIR

331

assistances qui sont fournies à l’utilisateur. Vous pourrez également déboguer commevous avez appris à le faire précédemment ou utiliser l’éditeur visuel pour embellir votreapplication.

La création d’un projet AIR n’est pas très éloignée de celle d’un projet Flex.

1 Dans le menu, cliquez sur File, New et enfin AIR Project. Vous vous retrouverezface aux fenêtres classiques de création de projet où vous pourrez entrer le nom duprojet, AIRTest en l’occurrence :

Et son workspace :

c Fig. 12.4 :Le nom du projet

c Fig. 12.5 :Le workspace

12 Utiliser AIR

332

2 Continuez ensuite en validant l’étape suivante et vous arriverez sur un écranspécifique à AIR où vous pourrez renseigner des propriétés propres à votre projet :

3 Validez la création du projet en cliquant sur Finish afin de valider vos choix.

Votre projet est à présent créé et vous pouvez d’ores et déjà le lancer ou le débogueren utilisant les mêmes boutons qu’avec des projets Flex. Cette fois, votre navigateurne sera pas utilisé mais une nouvelle fenêtre apparaîtra :

c Fig. 12.6 : Les propriétés de votre projet

c Fig. 12.7 :Application de base


333

Dans l’onglet Navigator, vous pouvez observer l’arborescence suivante :

Les fichiers qui nous intéressent ici sont les suivants :

j AIRTest.mxml : c’est le fichier principal de l’application, celui qui sera défini commefichier d’application par défaut.

j AIRTest-app.xml : ce fichier XML est inclus dans toutes les applications AIR. Ildéfinit des propriétés de base telles que le nom de l’application, son appID et descaractéristiques liées à la fenêtre. Vous avez pu renseigner certaines de ces propriétéslors de la création du projet.

Observons plus en détail les caractéristiques de notre projet.

Les caractéristiques d’un projet AIRLes fichiers MXML des projets AIR ressemblent à ceux des projets Flex. Néanmoins, ilsutilisent de temps à autre des éléments particuliers propres aux applications de bureau.Ainsi, le conteneur de base de votre application sera un <mx:WindowedApplication/>. Ceconteneur permet d’avoir un contrôle plus ou moins avancé sur la fenêtre de votreapplication afin de pouvoir la réduire, l’agrandir, etc. À l’intérieur de ce conteneur, vouspourrez aussi bien déclarer du code ActionScript que faire appel à un fichier externe, outout simplement utiliser d’autres objets MXML.

Le fichier AIRTest-app.xml, particulier à un projet AIR, est le fichier de description del’application. Ce fichier, généré par Flex Builder lors de la création du projet, contient lespropriétés basiques comme son nom, sa version, un copyright… Ces données serviront àinformer l’utilisateur lorsqu’il voudra lancer l’application.

Lorsqu’il est créé, le fichier de description contient des commentaires qui vous guidentdans son édition. Observons l’architecture du fichier de description de notre projet sansces commentaires :

<?xml version="1.0" encoding="UTF-8"?>

c Fig. 12.8 :Arborescence de base d’un projet AIR

12 Utiliser AIR

334

<application xmlns="http://ns.adobe.com/air/application/1.0.M4"➥ appId="AIRTestProject" version="1.0 Beta">

<name>AIR Test</name><title/><description>A test project</description><copyright>2007</copyright><rootContent systemChrome="standard" transparent="false"

➥ visible="true">[SWF reference is generated]</rootContent></application>

Les balises utilisées sont assez explicites et permettront d’afficher des informations àl’installation par exemple.

<rootContent> permet de définir le fichier qui sera chargé en premier par l’application(SWF ou HTML). Laissez la valeur par défaut. L’attribut systemChrome défini à nonepermettra d’utiliser la gestion des fenêtres d’AIR et d’activer la transparence endéfinissant transparent à true. Vous pouvez également jouer avec height et width quisont la hauteur et la largeur par défaut de la fenêtre. Voici votre fenêtre, une fois lesmodifications effectuées :

Aux balises déjà présentes, vous pouvez rajouter <icon> qui contiendra des balises<image16x16>, <image32x32>, <image48x48> ou <image128x128>. Ces images servirontde miniatures à votre application. <fileTypes> permettra de définir des types de fichiersqui seront ajoutés au système lors de l’installation.

Le fichier de description de l’application est conservé dans les applications AIR (portantl’extension .air) que vous pourrez trouver et lancer.

c Fig. 12.9 :L’application avec lagestion des fenêtresd’AIR


335

Créer un package AIRLa création d’un package AIR permet de diffuser votre application. Le package générésert à l’installer sur un système disposant du moteur d’exécution. Par défaut, l’installationpropose des options comme la création d’un raccourci ou le chemin d’installation et elleest, dans la plupart des cas, suffisante.

Dans Flex Builder, la création d’un package se fait très simplement en cliquant dans lemenu sur Project puis Export AIR Package…. Vous accédez ainsi à l’écran suivant :

Sélectionnez alors le projet AIRTest, l’application principale ; laissez désactivée lapossibilité de déboguer puis cochez les fichiers que vous voulez inclure dans le package.Le fichier de description et le SWF sont obligatoires. Validez enfin en cliquant sur Finishet votre package AIRTest.air sera généré.

Vous pouvez dès à présent le tester. Double-cliquez sur le fichier qui est apparu dans lenavigateur de Flex Builder ou dans votre explorateur de fichiers. Une fenêtred’installation va apparaître :

c Fig. 12.10 : Écran de génération de package

c Fig. 12.11 :Confirmation del’installation

12 Utiliser AIR

336

Ignorez les messages d’avertissement et continuez. Vous pourrez alors définir les optionsd’installation :

Une fois l’installation effectuée, vous retrouverez votre application dans votre liste deprogrammes installés. Vous n’avez donc pas à vous soucier de la phase d’installation pourdiffuser votre création !

Les messages avant l’installation

Les messages qui vous avertissent, au début de l’installation, de l’authenticité du diffuseur et des risquesde sécurité encourus sont dus à la non-signature du paquet. AIR étant en version bêta, il est pour l’instantimpossible de signer ses packages. Nous ne savons pour l’instant rien sur la possibilité de le faire etnous devons attendre la sortie de la version finale.

Passons à présent au détail des possibilités proposées par AIR.

12.2 Utiliser HTMLUne des possibilités offertes par AIR est d’interpréter du code HTML complexe dans desfichiers SWF. Par complexe, il faut comprendre que les balises HTML classiques sontgérées mais également le code JavaScript, les images et les feuilles de style CSS.

La classe HTMLControlLa classe HTMLControl est celle qui prend en charge la gestion du contenu HTML. Elleest basée sur le WebKit, une bibliothèque de fonctions issue du moteur de rendu KHTML

c Fig. 12.12 :Options d’installation

12Utiliser HTML

337

utilisée dans l’application Konqueror du projet KDE. Ce WebKit était au départ réservéau navigateur de Mac OS X, Safari. Il est à présent utilisé dans de nombreux projets dontcelui qui nous intéresse ici : AIR.

Vous ne pouvez pas ajouter un HTMLControl directement dans un conteneur. Il fautl’ajouter en tant que fils d’un UIComponent ou d’un objet qui hérite de cette classe. Créezdonc une nouvelle application AIRHTMLTest dans votre projet AIRTest. Notez au passagela création automatique d’un nouveau fichier de description AIRHTMLTest-app.xml danslequel vous allez ajouter les attributs width (800) et height (600) à la balise rootContent.

Dans cette application, ajoutez un UIComponent avec l’id componentContainer en modeDesign et modifiez-le pour qu’il occupe l’intégralité de votre fenêtre. En mode Source,déclarez un HTMLControl avec l’id htmlControl et instanciez un nouvel objet de ce typedans une fonction initApp. Définissez ensuite les propriétés width et height dehtmlControl à 800 et 600. Enfin, ajoutez ce dernier au componentContainerprécédemment déclaré en appelant sa méthode addChild.

Vous pouvez à présent passer à l’affichage de pages HTML. Le rendu apparaîtra dansvotre application. Le chargement d’URL se fait grâce à la méthode load de votreHTMLControl. Elle prend en argument une URLRequest qu’il faut donc préalablement créer.Voici à quoi devrait ressembler votre code pour afficher la page principale de Google :

<?xml version="1.0" encoding="utf-8"?><mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"

layout="absolute" creationComplete="initApp();"><mx:Script>

<![CDATA[import flash.html.HTMLControl;private var htmlControl:HTMLControl;private function initApp():void{

htmlControl = new HTMLControl();htmlControl.width = 800;htmlControl.height = 600;var urlRequest:URLRequest = new

➥ URLRequest("http://www.google.fr/");htmlControl.load(urlRequest);componentContainer.addChild(htmlControl);

}]]>

</mx:Script><mx:UIComponent id="componentContainer" width="100%" height="100%"/>

</mx:WindowedApplication>

En lançant l’application, vous devriez obtenir le résultat suivant :

12 Utiliser AIR

338

Vous pouvez utiliser d’autres URL que celles de Google pour tester votre application.Vous pouvez notamment essayer des adresses URL sécurisées (https://) ou naviguer dansvotre système de fichiers avec file:///c:/ par exemple. app−resource et app−storage sontdes chemins prédéfinis qui vous permettent d’accéder au chemin de base de l’applicationet à son chemin de stockage. Enfin, vous pouvez afficher un document PDF si vousdisposez du plug-in Acrobat Reader 8.1 en utilisant un URL pointant vers un PDF.

Vérifier que l’utilisateur peut ouvrir un document PDF

Pour vérifier que l’utilisateur peut ouvrir un document PDF et ainsi éviter de nombreux désagréments, vouspouvez tester si la propriété statique pdfCapability de la classe HTMLControl est égale à la constantePDFCapability.STATUS_OK.

c Fig. 12.13 : Une page HTML dans votre application AIR

12Utiliser HTML

339

Vous pourriez également vouloir afficher une chaîne de caractères contenant du codeHTML. Pour cela, il faudra utiliser la méthode loadString en lui plaçant la chaîne enargument :

htmlControl.loadString("<html><b>AIR</b> affiche du HTML !</html>");

Observons maintenant les possibilités avancées de la classe HTMLControl.

Les possibilités avancées

L’historique

HTMLControl conserve un historique des pages visitées. Il est donc très simple de naviguerdans l’historique. Vous devrez utiliser les méthodes historyBack et historyForward afinde respectivement revenir en arrière ou avancer dans l’historique. historyLength vousdonnera, comme son nom l’indique, la longueur de l’historique tandis quehistoryPostion sera la position courante. Il est également possible d’accéder à uneposition donnée de l’historique en la passant en argument de la méthode historyAt.

Nous allons mettre en application ces possibilités en améliorant notre navigateur. Ajoutezau-dessus du componentContainer une VBox contenant deux boutons : back et forward.Pour chacun d’eux, définissez la propriété click respectivement à htmlControl.historyBack() et htmlControl.historyForward() :

<mx:HBox><mx:Button id="back" label="Reculer"

click="htmlControl.historyBack();"/><mx:Button id="forward" label="Avancer"

click="htmlControl.historyForward();"/></mx:HBox>

Vous pouvez à présent naviguer dans votre historique :

c Fig. 12.14 :Votre chaîne HTML

12 Utiliser AIR

340

Accéder à des variables contenues dans vos pages

Il est possible d’accéder à des variables ou des fonctions déclarées dans du codeJavaScript de vos pages HTML. Les éléments HTML sont également accessibles grâce àleur attribut id.

Dans l’application AIRHTMLTest, déclarez une variable de type XML contenant du codeHTML valide :

private var html:String = "<html>" +"<script>" +

"variable = 42;" +"function fonction() { return ’Hello World !’; }" +

"</script>" +"<body>" +

"<p id=’toto’>Coucou !</p>" +"</body>" +

"</html>”;

Chargez-la dans htmlControl et déclarez ensuite trois labels lbl1, lbl2 et lbl3 quiserviront à afficher l’objet appelé variable, le résultat de fonction et le contenu de toto.Pour changer le texte de ces labels, créez une fonction aff :

c Fig. 12.15 : Navigation dans l’historique

12Utiliser HTML

341

private function aff(e:Event):void{

lbl1.text = "variable : " + htmlControl.window.variable;lbl2.text = "fonction : " + htmlControl.window.fonction();lbl3.text = "idHTML : " +

➥ htmlControl.window.document.getElementById("idHTML").innerHTML;}

L’accès se fait à travers l’objet window du HMTLControl. La variable se récupère grâce àson nom, et l’appel à la fonction se fait comme un appel classique. Pour accéder auxéléments HTML, il faut par contre utiliser l’objet document et sa méthodegetElementById. Son contenu se trouve dans la propriété innerHTML.

L’événement COMPLETE du HTMLControl

Vous ne pourrez pas accéder aux variables avant le chargement complet de la page. Aussi, il faut luiajouter un EventListener qui fera appel à la fonction aff lorsqu’il enverra l’événement COMPLETE :htmlControl.addEventListener(Event.COMPLETE, aff);.

HTMLControl envoie d’autres événements comme uncaughtJavaScriptException si une exception Javan’est pas contrôlée dans la page.

Vous pouvez également modifier les variables auxquelles vous avez accès en leuraffectant des valeurs. Le bouton suivant vous permettra de changer le texte contenu dansle paragraphe idHTML :

<mx:Button label="Click Me"click="htmlControl.window.document.getElementById(’idHTML’).innerHTML

➥ = ’Le contenu a changé’;"/>

Voici l’affichage, une fois le bouton cliqué :

c Fig. 12.16 : Modifier les variables

12 Utiliser AIR

342

HTMLControl dans le composant HTMLVous avez sûrement remarqué que lorsque vous redimensionnez la fenêtre de votreapplication, la taille de votre HTMLControl n’évoluait pas. Pour résoudre ce problème etcompléter notre navigateur, nous allons faire appel au composant MXML HTML. Celui-cicontient un objet HTMLControl.

Dans une nouvelle application AIRBrowser dont vous fixerez la taille à 1 024 en largeuret 768 en hauteur, créez une VBox contenant les boutons back et forward, une boîte detexte adress qui servira à entrer l’adresse, et un bouton go de validation.

Ajoutez ensuite le composant HTML mainPage avec la balise <mx:HTML> en vous assurantque l’attribut layout de votre WindowedApplication a la valeur vertical. Faites ensuiteappel aux méthodes de mainPage.htmlControl pour naviguer dans l’historique. Pourcharger une page, vous pourriez bien entendu appliquer ce que nous avons vu jusqu’àprésent, mais l’opération en sera simplifiée en passant une chaîne de caractères à lapropriété location du composant HTML.

Le code d’un navigateur entièrement fonctionnel se réduit à ceci :

<?xml version="1.0" encoding="utf-8"?><mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"creationComplete="mainPage.location = ’http://www.google.fr/’;">

<mx:HBox width="98%"><mx:Button id="back" label="Back"

click="mainPage.htmlControl.historyBack();"/><mx:Button id="forward" label="Forward"

click="mainPage.htmlControl.historyForward();"/><mx:TextInput id="adress"

text="{mainPage.location}" width="100%"

c Fig. 12.17 : Votre navigateur AIR

12Utiliser HTML

343

enter="mainPage.location = adress.text"/><mx:Button id="go" label="Go"

click="mainPage.location = adress.text"/></mx:HBox><mx:HTML id="mainPage" width="98%" height="100%"/>


C’est à vous de jouer à présent pour ajouter vos propres fonctionnalités.

12.3 Gérer des fichiersSi, en Flex, il est impossible d’accéder au système de fichiers, principalement pour desraisons de sécurité, il en va autrement pour AIR qui se destine aux applications de bureau.Nous allons voir dans ce chapitre comment sont permises les opérations sur les fichierset les dossiers.

Les classes pour gérer les fichiers

Description des classes

AIR fournit aux développeurs plusieurs classes pour gérer les fichiers :

j File : c’est l’objet de base qui représente un chemin vers un fichier ou un dossier.Il sert à initialiser l’interaction avec celui-ci mais aussi à le déplacer, le copier ou lesupprimer.

j FileMode : cette classe définit les constantes qui servent lors de l’ouverture d’unfichier pour déterminer les droits qu’on a sur celui-ci (lecture, écriture, etc.).

j FileStream : cette classe permet quant à elle d’ouvrir les fichiers afin de les lire oud’écrire.

Les méthodes proposées par File et FileStream peuvent être synchrones, c’est-à-direqu’elles vont bloquer l’exécution de votre application pendant leur exécution, ouasynchrones et s’exécuter dans ce cas, en arrière-plan. Nous pouvons alors connaître leurétat de retour grâce à des événements.

Les chemins

Les deux propriétés de la classe File qui permettent de définir le chemin du fichier oudossier pointé sont les suivantes :

12 Utiliser AIR

344

j nativePath : c’est le chemin spécifique à la plate-forme. Sous Windows, ce sera parexemple c:\\directory\file.txt alors que sous Mac OS, nous utiliserons /directory/file.txt.

j url : c’est le chemin du fichier. Il utilise des schémas comme file (file://c/directory/file.txt) ou app−ressource et app−storage déjà rencontré dans la partie précédente.

Pour faire pointer une variable de type File, vous pouvez donc vous contenter demodifier l’une de ces propriétés :

var fileVar:File = new File();fileVar.nativePath = "C:\\";

Cette propriété est équivalente à :

var fileVar:File = new File();fileVar.url = "file://c/";

Les backslashs dans les chemins

Veillez à bien doubler les caractères \ dans vos chemins pour définir la propriété nativePath sinon vousrisquez d’obtenir des erreurs de chaînes de caractères.

Il existe bien d’autres façons de faire pointer des objets File vers des chemins. Vouspouvez notamment partir des propriétés de File qui pointent vers des répertoiresstandard :

j userDirectory : c’est le répertoire utilisateur, sous Vista : C:\Users\userName.j documentsDirectory : c’est le répertoire Mes Documents, sous Vista :

C:\Users\userName\Documents.j desktopDirectory : le Bureau de l’utilisateur, sous Vista :

C:\Users\userName\Desktop.j applicationResourceDirectory : le répertoire dans lequel s’exécute l’application.j applicationStorageDirectory : le répertoire de stockage de l’application.

À partir d’un de ces répertoires ou tout simplement à partir d’un objet File qui pointevers un répertoire, vous pouvez utiliser la méthode resolve qui prend en argument unechaîne de caractères. Cette méthode vous donnera, à partir du chemin courant, le chemincomplet qui mène au fichier ou répertoire décrit par la chaîne. Voici un petit exemple àpartir du fileVar déclaré plus haut :

12Gérer des fichiers

345

fileVar.resolve("fichier.xml").nativePath; // C:\fichier.xmlFile.documentsDirectory.resolve("fichier.html").nativePath; //➥ C:\Users\userName\Documents\fichier.html

Les chemins relatifs

La chaîne que vous placez en argument peut très bien être un chemin relatif du type ..\fichier.txt ou toutsimplement .. pour accéder à un répertoire.

Les boîtes de sélectionEnfin, vous pouvez utiliser les boîtes de sélection de répertoires et de fichiers fournies parAIR. Pour les répertoires, il faudra utiliser la méthode browseForDirectory d’un objetFile. Le code suivant affichera le chemin du dossier sélectionné dans le Label :


import flash.filesystem.File;private var fileVar:File;

private function loadFile():void{

fileVar = new File();fileVar.addEventListener(Event.SELECT, dirSelected);fileVar.browseForDirectory("Sélectionnez un répertoire");

}private function dirSelected(e:Event):void{

lbl.text = fileVar.nativePath;}

]]></mx:Script><mx:Label id="lbl"/>

Voici la boîte de sélection : (voir fig. 12.18)

D’autres boîtes de sélection sont disponibles pour les fichiers browseForOpen,browseForSave et browseForMultiple qui servent respectivement à choisir un fichier àouvrir, un fichier à sauvegarder ou plusieurs fichiers. On peut également leur donner desfiltres sous forme d’un tableau de FileFilter en second argument. Ces filtres permettentde n’afficher que les fichiers les respectant. Ils se déclarent et s’utilisent ainsi :

var filtre:FileFilter = new FileFilter("Desc", "*.ext1;*.ext2");fileVar.browseForOpen("Sélectionnez un fichier", [filtre]);

12 Utiliser AIR

346

Quelques informations

Outre nativePath et url, les objets de type File disposent de propriétés intéressantesqu’il est préférable de connaître avant de les manipuler :

j creationDate : la date de création du fichier (il faut que le fichier ou dossier existe).j exists : est à true si le fichier ou dossier existe, à false sinon.j extension : donne l’extension du fichier sans le ..j icon : renvoie un objet contenant l’icône du fichier.j isDirectory : est à true si le chemin est un répertoire, à false sinon.j modificationDate : donne la date de dernière modification.j name : donne le nom du fichier ou du dossier (sans le chemin).j parent : donne le répertoire parent du chemin (est à null si le chemin est à la

racine).j size : donne la taille du fichier en octets.

Nous allons à présent nous intéresser à la manipulation des répertoires.

Manipuler des répertoiresNous allons décrire les diverses méthodes proposées par File pour la gestion desrépertoires. Commençons par la création. Elle se fait grâce à la méthodecreateDirectory :

c Fig. 12.18 :Une boîte de sélectionde dossier


347

var path:File = File.applicationResourceDirectory.resolve("test");path.createDirectory();

Nous vous conseillons de créer vos répertoires ou fichiers à partir du répertoire del’application afin d’observer les résultats directement dans l’explorateur de Flex Builder.Ce code crée un dossier test dans le répertoire bin de votre projet (si vous avez conservébin comme répertoire de compilation). Si le dossier existe déjà, rien ne se passe. Pardéfaut, tous les répertoires décrits par le chemin sont créés. Vous pouvez ainsi obtenirl’arborescence test/rep1/rep2/rep3 en une seule fois.

File permet également la création de dossiers temporaires grâce à createTempDirectory.Ceux-ci seront créés dans le dossier temporaire de Windows(C:\Users\userName\AppData\Local\Temp sous Vista) avec un nom aléatoire terminé par.tmp. Attention, ces répertoires ne sont pas supprimés à la fermeture de l’application.

Vous pouvez lister le contenu d’un répertoire grâce aux méthodes listDirectory etlistDirectoryAsync qui est la version asynchrone de la première. Elles retournent untableau d’objets File pointant sur les éléments du répertoire :

var content:Array = File.applicationResourceDirectory.listDirectory();

La suppression de répertoires se fait en appelant les méthodes deleteDirectory oudeleteDirectoryAsync. Elles prennent en argument un booléen optionnel qui, lorsqu’ilest à true, permet la suppression de répertoires non vides. Par défaut, ils ne sont passupprimés.

var path:File = File.applicationResourceDirectory.resolve("test");path.deleteDirectory(true);

Vous pouvez envoyer vos répertoires vers la corbeille au lieu de les supprimerdéfinitivement. Dans ce cas-la, utilisez plutôt les méthodes moveToTrash oumoveToTrashAsync.

Enfin, le déplacement ou la copie de répertoires se fait avec moveTo et moveToAsync oucopyTo et copyToAsync. Elles prennent en argument la destination et un argument booléenqui, lorsqu’il est à true, permet le remplacement de répertoires existants à l’emplacementspécifié.

var orig:File = File.applicationResourceDirectory.resolve("orig");var dest:File = File.applicationResourceDirectory.resolve("dest");orig.moveTo(dest, true);

Nous allons maintenant passer aux fichiers.

12 Utiliser AIR

348

Gérer les fichiers

Manipuler les fichiers

Les méthodes de la classe File qui permettent de manipuler les fichiers sont similaires àcelles qui gèrent les répertoires. Elles s’appellent à partir d’un objet File dont le cheminest défini. Pour déplacer ou copier des fichiers, vous disposez également de moveTo etmoveToAsync ou copyTo et copyToAsync qui prennent en premier argument la destinationet en second, un booléen qui indique si la destination doit être écrasée. Utilisez lesévénements en ajoutant un EventListener pour détecter si votre opération de copie ou dedéplacement s’est bien déroulée. L’événement IOErrorEvent.IO_ERROR est ainsidéclenché si une telle opération échoue. Dans le cas contraire, c’est l’événementEvent.COMPLETE qui vous servira.

Pour supprimer, il faut par contre faire appel aux méthodes deleteFile oudeleteFileAsync. De même que pour les dossiers, il est possible d’envoyer des fichiersvers la corbeille en utilisant moveToTrash et sa version asynchrone moveToTrashAsync.

Enfin, il est aussi possible de créer des fichiers temporaires avec la méthode statiquecreateTempFile de la classe File. Elle renvoie un objet File qu’il convient de stockerpour garder le chemin du fichier temporaire. Le fichier n’est pas supprimé à la sortie del’application.

Lire et écrire des fichiers

Pour lire et écrire dans des fichiers, il faut utiliser la classe FileStream. Celle-ci permetl’ouverture des fichiers dans différents modes à partir des chemins définis dans les objetsde type File. Afin d’observer leur fonctionnement, nous allons réaliser une nouvelleapplication dont le but sera de charger ou sauvegarder du texte que l’utilisateur entrera.

Commencez donc une nouvelle application et insérez-y une TextArea textTotSave etdeux boutons save et load qui feront appel aux méthodes loadFile et saveFile que nousallons définir.

Dans du code ActionScript, déclarez deux variables de type File et un FileStream :

private var fileSave:File = new File();private var fileLoad:File = new File();private var fileStream:FileStream;

Puis la fonction loadFile :

private function loadFile():void{


349

fileLoad.addEventListener(Event.SELECT, loadText);fileLoad.browseForOpen("Fichier à charger");

}

Cette fonction fait appel à une boîte de sélection pour choisir le fichier à charger etstocker son chemin dans fileLoad. Vous ajoutez un eventListener qui appellera lafonction loadText lors de la sélection d’un fichier :

private function loadText(event:Event):void{

fileStream = new FileStream();fileStream.addEventListener(IOErrorEvent.IO_ERROR, printMessage);fileStream.addEventListener(Event.COMPLETE, writeText);fileStream.openAsync(fileLoad, FileMode.READ);

}

Dans cette méthode, vous créez un nouveau FileStream qui vous servira à lire le contenudu fichier sélectionné. Ajoutez deux eventListener. Le premier écoute le signalIOErrorEvent.IO_ERROR qui est déclenché lorsqu’une erreur se produit et appelle lafonction suivante :

private function printMessage(event:Event):void{

Alert.show("Opération interrompue !");}

Le second réagit lorsque le fileStream sera complètement rempli et appellera alorswriteText que nous définirons plus loin.

La méthode openAsync est la version asynchrone de open. Elles permettent l’ouverturedes fichiers définis par un objet de type File placé en premier argument. Le secondargument est le mode d’ouverture du fichier. Ces modes sont définis dans la classeFileMode :

j READ : le fichier est ouvert en lecture seulement.j WRITE : le fichier est ouvert en écriture, si le fichier n’existe pas il est créé à

l’ouverture, sinon tout est écrasé.j APPEND : le fichier est créé s’il n’existe pas, et dans le cas contraire, l’écriture se fait

à la suite.j UPDATE : le fichier est également créé s’il n’existe pas, il est ouvert en lecture et

écriture et seuls les endroits où l’on écrit sont modifiés.

12 Utiliser AIR

350

Dans le cas présent, nous ouvrons donc le fichier en lecture seule pour pouvoir l’afficherdans la fonction writeText :

private function writeText(event:Event):void{

textToSave.text = fileStream.readUTFBytes(fileStream.bytesAvailable);fileStream.close();

}

Elle écrit dans textToSave en récupérant le contenu du flux grâce à la méthodereadUTFBytes qui prend en argument le nombre d’octets à lire (ici la taille totale defileStream). De nombreuses autres méthodes sont disponibles pour lire le contenu desflux en fonction de ce qu’ils contiennent et en fonction de l’encodage.

Il est important de fermer le flux en utilisant la méthode close, sans quoi le fichier pourraêtre indisponible pour les autres programmes.

Le bouton save fera, quant à lui, appel à la fonction saveFile :

private function saveFile():void{

fileSave.addEventListener(Event.SELECT, saveText);fileSave.browseForSave("Fichier à sauvegarder");

}

Elle ouvre une boîte de sélection de fichier pour laisser à l’utilisateur le choix de lasauvegarde. Quand le fichier est sélectionné, la méthode saveText réalise la copie :

private function saveText(event:Event):void{

fileStream = new FileStream();fileStream.addEventListener(IOErrorEvent.IO_ERROR, printMessage);fileStream.openAsync(fileSave, FileMode.WRITE);fileStream.writeUTFBytes(textToSave.text);fileStream.close();

}

Nous instancions un nouveau flux puis nous ouvrons le fichier en mode Écriture. Il nereste alors plus qu’à faire appel à la méthode writeUTFBytes en lui donnant la chaîne decaractères à écrire. Comme pour la lecture, il existe plusieurs méthodes en fonction de cequ’on veut écrire. N’oubliez pas la fermeture du flux à la fin.

Voici donc en quelques lignes un simple éditeur de texte :


351

Passons maintenant à la base SQLite.

12.4 Utiliser SQLiteAIR offre la possibilité d’utiliser une base SQLite locale. Le runtime contient en effet unmoteur de base de données. Cette base de données locale sera stockée sur l’ordinateurexécutant l’application et pourra servir à la persistance des données de n’importe queltype. Les opérations SQL habituelles sont alors autorisées. Nous allons découvrir danscette partie comment se servir de cette nouvelle fonctionnalité.

Se connecter à une baseLa connexion à une base de données est la première opération à réaliser pour accéder àcette possibilité avancée de AIR. Pour pouvoir se connecter, il faut commencer parinstancier un objet de type SQLConnection. Utilisez ensuite la méthode open de cet objet.Elle prend en paramètre un objet de type File qui contient le chemin de votre base surle disque. Vous pouvez également préciser à l’aide d’un booléen si la base doit être crééeen cas de non-existence (c’est le cas par défaut). Si vous ne spécifiez aucun argument àla méthode open, la base sera uniquement stockée en mémoire et perdue à la sortie del’application.

La connexion à une base de données est une opération asynchrone. Il vous faudra doncutiliser des événements pour vérifier l’état de la connexion. L’application suivante réalise

c Fig. 12.19 :Votre éditeur de texte

12 Utiliser AIR

352

une connexion à la base de données user.db qui sera créée et stockée dans le répertoirede stockage de l’application. Deux méthodes sont appelées en cas de succès ou d’échecde la connexion :

<?xml version="1.0" encoding="utf-8"?><mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"➥ layout="vertical" creationComplete="initApp();">


import mx.controls.Alert;import flash.filesystem.File;import flash.data.SQLConnection;private var conn:SQLConnection = new SQLConnection();private var dbFile:File =

➥ File.applicationStorageDirectory.resolve("user.db");

private function initApp():void{

conn.open(dbFile);conn.addEventListener(SQLErrorEvent.ERROR, connectionFailed);conn.addEventListener(SQLEvent.OPEN, connectionSucceed);

}private function connectionSucceed(event:Event):void{

Alert.show("Connexion à " + dbFile.name + " réussi !");}private function connectionFailed(event:Event):void{

Alert.show("Connexion échouée !");}

]]></mx:Script>


Les événements SQLErrorEvent.ERROR et SQLEvent.OPEN sont déclenchés respectivementsi la connexion échoue ou si elle est ouverte.

Voici l’application au démarrage, une fois la connexion ouverte : (voir fig 12.20)

Vous pouvez fermer une connexion manuellement grâce à la méthode close. Néanmoins,cela peut s’avérer superflu dans le sens où le runtime ferme toutes les connexionsouvertes lorsque l’application s’arrête. En général, la méthode à suivre est d’ouvrir toutesles connexions nécessaires au lancement de l’application.

12Utiliser SQLite

353

Créer des tablesVotre base est à présent créée mais ne contient aucune donnée. Il va falloir créer destables afin d’organiser le contenu que vous allez vouloir insérer. Ces tables sont enquelque sorte des schémas qui architecturent les données à l’intérieur de votre base.

La création de tables se fait en exécutant une requête SQL comme toute autre opérationsur votre base de données. Il faudra donc être un peu familier avec ce langage.Néanmoins, les opérations basiques se font sans trop de difficultés.

Intéressons-nous donc d’abord à la création de ces requêtes. Il faut pour cela utiliser unobjet SQLStatement. Définissez ensuite la propriété sqlConnection à la connexion quevous avez ouverte préalablement. Écrivez ensuite votre requête dans une chaîne decaractères et associez cette chaîne à la propriété text de votre objet SQLStatement. Vouspouvez ajouter des eventListener pour vérifier l’exécution de vos requêtes. Si vous avezbesoin de paramètres, définissez-les dans la propriété parameters qui est un tableau.Enfin, l’exécution se lance avec la méthode execute.

Pour créer une table names dans la base user.db précédemment utilisée, il faudra ajouterà la méthode connectionSucceed le code suivant :

var statement:SQLStatement = new SQLStatement();statement.sqlConnection = conn;statement.text = "CREATE TABLE IF NOT EXISTS name(" +

"userId INTEGER PRIMARY KEY AUTOINCREMENT, " +

c Fig. 12.20 :Connexion réussie

12 Utiliser AIR

354

"firstName TEXT, lastName TEXT, " +"email TEXT)";

statement.execute();

La table créée contient une clé primaire auto-incrémentée à chaque insertion dans la table,et des champs firstName, lastName et email. Le fait d’exécuter la requête dansconnectionSucceed vous permet de vous assurer que la connexion est ouverte.

C’est à vous de jouer à présent pour compléter la base en fonction de vos besoins.

Manipuler des donnéesEn plus de cette opération de création de tables, vous aurez besoin des opérationsd’insertion, de suppression ou parfois de mise à jour. Ces requêtes se réalisent de la mêmemanière que la précédente.

L’insertion

Pour l’insertion, il faut utiliser une requête INSERT en spécifiant les champs et leur valeur.Pour ajouter une valeur à la table names, ajoutez un eventListener à la requêtepermettant la création de la table. Lorsque celle-ci enverra l’événement SQLEvent.RESULT,vous ferez appel à la méthode addElement :

private function addElement(event:Event):void{

var statement:SQLStatement = new SQLStatement();statement.sqlConnection = conn;statement.text = "INSERT INTO names(firstname, lastname, email) " +

"VALUES (’Toto’, ’Tata’, ’[email protected]’)";statement.execute();

}

Vous pouvez également ajouter un eventListener pour agir en cas d’erreur, auquel casil faudra récupérer l’événement SQLErrorEvent.ERROR.

La sélection

Pour récupérer des éléments de votre table, il faut utiliser SELECT. Cette méthode varécupérer tous les éléments de votre table names :

private function getElement(event:Event):void{

statement = new SQLStatement();statement.addEventListener(SQLEvent.RESULT, getSucceed);

12Utiliser SQLite

355

statement.sqlConnection = conn;statement.text = "SELECT firstName, lastName, email "

+ "FROM names";statement.execute();

}

Déclarez au préalable un SQLStatement en global afin d’y accéder dans la méthodegetSucceed qui traitera les résultats. Notez que vous pouvez limiter le nombre de résultatsde votre requête en spécifiant un argument entier à execute. Pour récupérer la suite desrésultats s’il en existe plus que la valeur à spécifier, il faudra faire appel à la méthode nexten lui spécifiant une valeur entière.

private function getSucceed(event:SQLEvent):void{

var result:SQLResult = statement.getResult();var str:String = "";for (var i:int = 0; i < result.data.length; ++i){

str += result.data[i]["firstName"] + " "+ result.data[i]["lastName"] + " "+ result.data[i]["email"] + "\n";

}Alert.show(str);

}

La méthode getSucceed appelée lorsque le SELECT réussit, affiche tous les résultats. Vousdevrez passer par un objet de type SQLResult qui contiendra vos données. Vous passezensuite par la méthode getResult de votre requête pour récupérer cet objet.

La mise à jour et la suppression

La mise à jour d’éléments présents dans vos tables se fait grâce à un UPDATE tandis quela suppression se fait avec un DELETE. Voici deux exemples de ces requêtes :

statement.text = "UPDATE names " +"SET firstName = ’Nono’ " +"WHERE firstName = ’Toto’";

Et :

statement.text = "DELETE FROM names " +"WHERE firstName = ’Nono’";

La première va remplacer la chaîne Toto par Nono lorsqu’elle sera trouvée tandis quel’autre va supprimer les rangs dont le champ firstName est égal à la chaîne Nono.

12 Utiliser AIR

356

Vous connaissez à présent les fondements de l’utilisation des bases SQL locales dans AIR.Pour plus de détails sur la syntaxe particulière de ce langage, nous vous renvoyons à desdocumentations spécialisées sur le sujet.

12.5 Personnaliser ses fenêtresAIR, comme Flex, permet aux développeurs un grand contrôle sur l’apparence de sesapplications. Celles du premier s’exécutant sur le Bureau de l’utilisateur plutôt que dansun navigateur, il est possible de configurer l’apparence des fenêtres et leur comportement.

Les types de fenêtresTrois propriétés permettent de définir le type de vos fenêtres :

j type : définit un type de fenêtre (Normal, Utility ou Lightweight).j systemChrome : permet de manipuler la fenêtre (standard ou none).j transparent : active ou non la transparence (true ou false).j alpha: à utiliser directement dans la balise du composant WindowedApplication ;

cette propriété permet de régler la transparence de votre fenêtre.

Dans les types, Normal donne une fenêtre qui utilise les propriétés du système et sescontrôles de fenêtre et elle apparaît dans la barre des tâches. Utility est une versionsimplifiée disposant de moins de contrôles. Enfin, Lightweight ne dispose pas de contrôlede fenêtre et n’apparaît pas dans la barre des tâches. Ce paramètre se configure à lacréation d’une nouvelle fenêtre dans du script :

public function createNativeWindow():void{

var options:NativeWindowInitOptions = new NativeWindowInitOptions();options.transparent = false;options.systemChrome = NativeWindowSystemChrome.STANDARD;options.type = NativeWindowType.UTILITY;

var newWindow:NativeWindow = new NativeWindow(true, options);newWindow.title = "Nouvelle fenêtre";newWindow.width = 320;newWindow.height = 240;

}

Cette fonction crée une nouvelle fenêtre de type Utility, avec un systemChrome standardet sans activer la transparence. Tous ces paramètres se placent en second argument duconstructeur NativeWindow. Le premier sert à spécifier si la fenêtre sera directement

12Personnaliser ses fenêtres

357

visible. Vous pouvez bien entendu créer votre fenêtre sans la rendre visible tout de suiteet le faire le moment venu grâce à la propriété booléenne visible.

Vous pouvez spécifier le gestionnaire de fenêtre, c’est-à-dire ce qui va gérer les contrôlesdu type agrandir, réduire ou fermer. Cette propriété se règle grâce à l’attributsystemChrome de la balise rootContent dans le fichier de description de l’application. Pardéfaut, une application est créée avec cet attribut à standard, et la fenêtre de votreapplication utilise alors les contrôles de fenêtre de votre système :

Lorsque vous spécifiez que systemChrome doit être à none, il faut alors proposer à lafenêtre un contrôleur. Par défaut, les fenêtres de AIR, à savoir les WindowedApplication,disposent de leur propre contrôleur :

c Fig. 12.21 :Une fenêtre basique

c Fig. 12.22 :Une fenêtre avec lecontrôleur de AIR

12 Utiliser AIR

358

Vous pouvez également activer la transparence pour vos fenêtres. Pour cela, il fautspécifier que l’attribut transparent est à la valeur true. Attention cependant, ce choixn’est disponible que lorsque systemChrome est à none. Voici le résultat après avoir modifiéseulement ces deux attributs :

Le résultat n’est pas entièrement transparent. Cet effet est seulement activé mais l’imagede fond de l’application reste affichée. Pour obtenir une entière transparence, passez parun style dans votre code MXML :

<mx:Style>WindowedApplication{

background-image:"";background-color:"";

}</mx:Style>

Voici le résultat : (voir fig. 12.24)

À vous de choisir quelle apparence est la plus appropriée pour votre application. Faitesnéanmoins attention à ne pas perdre vos fenêtres entièrement transparentes.

c Fig. 12.23 :Une fenêtre avec latransparence activée

12Personnaliser ses fenêtres

359

Gérer les événements des fenêtresPour réagir à des actions sur une fenêtre, il est possible d’utiliser les événements qu’elledéclenche. Il faut à ce titre ajouter un eventListener à la fenêtre. Pour récupérer lafenêtre principale, procédez comme suit :

public function init():void{var appWindow:NativeWindow = this.stage.window;appWindow.visible = true;

}

Cette méthode vous donnera dans la variable appWindow la fenêtre principale. Ajoutezalors votre eventListener comme vous avez maintenant l’habitude de le faire.

Les événements à écouter sont les suivants :

j Event.ACTIVATE ;j Event.DEACTIVATE ;j Event.CLOSING ;j Event.CLOSE ;j Event.FOCUS_IN ;

c Fig. 12.24 : Une fenêtre transparente et cela se voit !

12 Utiliser AIR

360

j Event.FOCUS_OUT ;j NativeWindowBoundsEvent.MOVING ;j NativeWindowBoundsEvent.MOVE ;j NativeWindowBoundsEvent.RESIZING ;j NativeWindowBoundsEvent.RESIZE ;j NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGING ;j NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGE.

Tous ces événements permettent d’agir lorsque la fenêtre est déplacée, redimensionnée,ou encore lorsque son focus change.

Il reste encore de nombreuses possibilités à découvrir comme le drag-and-drop, la gestiondu mode Connecté ou Déconnecté et l’interaction avec d’autres applications. AIR offre denouvelles possibilités de développement et il ne faut pas oublier que la révision actuelleest une version bêta dont les fonctionnalités sont encore bridées ou non implémentées.


a la nouvelle solution d’Adobe pour étendre vos applications riches à votre Bureau ;a comment distribuer vos créations ;a les possibilités de gestion du HTML ;a comment réaliser un navigateur ;a comment manipuler des fichiers et des répertoires sur votre ordinateur ;a comment utiliser la base de données locale SQLite ;a comment personnaliser vos fenêtres.

Le prochain chapitre vous fera découvrir des fonctionnalités avancées de Flex.

12Check-list

361

1313.1 Cairngorm ............................................... 36413.2 Tests unitaires ............................................ 37213.3 Flex Data Services ...................................... 38313.4 Obtenir de l’aide ....................................... 38413.5 Check-list ................................................. 387

Aller plus loin

Flex n’a plus de secret pour vous à présent, il est donctemps de s’intéresser aux outils et méthodes qui vont

vous permettre d’enrichir vos applications et d’accélérervos développements. Dans ce chapitre nous allonsévoquer plusieurs Framework visant à vous simplifier latâche lors de la mise en place d’une application degrande envergure.

13.1 CairngormÀ présent que vous maîtrisez les concepts de Flex, vous commencez à réaliser desapplications d’une certaine taille. La question de l’architecture va alors se poser : en effet,si une simple arborescence de fichiers avec une séparation de la logique (fichiersActionScript) et de la présentation (fichiers MXML) paraît suffisante, elle sera rapidementdépassée !

Heureusement, même si Flex ne propose pas de solution embarquée pour ce problème, ilexiste un framework qui comble admirablement ce vide : Cairngorm. Il le fait si bien quela société à l’origine du projet, iteration::two, a été rachetée par Macromedia en 2006, etle framework fait aujourd’hui partie de la Adobe Engagement Platform.

Le motif de conception modèle vue contrôleurPour décrire Cairngorm, il faut commencer par une définition de l’architecture modèlevue contrôleur. En effet, c’est sur ce motif de conception que le framework se base etvous devrez bien le connaître pour utiliser intelligemment Cairngorm dans votreapplication.

L’architecture MVC (modèle vue contrôleur) est donc un motif de conception (on parleaussi de design pattern). Son principe est de séparer les données, les traitements et laprésentation, ce qui donne trois parties fondamentales dans l’application finale, le modèle,la vue et le contrôleur :

Tableau 13.1 : L’architecture MVC

Entité Rôle

Modèle Le modèle prend en charge la partie "données" de l’application. Celasignifie qu’il englobe la partie récupération des données, mais aussi leurmanipulation et leur traitement ; c’est donc le modèle qui prend en chargetous les traitements métier de votre application.

Vue La vue correspond à l’interface de votre application : typiquement, votremodèle enverra les données brutes à la vue adaptée qui les organiserapour la présentation. Dans un framework comme Ruby On Rails ouSymfony, la vue sera réalisée en HTML. La vue n’effectue cependant aucuntraitement, il s’agit simplement d’afficher les données du modèle et depermettre à l’utilisateur d’interagir avec elles.

Contrôleur Le contrôleur est chargé de faire la liaison entre le modèle et la vue ; ilgère donc les événements associés aux interactions de l’utilisateur surl’interface et les répercute sur le modèle. De la même manière, il renvoiela vue correspondante aux données que l’application souhaite afficher.

13 Aller plus loin

364

À présent que nous avons décrit les différents composants de ce motif de conception,voici un petit diagramme expliquant comment ces acteurs interagissent :

Tâchons de développer sur le cycle de fonctionnement de MVC :

j L’utilisateur effectue une action (il clique sur un bouton par exemple).j Le contrôleur réagit à l’événement, généralement via un listener.j Le contrôleur accède au modèle, et déclenche les éventuelles modifications

concernant les données.j Une vue adaptée utilise le modèle pour modifier l’interface utilisateur.j L’interface se met à nouveau en attente d’une nouvelle action.

Si vous avez compris les tenants et aboutissants de l’architecture MVC ainsi que lesconcepts inhérents à Flex, vous devriez à présent réaliser qu’ils sont faits pour s’entendre.Sinon ne vous inquiétez pas, les prochains paragraphes vont vous éclairer.

L’architecture MVC selon CairngormCairngorm est donc basé sur l’architecture MVC : il a donc pour objectif de faciliter lacommunication entre le client et le serveur et de garder une séparation.

La vue dans Cairngorm est chargée d’envoyer les événements en rapport avec les actionsde l’utilisateur ; elle peut aussi être utilisée en liant des données du modèle à sescomposants (par exemple grâce au dataProvider).

Le modèle est symbolisé par le singleton ModelLocator, qui est utilisé par la vue pourrécupérer les données. Ces dernières sont représentées par des Value Objects (VO) oubien directement par des attributs du ModelLocator.

c Fig. 13.1 :L’architecture MVC

13Cairngorm

365

Cairngorm ne dispose que d’un seul contrôleur, ce qui respecte les normes de MVC 2. Ilest chargé de récupérer tous les événements provenant de la vue et de les redistribuer dansles classes chargées de l’intermédiaire avec la partie métier (elles sont appelées classesCommand).

La classe Command concernée peut alors, selon les besoins, modifier le modèle ou initierune communication avec un serveur distant.

Utiliser Cairngorm dans votre applicationCairngorm est disponible sous forme de fichier .swc, et est très simple à utiliser dans votreapplication. Rendez-vous sur le site Open Source d’Adobe pour télécharger la versionbinaire. Une fois sur la page dédiée à Cairngorm : http://opensource.adobe.com/wiki/display/cairngorm/Cairngorm, cliquez sur Download, vous êtes alors redirigé vers lapage suivante :

Un simple clic sur le bouton gauche de la souris sur le lien Cairngorm 2.2.1 Binary suffitpour récupérer l’archive. Maintenant, il faut extraire le contenu de l’archive, de

c Fig. 13.2 : Téléchargement de Cairngorm

13 Aller plus loin

366

préférence à l’emplacement prévu pour les librairies Flex. Il s’agit simplement d’unrépertoire bin contenant le fichier Cairngorm.swc, la version binaire de Cairngorm.

Si vous souhaitez utiliser ce binaire dans l’une de vos applications, il n’y a rien de plussimple. Une fois dans Flex Builder, accédez aux propriétés du projet :

Puis dans Flex Build Path, rendez-vous dans l’onglet Library Path et cliquez sur lebouton Add SWC... : (voir fig. 13.4)

Récupérez le fichier Cairngorm.swc à l’endroit où vous l’avez extrait.

Notez que Cairngorm ne se résume pas à un simple binaire, loin de là. En effet, il s’agitd’une solution architecturale, donc vous aurez à faire le plus gros du travail pour adaptervotre application. Mais nous allons tenter de clarifier le tout en passant par la mise enpratique.

c Fig. 13.3 : Propriétés du projet

13Cairngorm

367

Mise en pratiqueMettre en place une application basée sur Cairngorm en partant de rien risquerait de nousprendre trop de temps. Nous allons donc partir d’un exemple concret qui a fait sespreuves depuis un bon moment.

Initialisation

Il s’agit d’une petite application de login développée par Alex Uhlmann, l’un desmembres de l’équipe Flex au sein d’Adobe. Vous pouvez la récupérer à cette adresse :http://www.alex-uhlmann.de/flash/adobe/blog/cairngormlogin/CairngormLogin.html. Cliquez avec lebouton droit de la souris, puis avec le bouton gauche sur View Source : (voir fig. 13.5)

c Fig. 13.4 : Add SWC

13 Aller plus loin

368

Vous noterez le lien en bas à gauche de l’écran Download source : c’est via ce lien quevous pourrez récupérer les sources du projet. Une fois l’archive téléchargée,décompressez son contenu dans un répertoire approprié.

1 Il est temps de créer le projet. Dans Flex Builder, créez donc un nouveau projetnommé CairngormLogin.

Une fois le projet créé, commencez par ajouter Cairngorm.swc comme indiquéprécédemment.

2 Ensuite, importez les sources téléchargées dans le projet. Cliquez avec le boutondroit de la souris sur le projet, puis avec le bouton gauche, sur Import, puis dansGeneral choisissez File System :

c Fig. 13.5 : Source du projet

13Cairngorm

369

3 À présent, récupérez le dossier dans lequel vous avez extrait les sources téléchargées,puis sélectionnez l’ensemble des fichiers :

4 Lorsque vous cliquerez avec le bouton gauche de la souris sur le bouton Finish,Flex Builder va vous demander si vous souhaitez écraser les sources actuelles.Acceptez en cliquant avec le bouton gauche de la souris sur le bouton Yes.

c Fig. 13.6 :Importer les fichiers

c Fig. 13.7 :Sélectionner les fichiers

13 Aller plus loin

370

Description des sources

Si vous regardez dans le répertoire ajouté à votre projet, vous devriez voir ceci :

Ce petit tableau devrait vous aider à comprendre cette arborescence :

Tableau 13.2 : L’organisation de Cairngorm

Dossier Description

Business Ce dossier contient la logique nécessaire à l’accès aux données sur unserveur.

Commands Nous trouvons ici les commandes, à savoir des classes chargées de réagirà un événement précis.

Control C’est ici que l’on trouve le contrôleur de l’application.

Model Le modèle de notre application.

View La vue de notre application.

VO Stocke les Value Objects, objets métier chargés de représenter lesdifférentes entités présentes dans l’application.

c Fig. 13.8 :Arborescence du projet

13Cairngorm

371

Nous allons maintenant examiner de plus près les fichiers qui constituent cetteapplication :

j CairngormLogin.mxml est le fichier principal de l’application. Il contient unecertaine quantité de code, cependant le plus important est l’extrait suivant :

<view:LoginPanel id="login" login="{ model.login }"/>

Comme vous pouvez le constater, il s’agit d’un appel à la vue, au composantLoginPanel plus précisément.

j LoginPanel.mxml est situé dans le dossier view, ici nous constatons que lorsque l’onclique sur le bouton, la méthode loginUser() est appelée ; cette méthode se contentede stocker les informations Username et Password dans un Value Object (VO) et del’envoyer via un LoginEvent qui sera récupéré par le contrôleur.

j LoginEvent.mxml, nous voici à présent dans le dossier control : cette classe a pourseul but d’envoyer l’événement au contrôleur de l’application.

j LoginControl.mxml est le contrôleur frontal. Si vous avez compris le modèle MVC,vous savez qu’il s’agit de la classe chargée de récupérer les événements et dedéclencher la réponse appropriée. Il effectue cette tâche grâce à la méthodeaddCommand().

j LoginCommand.as est situé dans le dossier commands. Chaque commande doitimplémenter la fonction execute() ; son but dans cet exemple est d’accéder auserveur pour vérifier les informations entrées. Cependant, vous devez encore passerpar la classe Delegate chargée d’accéder au serveur.

j LoginDelegate.as, que vous trouverez dans le répertoire business, est chargé de la"plomberie" qui accède au serveur. Pour cette démonstration, il ne fait quedéclencher un petit temps d’attente.

Vous avez vu, grâce à cet exemple, comment s’organise une application basée surCairngorm. Si vous pensez que votre application s’adapte à ce concept, n’hésitez pas àl’utiliser, car il vous aidera à garder un code clair et organisé tout au long dudéveloppement.

13.2 Tests unitairesMême si la notion de tests reste assez peu répandue dans le monde du développementweb, elle tend à se démocratiser, notamment grâce à des frameworks commeRuby On Rails ou Symfony.

13 Aller plus loin

372

Nous allons tâcher d’expliquer le concept de tests unitaires afin de comprendre leur utilitédans le cadre d’une application Flex. Nous introduirons ensuite le framework de testsunitaires développé pour Flex : FlexUnit. Cette introduction sera suivie d’une mise enpratique dans le cadre d’une application.

Le principe des tests unitairesTout le monde comprend facilement l’intérêt de tester une application, cependant lamajorité des développeurs ont pris l’habitude de réaliser des batteries de tests générauxune fois l’application terminée. Cette pratique soulève des inconvénients, car si l’un destests échoue, trouver la cause de cet échec peut parfois se révéler pénible, surtout lorsquel’on travaille sur une application d’envergure.

Afin de remédier à ce problème, le principe de test unitaire a été inventé. Il s’agit en faitd’une pratique qui consiste à tester séparément chaque partie d’une application, afin devérifier qu’elles fonctionnent toutes correctement. Une partie est le plus petit morceaupossible d’une application pouvant être testé ; cette définition peut vous sembler vaguemais le concept vous paraîtra limpide lorsque nous passerons à la pratique.

Les intérêts de cette pratique sont multiples. Tout d’abord du point de vue de lamaintenance : en effet, comme chaque segment de notre application est indépendant ettesté de manière autonome, vous pourrez facilement modifier une classe ou une fonctionet vous assurer que le morceau d’application concerné fonctionne encore.

Le test unitaire permet aussi de réduire, voire de faire disparaître, le besoin de testsd’intégration lors de la phase finale de développement ; dans la mesure où chaquemorceau de l’application a été testé, leur réunion ne pose en général pas de problème.

Enfin, le test unitaire fournit une véritable documentation de l’application : en parcourantrapidement les différents tests, vous comprendrez l’utilité d’un morceau de code. Si lestests ont été bien pensés, toutes les fonctionnalités de l’application devraient apparaître demanière évidente. Ce type de documentation possède l’avantage de toujours être à jour,dans la mesure où la réussite des tests en dépend, contrairement à la documentationclassique qui doit être mise à jour continuellement pour correspondre à la réalité.

Une fois que vous maîtriserez la pratique des tests unitaires, vous pourrez étudier despratiques attenantes, tel le développement piloté par les tests, qui consiste à écrire les testspour ensuite développer le module qui les passera avec succès. Ce concept fait partieintégrante de la méthode agile appelée eXtreme Programming (XP), qui devient de plusen plus populaire dans le développement web, tant elle réduit le temps de développementd’applications évoluées.

13Tests unitaires

373

FlexUnitAvec la démocratisation de la pratique des tests unitaires, est apparu le besoin d’outilspermettant d’automatiser ce processus. Les développeurs en langage Java qui lisent ceslignes connaissent peut-être JUnit, une librairie de tests unitaires facile à intégrer etdisposant d’une interface permettant de voir en détail le résultat des batteries de tests.

Partant de cet exemple, un groupe de développeurs a lancé un projet équivalent maisconçu pour fonctionner avec Flex : FlexUnit (logique, n’est-ce pas ?). Ce framework esten fait une librairie ActionScript 3.0 qui propose toutes les fonctionnalités d’un JUnitavec en prime une interface de présentation des tests en… Flex bien sûr ! Cetteparticularité vous permet d’intégrer l’interface de présentation directement dans votreapplication, facilitant ainsi l’accès aux résultats de vos batteries de tests.

Nous allons à présent récupérer l’archive contenant tout le nécessaire pour utiliserFlexUnit. Tout comme Cairngorm, FlexUnit est maintenant disponible sur le site OpenSource d’Adobe à l’adresse http://opensource.adobe.com/wiki/display/flexunit/FlexUnit.

Une fois sur la page dédiée au projet, téléchargez l’archive en cliquant sur le lien suivant :

Ensuite, ouvrez l’archive. Nous allons examiner son contenu et vous devriez voir enprincipe l’arborescence suivante :

c Fig. 13.9 : Téléchargement de FlexUnit

13 Aller plus loin

374

Nous avons donc trois répertoires distincts, mais deux seulement vont retenir notreattention. Le premier, bin, contient la librairie FlexUnit sous forme binaire : c’est unfichier SWC qu’il suffira d’ajouter à notre projet pour pouvoir profiter des fonctionnalitésdu framework.

Le second dossier, asdocs, contient la documentation, et nous allons examiner soncontenu. Commencez par extraire le contenu de l’archive dans le dossier de votre choix(un dossier dédié aux librairies Flex serait l’idéal), naviguez ensuite dans le dossierasdocs, et vous devriez voir les fichiers suivants :

c Fig. 13.10 :L’archive

c Fig. 13.11 :La documentation

13Tests unitaires

375

Ouvrez le fichier index.html : vous accédez alors au sommaire de la documentation, quiest une documentation d’API standard. Essayons de la décrire pour ceux d’entre vous quiconsultent pour la première fois ce type de documentation :

La documentation s’ouvre sur la liste des packages qui constituent la librairie FlexUnit.Cliquez à présent sur le package flexunit.framework : (voir fig. 13.13)

Vous voyez maintenant les différentes interfaces et classes qui constituent le package.Chacun de ces éléments est détaillé de la manière suivante : (voir fig. 13.14)

c Fig. 13.12 : Index de la documentation

13 Aller plus loin

376

c Fig. 13.13 : Détails du framework

c Fig. 13.14 : Détails d’une classe

13Tests unitaires

377

Ici, vous voyez donc l’ensemble des méthodes disponibles pour la classe concernée avecleurs signatures ainsi qu’une description de leur utilité.

Notez que si vous désirez accéder directement à une méthode, il vous suffit de consulterl’index :

Vous avez ici accès à tous les packages, classes, méthodes et attributs de la librairieFlexUnit.

Mise en pratiqueNous allons à présent passer à la pratique. Voyons comment mettre en place cet outil detests dans une application, puis nous verrons l’utilisation des tests et enfin lefonctionnement de l’interface d’affichage des résultats.

c Fig. 13.15 : Index de la documentation

13 Aller plus loin

378

Mise en place du projet

Commencez par créer un projet appelé USDConvert. Vous êtes capable à présent de créerun projet Flex les yeux fermés. Un petit détail cependant : cette fois, nous souhaitons luiadjoindre la librairie FlexUnit. Lors de la création du projet, arrivé à la dernière étape,rendez-vous dans l’onglet Library path, cliquez avec le bouton droit de la souris sur lebouton Add SWC…. Une fenêtre va alors s’ouvrir ; sélectionnez le fichier flexunit.swc etappuyez sur OK.

Ouvrez à présent le fichier USDConvert.mxml, vous devriez voir ceci :

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"➥ layout="absolute">

</mx:Application>

À présent, pour pouvoir utiliser les composants de la librairie, il faut ajouter son préfixedans la balise Application de la manière suivante :

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"➥ layout="absolute"xmlns:flexunit="flexunit.flexui.*">

Le but de notre application va être d’écrire une classe ActionScript qui effectue laconversion de dollars en euros et vice versa.

Initiation de FlexUnit

Pour commencer, il va falloir mettre en place le TestRunner, qui est l’entité chargéed’effectuer les tests et d’afficher leurs résultats. Commencez donc par ajouter lecomposant suivant :

<flexunit:TestRunnerBase id="testRunner" width="100%" height="100%" />

Compilez votre application, et vous devriez obtenir le résultat suivant : (voir fig. 13.6)

Le résultat est tout à fait sympathique. Bien sûr, pour le moment, votre application ne faitrien, mais vous pouvez déjà observer le TestRunner qui se compose d’une barre deprogression, d’une grille affichant les tests et d’une barre de recherche.

Pour faire fonctionner l’ensemble, il va cependant falloir ajouter un peu de "plomberie",sous forme de code ActionScript 3. Ce code peut être placé directement dans le MXMLvia une balise Script ou bien dans un fichier .as séparé selon votre préférence.

13Tests unitaires

379

D’abord, vous devez déclarer une fonction chargée de créer les tests :

private function createSuite():TestSuite {var ts:TestSuite = new TestSuite();ts.addTest( CashConverterTest.suite() );return ts

}

Dans un premier temps, vous allez créer une nouvelle batterie de tests, une TestSuite, puisvous lui ajouterez des tests en utilisant la méthode addTest() ; CashConverterTestcorrespond à la classe de test que nous allons créer, elle porte ce nom car elle a pour butde tester la classe CashConverter que nous allons également créer.

Vous allez ensuite utiliser la fonction onCreationComplete() pour initialiser et lancer lestests :

private function onCreationComplete(){testRunner.test = createSuite();testRunner.startTest();

}

Enfin, n’oubliez pas d’ajouter la ligne suivante au début de votre code ActionScript :

import flexunit.framework.TestSuite;

Création des classes ActionScript

Vous démarrez avec la classe CashConverter qui va renfermer la logique de notreapplication (une logique assez simple, rassurez-vous). Créez donc cette classe dans votreprojet :

c Fig. 13.16 :Le TestRunner

13 Aller plus loin

380

package{

public class CashConverter{

public static function toDollar(euros:int):int{

return euros * 1.38;}

public static function toEuro(dollars:int):int{

return dollars / 1.38;}

}}

Cette classe se compose de deux fonctions : l’une effectue la conversion en dollars,l’autre en euros. Il ne reste plus qu’à la tester. À cet effet, nous allons créer la classeCashConverterTest qui va s’en charger :

package {

import flexunit.framework.TestCase;import flexunit.framework.TestSuite;

public class CashConverterTest extends TestCase {

public function CashConverterTest( methodName:String ){

super( methodName );}

public static function suite():TestSuite{

var ts:TestSuite = new TestSuite();

ts.addTest( new CashConverterTest( "testToDollar" ) );ts.addTest( new CashConverterTest( "testToEuro" ) );return ts;

}

/*** Ensures the Euro to Dollar conversion works as expected.*/public function testToDollar():void {

var Euro:int = 100;

13Tests unitaires

381

var Dollar:int = CashConverter.toDollar( Euro );assertTrue( "Egal à 138 dollars", Dollar == 138 );

}

/*** Ensures the Dollar to Euro conversion works as expected.*/public function testToEuro():void {

var Dollar:int = 138;var Euro:int = CashConverter.toEuro( Dollar );assertTrue( "Egal à 100 euros", Euro == 100 );

}

}}

Il n’y a là rien de bien de sorcier : les fonctions testToDollar() et testToEuro() sontchargées de tester les fonctions de la classe CashConverter, et la fonction suite() met enplace la batterie de tests. Le point le plus important est l’utilisation de la fonctionassertTrue() : cette fonction, spécifique à FlexUnit, vérifie l’égalité proposée, mais vouspouvez également utiliser assertFalse(), assertNull(), etc. L’ensemble des fonctionsproposées est disponible dans la documentation de la classe Assert.

Le résultat

Vous pouvez à présent lancer votre application et admirer le résultat :

Comme vous le constatez, les tests sont passés sans difficultés. Notez que si un test venaità échouer, les raisons de cet échec seraient affichées sur chaque tests.

c Fig. 13.17 : Le résultat des tests

13 Aller plus loin

382

13.3 LiveCycle Data Services et BlazeDSAvant de parler du système de gestion de données proposé par Adobe pour Flex, unepetite mise au point s’impose : vous n’aurez sans doute jamais besoin de cette solution,visant particulièrement un public de professionnels. De plus, sa mise en placecontraignante et son prix élevé (plus de 10 000 Q) en font un produit réservé auxapplications les plus évoluées.

Notez cependant qu’une version Open source est disponible sous le nom de BlazeDS.BlazeDs est en réalité un sous ensemble (un peu moins complet) de LiveCycleDataServices et propose notamment les fonctionnalités les plus pertinentes telles que leremoting ou encore le datapush. BlazeDs est disponible sur le site Open Source d’adobeau même titre que Cairngorm et FlexUnit : http://opensource.adobe.com/wiki/display/blazeds/BlazeDS.

Au cours des prochains paragraphes, nous allons évoquer les trois composants quiforment Data Services, à savoir RPC (Remote Procedure Call), Data Management Service(disponible seulement avec LiveCycle DataServices) et Messaging Service. Chacun deces éléments propose des fonctionnalités complémentaires visant à rendre une applicationFlex plus puissante, plus rapide ou simplement à en simplifier le développement.

Remote Procedure CallLes RPC sont utilisés pour accéder à des données distantes il s’agit en fait de créer uncomposant ActionScript chargé d’appeler un service distant et de récupérer les donnéesenvoyées par ce service. Grâce à ce composant, l’application peut exécuter des requêtesasynchrones et récupérer les données directement prêtes à être traitées.

Les RPC disponibles sont les suivantes :

j HTTP URL, représenté par le composant HTTPService, qui utilise les méthodes POSTet GET.

j Service web, représenté par le composant WebService, qui est compatible avec leprotocole SOAP.

j Objet Java, représenté par le composant RemoteObject, qui permet d’accéderdirectement à un objet sur le serveur.

Si HTTPService et WebService sont des composants disponibles directement dans Flex,l’utilisation de LiveCycle Data Services vous donne accès à un grand nombre defonctionnalités indispensables pour une entreprise, telles que la configuration de proxy,l’identification, la gestion d’une liste noire ou encore la gestion centralisée des RPC.

13LiveCycle Data Services et BlazeDS

383

Le composant RemoteObject n’est quant à lui disponible qu’avec LCDS et BlazeDS : ilpermet de mapper les classes ActionScript en calquant directement les classes métier Javasituées sur le serveur. Au lieu de passer par un service web, l’application accèdedirectement aux objets sur le serveur grâce à un fichier de configuration chargé derenseigner le mapping.

Data ManagementCet artefact propose un grand nombre de fonctionnalités permettant d’enrichir la gestiondes données dans votre application Flex.

Vous pouvez ainsi gérer la synchronisation de données, la pagination automatique et biend’autres options qui feront rentrer votre application dans une nouvelle dimension.

Le service permet enfin de gérer les données complexes, liées par des relations 1-n ou n-n(si cela ne vous dit rien, n’ayez crainte, il s’agit de concepts évolués pour l’architecturede bases de données).

MessagingLe service appelé Messaging repose sur les RPC et le Data Management pour offrir unsystème d’envoi de messages en temps réel, suivant les principes d’un chat.

Via un composant MXML, l’application se charge de traiter, de véhiculer et de recevoirles messages. Le client de messagerie est compatible avec d’autres technologies, commepar exemple Java et son JMS (Java Message Service).

13.4 Obtenir de l’aideIl vous sera indispensable de compulser les différentes sources d’aides et de tutorielsdédiés à Flex 2 lors de vos nombreux développements. Pour vous faciliter la tâche, nousallons à présent établir une liste des sites les plus complets : vous pourrez les consultersi vous ne trouvez pas la solution à l’un de vos problèmes dans cet ouvrage.

L’aide officielleÀ l’instant où nous écrivons ces lignes, l’aide officielle de Flex n’est disponible que dansla langue de Shakespeare. Autant dire que si vous ne comprenez rien à l’anglais, vousrisquez d’avoir du mal à trouver des sources d’aide satisfaisantes.

Évoquons rapidement l’aide officielle. Elle est disponible au sein du Flex Builder biensûr, mais également sur Internet via le site d’Adobe.

13 Aller plus loin

384

c Fig. 13.18 : L’aide de Flex Builder

c Fig. 13.19 : L’aide en ligne

13Obtenir de l’aide

385

Dans l’ensemble, cette aide est assez complète, les tutoriels se révèlent notamment trèsutiles pour un débutant.

Le forum Adobe FlexFlex, comme tous les produits Adobe, dispose de son forum sur le site d’Adobe.Rendez-vous à l’adresse http://www.adobe.fr/, et dans l’onglet Communautés sélectionnezForums. La liste suivante apparaît :

Sélectionnez Flex. Vous accédez alors à l’espace dédié à Flex et à ses produits dérivés :

c Fig. 13.20 : Les forums de produits

13 Aller plus loin

386

Comme vous le remarquerez, il existe un forum dédié à chaque aspect de la suite Flex.Mais encore une fois, ces forums sont réservés aux anglophones.

N’hésitez surtout pas à poser toutes les questions qui vous tourmentent : les réponses sont engénéral rapides et de qualité, dans la mesure où la question n’est pas trop rebattue, cela dit.

13.5 Check-listDans cet ultime chapitre, nous avons vu :

a comment appréhender le concept de modèle MVC ;a les principes régissant le fonctionnement de Cairngorm ;a quand et comment utiliser le framework de tests unitaires FlexUnit ;a les fonctionnalités proposées par la solution LiveCycle Data Services ES ;a où trouver de l’aide en cas de souci.

Les annexes vous proposent à présent une webographie ainsi qu’une série de conseils àcompulser consciencieusement.

c Fig. 13.21 : Les forums Flex

13Check-list

387

1414.1 Webographie ........................................... 39014.2 Antisèches ............................................... 39214.3 Glossaire ................................................. 405

Annexes

Ces annexes proposent une liste de sites web dédiés àla technologie Flex. Vous trouverez toutes les réponses

à vos questions en parcourant cette Webographie. Lereste du chapitre est consacré aux antisèches, qui vouspermettront, en cas de trou de mémoire, de rapidementvous remémorez un détail de fonctionnement de Flex.Enfin le glossaire fournit une définition pour chaque termetechnique utilisé dans cet ouvrage.

14.1 WebographieIl est probable qu’une fois les bases de Flex maîtrisées, vous allez vouloir en savoir plus.Afin de faciliter votre démarche, voici une liste des sites indispensables pour tout Flexeur.

Sources officiellesTout d’abord, voici tous les sites officiels en rapport avec le framework Flex ; voustrouverez ici les sections intéressantes du site Adobe, ainsi que les sites des outils évoquésdans cet ouvrage.

Adobe

http://www.adobe.com/fr/

Le site officiel d’Adobe, dans sa version française. C’est toujours pratique de l’avoir sousla main si vous utilisez un des produits Adobe.

http://www.adobe.com/fr/products/flex/

La partie du site dédiée à Flex : vous y trouverez les dernières informations concernantFlex et ses produits dérivés.

http://www.adobe.com/support/documentation/en/flex/

Documentation en ligne de Flex. En plus d’être consultable partout, elle est richementcommentée par les utilisateurs et les développeurs, ce qui devrait vous aider à répondreaux problèmes courants.

http://www.adobe.com/devnet/flex/

Voici le Developer Center : il contient tous les articles récemment écrits sur Flex, un bonnombre de tutoriels et d’exemples ainsi qu’une liste impressionnante de composantsdéveloppés par des utilisateurs. Une véritable mine d’informations.

http://www.adobe.com/cfusion/webforums/forum/index.cfm?forumid=60

Le forum officiel dédié à Flex et ses produits dérivés : vous y trouverez bon nombre desolutions à des problèmes courants. Vous pouvez également poser des questions si vousavez épuisé toutes les sources d’aide.

14 Annexes

390

Adobe Labs

http://labs.adobe.com/

Le laboratoire Adobe fourmille de produits dans leur phase de développement,notamment le Flex Builder 3. Si vous êtes un peu curieux, n’hésitez pas à naviguer sur lesite : vous trouverez sans doute d’excellents outils que personne n’utilise pour le moment.

http://labs.adobe.com/technologies/air/

Voici la page dédiée à AIR sur le laboratoire. Vous trouverez donc toutes les innovationsqui feront le futur de cette technologie.

http://labs.adobe.com/technologies/flex/

Voici la page dédiée à Flex sur le laboratoire. Vous trouverez donc toutes les innovationsqui feront le futur de ce framework.

http://labs.adobe.com/wiki/index.php/Cairngorm

Cette partie du site est dédiée à Cairngorm : c’est la source officielle d’informationsconcernant le framework. À suivre donc avec attention si vous utilisez cette solution.

FlexUnit

http://code.google.com/p/as3flexunitlib/

Le site officiel du framework FlexUnit. Il s’agit en fait du groupe Google associé auprojet ; il est à visiter régulièrement pour être au courant des dernières mises à jour.

Communautéhttp://flex.org/

Un site anglophone au contenu impressionnant, qui nous tient au courant de l’actualitédes différentes communautés Flex, et qui propose des centaines d’exemples et de tutorielsréalisés par les Flexeurs du monde entier.

http://www.cflex.net/

Un autre site particulièrement bien documenté et qui a la particularité de proposer unensemble de conseils triés par niveau. Du débutant à l’expert.

http://flexbox.mrinalwadhwa.com/

FlexBox est un concept intéressant. Il s’agit d’une application Flex présentant sous formede bibliothèque un très grand nombre de composants développés par la communauté Flex.

14Webographie

391

Flex en Francehttp://www.fdeshayes.net/

Le blog référence dans le monde des RIA en France. Vous y trouverez des informationsrégulièrement mises à jour sur Flex, AIR et toutes les autres technologies révolutionnairesdans le domaine du Web.

http://flex.mediabox.fr/

Seul forum français disponible à l’heure actuelle. Il est hébergé par une sociétéspécialisée dans la formation sur les produits Flex. Vous y trouverez donc une aide fiableen cas de problèmes.

http://fr.wikipedia.org/wiki/Adobe_Flex

Vous connaissez certainement Wikipédia, la plus grande encyclopédie disponible en ligne.Voici donc la page française dédiée à Flex. Elle n’est pas très fournie pour le moment,mais ne la perdez pas de vue car il est probable que la situation évolue rapidement.

14.2 AntisèchesVoici quelques rappels de ce que vous avez appris dans ce livre. Pensez à y jeter un œilen cas de doute.

Les composantsVoici tout d’abord un petit résumé des composants à connaître ; ils sont triés par famille.Le but n’est pas d’établir une liste exhaustive des composants proposés par Flex 2, maissimplement de vous donner des pistes si jamais vous aviez un doute quant au composantà utiliser.

Les contrôles : mx.controls

Boutons

Button

<mx:Button label="Clic" />

14 Annexes

392

Bouton

LinkButton

<mx:LinkButton label="Clic" />

Lien

PopUpMenuButton

<mx:XML id="menuData"><root>

<editItem label="Fichier"/><editItem label="Quitter"/>

</root></mx:XML>

<mx:PopUpMenuButton id="menu" dataProvider="{menuData}"labelField="@label" showRoot="false" />

Bouton déroulant

RadioButton

<mx:RadioButton groupName="sex" id="male" label="Homme" /><mx:RadioButton groupName="sex" id="female" label="Femme" />

c Fig. 14.1 :Exemple de bouton

c Fig. 14.2 :Exemple de lien

c Fig. 14.3 :Exemple de bouton déroulant

c Fig. 14.4 :Exemple de bouton radio

14Antisèches

393

Bouton radio

Contrôles textuels

Label

<mx:Label text="Bonjour"/>

Label

RichTextEditor

<mx:RichTextEditor/>

Éditeur de texte

Text

<mx:Text text="Bonjour"/>

c Fig. 14.5 :Exemple de label

c Fig. 14.6 :Exemple d’éditeur de texte

14 Annexes

394

Texte

TextArea

<mx:TextArea text="Bonjour"/>

Zone de texte

TextInput

<mx:TextInput id="myInput"/>

Champ de saisie

Les autres

Image

<mx:Image source="logo.jpg"/>

Image

c Fig. 14.7 :Exemple de texte

c Fig. 14.8 :Exemple de zone de texte

c Fig. 14.9 :Champ de saisie

c Fig. 14.10 :Exemple d’image

14Antisèches

395

DateChooser

<mx:DateChooser/>

Calendrier

Les conteneurs : mx.containers

Les boîtes

HBox

<mx:HBox><mx:Button label="Un"/><mx:Button label="Deux"/><mx:Button label="Trois"/>

</mx:Box>

Boîte horizontale

VBox

<mx:VBox><mx:Button label="Un"/><mx:Button label="Deux"/><mx:Button label="Trois"/>

</mx:Box>

c Fig. 14.11 :Exemple de calendrier

c Fig. 14.12 :Exemple de boîte horizontale

14 Annexes

396

Boîte verticale

Panel

<mx:Panel title="Mon panel">

</mx:Panel>

Panneau

Form

<mx:Form id="myForm"><mx:FormHeading label="Informations"/>

<mx:FormItem label="Prénom"><mx:TextInput id="fname" width="100%"/>

</mx:FormItem></mx:Form>

Formulaire

c Fig. 14.13 :Exemple de boîte verticale

c Fig. 14.14 :Exemple de panneau

c Fig. 14.15 :Exemple de formulaire

14Antisèches

397

La navigation

Accordion

<mx:Accordion id="myAccordion"><mx:VBox label="Première page">

<mx:TextInput/><mx:Button label="Valider"/>

</mx:VBox><mx:VBox label="Seconde Page">

<mx:TextInput/><mx:Button label="Valider"/>

</mx:VBox></mx:Accordion>

Accordéon

TabBar

<mx:TabBar><mx:dataProvider>

<mx:String>Dossiers</mx:String><mx:String>Factures</mx:String><mx:String>Contacts</mx:String>

</mx:dataProvider></mx:TabBar>

Barre de navigation

ViewStack

<mx:TabBar dataProvider="myVS"/><mx:ViewStack id="myVS">

<mx:VBox label="Page 1">

c Fig. 14.16 :Exemple d’accordéon

c Fig. 14.17 :Exemple de barre de navigation

14 Annexes

398

</mx:VBox><mx:VBox label="Page 2">

</mx:VBox></mx:ViewStack>

Pile d’écrans

Le composant ViewStack se contente d’empiler les pages qu’il comporte. Il est utilisé deconcert avec un autre composant de navigation pour permettre de parcourir ses différentsécrans.

Les RPC : mx.rpc

HTTPService

Déclaration

<mx:HTTPService id="myService"url="http://weblogs.macromedia.com/mchotin/index.xml"useProxy="false"/>

Utilisation

<mx:Panel title="{myService.lastResult.root.title}">

WebService

<mx:WebService id="translatorService"wsdl="http://www.webservicex.net/TranslateService.asmx?wsdl" />

Les graphiques : mx.charts

Nous allons nous contenter de présenter les graphiques les plus utilisés.

PieChart

<mx:PieChart id="piechart1"><mx:series>

<mx:PieSeries displayName="Series 1" field=""/></mx:series>

</mx:PieChart>

14Antisèches

399

<mx:Legend dataProvider="{piechart1}"/>

Le camembert

LineChart

<mx:LineChart id="linechart1"><mx:series>

<mx:LineSeries displayName="Series 1" yField=""/></mx:series>

</mx:LineChart><mx:Legend dataProvider="{linechart1}"/>

Les courbes

c Fig. 14.18 :Le camembert

c Fig. 14.19 :Les courbes

14 Annexes

400

ColumnChart

<mx:ColumnChart id="columnchart1"><mx:series>

<mx:ColumnSeries displayName="Series 1" yField=""/></mx:series>

</mx:ColumnChart><mx:Legend dataProvider="{columnchart1}"/>

Les bâtons

Les validateurs : mx.validators

Nombre

<mx:NumberValidator id="numV" source="{numInput}" property="text"minValue="1" maxValue="10" domain="int"/>

Chaîne de caractères

<mx:StringValidator source="{userNameInput}" property="text"minLength="6" maxLength="12"/>

Date

<mx:DateValidator id="dateV" source="{dateInput}" property="text"inputFormat="dd/mm/yyyy" allowedFormatChars="*#~/"/>

c Fig. 14.20 :Les bâtons

14Antisèches

401

Adresse e-mail

<mx:EmailValidator id="emV" source="{emailInput}" property="text"/>

Numéro de téléphone

<mx:PhoneNumberValidator id="pnVCell" ="{phoneInput}" property="text"/>

Les propriétésVoici une petite liste des propriétés à connaître absolument. Elles sont souvent communesà plusieurs composants, et vous n’aurez de cesse de les utiliser dans vos développements.

Les basiques

j id : l’identifiant du composant, essentiel pour pouvoir faire référence au composantdans l’application.

j label : le texte qui habille le composant, généralement un bouton ou bien unmx:Label.

j text : similaire au label mais utilisé pour les entrées de texte, typiquementmx:TextInput.

j dataProvider : utilisé pour peupler un tableau, une grille, un arbre, etc.

Taille et position

j x, y : la position du composant, renseignée en pixels.j width, height : la taille du composant, renseignée en pixels ou en pourcentage, en

fonction de la taille du composant père.

Styles

Les styles sont les mêmes que vous utilisez déjà dans vos feuilles de style CSS. Notez quevous pouvez parfaitement les utiliser directement dans le composant sous forme depropriétés, mais nous vous conseillons vivement de déclarer des feuilles de style à partpour améliorer la lisibilité de votre code et l’homogénéité de votre interface.

Événements

j click : déclenché par un clic sur le bouton gauche de la souris.j change : déclenché dès que le composant subit une modification.

14 Annexes

402

j keyUp, keyDown : déclenchés respectivement lorsque l’on appuie et lorsque l’onrelâche une touche du clavier.

j focusIn, focusOut : déclenchés respectivement lorsque l’on entre dans un champ desaisie et lorsque l’on en sort.

j creationComplete : déclenché lorsque le composant est créé, ce qui estindispensable pour effectuer diverses initialisations.

Utiliser ActionScriptVoici les deux méthodes pour utiliser ActionScript.

Dans le code MXML

Un petit exemple de fichier MXML :

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">


// Entrez votre code ActionScript]]>

</mx:Script>

</mx:Application>

Dans un fichier séparé

À présent, un appel à un fichier ActionScript :

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script source="asCode.as"/>

</mx:Application>

AIRVoici ce que vous devez retenir à propos de AIR.

Manipuler les fichiers

Vous créez le fichier :

14Antisèches

403

var file:File = File.documentsDirectory;file = file.resolve("Tests/test.txt");

Vous l’ouvrez :

var stream:FileStream = new FileStream( );stream.open(file, FileMode.WRITE);

Vous écrivez :

stream.writeUTFBytes("Bonjour");

Et vous fermez :

stream.close();

Utiliser HTML

Pour appeler une page HTML dans votre application Apollo, rien de plus simple ; vousn’avez qu’à ajouter :

<mx:HTML id="html" width="100%" height="100%"location="http://www.oreilly.com" complete="onHtmlComplete( )" />

Et voilà.

Personnaliser la fenêtre

Dans le fichier application.xml, ajoutez :

<rootContent systemChrome="none" transparent="true"visible="true">main.swf</rootContent>

Puis dans votre application :

<?xml version="1.0" encoding="utf-8"?><mx:WindowedApplication xmlns:mx=http://www.adobe.com/2006/mxml

layout="vertical" title="Transparency Test" alpha="0.5">


Et vous obtenez une fenêtre transparente du plus bel effet.

14 Annexes

404

14.3 GlossaireActionScript

Le langage de programmation derrière la technologie Flash, aujourd’hui disponible danssa version 3.0. Il se rapproche des langages de script orientés objet tels que JavaScript etse base sur la norme E4X (ECMAScript for XML).

Classe

Spécifique aux langages objet, il s’agit de la structure qui sert de moule pour créer desobjets.

Client

Dans le monde du Web, le terme client désigne en général le navigateur Internet del’utilisateur. Ce terme vaut pour une application riche (RIA ou RDA) et l’on parleégalement de client léger pour une interface web et de client lourd pour une interface surle Bureau.

Composant

Il s’agit des briques de base du framework Flex, chacune étant en réalité un objetActionScript utilisable clé en main par le développeur.

Conteneur

Ce terme désigne les composants Flex chargés de la mise en place de l’interface, cescomposants contiennent généralement d’autres composants, d’où leur nom.

Contrôle

Les contrôles quant à eux sont les composants Flex avec lesquels l’utilisateur interagit,comme par exemple un bouton.

CSS, Cascading Style Sheet

C’est un langage déclaratif basé sur XML et permettant de définir la disposition etl’apparence des balises HTML, ou, dans le cas de Flex, des composants dans l’interface.

Déboguer

Le principe de débogage est simple, il s’agit d’effectuer des tests afin de débusquer, puisde corriger, les bugs d’une application.

Espace de noms (voir : Namespace)

14Glossaire

405

E4X

ECMAScript for XML est la norme sur laquelle repose le langage ActionScript 3.0. Ils’agit de la même norme que le langage JavaScript avec une gestion native du formatXML (parcours et modification de la structure d’un document XML) ce qui facilite lagestion de la communication entre Flex et le serveur.

Événement

Lorsque l’utilisateur navigue sur un site web ou une application Flex, il effectue desactions qui sont répercutées grâce aux événements afin d’être traités. Un clic de souris ouune frappe de clavier déclenchent un événement.

Flash Player

Plugin développé par Adobe qui peut être installé sur tous les navigateurs du marché, ilpermet d’exécuter des applications Flash au sein du navigateur et donc doit êtrenécessairement installé par l’utilisateur pour exécuter une application Flex. Ce plugin estinstallé sur plus de 97% des machines connectées à Internet.

Fonction

Ensemble de commandes visant à être répétées et qu’on a donc regroupées sous un seulnom. Lors de l’appel, des paramètres peuvent être adjoints pour enrichir la fonction.

Firefox

Navigateur web Open Source, développé par la fondation Mozilla, il est aujourd’hui l’undes principaux acteurs du marché. Il s’affirme comme étant le seul concurrent sérieuxd’Internet Explorer.

Framework

C’est un ensemble de bibliothèques et d’outils, capable d’interagir pour assurer ledéveloppement rapide d’applications. Il peut être logiciel, comme Flex, ou architectural,comme Cairngorm.

HTML, Hypertext Markup Language

C’est le langage utilisé pour créer les pages qui constituent un site web. Il est basé surXML et utilise des balises qui sont interprétées graphiquement par le navigateur web.

Internet Explorer

Navigateur web développé par Windows, il est aujourd’hui leader dans la mesure où il estutilisé par la moitié des ordinateurs dans le monde. Sa suprématie est cependant remiseen question avec la croissance de produits Open Source comme Firefox.

14 Annexes

406

JavaScript

Langage de script interprété par les navigateurs web, il permet d’ajouter une logiquebasique aux pages statiques HTML. Il est cependant critiqué, notamment à cause desvariations d’interprétation selon les navigateurs.

Méthode

Fonction attachée à un objet particulier. Elle est définie dans une classe.

MVC, Modèle Vue Contrôleur

C’est une méthode de conception architecturale qui consiste à séparer l’affichage desdonnées dans une application, le contrôleur agit comme intermédiaire.

MXML

Bien qu’aucune terminaison exacte n’ait été fournie, on pourrait l’appeler MacromediaeXtensible Markup Language dans la mesure où il a été créé par Macromedia dans lecadre du framework Flex. Il s’apparente à HTML mais propose plus de fonctionnalités.

Namespace, Espace de noms

Il s’agit d’un ensemble d’objets apparentés regroupés de manière à simplifier lacompréhension d’une application.

Objet

Entité composée de variables et de méthodes, il s’agit du concept de base dans le cadred’un langage objet.

Package

Structure regroupant plusieurs objets ou méthodes sous une forme modulaire etréutilisable.

RIA, Rich Internet Application

Ce nouveau terme à la mode désigne les nouveaux sites web qui tendent à se rapprocherdes applications de bureau dans leurs fonctionnalités.

RPC, Remote Procedure Call

Protocole regroupant les services permettant d’appeler des procédures sur un ordinateurdistant.

Serveur

Machine chargée d’effectuer des opérations répondant aux requêtes des clients connectés.

14Glossaire

407

Serveur web

Serveur particulier dédié au traitement des requêtes HTTP et à l’affichage de sites web.

Service web

Plus généralement appelé Web Service, il s’agit d’un utilitaire chargé de répondre à desrequêtes prédéfinies. Il peut s’agir d’une simple opération ou bien d’une réponse plusévoluée comme la météo.

SOAP, Simple Object Access Protocol

C’est un protocole de RPC basé sur XML, il est utilisé dans un grand nombre d’échangessur Internet.

SWF, Small Web Format

Format de fichiers graphique vectoriel développé par Adobe. Il s’agit du format binairepermettant au Player Flash du navigateur d’exécuter l’animation ou l’application. C’est leformat de sortie d’une application Flex une fois la compilation réussie.

URL, Uniform Resource Locator

Chaîne textuelle représentant l’adresse d’un fichier sur le Web.

Validateur

Contrôles Flex chargés de s’assurer de la validité des informations entrées par l’utilisateurdans une forme. Ils peuvent vérifier qu’il s’agit bien d’un nombre, d’un e-mail ou encored’un numéro de téléphone.

XML, eXtensible Markup Language

Langage informatique générique basé sur un ensemble de balises enchevêtrées. Il est à labase d’un grand nombre de langages actuels, notamment HTML et MXML.

14 Annexes

408

AAccolades en MXML, 156Accordion, 215, 398ActionScript, 48, 189, 405

ActionScript 3.0, 20Adobe Integrated Runtime (AIR),22, 32, 330AIR, 22, 330

AIR Debug launcher, 32Apollo, 330package, 336

AltKey, 136Amazon, 291AMF3, 290AnimateProperty, 229Apollo, 330Application, 99ApplicationControlBar, 102Arborescence

du SDK, 32Flex Builder 3, 32projet Flex, 38

Architecture, 364AreaChart, 306As, 61Attributs, 70Axes, 312

BBalises fermantes, 41BarChart, 307Binding, 156Blur, 229Boolean, 59Booléen, 59Breakpoint, 81

Bubble Chart, 308Button, 392ButtonBar, 210

CCairngorm, 364Canvas, 97, 107Cascading Style Sheet (CSS), 242, 405Chaîne de caractères, 59Change, 133Chargement dynamique, 270

des données XML, 270Chemins relatifs, 346Classes, 69, 405Clavier, 135

codes, 135événements, 133

Client, 405Codes clavier, 135ColdFusion, 30, 290ColumnChart, 307, 401ComboBox, 178Command, 366Compiler, 44Complétion Flex, 41Comportement, 228Composant, 90, 405Conteneur, 96, 405

d’agencement, 96Contenu d’une variable, 83Contraintes, 112ControlBar, 101Contrôles, 405

avancés, 178Image, 115

Contrôleur, 364Conversion du texte en nombre, 231

INDEX

410

Convertisseur de devises, 138CreationComplete, 133CSS, 242, 405CtrlKey, 136CurrencyFormatter, 168

DData binding, 156Data Management, 384Data model, 146Data models, 146DataGrid, 180DataTips, 315DateChooser, 396DateFormatter, 168Dates, 59DateTimeAxis, 325Déboguer, 405Deep Linking, 256Design Pattern, 364Devises, 138DispatchEvent, 137Dissolve, 229DividedBox, 103Do while, 67Document PDF, 339Données

formater, 168récupération, 270valider, 161

Drag and Drop, 252Drag initiator, 252Drag proxy, 252Drag source, 252DragEvent, 256DragManager, 256DragSource, 256

Drop target, 252Drop-in, 246Duration, 235

EEbay San Dimas, 17Eclipse, 26ECMAScript, 48Effet, 229, 234EmailValidator, 402Encodage des bundles, 264End, 233Entier, 59

non signé, 59Error, 133Espace de noms, 184, 407Événements, 128, 228, 406

clavier, 133clavier-souris, 136

Event, 128EventDispatcher, 129EXtensible Markup Language(XML), 408Extreme programming, 373

FFade, 229Fault, 287FaultEvent, 285File, 346Firefox, 406Flash, 273Flex Builder 3, 26

arborescence, 32installer, 27

INDEX

411

Flex Builder et AIR, 331Flex Charting, 304Flex Data Services, 383FlexPrintJob, 260FlexUnit, 373-374, 391Fonction, 406For, 66

For each in, 66For in, 66

Form, 397Formater les données, 168Formulaire, 146

validateur, 163Forum, 386

Adobe Flex, 386Framework, 406

GGetChildAt, 92GetChildByName, 92Glow, 229Graphiques, 315Grid, 104

HHarley Davidson Customizer, 17Hbox, 97, 396HDividedBox, 103Héritage, 74Historique, 256HorizontalAxis, 313HorizontalList, 178HTML, 406HTMLControl, 337HTTPService, 274, 279, 383, 399

Hypertext Markup Language(HTML), 406

IId, 91IDE, 26If else, 67Image, 395Importation d’images à l’exécution, 115Imprimer, 260Inclusion, 270Inline, 130, 244, 246Int, 59Interfaces, 73Internationalisation, 263Internet Explorer, 406Iris, 230Is, 61Item Editor, 244Item Renderer, 244

JJava Runtime Environnement, 32JavaScript, 407Joost, 17

LLabel, 394Layout, 99Légende, 317Licence, 22LineChart, 308, 400LinkBar, 212

INDEX

412

LinkButton, 393List, 178Listener, 129LiveDragging, 104Load, 287

MMaître-détail, 190Messaging, 384Méthode, 72, 186, 407

drop-in, 245Mode

Debug, 78Design, 42Source, 39

Model, 149Modèle, 364

stockage des modèles, 151Modèle Vue Contrôleur (MVC), 146, 158,364, 407ModelLocator, 365Module de statistiques, 321Move, 230MVC, 146, 158, 364, 407

selon Cairngorm, 365Mx

Binding, 158Script, 188XML, 151

MXML, 20-21, 38, 407accolades, 156

NNamespace, 55, 184, 407Navigateur Firefox, 406

Navigator, 36Nombre, 59Not a Number, 59Null, 60Number, 59, 231NumberFormatter, 168NumberValidator, 401NumChildrend, 208NumericStepper, 246

OObjet, 407

programmation orientée objet, 68Opérateurs courants, 65

PPackage, 55, 407

AIR, 336Panel, 99, 397Pause, 230PDF, 339PhoneFormatter, 168PhoneNumberValidator, 402PieChart, 304-305, 399Play, 233Player Flash et la sécurité, 273PlotChart, 308Point d’arrêt, 79, 81

ajout, 82Popfly, 17PrintJob, 260Profiler, 45Programmation orientée objet, 68Propriétés, 186

INDEX

413

RRadioButton, 393Récupération de données, 270Remote Procedure Call, 383, 407RemoteObject, 290, 383Resize, 230ResourceManager, 263Result, 287ResultFormat, 279Resume, 83Rich Internet Application (RIA), 15, 26,407

avantages, 16RichTextEditor, 394Rotate, 230RPC, 383, 407

SSandbox, 273Scroll, 133SDK, 26

arborescence, 32Sécurité du Player Flash, 115SelectedChild, 208SelectedIndex, 208SelectedItem, 179SerieInterpolate, 319Séries, 310Serveur, 407

web, 408Service Oriented Architecture (SOA), 285Services

web, 286, 408web et HTTPService, 289

ShiftKey, 136ShowTarget, 237

Simple Object Access Protocol (SOAP),286, 408Small Web Format, 408SOAP, 286, 408Sony Phone Selector, 17SoundEffect, 230Spacer, 102SQLConnection, 352SQLite, 352SQLStatement, 354StartDelay, 235Statistiques, 321Step Into, 83Step Over, 83Step Return, 83Stockage des modèles, 151String, 60StringValidator, 401Style, 242-243StyleManager, 243Suspend, 83SWF, 44, 408Switch, 68

TTabBar, 214, 398Tableaux, 59TabNavigator, 215Terminate, 83TestRunner, 379Tests unitaires, 372-373TestSuite, 380Text, 394Text Controls, 117TextArea, 395TextInput, 395This, 92

INDEX

414

Tile, 106ToggleButtonBar, 210Trace, 85Transitions, 238, 241Tree, 181Triggers, 228

UUIComponent, 338Uint, 60Undefined, 60Uniform Resource Locator (URL), 408URL, 408URLKit, 260Use-network, 116

VValidateur, 401, 408

dans un formulaire, 163prédéfinis, 161

Validators, 401Valider des données, 161Value Objects, 365Variable, 83VBox, 97, 396VDividedBox, 103View states, 238ViewStack, 204, 398

Void, 60Vue, 364

WWebService, 383, 399While, 67WipeDown, 230WipeLeft, 230WipeRight, 230WipeUp, 230Workspace, 35Wsdl, 287

XXML, 408

chargement dynamique, 270Mx, 151

YYahoo ! Maps, 17

ZZipCodeFormatter, 168Zoom, 230

INDEX

415

Composé en France par Jouve11, bd de Sébastopol - 75001 Paris