Flex & Air

Copyright © 2008 Micro Application - 20-22, rue des Petits-Hôtels - 75010 Paris 1ère Édition - Octobre 2008 Auteurs - V...

Author: Vianney Baron | Jessy Bernal | Adrien Montoille | Edouard Ruiz | Collectif

53 downloads 1067 Views 10MB Size Report

This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Report copyright / DMCA form

DOWNLOAD PDF

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 par les 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 citations dans 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 plus d’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 être tenue 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. Cet ouvrage 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 sont utilisé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 20-22, rue des Petits-Hôtels 75010 PARIS Tél. : 01 53 34 20 20 Fax : 01 53 34 20 00

Support technique : Également disponible sur www.microapp.com http://www.microapp.com

Retrouvez des informations sur cet ouvrage ! Rendez-vous sur le site Internet de Micro Application www.microapp.com. Dans le module de recherche, sur la page d’accueil du site, entrez la référence à 4 chiffres indiquée sur le présent livre. Vous accédez directement à sa fiche produit.

1678

Avant-propos La collection Atelier du webmaster s’adresse aux personnes initiées au développement de sites web qui souhaitent découvrir et mettre en pratique les nouvelles technologies Internet. Sans négliger les aspects théoriques, nous donnons toujours priorité à la pratique afin que vous puissiez rapidement être autonome. À travers les différents titres de cette collection vous découvrirez les technologies qui font le web 2.0 et feront ce que certains nomment déjà le web 3.0.

Conventions typographiques Afin de faciliter la compréhension des techniques décrites, nous avons adopté les conventions typographiques suivantes : j j j j

gras : menu, commande, boîte de dialogue, bouton, onglet. italique : zone de texte, liste déroulante, case à cocher, bouton radio. Police bâton : instruction, listing, texte à saisir. ➥ : 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

2

Créer son premier projet avec Flex

25

1.1

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

26 26 27 32 33

1.2

Créer sa première application ............................................ Création d’un nouveau projet ............................................... Comprendre l’arborescence d’un projet Flex ............................ MXML ............................................................................ Mode Source .................................................................. Mode Design ..................................................................

34 35 38 38 39 42

1.3

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

1.4

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

Découvrir l’ActionScript 3.0

47

2.1

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

48 48 49 52 54

2.2

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

55 55 59 62 66

2.3

La programmation orientée objet dans ActionScript ................ Les avantages de la programmation orientée objet .................... Les classes ...................................................................... Les interfaces ................................................................... L’héritage ........................................................................

68 68 69 73 74

2.4

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

77 77 78 79 83 83

Sommaire

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

4

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

Réaliser sa première interface

89

3.1

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

90 90 91 93 94

3.2

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

96 96 97 99

3.3

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

3.4

Les contrôles simples ....................................................... Utiliser Flex Component Explorer pour appréhender les contrôles simples ........................................................ Afficher des images ......................................................... Utiliser les Text Controls .....................................................

113 113 114 117

3.5

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

3.6

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

Gérer les événements

127

4.1

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

128 128 128 129

4.2

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

129 130 130 131 132

4.3

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

Sommaire

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

5

4.4

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

137 137 138 138

4.5

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

138 139 139 140 141 142

4.6

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

Gérer les données

145

5.1

Définir un data model ..................................................... Création d’un formulaire ................................................... La balise ...................................................... La balise ......................................................... Les modèles basés sur du script ........................................... Les modèles basés sur des classes ActionScript .......................

146 146 149 151 152 153

5.2

Lier des données ............................................................ Les accolades en MXML ................................................... Utiliser du code ActionScript dans les accolades ..................... La balise en MXML ....................................... Plusieurs sources ou plusieurs destinations .............................. Lier des données en ActionScript .........................................

156 156 157 158 159 160

5.3

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

161 161 163 166

5.4

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

168 168 169 170

5.5

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

171 171 173 175

5.6

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

Sommaire

6

7

Aller vers une interface riche

177

6.1

Les contrôles avancés ..................................................... Les List, les HorizontalList et les ComboBox ............................ Les DataGrid ................................................................. Les Tree ........................................................................

178 178 180 181

6.2

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

182 182 184 189 189 190

6.3

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

190 190 191 191 192 197 199

6.4

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

Naviguer dans son application

203

7.1

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

7.2

Manipuler une ViewStack ................................................ Introduction au composant ViewStack .................................. Ajouter une ViewStack dans une application .......................... Manipuler une ViewStack ................................................. Dimension des conteneurs enfants .......................................

204 204 206 210 214

7.3

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

215 215 216 217 218

7.4

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

218 219 221 221 222 222

7.5

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

Sommaire

8

Personnaliser son application

227

8.1

Utiliser les comportements ............................................... Comment fonctionnent les comportements ? ........................... Les effets disponibles dans Flex ........................................... Appliquer les comportements aux composants ........................

228 228 229 230

8.2

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

234 234 234 236

8.3

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

8.4

Styliser l’interface .......................................................... La balise ........................................................ Les classes de style .......................................................... Le StyleManager ............................................................. Le style inline ..................................................................

242 243 243 243 244

8.5

Item renderers et editors ................................................. Utiliser des renderers et des editors en méthode drop-in ............. La méthode inline ............................................................ Quels sont les composants Flex qui peuvent servir de renderer ou d’editor ? ...................................................................... Utiliser des items renderers et editors complexes ......................

244 245 246

8.6 9

247 248

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

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) ............................ Pour quoi faire ? ............................................................. Comment ça marche ? ..................................................... Concrètement ? ..............................................................

9.3

Impression .................................................................... 260

9.4

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

9.5

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

256 256 257 257 263 263 266 267

Sommaire

10

11

Communiquer avec un serveur

269

10.1

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

10.2

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

274 275 280 281 283

10.3

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

285 286 287 287 289

10.4

RemoteObject ............................................................... 290

10.5

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

10.6

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

Présenter les données graphiquement

303

11.1

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

11.2

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

305 305 306 307 308 308

11.3

Mettre en forme les graphiques ......................................... Les données ................................................................... Les séries ...................................................................... Les axes ........................................................................

309 309 310 312

11.4

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

315 315 317 319

11.5

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

11.6

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

Sommaire

12

13

Utiliser AIR

329

12.1

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

330 330 331 334 336

12.2

Utiliser HTML ................................................................ La classe HTMLControl ..................................................... Les possibilités avancées ................................................... HTMLControl dans le composant HTML ................................

337 337 340 343

12.3

Gérer des fichiers .......................................................... Les classes pour gérer les fichiers ......................................... Manipuler des répertoires ................................................. Gérer les fichiers .............................................................

344 344 347 349

12.4

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

352 352 354 355

12.5

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

12.6

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

Aller plus loin

363

13.1

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

364 364 365 366 368

13.2

Tests unitaires ................................................................ Le principe des tests unitaires .............................................. FlexUnit ........................................................................ Mise en pratique ............................................................

372 373 374 378

13.3

LiveCycle Data Services et BlazeDS ................................... Remote Procedure Call ..................................................... Data Management .......................................................... Messaging ....................................................................

383 383 384 384

13.4

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

Sommaire

Le forum Adobe Flex ........................................................ 386 13.5 14

15

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

Annexes

389

14.1

Webographie ............................................................... Sources officielles ............................................................ Communauté ................................................................. Flex en France ................................................................

390 390 391 392

14.2

Antisèches .................................................................... Les composants .............................................................. Les propriétés ................................................................. Utiliser ActionScript .......................................................... AIR ..............................................................................

392 392 402 403 403

14.3

Glossaire ..................................................................... 405

Index

409

Préface Enfin un livre, sur l’une des technologies les plus en vogue « FLEX » ! Dévorez ce livre et développez de nouvelles applications « riches et ergonomiques ». Croyez-moi, ensuite vous aurez du mal à vous en passer ! La planète Web est encore et sera toujours en pleine effervescence ! Aujourd’hui la vente de services et de biens en ligne est en pleine croissance et il est déjà possible de construire de 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éveloppements accé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 les esprits ! Ce sont les mots magiques des Applications Intuitives et Riches de demain. La volonté de simplifier et de rendre plus interactives les interfaces utilisateurs préoccupe de plus en plus les chefs de projets IT (Technologies de l’Information) mais aussi et surtout les managers métiers des grands groupes. En effet, cela doit permettre d’accroître la productivité des équipes au quotidien et dans beaucoup de cas, d’acquérir et de fidéliser de nouveaux clients. Tous les domaines d’activités sont concernés, de la finance à l’industrie en passant par le gouvernement. Le monde de la banque, par exemple, proposera de nouveaux services en ligne comme la consultation des comptes avec des outils pratiques d’analyse et de budgétisation. Dans l’univers de l’assurance c’est par exemple la simplification de la souscription en ligne d’un nouveau contrat où le meilleur des technologies peut être utilisé, de l’application RIA guidant l’utilisateur, à la génération du contrat en PDF et l’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 Rich Desktop Application et les grands acteurs se lancent dans la bataille comme Google avec Google Gear ! Adobe avec Flex/AIR, Microsoft avec WPF… Qui gagnera ? Et oui les applications RDA sont aussi riches que les applications RIA mais peuvent fonctionner en mode déconnecté. C’est-à-dire, en dehors d’un navigateur Web et sans être connectées à un service Internet ! Imaginez la consultation de vos comptes en ligne ! L’application RDA vous permettrait de synchroniser vos relevés de comptes lorsque vous êtes connectés au service de la banque. 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 des fichiers 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 le temps 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 vieux produit en boîte développé en C / VB ? Est-ce l’avènement des applications en ligne avec de nouveaux modèles économiques, comme la location à l’usage et non plus l’achat d’un produit ? Personnellement, je crois en l’avenir du bureau virtuel riche, totalement personnalisable ou nous ne paierons qu’en fonction de ce que nous consommons. Paiement à la durée d’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 peux que 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ès rapidement 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 le fameux 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 applications qui semblent exécutées localement alors qu’elles sont en fait des applications web.

Le concept Ce concept, développé par Macromedia (compagnie rachetée par Adobe 2005 et à l’origine du framework Flex), allie les avantages des applications traditionnelles et ceux des applications client-serveur comme on les retrouve habituellement sur l’Internet. On obtient ainsi des programmes livrés sur le Web mais qui possèdent significativement les mêmes caractéristiques que les applications que l’on installe sur un PC. c Fig. 1 : Le monde RIA

15

Introduction

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

Avantage : RIA Les RIA présentent aussi des avantages certains par rapport aux applications lourdes installées sur les postes clients. En effet, il n’est pas nécessaire de les installer, car elles sont directement utilisables via le navigateur Internet. Ainsi, la distribution et les mises à jour sont effectuées automatiquement. Les RIA facilitent également la création d’applications multiplates-formes ; en développant avec Flex, vous n’aurez plus besoin de faire plusieurs versions de votre logiciel pour toucher les utilisateurs de différentes architectures 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’application sans surcoût en termes de développement. De plus, les utilisateurs sont rassurés car l’installation d’un programme collecté sur l’Internet est souvent synonyme d’invasion de spywares ou de virus. Avec l’avènement des applications riches, tout est contrôlé par le navigateur qui offre un cloisonnement par rapport au reste de la machine et prévient ainsi d’éventuels logiciels malveillants.

Récapitulatif Les avantages des RIA pour les développeurs sont les suivants : j j j j j j

16

un environnement efficace pour l’exécution du code, du contenu et des communications ; une intégration accrue dans un environnement commun pour le contenu, les communications et les interfaces homme-machine ; un modèle objet puissant et facilement extensible pour l’interactivité ; 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 ; la possibilité de réaliser des applications connectées et déconnectées ; une distribution facilitée en supprimant les besoins d’installation et de développements spécifiques aux différentes plates-formes visées.

Introduction

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ées sans besoin de rechargement et par conséquent présenter seulement une partie de ses donné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 ce fastidieux 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 mieux visualiser les produits, de personnaliser leurs achats, de pouvoir revenir en arrière sans avoir l’impression de commander trois fois le même produit ou de repasser par la 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 interfaces riches, 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 et le XHTML, et en suivant la méthode AJAX ; j en utilisant un framework de développement conçu pour les RIA tel que Flex d’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 les navigateurs sans recourir à l’installation d’un greffon supplémentaire. Cependant, elle requiert l’utilisation de technologies qui n’ont pas été prévues pour être manipulées de la sorte 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éments extérieurs pour fonctionner ; il est nécessaire par exemple d’avoir installé le player Flash pour exécuter des applications Flex ou d’avoir le lanceur d’application XulRunner pour exécuter des applications XUL. Pensés pour la construction de RIA, ils fournissent des environnements de développement intégrés et des méthodes de développement qui permettent d’élaborer de manière propre et rapide des applications riches et complètes.

Quelques exemples Aujourd’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 Davidson Customizer, Ebay San Dimas et Sony Phone Selector qui utilisent Flex, Joost réalisé avec XUL et Popfly qui utilise Silverlight.

17

Introduction

c Fig. 2 : Yahoo Mail

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

c Fig. 3 : Youtube

18

Introduction

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

c Fig. 4 : Google Finance

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

c Fig. 5 : Ebay San Dimas

19

Introduction

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

Introduction à Flex

c Fig. 6 : Les solutions Adobe

Le terme Flex désigne à la fois le framework et le runtime d’application donnant la possibilité aux développeurs de construire des interfaces riches en tirant parti du plug-in Flash. Ces applications seront connectées et en utilisant le modèle de développement n-tiers, elles permettent d’associer aux interfaces utilisateurs plusieurs technologies côté serveur (ASP.NET, Java, PHP…) qui fournissent de l’information, soit via des webservices, soit en attaquant directement des bases de données, ou en utilisant des objets Java. Flex a plus de 4 ans, il est devenu un produit open-source depuis sa version 3 sortie début 2008. La prochaine version est attendue courant 2009.

Présentation de la technologie Techniquement, Adobe Flex regroupe les éléments suivants : j

j

j j

20

ActionScript 3.0 qui est un langage de script objet. Ce langage est la transposition pour Flex de la norme E4X (ECMAScript for XML).On peut l’apparenter au langage JavaScript dans le développement web classique. MXML, un langage basé sur la grammaire XMLqui permet de décrire des interfaces très interactives et de les mettre en forme. On peut l’apparenter au langage HTML dans le développement web classique. Un langage de style intégré qui reprend les spécifications de CSS 1 (Cascading Style Sheet). Une interface événementielle de manipulation de document basée sur la spécification 3 du DOM écrite par le W3C.

Introduction

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 un apprentissage long et fastidieux car cet éditeur permet (grâce à la complétion automatique) d’écrire la plupart des balises à votre place. L’autre grosse brique dans la prise en main de Flex sera l’apprentissage du langage ActionScript. Les développeurs nantis de bases en programmation (de programmes compilés ou de scripts) ne seront pas déroutés outre mesure car c’est un langage objet très complet et les débutants seront fortement aidés dans leur apprentissage par le toujours fantastique FlexBuilder. De plus, si vous avez déjà eu l’occasion d’écrire du code JavaScript ainsi (une autre implémentation de la norme ECMAScript) ; vous n’aurez même pas à apprendre une nouvelle syntaxe.

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

Comment les applications Flex doivent être construites (et dans quels cas il n’est pas pertinent de choisir cette solution). Les relations entre les objets MXML et les objets ActionScript et comment utiliser chacun d’eux. Bien connaître les composants fournis par Flex, comment les manipuler et créer les vôtres. Les différents moyens d’interagir avec le serveur pour traiter les données. 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 importante qu’Adobe a déjà su développer autour de ce produit.De nombreux forums de discussions et de nombreuses listes de diffusion permettent d’être en relation avec des experts Flex présents dans le monde entier et, n’hésitons pas à nous en féliciter, beaucoup de ces experts sont originaires de France et parlent notre langue.

Un leader Aujourd’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 la plate-forme Flash qui est très éprouvée et très répandue (environ 97 % des machines dans le monde sont pourvues du Flash Player et peuvent donc exécuter une application Flex immédiatement) ; elle l’est aussi grâce à son environnement de développement intégré,

21

Introduction

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 en cours dans de multiples domaines : cela assure à ce framework une pérennité non négligeable si l’on souhaite s’investir dans cette technologie pour des développements aussi bien professionnels que personnels.

La licence Arrive la question de la licence d’utilisation. Très importante dans le choix d’une technologie pour une application, la licence d’utilisation de Flex l’est d’autant plus car elle conditionne non seulement le coût des outils nécessaires pour écrire le code, mais aussi les possibilités d’explorer les "entrailles" du framework et surtout les modalités de distribution. Originellement, Flex était distribué en étant protégé par une licence propriétaire, ce qui empêchait quiconque d’avoir accès aux sources des classes et des composants du framework ; mais depuis le 26 avril 2007, Adobe a annoncé son intention de modifier la licence de Flex et dorénavant la solution de développement sera disponible avec une licence d’utilisation dite "libre" (possibilité de visualiser les sources mais en plus de s’en servir, 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 à leur guise. Cependant, pour l’EDI, Flex Builder, reste "propriétaire" et bien qu’une version d’évaluation (limitée à 30 jours) de ce logiciel soit disponible sur le site d’Adobe, la version complète n’est disponible qu’à l’achat (environ 500 Q). Cet éditeur est de loin le plus abouti et cet investissement est donc pratiquement incontournable une fois la période d’évaluation expirée.

Introduction à AIR AIR, 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ème d’opérations qui permet d’exécuter sur le poste client en local des programmes écrits dans les technologies Flash, Flex, HTML, etc. Ainsi, le passage de Flex à AIR permet sans grandes modifications de rendre des applications web disponibles hors ligne en les installant sur lePC.

22

Introduction

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 nombreux groupes ont déjà parié sur cette technologie : AOL et eBay par exemple ont développé des applications AIR téléchargeables gratuitement sur le site d’Adobe.

23

1 1.1 Initiation à Flex Builder 3 ..............................

26

1.2 Créer sa première application ........................

34

1.3 Compiler une application Flex ........................

44

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

45

Créer son premier projet avec Flex C

e chapitre d’initiation va vous permettre de vous familiariser avec le Framework et l’environnement de développement Flex. Nous y abordons l’installation et la manipulation des composants nécessaires à la création de notre premier projet.

1


1.1 Initiation à Flex Builder 3 Le premier chapitre vous a permis de comprendre les principes fondamentaux des RIA et de Flex en particulier. Il est maintenant temps de passer à la pratique et de créer une premiè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écessaires et comprendre leur fonctionnement de base. La première partie de ce chapitre sera donc entièrement consacrée à l’IDE d’Adobe : Flex Builder 3. Une fois votre poste de travail configuré 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 de nombreux 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’est cependant, du moins en théorie, pas indispensable au développement Flex puisque le SDK est disponible gratuitement sur le site d’Adobe. Il est donc possible de développer une 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 ce procédé n’est clairement pas envisageable pour le développement d’applications de taille conséquente. De plus, les nombreuses fonctionnalités de Flex Builder 3 vous deviendront rapidement indispensables. L’IDE offre entre autres : j j j j j j

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

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

Flex Builder 3 et Eclipse Si vous vous intéressez un peu à la programmation, vous vous êtes peut-être aperçu que deux 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 des années 1980 et qui a la particularité d’être multiplateforme grâce à l’utilisation d’une

26

Initiation à Flex Builder 3

1

machine virtuelle. Il existe plusieurs IDE facilitant le développement Java comme Netbeans 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, en outre, la particularité de ne pas être spécifique à un langage donné. Une des forces d’Eclipse vient de son architecture développée autour de la notion de plug-ins. Ainsi, de nombreux développeurs peuvent ajouter des fonctionnalités spécifiques ou bien encore apporter un support à de nouveaux langages de programmation. Pour finir, sachez qu’Eclipse est entièrement gratuit. Vous trouverez plus d’informations à son sujet sur www.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 ou encore le C#. Microsoft a donc son propre IDE spécifique à son framework : il s’agit de Visual Studio. Adobe a fait le choix de se baser sur Eclipse pour développer son IDE, du fait de sa grande popularité auprès des développeurs et de sa capacité d’évolution grâce aux plug-ins. Ainsi, de nombreux développeurs sont déjà familiarisés avec l’environnement de développement Flex et le temps d’adaptation au développement de RIA sera d’autant plus court. Flex Builder 3 est disponible sous deux formes différentes car de nombreux développeurs ont déjà leur environnement Eclipse configurés à leur guise : j j

un plug-in ; 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 version d’é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 3 Commençons par l’installation de l’IDE. La première étape est le téléchargement. Rendez-vous sur le site d’Adobe à l’adresse suivante : 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 1

27

1


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 sur Continuer.

c Fig. 1.1 : Formulaire de connexion 3

Une fois arrivé sur la page suivante, entrez les informations obligatoires signalées par un astérisque. Vous allez enfin pouvoir télécharger Flex Builder à la suite de votre inscription. Vous devriez arriver sur une page vous proposant plusieurs versions à télécharger : j j

une version standalone pour Mac ou Windows comprenant Eclipse et le plug-in Flex intégré ; 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 au développement d’applications Flex.

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

28


4

1

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

c Fig. 1.3 : Contrat de licence Adobe 5

Choisissez ensuite le répertoire Files\Adobe\Flex Builder 3).

d’installation

(typiquement

C:\Program

c Fig. 1.4 : Répertoire d’installation 6

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

29

1


c Fig. 1.5 : Installation du Flash Player 7

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

c Fig. 1.6 : Résumé 8

30

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


1

c Fig. 1.7 : Extension pour ColdFusion

Pour les utilisateurs de Windows Vista Il sera nécessaire de lancer Flex Builder 3 avec les droits administrateur au premier lancement de l’application. Dans le menu Démarrer, cliquez sur le raccourci Flex Builder 3 avec le bouton droit de la souris et sélectionnez Lancer en tant qu’administrateur dans le menu contextuel. c Fig. 1-8 : Lancer Flex Builder 3 pour la première fois sous Vista

31

1


Comprendre l’arborescence du dossier d’installation Maintenant que Flex Builder 3 est installé, il peut être utile de comprendre comment est structuré le kit de développement Flex. Ouvrez le répertoire d’installation. Comme vous pouvez le constater, celui-ci contient plusieurs sous-dossiers. Ces tableaux vont vous permettre 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 les logs d’erreurs

/features

Répertoire standard d’Eclipse contenant le plug-in correspondant aux fonctionnalités de Flex Builder

/sdks

Contient le SDK

/jre

Contient le Java Runtime Environnement utilisé par défaut par l’IDE en mode Standalone

/Player

Répertoire d’installation des différents Player Flash (version standard 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 biais de 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 ou encore adl)

/frameworks

Contient les fichiers de configuration

/frameworks/libs

Contient les bibliothèques SWC utilisées pour compiler les applications

/frameworks/projects

Contient le code source du framework Flex

32


1

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 page d’accueil Flex

Présentation de l’environnement de développement Vous avez normalement installé l’IDE d’Adobe et exploré son arborescence. Nous allons maintenant essayer de comprendre comment fonctionne le framework Flex. Il est grand temps de passer aux choses concrètes : démarrons Flex Builder 3. Au chargement, vous devriez voir apparaître l’écran suivant.

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

33

1


Vous trouverez ici quelques tutoriels en anglais expliquant les concepts de base ainsi qu’un accès à l’aide de Flex Builder. Des exemples d’applications Flex sont également disponibles (Flex Component Explorer et Flex Style Explorer) permettant d’avoir un aperçu rapide et fonctionnel des différents composants et styles utilisables. Au fur et à mesure de votre progression dans cet ouvrage, vous allez probablement vouloir 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 (les utilisateurs d’Eclipse devraient vite retrouver leurs marques). D’autres fonctionnalités seront 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 j j j

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

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

c Fig. 1.10 : Barre d’outils Flex

Les vues de gauche permettent de gérer et d’explorer les différents projets créés dans Flex Builder (Navigator) et de parcourir l’arborescence des composants insérés dans une application (Outline). Enfin, sachez que l’interface est entièrement modulable et que vous pouvez placer les diffé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 premier projet Flex.

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

34

Créer sa première application

1

Création d’un nouveau projet Commencez 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 suivante s’ouvrira : c Fig. 1.11 : Création d’un nouveau projet

Cette boîte de dialogue comporte deux champs : j j

2

le nom du projet (project name) la technologie serveur utilisée pour fournir des données à l’application. Entrez Mon premier projet Flex comme nom de projet et laissez None pour le type de 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, un projet est créé dans le workspace de l’IDE. Le workspace se situe par défaut dans My Documents/Flex Builder 3 pour cette version. Ainsi, par défaut, un nouveau projet sera créé dans My Documents/Flex Builder 3/nom_du_projet. Il est conseillé de garder les projets groupés dans le workspace mais ce n’est pas une obligation.

35

1


c Fig. 1.12 : Dossier de destination

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 dans le menu sur File puis sur Switch Workspace.

3

Cliquez sur Finish.

Flex Builder 3 devrait maintenant avoir créé l’arborescence du projet avec les fichiers né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 encore où vous modifierez le design de l’application. Vous devriez donc avoir une fenêtre comme celle-ci : (voir fig. 1.13) Comme vous pouvez le constater, Flex Builder s’est chargé d’écrire un petit bout de code pour 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ûrement ce principe si vous utilisez Dreamweaver pour créer vos pages web). Vous vous trouvez normalement en mode Source. Nous détaillerons ces deux modes de travail complémentaires mais vous pouvez basculer en mode Design pour avoir un premier aperçu de votre nouvelle application si vous le souhaitez.

36


1

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

c Fig. 1.14 : Flex Builder en mode Design

37

1


Comprendre l’arborescence d’un projet Flex L’Assistant de création de projet de Flex Builder 3 a créé plusieurs éléments dans l’explorateur de projet (vue Navigator). Nous allons essayer de comprendre comment fonctionne 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 des pages HTML générées automatiquement.

/html-template

Contient des fichiers additionnels utilisés par certaines fonctionnalités de Flex comme le fichier de détection du Player Flash ou le Gestionnaire d’historique. Ces fichiers servent principalement à générer la page HTML dans 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 de décrire votre application. Il contient le tag qui correspond 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 langage MXML.

MXML En Flex, deux langages sont utilisés pour écrire une application : j j

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

Le MXML est un langage basé sur le XML permettant de définir l’interface utilisateur d’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 aucun problème avec ce nouveau langage. Le principe est en effet très similaire : on place des composants sur une page sous forme de balises afin de définir une interface. Mais le MXML est un langage plus structuré. Il est également beaucoup plus riche et puissant grâ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és pour améliorer la réutilisabilité du code et mieux structurer une application.

38


1

Comme tout langage, le MXML doit respecter certaines règles simples que nous verrons au 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 de fichier 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 Source Assurez-vous que le fichier MonProjet.mxml de votre projet est ouvert et que l’éditeur est en mode Source. Le fichier contient le code suivant par défaut :

La première ligne du fichier permet de spécifier la version du XML ainsi que le type d’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ères spécifiques à chaque langue, ici le format UFT-8 permet d’assurer une bonne compatibilité puisqu’il est indépendant du type de plate-forme ou de la langue. La balise est le nœud racine d’une application Flex définie dans l’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, de grouper et de définir la disposition d’autres composants Flex, y compris d’autres conteneurs imbriqués. Ainsi, tout composant d’une application doit être contenu entre les balises …. Ce principe est en fait très similaire aux balises d’une page web. Nous allons à présent ajouter quelques éléments à notre interface. Le but est de positionner : j un Panel avec un titre ;

39

1


j j j

un Label ; un TextInput ; un Button.

Procédez à présent comme suit : 1

Positionnez le curseur entre les balises … puis saisissez au clavier un chevron ouvrant : . Flex Builder a normalement ajouté les balises ouvrantes et fermantes correspondant au panel. Il est maintenant possible d’ajouter d’autres composants dans le Panel que vous venez de créer puisque ce composant est en réalité un conteneur.

1


5

Enfin, modifiez la propriété layout de la balise et remplacez absolute par vertical. Le layout permet de spécifier la disposition des composants au sein d’un conteneur mais 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 :

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 une application, comme un titre par exemple. Réitérez le même procédé que pour le Panel mais cette fois-ci, ajoutez une propriété text correspondant à la chaîne de caractères à afficher ("Hello World" par exemple). Pour finir, terminez cette balise par les caractères suivants : />.

Puisque le MXML est basé sur le XML, il est possible de définir des balises de deux manières : ; j (condensé des deux balises précédentes). j

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 :

41

1


Nous allons maintenant passer l’éditeur en mode Design afin d’avoir un premier aperçu de notre travail et d’ajouter les autres composants de manière visuelle. Cliquez sur le bouton Design dans le sélecteur de mode.

Mode Design Le mode Design peut s’avérer très utile pour placer des composants, avoir un aperçu global 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 et le design des composants grâce au panneau de droite. Votre IDE devrait maintenant ressembler à l’écran suivant :

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

Vous pouvez cliquer sur les différents composants de votre application et modifier leurs propriétés. Vous pouvez ainsi sélectionner le Panel et modifier son titre qui est accessible dans 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 le changement de police s’est appliqué au titre du Panel ainsi qu’au Label car tout

42


1

composant prend par défaut les propriétés du composant parent. Ici, le Label est bien contenu dans le Panel, ce qui explique ce changement. c Fig. 1.18 : Modification du style en mode Design

Ajoutons maintenant les deux composants restants à notre application : j j

un TextInput ; un Button.

À cet effet, sélectionnez les composants dans la liste déroulante à gauche de l’éditeur et insérez-les grâce à un glisser-déposer sur le Panel. Pour terminer, remplacez le texte contenu dans le bouton par "Click Me" en modifiant sa propriété label. c Fig. 1.19 : Le résultat final en mode Design

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

43

1


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

c Fig. 1.20 : Compiler le projet

Du MXML au SWF Que s’est-il exactement passé quand vous avez appuyé sur le bouton Run ? En fait, un certain nombre d’étapes ont permis de créer un fichier SWF à partir de notre fichier MXML. La première étape consiste à transformer les balises MXML en une nouvelle classe ActionScript 3 (voir le chapitre suivant), car en réalité, tout ce qui est fait en MXML est faisable 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é de maniè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 appelant l’exécutable mxmlc.exe se trouvant dans le répertoire /sdk/bin du dossier d’installation de Flex Builder. Mxmlc −−show−actionscript−warnings=true MonProjet.mxml"

−−strict=true

−file−specs

"c:/…/

Le compilateur produit alors le fichier MonProjet.swf correspondant.

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

44

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

Check-list

1

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

c Fig. 1.21 : Processus de compilation Flex

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

1.4 Check-list Dans 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 le framework Flex : l’ActionScript 3.

45

2 2.1 Démarrer avec ActionScript dans Flex Builder .......

48

2.2 Les bases de la programmation .......................

55

2.3 La programmation orientée objet dans ActionScript ..

68

2.4 Déboguer de l’ActionScript 3.0 dans Flex Builder ..

77

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

87

Découvrir l’ActionScript 3.0 S

i le MXML que vous venez de découvrir est un langage de description, ActionScript est pour sa part un langage de programmation qui vous permet d’utiliser au maximum les possibilités du Framework Flex. Vous découvrirez ici les bases de ce langage et son intégration dans Flex Builder.

2


2.1 Démarrer avec ActionScript dans Flex Builder ActionScript est un langage de script, orienté objet, basé sur ECMAScript. Ce langage est un standard développé par l’ECMA, une organisation de standardisation très active dans le domaine de l’informatique. Le langage ECMAScript a été développé à partir des premiè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 des implémentations les plus fidèles. ActionScript est utilisé dans les applications Adobe Flex ou Flash et apporte des possibilités étendues aux développeurs. Il permet de réaliser des applications complexes en laissant un accès de bas niveau aux données et aux objets. De nombreuses API permettent de gérer les événements, d’interagir avec du contenu Flash et bien d’autres fonctionnalités. Un raccourci rapide serait de dire qu’il représente la partie laissée aux programmeurs, le reste l’étant aux designers. Afin de pouvoir suivre les exemples qui illustreront notre découverte d’ActionScript, nous allons étudier dans un premier temps l’utilisation du code ActionScript dans une application Flex. L’IDE utilisé reste Flex Builder 3. Il permet d’accéder aux fonctions les plus simples comme les plus avancées du langage et guide l’utilisateur dans l’intégration avec la partie interface en MXML. Cette première partie n’est qu’une introduction et ne s’attardera pas sur les spécificités du langage qui sera décrit par la suite.

Créer l’application Flex Nous allons commencer par créer un projet qui nous servira à suivre les exemples de code en ActionScript 3. Nous allons donc lancer Flex Builder 3 et suivre la démarche détaillée dans le chapitre 1 sur la création d’un nouveau projet. Appelons le projet ActionScriptTest. L’objectif de notre première fonction en ActionScript sera tout simplement d’afficher dans notre application le message "Hello world!". Le champ de texte contenant le message 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 éditable pour bien montrer que son contenu est rempli de façon automatique. Nous l’appellerons textArea pour plus de simplicité. Voici son code :

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

48

Démarrer avec ActionScript dans Flex Builder

2

Nous pouvons déjà exécuter notre application en cliquant avec le bouton droit de la souris sur le fichier MXML et sélectionner Run Application. Vous pourrez constater par vous-même que le champ de texte est vide. c Fig. 2.1 : L’application vide

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

Le code ActionScript dans vos fichiers MXML Il 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 et dans vos fichiers MXML. On place ces balises en haut de fichier, juste après la balise d’ouverture de l’application. Le résultat ressemble à cela :

49

2


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 le compilateur. Si les commentaires s’étendent sur plusieurs lignes, il faut débuter par un slash astérisque (/*) et terminer par un astérisque slash (*/). Cette façon de procéder est la même que pour le C++ et le Java. À l’intérieur de ces balises, nous allons déclarer une fonction giveHelloWorld qui renverra 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 j j j j j j

Le mot-clé public permet de rendre l’accès à la fonction possible en dehors du namespace. Le mot-clé function déclare une fonction. Ensuite vient le nom de la fonction, ici "giveHelloWorld". Les parenthèses permettent de déclarer la liste d’arguments. Il faut spécifier le type de retour de la fonction, ici on retourne une chaîne de caractères. Enfin vient le code de la fonction à proprement parler. 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 du texte contenu dans le TextArea à chaque fois qu’on y fera appel. Appelons cette fonction printHello : 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 faire appel aux objets qui sont contenus dans le code MXML du moment que ceux-ci ont un

50

2


identifiant, ici textAreaId. On peut alors faire appel à leurs attributs grâce au ".". La fonction printHello fait appel à giveHelloWorld pour affecter à l’attribut text de textAreaId 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, nous utiliserons l’attribut creationComplete de la balise en lui demandant d’exécuter la fonction printHello lorsque l’affichage est prêt :

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

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

Vous pouvez à présent lancer votre application et constater par vous-même que la zone de 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 ne permet pas d’utiliser le code déclaré dans un fichier MXML dans un autre. Aussi, nous utiliserons la seconde façon qui est plus recommandée pour nos exemples.

51

2


c Fig. 2.2 : Hello world!

Le code ActionScript dans des fichiers séparés La 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’ils contiennent. Même si cette façon de faire n’est pas obligatoire, elle est fortement recommandée par Adobe et permet de mieux se retrouver dans son code. Nous reviendrons sur la notion de classe un peu plus loin dans ce chapitre. Les fichiers ActionScript permettent de mieux concevoir votre application et de la découper en modules. Nous allons créer notre premier fichier ActionScript. À cet effet, commençons par créer un nouveau dossier dans notre application. Sélectionnez le projet puis allez dans le menu File/New/Folder. Nommez le dossier classes. Nous verrons par la suite que les dossiers sont également des packages. Sélectionnez ensuite le dossier nouvellement créé puis, allez toujours dans le menu File/New/ActionScript Class. Appelez ce fichier HelloWorld. On notera que par convention les packages ou dossiers ont une première lettre minuscule alors que les classes commencent par une majuscule. Vous obtiendrez au final un fichier HelloWorld.as dans le dossier classes qui ressemblera à celui-ci : package classes { public class HelloWorld { } }

Attardons-nous sur certains mots-clés :

52


2

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

Les termes que nous évoquons sembleront familiers à des utilisateurs de Java ou d’autres langages objet, mais si ce n’est pas votre cas, ne vous sentez pas perdu. Nous détaillerons ces concepts dans la suite du chapitre. Nous allons à présent retirer notre fonction giveHelloWorld du fichier MXML pour la placer dans la classe HelloWorld pour obtenir ceci : package classes { public class HelloWorld { public static function giveHelloWorld():String { return "Hello world!"; } } }

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

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

53

2


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

Importer du code ActionScript dans un fichier MXML Vous allez maintenant supprimer l’appel à la fonction giveHelloWorld dans la fonction printHello. La fonction giveHelloWorld n’est plus définie dans notre fichier MXML mais 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èches directionnelles le package classes puis validez avec la touche [Ä]. Tapez alors l’opérateur point de façon à avoir accès au contenu de ce package. Cette fois, la complétion vous proposera la classe contenue dans classes. Il s’agit de HelloWorld. Vous pouvez constater que lorsque vous validez le choix de cette classe, une ligne est ajouté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 classe HelloWorld, du package classes. Vous pouvez alors continuer à utiliser la complétion pour retrouver notre fonction giveHelloWorld. Entrez l’opérateur point et vous aurez accès à la liste des fonctions de la classe HelloWorld. Celle-ci est plutôt réduite pour le moment. Validez de la même façon que précédemment et terminez par un point-virgule comme vous avez maintenant l’habitude de le faire. Votre code doit à présent ressembler à ceci :

54

Les bases de la programmation

2

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

2.2 Les bases de la programmation Cette partie sera consacrée aux possibilités basiques offertes par ActionScript 3.0. Vous verrez comment ces dernières se rapprochent des fonctionnalités proposées par des langages 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. On peut les assimiler à des dossiers et sous-dossiers à l’intérieur de votre application. Ils peuvent é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érentes parties de code à l’intérieur du projet et ainsi obtenir une meilleure modularité. Les développeurs actifs sur le projet peuvent penser leur code et nommer leurs fonctions ou méthodes sans se soucier d’éventuels conflits de nom. Plus concrètement, on pourra avoir une méthode Toto dans un package FirstPackage et une méthode Toto différente de la première dans un autre package SecondPackage. Avant de commencer la réalisation de vos applications, il est utile de passer par une phase de conception en réfléchissant à l’organisation du projet. Vous pourrez par exemple regrouper les parties qui géreront les données dans un premier package, tandis que celles qui 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é package suivi de son nom. Si l’on se réfère à l’exemple précédent avec notre fichier HelloWorld .as, on obtient :

55

2


package classes { public class HelloWorld { public static function giveHelloWorld():String { return "Hello world!"; } } }

Un package doit correspondre à un emplacement sur le système de fichier. Les fichiers contenus 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 se ferait 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 va aller chercher vos bibliothèques ou packages. Par défaut, le CLASSPATH inclut le répertoire de base du projet. Le compilateur trouvera donc le package classes.subPackage si les dossiers classes/subPackage sont dans le répertoire de base. Il est déconseillé de placer vos fichiers ActionScript directement dans ce répertoire. Il constitue le répertoire par dé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 la classe qu’il contient, dans notre exemple HelloWorld. Cette classe doit être déclarée comme public afin qu’elle soit accessible à l’extérieur du package. Par défaut, la visibilité 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 nous appellerons par la suite méthodes et attributs). Pour que ces éléments soient accessibles en 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 des déclarations et en vous avertissant si vos classes ne sont pas visibles à l’extérieur. Pour créer un package, il faut sélectionner dans l’arborescence de votre projet l’endroit où vous voulez le placer. Cliquez ensuite dans le menu sur File/New/Folder. Vous remarquerez à

56


2

nouveau la similitude entre les répertoires et les packages. Entrez alors un nom de package, par convention il commence par une minuscule. Vous pouvez à présent sélectionner ce nouveau package puis créer une classe en cliquant dans le menu sur File/New/ActionScript Class. Donnez-lui un nom, par convention il doit commencer par une majuscule, et assurez-vous que la visibilité sélectionnée est bien public et non internal. Validez et vous aurez alors une nouvelle classe dans votre package, 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 devez importer cette classe au début de votre code ActionScript. Cette opération se fait grâce au mot-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 possible aux imports spécifiques. Vous éviterez ainsi d’être confronté trop souvent à des conflits de 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 langage ActionScript 3.0 : public et internal. Nous découvrirons par la suite private et protected. Si ceux-ci ne suffisent pas, vous êtes libre de déclarer vos propres namespaces pour 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

2


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ès pré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, il suffit 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 ne pouvez 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 au mot-clé use suivi du nom du namespace à utiliser. Vous avez alors accès aux éléments déclarés dans ce namespace. Pour utiliser myFunction déclarée dans myNamespace, on procédera ainsi :

58

2


use myNamespace; myFunction();

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

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

Les types de données et les variables Les types de données de base Les types de données sont des ensembles de valeurs. De base en ActionScript 3.0, on dispose 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 une valeur qui appartient à l’un de ces types. Il est recommandé de les utiliser plutôt que des valeurs complexes équivalentes car leur traitement est plus rapide et optimisé. Parmi les types 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. Vos classes 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 par défaut

Note

Boolean

true ou false

false

int

Entre - 2 147 483 648 (-2^31) et 2 147 483 647 (2^31)

0

Stocké sous forme d’un entier de 32 bits. À préférer aux Numbers s’il n’y a pas de décimale.

Number

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

NaN (Not a Number)

À utiliser pour les nombres décimaux ou les entiers qui dépassent les valeurs du type int.

59

2


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

Une chaîne de caractères

uint

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

void

undefined

Null

null

null

Ne pas confondre null (absence de caractère) et la chaîne vide "". Pour les nombres entiers positifs

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

j

Le type void contient uniquement la valeur undefined. On peut uniquement associer cette valeur aux variables qui ne sont pas typées. void peut être utilisé en type de retour d’une fonction. Le type Null contient uniquement la valeur null. C’est la valeur par défaut du type String et de tous les types complexes. Si l’on essaie d’affecter null à toute variable d’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. Pour dé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’utiliser tant 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 des problèmes dans la suite du code. Pour ce faire, il suffit d’ajouter le caractère : suivi du type. 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éfaut de son type, ou à undefined si le type n’est pas précisé, jusqu’à une affectation.

60


2

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 en anglais). Une variable globale sera définie pour toutes les parties du code alors qu’une variable locale n’aura qu’une portée limitée. Pour déclarer une variable en globale, il faut la déclarer en dehors de toute fonction ou classe. Par contre, pour une variable locale, il suffit de la déclarer à l’intérieur d’une fonction. Les fonctions sont les plus petites portées pour les variables. Contrairement au C++ ou Java, il n’y a pas de portée limitée par des blocs 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 variable est 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 de renvoyer 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 var res res

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

Les conversions Il existe deux sortes de conversions de variables : j j

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

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

lors d’une affectation ;

61

2


j j

lors du passage d’une valeur en argument d’une fonction ; 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 des parenthè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înes de caractères et inversement : var n:Number = 3.14; var i:int = 2; var str:String; // Conversion de valeur numériques en chaines str = String(n); // str contient "3.14" str = String(i); // str contient "2" // Conversion de chaines en valeurs numériques str = "21"; i = int(str); // i contient la valeur 21 str = "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 la programmation objet. Les conversions de types complexes que vous aurez créées seront également examinées.

Les fonctions et opérateurs Les fonctions sont des blocs de code que vous pouvez définir et qui vous permettent de ré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 des méthodes et leurs paramètres seront des arguments.

62


2

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

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

Vous pouvez faire retourner à vos fonctions des valeurs d’un type spécifié. Il faut alors ajouter après la parenthèse fermante de la liste d’arguments, le caractère : suivi du nom du type retourné. Dans le code, vous devrez alors renvoyer à la fin de votre traitement une valeur du type demandé grâce au mot-clé return. Cet exemple montre une fonction basique 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 vous le 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 la fonction sur cette copie, on travaille sur l’objet lui-même. Néanmoins, les paramètres de type 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 7 res = add(a, b); // res vaut encore 7 : a et b non modifiés

63

2


ActionScript 3.0 permet de définir des valeurs par défaut pour les paramètres de vos fonctions. Tous les paramètres qui ont une valeur par défaut doivent être placés à la fin de la liste de paramètres. Ils sont alors considérés comme optionnels. S’ils ne sont pas dé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 ses paramè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’objet arguments à l’intérieur de cette fonction. Cet objet est un tableau rempli automatiquement qui contient la liste des paramètres. Vous pouvez ainsi obtenir un argument en connaissant sa 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 : length : donne la longueur du tableau, c’est-à-dire le nombre d’arguments ; j callee : fait référence à la fonction elle-même. j

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 longueur indéterminée séparés par des virgules. Ce paramètre empêche l’utilisation de arguments dans la fonction mais reprend la propriété length. Il peut être utilisé en combinaison de paramètres explicités. Voici une fonction add plus évoluée faisant la somme de tous les paramètres :

64


2

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’autres langages. 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

2


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

Les boucles et conditions Les boucles sont une des bases de la programmation. Leur fonctionnement est connu par tous les développeurs. Elles permettent d’exécuter des blocs de code tant qu’une condition est vérifiée. Adobe recommande de placer le code entre accolades. Cela est obligatoire lorsque la portion est constituée de plusieurs lignes mais optionnel lorsqu’elle ne contient qu’une seule ligne. Voici les boucles qu’il est possible d’utiliser en ActionScript 3.0 ; nous les illustrons par des exemples.

La boucle for Elle permet d’itérer tant qu’une valeur n’atteint pas une certaine condition. Il faut initialiser 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 ce dernier 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, une collection ou les propriétés d’un objet. Mais cette fois, la variable contiendra la valeur de l’é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


2

La boucle while Avec la boucle while, il ne faut pas oublier de préciser dans le code à exécuter l’incrémentation de la variable. Il est donc plus facile de partir sur une boucle infinie avec un 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 code est 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. Comme pour 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’est qu’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 des tests : if (i < 10) { // code exécuté si i < 10 } else if (i < 20) {

67

2


// 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 plus lisible. Un switch évalue une expression et utilise le résultat pour choisir quelles instructions exécuter. var i:int = 1; switch (i) { case 0: // code break; 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 à un de ses aspects les plus intéressants : son orientation objet.

2.3 La programmation orientée objet dans ActionScript Ce chapitre n’a pas pour but d’être un cours exhaustif sur la programmation orientée objet. Nous rappellerons ses concepts de base et l’implémentation qui en est faite dans ActionScript 3.0. Si vous êtes développeur web et déjà familier avec la programmation objet, 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 objet La programmation orientée objet est une méthode ou paradigme de programmation qui apporte une nouvelle façon de concevoir des applications comparativement aux langages impé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 objets pour concevoir ses applications. Cette méthode de programmation apporte une façon totalement différente de penser son code. Son utilisation permet d’obtenir, entre autres,

68

La programmation orientée objet dans ActionScript

2

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 des fonctionnalités précises. Ces modules ont des propriétés qui leur sont propres, et des interfaces qui permettent d’interagir avec eux. Les objets sont des ensembles de propriétés qui leur sont propres et qu’on appelle attributs, et de méthodes qui définissent leurs comportements. Les définitions de la structure 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 et mé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’on appelle le polymorphisme. Il est souvent réalisé grâce à l’héritage qui permet de spé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 variables que vous pourrez manipuler sont des objets. Observons à présent comment les concepts que nous venons d’énoncer sont implémentés.

Les classes La définition d’une classe se fait grâce au mot-clé class dans un fichier "as" du nom de la classe. Par convention, le nom d’une classe commence par une majuscule. Dans l’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 le comportement qu’on souhaite. À la place de public, on aurait pu utiliser un des attributs

d’encapsulation suivants : dynamic : permet d’ajouter des propriétés à la classe durant l’exécution. 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. j j

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

69

2


Les attributs Pour tout ce qui se trouve à l’intérieur d’une classe, on retrouve des propriétés d’encapsulation : 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 j

j

suite la notion d’héritage). 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 objets créés à partir des définitions des classes. Chaque fois qu’on instancie une classe, on a donc 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 celui déclaré en public : var1. Mais on aura également accès à une constante : const1. La valeur d’une constante, déclarée à l’aide du mot-clé const, est définie lors de la création de 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 :

Il nous faut donner quelques explications sur ce code. Au lancement de l’application, on instancie un objet objectTest qui est de type MyClass. Il est déclaré en public afin d’être accessible dans tout le code. On se sert du label objectValue pour afficher la valeur de la variable var1. Celle-ci est modifiée à l’intérieur de la fonction addVar. On remarque qu’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 ses instanciations. Mais le mot-clé static permet de faire appel à une propriété en passant par 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

2


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. Elles respectent les principes que nous avons vus lors de l’étude des fonctions. Les protections sont 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 ne dépendront pas des instances de la classe. Les méthodes qui ne sont pas déclarées en statique effectuent des traitements liés au contenu de l’objet à partir duquel elles sont appelé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 être explicité. Il s’agit d’une méthode portant le même nom que la classe. Elle est obligatoirement 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 class MyClass { public var var1:int; public function MyClass():void { var1 = 0; } } }

Notre constructeur MyClass initialise la variable var1 à 0. Cette opération sera faite chaque fois qu’on instanciera un nouvel objet de type MyClass. Afin de respecter les principes de la programmation objet, on utilise également des getters et setters qui permettent d’accéder aux attributs ou de les modifier. On déclare nos attributs en private ou en protected pour les faire hériter. Pour notre classe MyClass, cela donne :

72


2

package myPackage { public class MyClass { 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 sa valeur et pour lui affecter une nouvelle valeur : objectTest.publicVariable += 1;

Les interfaces Les interfaces sont des collections de déclarations de méthodes qui permettent à des objets indépendants de communiquer entre eux. Le principe repose sur la différence entre une 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 Builder nous guide également pour cette étape. Dans votre projet de test, cliquez avec le bouton droit de la souris sur votre package myPackage (créez-le au besoin). Choisissez alors new et ActionScript Interface. Une boîte de dialogue vous demandera alors le nom de votre interface. Appelons-la MyInterface (par convention les noms des interfaces commencent par 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

2


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âce au mot-clé implements et d’implémenter chaque méthode à l’intérieur de la classe. Vous devez respecter plusieurs points pour les méthodes implémentées : j j j j

déclarer avec l’attribut public ; utiliser le même nom que la méthode de l’interface ; avoir le même nombre de paramètres et les mêmes types ; 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 la fonction addVar. On peut faire implémenter plusieurs interfaces à une classe en les ajoutant à 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 votre classe, vous pouvez le spécifier à l’intérieur de Flex Builder qui vous préparera les déclarations. Il ne restera alors plus qu’à entrer le code.

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

74


2

Pour illustrer cette partie, nous allons nous servir d’un exemple concret : des formes géométriques. Nous aurons une classe de base, Shape, dont les classes Circle et Square hériteront. Les cercles et les carrés sont bien des formes mais ont des propriétés différentes. Nous allons commencer par créer la classe Shape dans notre package myPackage. Dans cette 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 des classes héritées : lorsque vous avez entré le nom de la classe, ne validez pas immédiatement. En face de Superclass, vous avez un bouton Browse. Cliquez dessus et sélectionnez la classe mère de votre nouvelle classe. En l’occurrence, il s’agit de Shape située dans le package myPackage. Lorsque vous validerez la création de Circle, votre classe sera tout de suite héritée. À l’intérieur de cette nouvelle classe, nous allons déclarer une variable radius en private qui sera le rayon de notre cercle. Puis, nous allons surcharger la méthode area. La surcharge 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. Le code 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

2


Vous noterez l’utilisation du mot-clé extends pour spécifier de quelle classe dérive Circle. Vous ne pouvez hériter que d’une seule classe au contraire d’un langage comme le 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. La visibilité des méthodes dans la classe mère doit être, soit public, soit protected, en aucun cas private (visibilité limitée à la classe elle-même). Vos méthodes héritées doivent avoir le même nom, le même nombre et type d’arguments et le même type de retour. Grâce au polymorphisme, vous pouvez déclarer des objets Circle ou Square qui seront aussi 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 en paramè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

Déboguer de l’ActionScript 3.0 dans Flex Builder

2

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

Création d’une application Flex utilisant ActionScript Nous allons créer une deuxième application Flex dans le but de montrer l’utilisation du débogueur Flex. Cette application stockera une liste d’utilisateurs et la comparera aux informations saisies par l’utilisateur dans un champ texte. La vérification s’effectuera par une 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 étapes suivantes : Ajoutez une VBox avec la propriété horizontalAlign sur "center" et centrez-la au milieu de l’application (horizontalCenter="0" verticalCenter="0"). 2 Dans celle-ci, ajoutez un Label avec les propriétés id="infoLbl" et text="Entrez un login". 3 Ajoutez ensuite un TextInput que nous nommerons loginTxtIn. 4 Enfin, ajoutez un Button avec les propriétés id="validateBtn" et label="valider" 1

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

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

77

2


Le mode Debug Le mode Debug de Flex va permettre d’étudier et de contrôler l’application que vous venez de réaliser au cours de son exécution. À cet effet, il faut lancer l’application non plus avec le bouton Run comme auparavant mais avec le bouton 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 menu contextuel. c Fig. 2.4 : Menu contextuel du Debugger dans le navigateur

Si vous cliquez dessus, une fenêtre apparaîtra pour vous permettre de choisir la machine sur 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 propre ordinateur. c Fig. 2.5 : Choix de l’instance du Debugger

78


2

Ajouter un point d’arrêt Nous allons maintenant ajouter un peu d’ActionScript dans l’application afin de vérifier si le texte saisi correspond à des données que nous stockerons dans un tableau. Il faut ajouter une balise de au-dessus de la VBox et procéder de la manière suivante : 1

Déclarez une variable nommé nameList de type Array et initialisez-la avec les donné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 j

De manière Litteral : var nameList:Array = ["Joe", "William", "Jack", "Averell"] ; 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. Cette méthode va vous permettre de parcourir un à un les éléments du tableau afin de vérifier si la chaîne passée en paramètre est bien présente dans celui-ci. La fonction renverra 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 de valeur 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

2


Alert.show("Bienvenue " + name + " , vous êtes bien sur la liste!"); else Alert.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 :

80


2

Nous avons entré notre code ActionScript et il nous reste à tester notre application. Entrez Luke et cliquez sur le bouton Valider. c Fig. 2.6 : Le nom saisi est incorrect.

Testons maintenant notre application en entrant Jack: c Fig. 2.7 : Jack est bien reconnu.

Remarquez tout de même que le test échoue en entrant jack en minuscule car la comparaison 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 la déclaration de la méthode, ou bien cliquez avec le bouton droit de la souris et sélectionnez Toggle Breakpoint dans le menu contextuel. Un point bleu devrait alors apparaître. c Fig. 2.8 : Point d’arrêt sur la méthode validate

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

81

2


Une fenêtre apparaît alors pour que Flex Builder ouvre la perspective Debug. Cliquez sur Yes. c Fig. 2.9 : Fenêtre de confirmation

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

c Fig. 2.10 : Pperspective Debug de Flex Builder 3

Nous allons maintenant exécuter notre programme en mode Pas à pas et nous en profiterons 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 code ActionScript, c’est-à-dire : j j

dans les fichiers ActionScript (extension .as) ou encore entre des balises ; dans des balises MXML gérant des événements : . SUITE

82


2

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

Le pas à pas Le mode Pas à pas permet de contrôler l’exécution d’un programme, instruction par instruction Flex Builder propose plusieurs modes qui sont accessibles dans la barre du panneau Debug ou directement depuis le menu Run de l’éditeur. Voici donc une description des commandes les plus courantes : j

j j j j j

Resume ([F8]): permet de reprendre l’exécution du programme après que celui-ci ait stoppé sur un point d’arrêt. L’exécution continue normalement ou bien jusqu’au prochain point d’arrêt s’il en existe. Suspend : permet de stopper temporairement l’exécution d’un programme. Terminate : quitte la session de débogage en cours. Step Into ([F5]) : entre dans la fonction appelée. Step Over ([F6]) : exécute la ligne courante puis passe à la suivante mais sans entrer en mode Pas à pas dans une fonction appelée. 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 point d’arrêt sur la méthode validate(). Utilisez la fonction Step Into jusqu’à l’appel à la fonction checkName. Si vous effectuez encore un Step Into, vous entrerez dans cette fonction. En revanche, un Step Over exécutera tout de même la fonction mais l’éditeur vous 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 la fonction Validate.

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

83

2


La première méthode est très pratique puisqu’il suffit de passer le curseur de la souris sur n’importe quelle variable pour afficher sa valeur. Comme un exemple vaut mieux qu’un long discours, mettons cela en pratique. Enlevez le point d’arrêt de la fonction validate et placez-en un sur la fonction checkName. Lancez l’application en mode Debug, saisissez jack en minuscule et cliquez sur Valider. Dès que Flex Builder se sera arrêté sur la méthode checkName, nous utiliserons le mode Pas à 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. c Fig. 2.11 : Affichage du contenu de la variable Item

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

c Fig. 2.12 : Panneau Variables

Ce nouveau panneau permet également de rechercher une variable (ce qui devient vite indispensable 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 compte de toutes les variables contenues dans votre programme. Nous allons maintenant effectuer une recherche, et il vous suffit d’appuyer sur [Ctrl]+[F]. Nous souhaitons afficher l’adresse de notre tableau contenant la liste de noms. Il suffit de taper le nom de la variable dans le champ de saisie (ici nameList) mais il est également possible d’utiliser les caractères spéciaux ? (remplacement d’exactement un caractère) et * (0 ou n caractères) pour faciliter la recherche. Nous aurions très bien pu entrer n?meL ou *eList et nous aurions obtenu le même résultat.

84


2

c Fig. 2.13 : Recherche d’une variable

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

c Fig. 2.14 : Résultat de la recherche

La fonction trace La fonction trace est une des fonctions les plus pratiques en ActionScript puisqu’elle permet d’afficher sur la fenêtre Output de l’IDE des messages ou des variables lorsque l’application est lancée en mode Debug. Cette fonction est un complément indispensable et 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.

85

2


Cependant, cette méthode souffre de quelques défauts puisque les messages ne sont affichables que dans l’IDE ; de plus, l’affichage des objets de types complexes est plutôt limité 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îne ou une variable en paramètre. Par exemple, si nous reprenons l’exemple en cours : public function checkName(name:String):Boolean { for each (var item :String in nameList) { trace(item) if (name == item) return true; } return false;

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

Corriger les erreurs Pour finir, nous pourrions modifier le code pour que la comparaison de chaîne ne soit plus sensible à la casse. Il suffit d’appeler la méthode toLowerCase() sur chaque chaîne comparée : public function checkName(name:String):Boolean { for each (var item :String in nameList) { if (name.toLowerCase() == item.toLowerCase()) return true; } return false; }

Et voici le résultat : c Fig. 2.15 : La comparaison n’est plus sensible à la casse.

86

Check-list

2

2.5 Check-list Au 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 plus graphiques de Flex puisqu’il sera consacré à l’interface.

87

3 3.1 Les composants MXML .................................

90

3.2 Les conteneurs d’agencement .........................

96

3.3 Mise en forme de l’interface ..........................

108

3.4 Les contrôles simples ....................................

113

3.5 Mise en pratique : une interface d’annuaire .........

120

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

124

Réaliser sa première interface T

oute application repose sur une interface utilisateur, et la force de l’IDE Adobe Flex Builder 3 est de rendre cette couche de présentation la plus facile possible pour les développeurs. Ce chapitre détaille la manière de réaliser une interface avec les composants mis à disposition par Flex.

3

Réaliser sa première interface

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

Définition d’un composant Flex est un environnement de développement qui repose principalement sur des composants. Plusieurs familles de composants complémentaires permettent au dé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 avec de nombreuses caractéristiques que nous détaillerons tout au long de ce chapitre et des suivants. 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 de développer le côté logique de l’application (HTTServiceRequest pour récupérer des données externes au projet, ou Timer pour contrôler l’interaction dans le temps de l’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 leur apparence aux besoins de l’application et réagir spécifiquement aux interactions de l’utilisateur. Ces composants se prennent rapidement en main car ils partagent un grand nombre de propriétés et de méthodes. Les principales caractéristiques des composants concernent : j j j j

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

Tous ces composants sont instanciables via des tags MXML ou via une classe ActionScript et leur API (Application Programming Interface) est également accessible des deux manières. De nombreux composants sont fournis par Flex pour répondre aux besoins les plus courants, mais pour des cas plus spécifiques à votre application le chapitre 8 vous explique comment créer vos propres composants ou étendre les propriétés d’autres composants.

90

Les composants MXML

3

Travailler avec les contrôles Flex Les contrôles sont les composants visuels issus de Flex. La diversité de ces composants et leur nombre font la richesse du framework Flex. Travailler avec ces contrôles né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 du composant dans la balise MXLM. Par exemple, le code suivant attribue l’identifiant monBouton à la propriété id :

Flex & Air

Developing Flex 4 Components: Using ActionScript & MXML to Extend Flex and AIR Applications

Developing Flex 4 Components: Using ActionScript & MXML to Extend Flex and AIR Applications

Creating Mashups with Adobe Flex and AIR

Hammer & Air

AIR POLLUTION & HEALTH

AIR POLLUTION & HEALTH

Flex & Bison: Text Processing Tools

Flex & Bison: Text Processing Tools

Flex & Bison: Text Processing Tools

Beginning Flash, Flex, and Air Development for Mobile Devices

Beginning Flash, Flex, and Air Development for Mobile Devices

Queen Of Air & Darkness

Air Quality Assessment & Management

Flex Appeal

AdvancED Flex 4

T-FLEX. Трехмерное моделирование

Professional Flex 2

Flex 2 Developer's Guide

Flex 4 Fun

Flex 3 for Designers

AdvancED Flex 4

Flex 3 with Java

Hello! Flex 4

Flex 3 Bible

Flex on Java

Learning Flex 4

Foundation Flex for Designers

Air

Air

The Queen Of Air & Darkness

Flex & Air

Developing Flex 4 Components: Using ActionScript & MXML to Extend Flex and AIR Applications

Developing Flex 4 Components: Using ActionScript & MXML to Extend Flex and AIR Applications

Creating Mashups with Adobe Flex and AIR

Hammer & Air

AIR POLLUTION & HEALTH

AIR POLLUTION & HEALTH

Flex & Bison: Text Processing Tools

Flex & Bison: Text Processing Tools

Flex & Bison: Text Processing Tools

Beginning Flash, Flex, and Air Development for Mobile Devices

Beginning Flash, Flex, and Air Development for Mobile Devices

Queen Of Air & Darkness

Air Quality Assessment & Management

Flex Appeal

AdvancED Flex 4

T-FLEX. Трехмерное моделирование

Professional Flex 2

Flex 2 Developer's Guide

Flex 4 Fun

Flex 3 for Designers

AdvancED Flex 4

Flex 3 with Java

Hello! Flex 4

Flex 3 Bible

Flex on Java

Learning Flex 4

Foundation Flex for Designers

Air

Air

The Queen Of Air & Darkness

Recommend Documents