Cet ouvrage et des milliers d'autres font partie de la bibliothèque YouScribe
Obtenez un accès à la bibliothèque pour les lire en ligne
On lit avec un ordinateur, une tablette ou son smartphone (streaming)
En savoir plus
ou
Achetez pour : 24,99 €

Lecture en ligne + Téléchargement

Format(s) : PDF

sans DRM

Partagez cette publication

Publications similaires

PHP/MySQL avec Flash 8

de editions-eyrolles

Programmation Flex 4

de editions-eyrolles

Vous aimerez aussi

Pokémon GO 100% non officiel

de editions-eyrolles

J'arrête la malbouffe !

de editions-eyrolles

Le pouvoir des gentils

de editions-eyrolles

suivant

Programmation
Programmation Flex 3
Applications Internet riches avec Flash ActionScript 3, MXML
et Flex Builder A.Vannieuwenhuyze
Flex 3, framework de référence pour le développement Flash Ingénieur concepteur dans
une SSII et responsableOpen Source, le SDK de Flex offre un véritable environnement en phase avec les bonnes pratiques de génie logiciel Flex3
(MVC…) et de gestion de projet (travail collaboratif…). Il propose des bibliothèques de composants graphiques et des d’applications pour
fonctions pour dialoguer avec le serveur, et s’interfacer avec des bases de données via des serveurs PHP/J2EE. l’association Outcomerea,
spécialisée dans le domaine
Une bible avec de nombreux cas pratiques et retours d’expérience de la recherche médicale, Applications Internet riches
Aurélien VannieuwenhuyzeProgrammation Flex 3 explique aux développeurs web, qu’ils soient ou non rompus à Flash et ActionScript, comment
s’est d’abord investi dans lautiliser le framework Flex pour concevoir et créer des applications web dites « riches » (RIA), à l’instar des applications
conception et la réalisationAjax ou Silverlight. Tout en rappelant les langages sur lesquels s’adosse cette technologie (ActionScript, MXML), l’ou- avec Flash ActionScript 3,
vrage passe en revue l’intégralité des techniques de développement Flex : maîtrise de l’environnement de travail, création d’applications J2EE.
d’interfaces interactives et évoluées avec les vues, transitions et thèmes, gestion des données et échanges avec le Pour créer des applications
serveur via RPC, mais aussi gestion et création des composants, débogage et optimisation. Il les met ensuite en situa- Internet riches, il a étudié MXML et Flex Buildertion avec deux études de cas détaillant la création d’un site e-commerce puis d’un lecteur MP3 tournant sur Adobe Air. les frameworks alliant
richesse et rapidité de
réalisation. Son choix s’est
Au sommaire
porté sur Flex, avec lequel
Pourquoi utiliser Flex ? • Flex dans une architecture trois tiers • Flex et MVC • MXML et Actionscript • il a réalisé des applicatifs
Procédures et fonctions • Programmation objet • Mécanisme client/serveur • Flex SDK et Flex Builder • Gestion à vocation médicale et des
d’un projet • Arborescence d’un projet Flex Builder • Exécution et test • Travail collaboratif • Export et import • extranets pour de grandes
Création d’interfaces graphiques • Composants de contrôles • Boutons • Listes • Zones de texte • Tableaux • entreprises.
Animations et vidéos Flash • Composants de navigation • Autres contrôles • Dimensionner et positionner •
ApplicationControlBar • Canvas • Hbox • Grid • Panel • TitleWindow • Styles • CSS et ActionScript • Skinning •
Utilisation d’images et de fichiers SWF • États, transitions et effets • Créer ses composants • MXML ou R. Pouclet
ActionScript ? • compc • Gestion des données • DataBinding • Validation des données • Accès aux services de Passionné de développement
la couche métier • HTTPService ou REST • RemoteObject • Flex et PHP • AMFPHP • HTTPService et multimédia depuis plusieurs années,
Romain Pouclet se tourne aujourd’huiActionScript • Le générateur de Flex Builder • Flex et J2EE avec BlazeDS • Composants émetteurs et
récepvers le développement d’interfacesteurs • Créer des applications modulaires • Interagir avec le conteneur web • Deep linking • Flex-Ajax Bridge •
riches et de solutions pour supports
Débogage d’une application • Points d’arrêt et exécution pas à pas • Analyse des performances • Optimisation mobiles.
et déploiement • Réduire la taille des fichiers SWF • Adobe AIR • Flex 4 Gumbo.
À qui s’adresse cet ouvrage ? Aurélien Vannieuwenhuyze
–À toute la communauté des concepteurs et développeurs web 2.0 (Flash, PHP, Java, Ajax, XHTML/CSS) qui
désirent développer des applications Internet riches.
–Aux webmestres et développeurs connaissant Flash et ActionScript, qui recherchent un framework pour
industrialiser la création d’interfaces graphiques pour leurs applications.
–Aux développeurs amenés à créer des applications autonomes exécutables avec ou sans navigateur web.
Sur le site www.editions-eyrolles.com
– Téléchargez le code source des exemples@ et cas pratiques du livre
35 ?
Couvre
les nouveautés
de Flex 4
Code éditeur : G12387
ISBN : 978-2-212-12387-6
9 782212 123876
Conception : Nord Compo
A. Vannieuwenhuyze
Programmation
Flex 3Programmation
Programmation Flex 3
Applications Internet riches avec Flash ActionScript 3, MXML
et Flex Builder A.Vannieuwenhuyze
Flex 3, framework de référence pour le développement Flash Ingénieur concepteur dans
une SSII et responsableOpen Source, le SDK de Flex offre un véritable environnement en phase avec les bonnes pratiques de génie logiciel Flex3
(MVC…) et de gestion de projet (travail collaboratif…). Il propose des bibliothèques de composants graphiques et des d’applications pour
fonctions pour dialoguer avec le serveur, et s’interfacer avec des bases de données via des serveurs PHP/J2EE. l’association Outcomerea,
spécialisée dans le domaine
Une bible avec de nombreux cas pratiques et retours d’expérience de la recherche médicale, Applications Internet riches
Aurélien VannieuwenhuyzeProgrammation Flex 3 explique aux développeurs web, qu’ils soient ou non rompus à Flash et ActionScript, comment
s’est d’abord investi dans lautiliser le framework Flex pour concevoir et créer des applications web dites « riches » (RIA), à l’instar des applications
conception et la réalisationAjax ou Silverlight. Tout en rappelant les langages sur lesquels s’adosse cette technologie (ActionScript, MXML), l’ou- avec Flash ActionScript 3,
vrage passe en revue l’intégralité des techniques de développement Flex : maîtrise de l’environnement de travail, création d’applications J2EE.
d’interfaces interactives et évoluées avec les vues, transitions et thèmes, gestion des données et échanges avec le Pour créer des applications
serveur via RPC, mais aussi gestion et création des composants, débogage et optimisation. Il les met ensuite en situa- Internet riches, il a étudié MXML et Flex Buildertion avec deux études de cas détaillant la création d’un site e-commerce puis d’un lecteur MP3 tournant sur Adobe Air. les frameworks alliant
richesse et rapidité de
réalisation. Son choix s’est
Au sommaire
porté sur Flex, avec lequel
Pourquoi utiliser Flex ? • Flex dans une architecture trois tiers • Flex et MVC • MXML et Actionscript • il a réalisé des applicatifs
Procédures et fonctions • Programmation objet • Mécanisme client/serveur • Flex SDK et Flex Builder • Gestion à vocation médicale et des
d’un projet • Arborescence d’un projet Flex Builder • Exécution et test • Travail collaboratif • Export et import • extranets pour de grandes
Création d’interfaces graphiques • Composants de contrôles • Boutons • Listes • Zones de texte • Tableaux • entreprises.
Animations et vidéos Flash • Composants de navigation • Autres contrôles • Dimensionner et positionner •
ApplicationControlBar • Canvas • Hbox • Grid • Panel • TitleWindow • Styles • CSS et ActionScript • Skinning •
Utilisation d’images et de fichiers SWF • États, transitions et effets • Créer ses composants • MXML ou R. Pouclet
ActionScript ? • compc • Gestion des données • DataBinding • Validation des données • Accès aux services de Passionné de développement
la couche métier • HTTPService ou REST • RemoteObject • Flex et PHP • AMFPHP • HTTPService et multimédia depuis plusieurs années,
Romain Pouclet se tourne aujourd’huiActionScript • Le générateur de Flex Builder • Flex et J2EE avec BlazeDS • Composants émetteurs et
récepvers le développement d’interfacesteurs • Créer des applications modulaires • Interagir avec le conteneur web • Deep linking • Flex-Ajax Bridge •
riches et de solutions pour supports
Débogage d’une application • Points d’arrêt et exécution pas à pas • Analyse des performances • Optimisation mobiles.
et déploiement • Réduire la taille des fichiers SWF • Adobe AIR • Flex 4 Gumbo.
À qui s’adresse cet ouvrage ? Aurélien Vannieuwenhuyze
–À toute la communauté des concepteurs et développeurs web 2.0 (Flash, PHP, Java, Ajax, XHTML/CSS) qui
désirent développer des applications Internet riches.
–Aux webmestres et développeurs connaissant Flash et ActionScript, qui recherchent un framework pour
industrialiser la création d’interfaces graphiques pour leurs applications.
–Aux développeurs amenés à créer des applications autonomes exécutables avec ou sans navigateur web.
Sur le site www.editions-eyrolles.com
– Téléchargez le code source des exemples@ et cas pratiques du livre
Couvre
les nouveautés
de Flex 4
Conception : Nord Compo
A. Vannieuwenhuyze
Programmation
Flex 312387_PageTitre_Flex3 20/11/08 14:30 Page 2
Programmation
FLEX 312387_PageTitre_Flex3 20/11/08 14:30 Page 1
Programmation
FLEX 3
Applications Internet riches
avec Flash ActionScript 3, MXML et Flex Builder
Aurélien Vannieuwenhuyze
Avec la contribution de
Romain PoucletCHEZ LE MÊME ÉDITEUR
G. L . – Silverlight 2. D. s G , P. G . – Sécurité PHP 5 et MySQL.
N°12114, 2007, 240 pages.N°12375, 2008, 330 pages.
r. r . – Mémento MySQL. G. P J. P . – Zend Framework.
N°12012, 2007, 14 pages.N°12392, 2008, 460 pages.
m. n . – Réussir son site web avec XHTML et CSS. E. D P C. P G . – PHP 5 avancé.
ee N°12307, 2 édition, 2008, 316 pages.N°12369, 5 édition, 2008, 844 pages.
a. c . – Transcender CSS. Sublimez le design web ! C. P . – Bien développer pour le Web 2.0.
e N°12107, 2007, 370 pages.N°12391, 2 édition 2008, 600 pages.
J.-m. d F . – Premières applications Web 2.0 avec a. b . – Ergonomie web. Pour des sites web
Ajax et PHP. efficaces.
N°12090, 2008, 450 pages (Collection Blanche).N°12158, 2007, 426 pages.
k. dJ F . – Développement JEE 5 avec Eclipse Europa. a. b . – Mémento Ergonomie web.
N°12061, 2008, 380 pages.
N°12386, 2008, 14 pages.
S. P . – Débuter en JavaScript.
r. G . – CSS 2 : pratique du design web.
N°12093, 2007, 386 pages.eN°11976, 2 édition, 2007, 324 pages.
T. t P , a. G G . – JavaScript pour le Web 2.0.
e. s . – Sites web. Les bonnes pratiques.
N°12009, 2007, 492 pages.
N°12101, 2007, 14 pages.
d. t et al. – Ruby on Rails.
a. t . – Apprendre à programmer en ActionScript. eN°12079, 2 édition 2007, 800 pages.
N°12199, 2007, 438 pages.
w. a et al. – Typo3.
S. b G , d. t , l. d P , F. b . – N°11781, 2006, 532 pages.
Conduite de projets Web.
eN°12325, 4 édition 2008, 394 pages. l. b , c. w F G . – Sécurité informatique.
Principes fondamentaux pour l’administrateur système.
n. c . – Réussir un projet de site Web. N°12021, 2007, 350 pages.
eN°12400, 5 édition ,2008, 246 pages.
G. G . – Mac OS X Leopard efficace. Déploiement,
o. a . – Réussir son référencement web. administration et réparation.
N°12264, 2008, 302 pages. N°12263, 2008, 476 pages.
G. P . – Best practices PHP 5. Les meilleures pratiques M. m . – Subversion. Pratique du développement
de développement en PHP. collaboratif avec SVN.
N°11676, 2005, 480 pages. N°11919, 2006, 206 pages.
slalesrubreaétleeemsioeahlcoaceomrmeltiuenrnasyïueécoouereeoocnveeweoeadrekteiltnnoççrneorusemiorrhtoomhaesrdlnhuhhleusrshuuoerurnetioutqrayueneornieevelatlmaaaeobenohnecaadcraoaonneéaÉDITIONS EYROLLES
61, bd Saint-Germain
75240 Paris Cedex 05
www.editions-eyrolles.com
erLe code de la propriété intellectuelle du 1 juillet 1992 interdit en effet expressément la photocopie à
usage collectif sans autorisation des ayants droit. Or, cette pratique s’est généralisée notamment dans les
établissements d’enseignement, provoquant une baisse brutale des achats de livres, au point que la possibilité
même pour les auteurs de créer des œuvres nouvelles et de les faire éditer correctement est aujourd’hui
menacée.
En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le
présent ouvrage, sur quelque support que ce soit, sans autorisation de l’éditeur ou du Centre Français d’Exploitation du
Droit de Copie, 20, rue des Grands-Augustins, 75006 Paris.
© Groupe Eyrolles, 2009, ISBN : 978-2-212-12387-6=Flex3 FM.book Page V Mardi, 2. décembre 2008 3:32 15
Table des matières
Avant-propos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XIX
Structure de l’ouvrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XIX
À qui s’adresse cet ouvrage ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XXI
Remerciements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XXI
PARTIE I
Comprendre Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
CHAPITRE 1
Pourquoi Flex ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Les enjeux du développement d’applications web . . . . . . . . . . . . . . . . 3
Flex en questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Est-ce une technologie récente ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Qu’est-ce que Flex ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Quel est son fonctionnement ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Sur quelles technologies repose t-il ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Choisir la méthode Open Source ou propriétaire ? . . . . . . . . . . . . . . . . . . 7
Quelles différences avec Ajax ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Flex et ses concurrents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Les limites de Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Pourquoi choisir Flex ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11=Flex3 FM.book Page VI Mardi, 2. décembre 2008 3:32 15
Programmation Flex 3
VI
CHAPITRE 2
À la découverte du framework Flex 3 . . . . . . . . . . . . . . . . . . . . . . . 13
Rôle du front end . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Architecture n-tiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Positionnement d’une application Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
L’application et le modèle-vue-contrôleur . . . . . . . . . . . . . . . . . . . . . . . 15
Le langage MXML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Le langage ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Les variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Les boucles et les conditions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Les procédures et les fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
La programmation objet 22
Le mécanisme client/serveur 23
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
CHAPITRE 3
Développer avec le kit Flex SDK . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Prérequis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Installation du kit Flex SDK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Les compilateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
mxmlc : le compilateur d’application 30
compc : le compilateur de composants . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Première application Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Conception graphique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Création du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Écriture du fichier MXML 33
Écriture du fichier ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Liaison graphique et action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Compilation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Intégration dans une page web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Déploiement 39
Automatisation de la compilation à l’aide de Ant . . . . . . . . . . . . . . . . . 39
Ant et Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Installation de Ant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Création d’un script de compilation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45=Flex3 FM.book Page VII Mardi, 2. décembre 2008 3:32 15
Table des matières
VII
CHAPITRE 4
Développer des applications à l’aide de Flex Builder . . . . . . 47
Présentation de Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Les différentes versions de Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . 48férents modes de distribution de Flex Builder . . . . . . . . . . . . . . . . 48
Installation de Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Le mode Autonome . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Le mode Plug-in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Les perspectives de Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
La perspective de développement 58ve de design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
La perspective de débogage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61ve de profiling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Créer un projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Arborescence d’un projet Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Exécution et tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Travail collaboratif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Exporter/importer un projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Exportation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Importation 73
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
CHAPITRE 5
Les composants de contrôle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Les boutons et interrupteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
ToogleButton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Permettre le choix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Les zones de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Les libellés : Label et Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Les zones de saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Les zones de texte « riches » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Les tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
DataGrid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
AdvancedDataGrid 88=Flex3 FM.book Page VIII Mardi, 2. décembre 2008 3:32 15
Programmation Flex 3
VIII
Analyser un cube OLAP avec OLAPDataGrid . . . . . . . . . . . . . . . . . . 92
Qu’est-ce qu’un cube OLAP ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Création d’un cube OLAP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Requête sur le cube . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Insérer des images, des animations et vidéos Flash . . . . . . . . . . . . . . . 100
Intégrer des animations Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Insérer des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Lecteur vidéo Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Choisir une couleur dans une palette avec ColorPicker . . . . . . . . . . . 103
Contrôler le format de date avec DateChooser et DateField . . . . . . . 104
Ajouter un curseur avec HSlider et VSlider . . . . . . . . . . . . . . . . . . . . . 105
L’incrémentation avec NumericStepper . . . . . . . . . . . . . . . . . . . . . . . . . 106
Présentation de données avec HorizontalList et TileList . . . . . . . . . . 106
Réaliser des hyperliens grâce à LinkButton . . . . . . . . . . . . . . . . . . . . . 107
Afficher des données sous forme d’arborescence . . . . . . . . . . . . . . . . . 108
Implémentation et alimentation en données . . . . . . . . . . . . . . . . . . . . . . . 108
Interaction avec l’utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
CHAPITRE 6
Les composants conteneurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Créer une barre de menus avec ApplicationControlBar . . . . . . . . . . . 111
Le composant Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Aligner verticalement ou horizontalement les composants . . . . . . . . . 113
Les composants HBox et VBox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Les composants HDividedBox et VDividedBox . . . . . . . . . . . . . . . . . . . . 113
Créer des formulaires avec Form, FormHeading et FormItem . . . . . 115
Créer une grille grâce à Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Les panneaux : Panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Créer des fenêtres pop-ups avec TitleWindow . . . . . . . . . . . . . . . . . . . 118
Création du pop-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Appel du pop-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Communiquer avec le pop-up 120
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122=Flex3 FM.book Page IX Mardi, 2. décembre 2008 3:32 15
Table des matières
IX
CHAPITRE 7
Les composants de navigation et de reporting . . . . . . . . . . . . . 123vigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Navigation par onglets avec TabNavigator . . . . . . . . . . . . . . . . . . . . . . . . 123
Vues empilées avec ViewStack 124
Navigation « en accordéon » : Accordion . . . . . . . . . . . . . . . . . . . . . . . . . 126
Les composants de graphique 128
Implémentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
En pratique : création d’un outil de reporting . . . . . . . . . . . . . . . . . . . . . . 130
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
CHAPITRE 8
Réaliser le design des interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Dimensionner et positionner les composants . . . . . . . . . . . . . . . . . . . . . 135
Spécifier les dimensions des composants . . . . . . . . . . . . . . . . . . . . . . . . . 135
Positionner les composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Utiliser les styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
La balise Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Le fichier CSS externe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
CSS et ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Habiller les composants : skinning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Utiliser des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Utiliser des fichiers SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
L’habillage par programmation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
CHAPITRE 9
Le dynamisme applicatif à l’aide des états,
des transitions et des effets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Les états ou view states . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Étude de cas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Les transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Combiner des effets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Mise en pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Écrire des transitions en ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . 169
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172=Flex3 FM.book Page X Mardi, 2. décembre 2008 3:32 15
Programmation Flex 3
X
CHAPITRE 10
Créer des composants personnalisés . . . . . . . . . . . . . . . . . . . . . . 173
Penser composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Qu’est–ce qu’un composant ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
MXML ou ActionScript ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Le compilateur compc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Créer un composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Description du composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Méthodologie de création 177
Réemploi du composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
CHAPITRE 11
Gérer les données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Lier des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Utilisation de la balise <mx:Binding> . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Le DataBinding en ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Stocker des données grâce au modèle . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Implémenter le modèle à l’aide de la balise <mx:Model> . . . . . . . . . . . . 206
Les modèles et ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Valider des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Rendre la saisie obligatoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Vérification du format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Personnalisation des messages d’erreur . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Les événements de validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Gestion de la validation en ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Formater des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
CHAPITRE 12
Accéder aux services de la couche métier . . . . . . . . . . . . . . . . . 223
Employer les requêtes HTTP avec HTTPService
ou REST-Style webservice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Le composant WebService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Le service web en détail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230=Flex3 FM.book Page XI Mardi, 2. décembre 2008 3:32 15
Table des matières
XI
Création de l’interface graphique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Appel du service web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Analyse du fonctionnement de l’application . . . . . . . . . . . . . . . . . . . . . . . 236
Accéder aux classes distinctes grâce à RemoteObject . . . . . . . . . . . . . 238
Comprendre RemoteObject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Implémentation de RemoteObject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
CHAPITRE 13
Flex et PHP 241
Accès aux services PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Installation et fonctionnement de la passerelle AMFPHP . . . . . . . . . . 241
Cas pratique : gestion d’un magasin informatique . . . . . . . . . . . . . . . 244
Préparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Implémentation du composant HTTPService en ActionScript . . . . . . . . . 247
RemoteObject en pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Le générateur d’application de Flex Builder . . . . . . . . . . . . . . . . . . . . . 257
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
CHAPITRE 14
BlazeDS : ouverture Open Source vers le monde J2EE
et la communication d’applications . . . . . . . . . . . . . . . . . . . . . . . . . 263
Le projet BlazeDS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Les différentes versions du serveur BlazeDS . . . . . . . . . . . . . . . . . . . . . . 264
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Le serveur Tomcat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Test d’installation 268
Interaction avec les méthodes J2EE . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Processus d’exécution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Exemple d’application 270
Échanger des données en temps réel . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Création du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
Configuration du serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
<mx:Producer> et <mx:Consumer> : les composants émetteurs
et récepteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279=Flex3 FM.book Page XII Mardi, 2. décembre 2008 3:32 15
Programmation Flex 3
XII
Les procédures de communication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Test de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
CHAPITRE 15
Créer des applications modulaires . . . . . . . . . . . . . . . . . . . . . . . . . 285
La notion de module 285
Créer un module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Intégrer un module dans une application . . . . . . . . . . . . . . . . . . . . . . . . 288
Charger les modules à l’aide du composant ModuleLoader . . . . . . . . . . . 288
Gestion des modules avec ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
CHAPITRE 16
Interagir avec le conteneur web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
La notion de deep linking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Principe de fonctionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Mise en pratique du deep linking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Déploiement du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
Communiquer avec le conteneur web . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
De l’application Flex vers le conteneur web . . . . . . . . . . . . . . . . . . . . . . . 306
Du conteneur web vers l’application Flex . . . . . . . . . . . . . . . . . . . . . . . . . 309
La bibliothèque Flex-Ajax Bridge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Ajout de la bibliothèque à un projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Utilisation de la bibliothèque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Déploiement et test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
CHAPITRE 17
Déboguer une application 319
Création de l’application d’étude . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
Identifier et corriger les erreurs grâce à la vue Problems . . . . . . . . . . 321
Le débogage avancé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321
Utilisation des points d’arrêt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Modifier la valeur des variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325=Flex3 FM.book Page XIII Mardi, 2. décembre 2008 3:32 15
Table des matières
XIII
Tracer un parcours . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Sélectionner les variables à surveiller . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
CHAPITRE 18
Analyser les performances et optimiser l’application . . . . . . 329
Présentation de l’analyseur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
L’analyseur en action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Analyse des performances . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
Analyse de l’occupation mémoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
Méthodes d’analyse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334
Détecter les allocations mémoire inutiles . . . . . . . . . . . . . . . . . . . . . . . . . 334
Analyser le temps d’exécution des méthodes . . . . . . . . . . . . . . . . . . . . . . 335
Déterminer le nombre d’instances d’une classe . . . . . . . . . . . . . . . . . . . . 336
Visualiser les allocations d’objets 336
Bonnes pratiques d’optimisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
Calculer les performances applicatives . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
Améliorer l’exécution sur les postes clients . . . . . . . . . . . . . . . . . . . . . . . 338
Réduire la taille des fichiers SWF 339
Multiplier les fichiers SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
Améliorer les méthodes de codage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
Déployer une application Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
L’incontournable liste de contrôle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
Mise en ligne de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
CHAPITRE 19
Adobe AIR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
Le projet Adobe AIR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
Fonctionnement d’une application AIR . . . . . . . . . . . . . . . . . . . . . . . . . . 345
Nouveaux composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Première application AIR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Création du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Déploiement de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352=Flex3 FM.book Page XIV Mardi, 2. décembre 2008 3:32 15
Programmation Flex 3
XIV
Gestion des données avec la bibliothèque SQLite . . . . . . . . . . . . . . . . . 354
Utiliser la bibliothèque SQLite dans une application AIR . . . . . . . . . . . . 354
SQLite par l’exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
PARTIE II
Cas pratiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
CHAPITRE 20
Création d’un projet de site e-commerce . . . . . . . . . . . . . . . . . . . 365
Définition des besoins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
Conception UML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366
Architecture du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
Création du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
Le squelette . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369
Accès à l’espace d’administration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
Préparation du serveur 374
Faisons le point . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377
CHAPITRE 21
Module d’administration du site e-commerce . . . . . . . . . . . . . . 379
Création du module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Phase préparatoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Design de l’interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381
Gestion des fournisseurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
Création des services PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
Création des classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389
Logique IHM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
Logique applicative 394
Vérification des données transmises . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398
Saisie obligatoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
Vérifier le format du code postal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
Aspect graphique de la validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401=Flex3 FM.book Page XV Mardi, 2. décembre 2008 3:32 15
Table des matières
XV
À vos claviers : la gestion des produits . . . . . . . . . . . . . . . . . . . . . . . . . . 403
Quelques pistes de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405
Version de déploiement du module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419
Intégration du module dans l’application principale . . . . . . . . . . . . . . 419
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421
CHAPITRE 22
Module de vente en ligne : le panier d’achat . . . . . . . . . . . . . . . . 423
Création du module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423
Design de l’interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424
Les états . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424
Les transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435
Affichage du détail d’un produit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437
Gestion du panier d’achat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439
Design du panier avec ItemRenderer . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439
Ajouter un produit au panier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441
Vider le panier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442
À vos claviers : création de l’interface graphique . . . . . . . . . . . . . . . . 443
Ce qu’il faut réaliser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443
Solution 445
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450
CHAPITRE 23
Module de vente en ligne : commande et facturation . . . . . . 451
Création de la commande . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451
Implémenter le glisser-déposer dans le tableau de commander . . . . . . . . 452
Supprimer l’article du panier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453
Calcul du prix total de la commande . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455
Création de la facture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457
Implémentation du pop-up de facturation . . . . . . . . . . . . . . . . . . . . . . . . . 457
Impression de la facture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462
À vos claviers : création d’un pop-up de paiement
et de validation de la commande . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Répétition de composants : <mx:Repeater> . . . . . . . . . . . . . . . . . . . . . . . 464
Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465=Flex3 FM.book Page XVI Mardi, 2. décembre 2008 3:32 15
Programmation Flex 3
XVI
Déploiement du module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
Optimisation et déploiement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470
Optimiser le temps de chargement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470
Faire patienter l’utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473
Déploiement de l’application 475
Fin du site E-Reflex ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
CHAPITRE 24
Créer un lecteur MP3 avec Adobe AIR . . . . . . . . . . . . . . . . . . . . . . 479
Rechercher des MP3 à l’aide de <mx :FileSystemTree> . . . . . . . . . . . 479
Implémentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480
Interaction avec l’utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481
Lire un fichier MP3 avec ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . 482
Principales fonctions de lecture d’un fichier audio . . . . . . . . . . . . . . . . 485
Stopper et mettre en pause . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485
Connaître la progression de la lecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485
Exemple complet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486
Définition des fonctionnalités de notre application . . . . . . . . . . . . . . . . 488
Gestion de la liste de lecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489
Interface de lecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 492
À vos claviers : création d’un lecteur MP3 . . . . . . . . . . . . . . . . . . . . . . 493
Fichier de styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493
Code de la classe ClassesLecteurMp3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495
Fichier LecteurMP3AS3.as . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500
Fichier principal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505
Déploiement du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 506
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 507
CHAPITRE 25
Flex 4 Gumbo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509
Les nouveautés de Flex 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509
Installer le Flash Player 10 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510
FXG 1.0, nouveau format graphique . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511=Flex3 FM.book Page XVII Mardi, 2. décembre 2008 3:32 15
Table des matières
XVII
MXML 2009 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 513
Un nouvel espace de noms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 513
La balise <private> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 514
Le couple de balises <library> et <description> . . . . . . . . . . . . . . . . . . . . 514
Le DataBinding bi-directionnel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 516
Amélioration de certains composants de Flex 3 . . . . . . . . . . . . . . . . . . 517
Remplacement du composant <mx:Label> . . . . . . . . . . . . . . . . . . . . . . . . 517
Le composant <TextInput> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517extArea> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517
Installation de l’environnement de développement . . . . . . . . . . . . . . . 518
Première application 3D avec Flex 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 520
Création et configuration du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 520
Création de l’interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521
Codage de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523
En conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527=Flex3 FM.book Page XVIII Mardi, 2. décembre 2008 3:32 15=Flex3 FM.book Page XIX Mardi, 2. décembre 2008 3:32 15
Avant-propos
Le marché des applications web est en plein essor, et la tendance actuelle est de développer
mieux et plus vite. Deux solutions s’offrent à nous : se contenter de réaliser une
application fonctionnelle reléguant l’aspect graphique au second plan, ou faire primer l’aspect
graphique sur la qualité du développement. Comme aucune de ces deux propositions
n’est satisfaisante, les méthodes de développement ont évolué pour donner naissance aux
frameworks, des ensembles d’outils facilitant le travail du développeur.
En effet, une application web doit être aussi attrayante et performante que n’importe
quelle autre. De plus, la démocratisation des connexions haut débit fait sauter la contrainte
technique majeure des application en ligne. Aussi les utilisateurs se montrent-ils de plus
en plus exigeants et apprécient les clients riches (ou RIA, Rich Internet Application),
capables de reproduire les fonctionnalités d’une application bureautique dans la fenêtre
d’un navigateur.
Pour répondre à une telle attente, les frameworks facilitent la création d’interfaces
graphiques de qualité et d’applications complètes en un minimum de temps. Flex allie justement
la puissance de Flash à des outils connus pour le développement rapide – comme le Flex
Builder –, issus du fameux environnement Eclipse. Mais les applications riches ne se
cantonnent pas à l’univers du Web : les techniques de développement sont applicables à
la création d’applications pour les postes clients (ou RDA, Rich Desktop Application),
grâce au runtime Adobe AIR.
Structure de l’ouvrage
Nous souhaitons qu’à l’issue de votre lecture, le développement d’applications Internet
et bureautiques riches à l’aide du framework Flex 3 n’ait plus de secret pour vous. Nous en
verrons donc toutes les facettes : de la conception de l’interface graphique au déploiement
de votre projet, en passant par la gestion des données et du contrôle de la saisie de
l’utilisateur. La première partie de cet ouvrage couvre l’ensemble des concepts fondamentaux.
Présentation de Flex 3, le chapitre 1 vous donnera une vue d’ensemble sur les capacités
du framework, sa structure et ses points forts. Le chapitre 2 se focalise ensuite sur la
programmation de type MVC et situe Flex dans ce contexte.=Flex3 FM.book Page XX Mardi, 2. décembre 2008 3:32 15
Programmation Flex 3
XX
Entrée en matière dans l’utilisation du framework, le chapitre 3 propose l’étude du SDK
et des différents compilateurs. Ce sera l’occasion de créer une première application Flex.
Nous passerons alors au chapitre 4 à la présentation de l’outil de développement Flex
Builder.
Le chapitre 5 est le premier d’une trilogie consacrée à la présentation des composants du
framework. Nous commencerons par l’interaction entre l’utilisateur et l’interface. Dans
un deuxième temps, le chapitre 6 passe en revue les composants chargés d’en contenir
d’autres. Le chapitre 7 terminera notre trilogie des composants par ceux dédiés à la
représentation d’analyses statistiques.
Suite logique des trois chapitres précédents, le chapitre 8 présente les techniques
d’agencement des composants afin de créer le design de nos applications. Dans le chapitre 9,
nous verrons comment réaliser effets et transitions au sein de nos interfaces graphiques.
Puis, le chapitre 10 se penchera sur la création de composants personnalisés.
Le chapitre 11 explore les possibilités qu’offre le framework en matière de gestion de
données au sein d’une interface (saisie obligatoire, formatage…) et le chapitre 12 étudie
les méthodes d’accès aux données contenues dans une base de données.
Le chapitre 13 présente l’interaction de Flex 3 avec PHP. Quant au chapitre 14, il aborde
les relations de notre framework avec Java.
Le chapitre 15 détaille la notion d’application modulaire et la création de modules. Au
chapitre 16 nous verrons les méthodes qui permettent à une application Flex de
communiquer avec la page web qui la contient.
Le chapitre 17 explore les notions de débogage avant de passer, au chapitre 18, à l’étude
des méthodes d’optimisation d’une application Flex. Enfin, le chapitre 19 terminera la
première partie avec le runtime Adobe AIR.
La seconde partie met en œuvre l’ensemble des concepts étudiés dans la première partie
dans des cas pratiques. Nous détaillerons le développement d’une application e-commerce
sur quatre chapitres et terminerons avec une application multimédia réalisée à l’aide du
runtime Adobe AIR.
Le chapitre 20 définit le cadre du projet qui sera développé au cours des trois chapitres
suivants. Le chapitre 21 décrit le développement de la partie d’administration de
l’application. Le chapitre 22 est consacré à la réalisation de son module principal, et le chapitre 23
détaille le déploiement de l’application.
Le chapitre 24 propose la réalisation d’un lecteur MP3 avec Adobe AIR.
Enfin, cet ouvrage se termine au chapitre 25, consacré à la future version du framework.
Il vous permettra de vous familiariser dès aujourd’hui avec Flex 4 Gumbo.
En pratique
Chaque chapitre de la seconde partie commence par une partie d’accompagnement à la réalisation et se
termine par une rubrique « À vos claviers » : en situation, vous pourrez ainsi vérifier que vous avez bien
assimilé les différents concepts énoncés tout au long de cet ouvrage. =Flex3 FM.book Page XXI Mardi, 2. décembre 2008 3:32 15
Avant-propos
XXI
À qui s’adresse cet ouvrage ?
Cet ouvrage s’adresse autant :
• aux étudiants en programmation qui veulent apprendre à réaliser des applications clientes
riches basées sur Flash ;
• aux développeurs aguerris qui souhaitent réaliser des interfaces graphiques performantes
pouvant être intégrées à des projets Java ou PHP déjà existants ;
• aux chefs de projets qui désirent se faire une idée de la richesse technologique et des
possibilités techniques de ce framework, notamment au niveau de la productivité ;
• aux décideurs qui cherchent à rendre leurs applications plus attrayantes du point de vue
utilisateur.
Remerciements
Mes premiers remerciements vont tout naturellement à ma compagne, qui a fait preuve
de compréhension pour tous les week-ends et soirées monopolisés par l’écriture de cet
ouvrage, sans oublier les nombreux sacrifices que cela a pu engendrer.
Je remercie toute l’équipe des éditions Eyrolles et plus particulièrement Muriel Shan Sei
Fan, Eliza Gapenne, Matthieu Montaudouin et Sandrine Paniel. Merci également à Romain
Pouclet pour sa relecture technique et son avis de premier lecteur.
Je n’oublie pas le Professeur Jean-François Timsit et le Docteur Alexis Tabah de
l’association Outcomerea (www.outcomerea.org), qui m’ont donné l’occasion de travailler sur
des projets mettant en œuvre Flex.
Pour finir, merci à mes parents de m’avoir aidé et accompagné dans la réalisation de mon
plus grand souhait : faire de l’informatique mon métier.=Flex3 FM.book Page XXII Mardi, 2. décembre 2008 3:32 15=Flex3 FM.book Page 1 Mardi, 2. décembre 2008 3:32 15
Partie I
Comprendre Flex 3=Flex3 FM.book Page 2 Mardi, 2. décembre 2008 3:32 15=Flex3 FM.book Page 3 Mardi, 2. décembre 2008 3:32 15
1
Pourquoi Flex ?
Les enjeux du développement d’applications web
Commençons ce premier chapitre par une constatation : 75 % des nouvelles applications
sont de type web, c’est-à-dire qu’elles ont pour support le navigateur Internet. Si nous
analysons les raisons de cet engouement pour ce mode de développement, nous pouvons
avancer trois points de réflexion :
• Une application web est disponible à tout moment et en tout point du globe. En effet,
dès lors que l’utilisateur dispose d’une connexion Internet, il peut profiter de son
application. Citons comme exemple la possibilité de consulter les informations de son
compte bancaire, indépendamment de l’endroit où l’on se trouve.
• Une application web est compatible avec tous les systèmes d’exploitation. Ainsi, les
problèmes d’incompatibilité rencontrés avec les clients lourds (applications
s’exécutant sur le système d’exploitation) sur les environnements Windows, Linux ou
Macintosh sont maintenant révolus. Cette compatibilité est rendue possible notamment par la
mise en place de recommandations de développement (par le W3C, entre autres) et
l’utilisation de langages normalisés, tels que le JavaScript ou le HTML, interprétables
par l’ensemble des navigateurs web.
W3C
Le World Wide Web Consortium, fondé en 1994 par Tim Berners-Lee, n’a pas pour fonction première de
créer des normes de développement mais plutôt des recommandations. Son domaine d’activité se
concentre sur les langages orientés vers le développement d’applications Internet (HTML, XML…) afin
d’assurer leur interopérabilité (http://www.w3.org/).=Flex3 FM.book Page 4 Mardi, 2. décembre 2008 3:32 15
Comprendre Flex 3
4
PARTIE I
• Enfin, le dernier point est la légèreté du mode de distribution de ces applications. Si
pour une application lourde nous devions posséder un CD-Rom d’installation, nous
n’avons plus qu’à saisir une URL dans un navigateur. Notons également que ceci
réduit d’autant le coût de distribution de l’application.
Néanmoins, ce phénomène induit tout de même un effet secondaire néfaste. Les applications
disponibles depuis le Web ou les différents intranets d’entreprise sont aujourd’hui
tellement nombreuses que se développe le syndrome d’applications « jetables ». Ainsi, comme
il suffit de saisir une simple URL dans un navigateur pour exécuter une application, si
celle-ci ne nous convient pas pour des raisons X ou Y, nous n’aurons qu’à lancer une
requête dans un moteur de recherche pour en trouver une autre, similaire.
Dès lors, pour développer une application web viable et durable, les outils que nous
pouvons désormais qualifier, de façon réductrice, de « simplistes » dédiés uniquement au
développement et ne prenant pas en compte le processus complet de réalisation de
l’application (de la conception au déploiement) ne sont plus de mise. Nous disposons maintenant
de frameworks qui sont un ensemble d’outils réunis dans une seule application. Grâce à
eux, nous pouvons à présent déboguer une application web, disposer d’autocomplétion
de code et « designer » des interfaces. L’utilisation d’un framework facilite la mise en
place de la standardisation du code et de méthodes d’optimisation. Les applications
développées sont ainsi homogènes, ce qui diminue le temps d’analyse et facilite l’apport de
correctifs, augmentant donc la productivité.
Alternatives
Notons que nous avons parlé de frameworks au pluriel. En effet, il n’existe pas un mais des frameworks.
Citons par exemple le framework ZendStudio pour le langage PHP, le Google Web Toolkit et bien entendu
Flex 3.
Pourquoi choisir le framework Flex 3 plutôt qu’un autre ? Sans entrer dans le détail, car
nous aurons l’occasion d’y revenir tout au long de ce chapitre, le framework Flex permet de
créer des applications web basées sur la technologie Flash (employée dans les applications
graphiques) procurant une qualité d’interface graphique très appréciée des utilisateurs.
De plus, sa prise en main est facilitée par l’outil de développement Flex Builder basé sur
le célèbre IDE Eclipse, très largement utilisé par les développeurs de nouvelles technologies.
Cette facilité de prise en main séduira donc les développeurs juniors et seniors qui verront
dans ce framework la possibilité de créer rapidement des applications web alliant esthétique
et technique. Les jeunes développeurs seront sans doute intéressés par le coté « nouveau »
de cette technologie, source de motivation et moteur de créativité, les plus aguerris y
verront le moyen de créer des interfaces graphiques très performantes tout en minimisant
le temps de développement. Notre framework ravira également les décideurs (chef de
projets ou d’entreprise), car il permet, d’une part, de produire des applications esthétiques
appréciées des utilisateurs et, d’autre part, de réduire les délais de développement grâce
aux avantages énoncés précédemment.=Flex3 FM.book Page 5 Mardi, 2. décembre 2008 3:32 15
Pourquoi Flex ?
5
CHAPITRE 1
Nous sommes sûrs qu’à la suite de ces quelques lignes, vous vous posez certaines questions.
C’est pourquoi nous allons poursuivre ce chapitre en tentant d’y répondre.
Flex en questions
En tant que spécialiste, lorsque vous évoquez le framework avec des chefs de projets,
développeurs ou tout autre acteur d’un projet de développement informatique, plusieurs
questions reviennent immanquablement :
• Est-ce une technologie récente ?
• Qu’est-ce que le framework Flex ?
• Comment fonctionne-t-il ?
• De quoi est-il composé ?
• S’agit-il d’un logiciel Open Source ou d’une solution propriétaire ?
Voyons comment répondre à ces questions.
Est-ce une technologie récente ?
Flex vu le jour en mars 2004. Initié par Macromédia, repris en 2006 par Adobe, le projet
a connu une évolution rapide comme le montre le tableau 1-1 qui récapitule les mises en
production des différentes versions.
Tableau 1-1 Historique des versions du framework Flex
Date Événement
Mars 2004 Sortie de Flex version 1.0
Octobre 2004 Flex 1.5
Octobre 2005 Flex 2.0 alpha
Février 2006 Flex 2.0 bêta 1
Mars 2006 Flex 2.0 bêta 2
Mai 2006 Flex 2.0 bêta 3
Janvier 2007 Flex 2.01
Février 2008 Flex 3
Courant 2009 Flex 4 qui portera vraisemblablement le nom de « Gumbo ».
Si l’on considère cette chronologie, on constate la mise en production d’une nouvelle
version par an. On peut en déduire que cette technologie est chère à Adobe, qui investit
largement dans ce projet.
Sans chercher à décrire les différentes versions du framework, il est tout de même important
de noter qu’à l’origine, Flex a été créé pour le développement de la couche graphique=Flex3 FM.book Page 6 Mardi, 2. décembre 2008 3:32 15
Comprendre Flex 3
6
PARTIE I
d’une application (partie front end) J2EE. Ceci nécessitait la présence d’un serveur Flex
qui a totalement disparu dès la version 2. La version 3 apporte également son lot de
nouveautés comme l’ouverture vers le monde libre de certaines parties du SDK, ou
l’apparition de nouveaux composants. L’environnement de développement Flex Builder
comporte aussi de nouvelles fonctionnalités telles que le mode de débogage avancé.
Qu’est-ce que Flex ?
Flex est un framework qui sert à la création d’interfaces client riches (front end de
l’application) basé sur l’usage de la technologie Adobe Flash. En effet, si celle-ci apporte
une grande souplesse pour la création d’interfaces graphiques riches, elle est souvent perçue
par les non-initiés comme complexe.
De plus, pour bon nombre de techniciens spécialisés dans le développement d’application,
la conception et la réalisation de l’interface graphique de l’application semblent souvent
secondaires : ils préfèrent se focaliser complètement sur la fonctionnalité à développer
plutôt que sur la présentation du résultat. Le framework Flex a ainsi pour objectif de faciliter
cette partie du développement, en supprimant la notion de time line.
Time line
Bien connu des développeurs Flash, le time line sert à définir des actions sur les composants selon un axe
temporel. Ce mode de développement est réservé aux spécialistes de Flash et diffère du mode de
développement standard basé sur la disposition de composants sur une page web.
Grâce au framework Flex, l’utilisation de Flash n’est plus l’apanage des seuls designers :
les développeurs peuvent maintenant créer des interfaces graphiques attrayantes grâce à
un langage de description basé sur XML.
Quel est son fonctionnement ?
Une application Flex n’est autre qu’un fichier portant l’extension .swf (ShockWave Flash)
issu de la compilation de fichiers MXML et ActionScript, insérés dans une page web.
Les fichiers MXML (Macromedia XML) servent à la description des interfaces graphiques,
en définissant la position des composants et leurs propriétés. Quant aux fichiers
ActionScript 3, ils ont la charge de la logique applicative : gestion d’événements, écriture de
procédure, fonctions…
Sur quelles technologies repose t-il ?
Voyons à présent le socle sur lequel repose Flex 3 et les technologies associées. Le
framework Flex 3 s’articule autour des quatre éléments suivants :
• Le Flash Player 9 – Équipant près de 97 % des ordinateurs (Windows, Mac OS et
Linux), le Flash Player assure la compatibilité des applications développées en Flash
sur l’ensemble des environnements et navigateurs web. =Flex3 FM.book Page 7 Mardi, 2. décembre 2008 3:32 15
Pourquoi Flex ?
7
CHAPITRE 1
• Le Flex 3 SDK – Ouvert au monde Open Source, le SDK (Software Development Kit)
permet de créer des applications Flex gratuitement à l’aide des compilateurs et du
débogueur qu’il intègre.
• Flex Builder 3 – Environnement de développement basé sur le célèbre IDE (Integrated
Development Environment) Eclipse, il propose un ensemble de fonctionnalités permettant
de réaliser facilement des interfaces graphiques conviviales. Depuis sa version 3, il
offre également des fonctions avancées de débogage comme le profiling d’application
(qui intervient notamment dans la description de la charge mémoire utilisée par
l’application). Cet outil est disponible en version standard et professionnelle mais
nécessitera cependant un investissement non négligeable (environ 600 € pour la version
professionnelle). À noter qu’il existe une version pour les étudiants.
• Blaze DS – Ce composant s’adresse à celles et ceux qui souhaitent créer des applications
Flex communiquant avec le back end J2EE. Il s’agit d’un sous-ensemble de projets Open
Source basés sur les briques principales de son homologue LiveCycle Data services
d’Adobe, qui est payant.
Front end et back end d’une application
Le back end est chargé de contenir la logique métier de l’application (règles de gestion, traitements des
données…). Le front end, quant à lui, gère la partie interface homme machine (IHM) de l’application.
Flash 9 obsolète ?
À l’heure ou nous écrivons ces lignes, Adobe vient de mettre à disposition le nouveau Flash Player 10.
Cependant, la compatibilité descendante est respectée : les fonctionnalités du Flash Player 9 sont aussi
disponibles dans le Flash Player 10. Cela n’a également aucun impact sur l’utilisation du framework
Flex 3.
Choisir la méthode Open Source ou propriétaire ?
Voilà la grande question que tout le monde est en droit de se poser. Comportant l’ensemble
des bibliothèques et compilateurs nécessaires au développement, certaines parties du
Flex SDK sont à présent Open Source. Néanmoins, nous verrons, lors du chapitre 3, que
son utilisation n’est pas des plus aisées. Cependant, pour faciliter le travail du développeur,
Adobe propose l’environnement de développement propriétaire Flex Builder. Vous
disposez ainsi d’un eneloppement, de test et de déploiement efficace.
Bien entendu, cet eneloppement a un prix : il faut débourser environ
600 € pour acquérir une licence. Mais, comme nous venons de l’indiquer, le Flex Builder
n’est qu’un « plus » qui facilite l’utilisation du framework. Il est donc tout à fait possible
de développer vos applications avec Flex sans débourser un sou… si vous pouvez vous
contenter d’un simple éditeur de texte et d’un compilateur en ligne de commande.=Flex3 FM.book Page 8 Mardi, 2. décembre 2008 3:32 15
Comprendre Flex 3
8
PARTIE I
Quelles différences avec Ajax ?
Comme nous venons de l’indiquer, si vous souhaitez recourir à l’IDE Flex Builder, il
faudra bourse délier. Bien entendu, cet investissement financier sera d’autant plus
important que les développeurs amenés à l’utiliser seront nombreux. Vous êtes donc en droit
de vous demander pourquoi effectuer une telle dépense, alors qu’en optant pour un
framework Ajax, vous pourriez tout à fait réaliser des RIA (Rich Internet Application) et,
ce, de façon totalement gratuite tout en profitant des forces des projets Open Source.
Qu’est-ce qu’Ajax ?
Ajax (Asynchronous Javascript and XML, XML et JavaScript asynchrone) est une méthode de
développement d’application web combinant différentes technologies telles que HTML, Javascript, XML ou encore le
protocole HTTP. On l’utilise notamment pour créer des interfaces interactives. Pour en résumer le principe,
Ajax permet d’interagir avec un serveur web sans devoir recharger l’intégralité de la page. De nombreux
frameworks Ajax – comme Openlaszlo (http://www.openlaszlo.org/) – mettent à profit cette méthode
de développement pour la réalisation d’interfaces client riches.
Le principal argument que nous pouvons avancer est le suivant : Ajax se base sur le
langage JavaScript dont l’interprétation peut varier d’un navigateur à l’autre. Ceci implique
donc l’adaptation du code pour chaque navigateur. Une application Flash reposant
exclusivement sur le Flash Player, son comportement sera identique quelle que soit la
plateforme ou l’environnement dans lequel elle est exécutée.
Un second argument peut également être avancé : il est plus facile et rapide de développer
une interface graphique à fonctionnalités équivalentes avec le framework Flex qu’avec la
technologie Ajax. Comme nous l’avons évoqué au début de ce chapitre, nous sommes
dans une société de consommation d’applications web, où la durée de vie de celles-ci est
limitée et où l’aspect esthétique est devenu primordial. Par conséquent, si nous souhaitons
réaliser une application ayant une interface attrayante tout en réduisant son coût de
développement, nous avons tout intérêt à nous diriger vers l’usage du framework Flex.
Tableau 1-2 Comparaison entre une application développée avec Flex et avec Ajax
Critère Flex Ajax
Nécessité d’un plug-in sur le poste Oui Non, même s’il nécessite l’activation
client pour l’exécution de l’application de JavaScript sur le poste client
Coût du développement de Gratuit pour l’utilisation du SDK. Gratuit
l’application Payant pour l’utilisation de l’IDE
Portabilité de l’application Comportement identique sur Le comportement de l’application
l’ensemble des navigateurs peut différer selon le navigateur web
(hors utilisation d’un framework)
Insertion de contenu multimédia De par son lien avec Flash, Les fonctionnalités multimédias ne
(vidéo, son…) dans l’application à les fonctionnalités multimédias sont sont pas incluses
l’aide de fonctionnalités pré-existantes incluses dans le framework=Flex3 FM.book Page 9 Mardi, 2. décembre 2008 3:32 15
Pourquoi Flex ?
9
CHAPITRE 1
Tableau 1-2 Comparaison entre une application développée avec Flex et avec Ajax (suite)
Critère Flex Ajax
Composants graphiques prêts à Flex intègre de nombreux composants Ajax ne comporte pas de composants
l’emploi graphiques (menus accordéon…) graphiques, c’est au développeur de
les créer
Nombre de langages utilisés 2 : MXML et ActionScript 2 : JavaScript et XML
Le tableau 1-2 établit une comparaison entre l’utilisation du framework Flex et la méthode
de développement Ajax. Bien entendu, il s’agit là moins de comparer le framework Flex à
l’ensemble des frameworks Ajax (tels que OpenLazlo ou bien encore Google Web Toolkit),
que de mesurer le résultat obtenu.
Comme vous le constatez, la frontière séparant le framework Flex de la méthode de
développement Ajax est très mince. Mais si nous faisons le bilan de cette comparaison, il est
évident que l’atout majeur de Flex est sa faculté à rendre les applications compatibles
avec l’ensemble des navigateurs, grâce à Flash tout en proposant un panel de composants
prêts à l’emploi. C’est également grâce à Flash et ses possibilités multimédias et de mise
en forme des composants que Flex se démarque d’Ajax.
Néanmoins, le principal inconvénient des applications Flex est qu’elles sont hermétiques
à leur environnement : au sein d’une page web, la communication avec les éléments
HTML, JavaScript, etc. est inexistante, à moins de passer par un pont de communication,
réalisé en JavaScript et portant le nom de Flex-Ajax Bridge. Mais nous aurons l’occasion
de revenir sur cette notion dans le chapitre 16. Plutôt que de chercher à se démarquer de
la solution Ajax, les développeurs du framework Flex ont pris conscience de ses faiblesses
et ont opté pour une alliance de technologies.
De plus, on souligne souvent que l’exécution d’une application Flash est plus lente
qu’une application HTML utilisant Ajax. Si ce point n’est pas négligeable, rappelons
qu’une application Flex est développée pour un Flash Player précis, et compilée pour
fonctionner avec ce dernier, ce qui permet une meilleure interopérabilité et donc un gain de
performance. Nous verrons qu’il nous est possible d’optimiser ce temps d’exécution grâce
à l’analyse des processus et à l’étude de l’occupation mémoire de certaines procédures.
Flex et ses concurrents
Encore restreint il y a quelques années, le marché de la RIA, tend peu à peu à se développer :
• La technologie XUL (XML-based User interface Language), initiée par Mozilla, consiste,
tout comme le framework Flex, à décrire les interfaces graphiques à l’aide de XML.
• Le framework OpenLazlo se rapproche du framework Flex par la génération
d’interfaces graphiques basées sur la technologie Flash (http://www.openlaszlo.org/).
• Entièrement basé sur la technologie Ajax, le framework Google Web Toolkit, permet
de créer également des interfaces client riches assez intéressantes en termes de=Flex3 FM.book Page 10 Mardi, 2. décembre 2008 3:32 15
Comprendre Flex 3
10
PARTIE I
fonctionnalités. Citons par exemple l’application de géolocalisation Google Map
(http://maps.google.fr/).
Néanmoins, le principal concurrent de Flex 3 est la plate-forme de développement
Silverlight de Microsoft. Elle offre un environnement de développement semblable en
termes de fonctionnalités, tout en se différenciant par l’utilisation du langage XAML
pour la description des interfaces et de JavaScript pour la partie logique applicative.
L’exécution de ces applications diffère également par l’utilisation d’un plug-in à installer
sur le navigateur.
Alors, vers quelle solution faut il se diriger ? La première chose à prendre en compte est
la politique informatique de l’entreprise. Si la norme est de limiter l’usage des projets
libres ou si l’entreprise est en partenariat avec Microsoft, le choix s’orientera naturellement
vers Silverlight, sinon l’usage de Flex semble être tout indiqué. Le second argument en
faveur de la technologie Flex est qu’elle utilise le Flash Player, compatible avec toutes les
plates-formes, pour exécuter l’application, alors qu’il faudra télécharger un plug-in propre
à Microsoft, qui ne semble pas encore être officiellement compatible avec Linux.
Silverlight et Linux
Selon certaines sources, ce problème de compatibilité avec Linux devrait bientôt complètement disparaître.
Enfin, pour utiliser Silverlight, il faut employer l’environnement de développement Visual
Studio dont le prix avoisine les 1 000 €. Ce point peut éventuellement porter préjudice à
Silverlight et avantager Flex. En effet, là où nous avons besoin d’un module applicatif,
nous sommes obligés d’acquérir l’ensemble de l’eneloppement. Mais
les choses devraient sans doute évoluer au cours de l’année 2009. Ce produit est donc à
suivre de très près.
Bibliographie
Silverlight 2 de Gérard Leblanc, éditions Eyrolles, 2008.
Les limites de Flex
Comme toute solution informatique, Flex a ses propres limites, parfois décriées par les
développeurs Ajax ou Flash désireux de remettre en question jusqu’à l’utilité de ce
framework. Nous allons donc essayer d’apporter quelques éléments de réponse afin
d’éclaircir tout ceci.
« L’exécution d’une application Flex nécessite la présence du Flash Player sur le
poste client ! »
Cette condition sine qua non peut en effet être un frein à l’utilisation des applications
Flex. Néanmoins, le lecteur Flash assure une stabilité d’exécution des applications sur
l’ensemble des machines à l’inverse d’Ajax dont le comportement peut différer d’un
navigateur à un autre. Il s’agit donc d’un mal pour un bien. Sachant que la plupart des=Flex3 FM.book Page 11 Mardi, 2. décembre 2008 3:32 15
Pourquoi Flex ?
11
CHAPITRE 1
machines sont équipées du Flash Player… est-ce une raison valable pour en dénigrer
l’utilisation ?
« Le framework Flex ne propose pas d’outils dédiés au graphisme ! »
Comme nous l’avons évoqué précédemment, Flex est basé sur Flash, ce qui simplifie
beaucoup la réalisation d’interfaces graphiques riches. Il n’est nullement question de
créer des animations comme nous pourrions le faire avec Flash CS3 ! Pour pallier ce
problème, Flex contient un composant, nommé SWFLoader, permettant d’importer des
animations Flash.
« Le Flash Player n’est pas compatible avec les processeurs 64 bits ! »
En effet, à l’heure ou nous écrivons ces lignes, le Flash Player n’est pas supporté par les
machines équipées d’un processeur 64 bits. Bien que cela concerne actuellement peu de
machines, la solution préconisée par Adobe consiste à exécuter un navigateur 32 bits
compatible avec les machines 64 bits pouvant alors afficher les applications Flash.
« Dans une application Flash, il est impossible d’utiliser les boutons Précédent et
Suivant du navigateur ! »
Depuis la version 3 du framework, ceci est tout à fait possible grâce à la notion de deep
linking. En effet, elle permet de naviguer à l’intérieur d’une application à l’aide des boutons
Suivant et Précédent du navigateur, comme il est possible de le faire dans toute application
web. Nous développerons cette fonctionnalité dans le chapitre 16.
« Une application Flash est difficile à référencer dans les moteurs de recherche ! »
Certains moteurs de recherche comme Google sont dorénavant capables d’analyser le
contenu d’un fichier SWF. Le référencement d’une animation Flash est donc possible. Dans
tous les cas, n’oublions pas qu’une application Flash est généralement contenue dans une
page HTML. Ceci permet alors d’y stocker l’ensemble des informations de référencement
même si, à l’heure où nous écrivons ces lignes, les informations indexées ne sont pas
aussi pertinentes que celles d’un site HTML.
Bien entendu, nous n’avons pas recensé l’ensemble des remarques soulevées par les «
proAjax » ou « pro-Flash ». Il est important de retenir qu’Adobe met tout en œuvre pour
pallier l’ensemble des problèmes qui pourraient mettre son produit en difficulté. Ceci
nous amène donc à dire que le projet Flex 3 a atteint un degré de maturité non négligeable
et qu’il s’agit d’une valeur sûre.
Pourquoi choisir Flex ?
Il ne s’agit pas de reprendre les arguments commerciaux édictés par Adobe mais de vous
faire part de nos constatations suite à notre expérience de l’utilisation de ce framework à
travers des projets de différentes natures.
Si nous devions vous convaincre d’utiliser Flex plutôt qu’une autre technologie, voici ce
que nous vous avancerions :=Flex3 FM.book Page 12 Mardi, 2. décembre 2008 3:32 15
Comprendre Flex 3
12
PARTIE I
• Flex apporte une valeur ajoutée indéniable au niveau commercial par la richesse des
interfaces développées (ce qui est beau est vendeur). Pour vous en rendre compte, il
vous suffit de visiter la page d’exemple du site d’Adobe : http://www.adobe.com/devnet
/flex/?tab:samples=1.
• Ce framework augmente la rapidité et la qualité de développement grâce à l’IDE Flex
Builder.
• Il s’adapte aux besoins en offrant la possibilité de créer ses propres composants. Nous
nous pencherons sur ce point au chapitre 10.
• Les applications se comportent de manière identique quelles que soient les plates-formes
et les conditions d’utilisation.
• Flex permet de réaliser des applications bureautiques riches (ou RDA, Rich Desktop
Application) grâce à la machine virtuelle Adobe AIR (ce que nous verrons au
chapitre 19).=Flex3 FM.book Page 13 Mardi, 2. décembre 2008 3:32 15
2
À la découverte
du framework Flex 3
Dans ce chapitre – peut être l’un des plus importants de cet ouvrage – nous allons disposer
les premières briques qui vont nous permettre de comprendre les fondements essentiels
du framework Flex. Ces fondements sont la base de l’utilisation du framework car ils
permettent d’en connaître le fonctionnement et les possibilités mais également les limites.
Rôle du front end
La notion de découpage d’une application en trois couches distinctes est bien connue des
développeurs de nouvelles technologies (J2EE, PHP…). Néanmoins, si vous êtes néophyte
en la matière et que cela ne vous évoque rien, ne vous inquiétez pas, nous allons tout de
suite remédier à cela.
Architecture n-tiers
Une application peut être divisée en plusieurs couches ou tiers applicatifs, nous parlons
alors d’une architecture n-tiers. Ainsi, si nous subdivisons une application en trois couches
distinctes, nous obtenons une architecture 3-tiers :
• La couche Présentation est chargée, comme son nom l’indique, de présenter les données
(interface Homme-Machine ou IHM).
• La couche Métier implémente la logique métier (règle de gestion, etc.).
• La couche d’accès aux données réalise la tâche de persistance des données (stockage)
via l’utilisation d’une base de données, par exemple.=Flex3 FM.book Page 14 Mardi, 2. décembre 2008 3:32 15
Comprendre Flex 3
14
PARTIE I
Chaque couche propose des services qu’elle met à disposition de la couche qui lui est
directement supérieure. Ainsi, la couche la plus élevée ne peut communiquer avec la
couche la plus basse de l’architecture que par la couche intermédiaire, comme l’illustre la
figure 2-1.
Figure 2-1
Architecture 3-tiers
Positionnement d’une application Flex
Au cours du chapitre précédent, nous avons défini le rôle du framework Flex comme
étant un outil de création d’interfaces clientes riches (RIA). De ce fait, le positionnement
des applications réalisées à l’aide de ce framework dans une architecture de type 3-tiers,
se fera naturellement au niveau de la couche Présentation (tiers 1).
Ce positionnement en haut de l’architecture implique donc une notion que nous devrons
toujours prendre en compte lors de la création d’une nouvelle application : une application
réalisée à l’aide du framework Flex ne peut pas accéder directement aux informations
contenues dans une base de données, comme c’est le cas pour les applications Java ou
PHP.
Par conséquent, si nous souhaitons développer une application utilisant des informations
contenues dans une base de données, nous devrons implanter une couche Métier
intermédiaire offrant un certain nombre de services écrits dans un langage serveur (PHP, Java,
ColdFusion…). Ces services seront capables de se connecter à la base de données et d’y
effectuer des requêtes pour ensuite renvoyer les résultats à notre application. L’appel de
ces services à partir de l’application se fera via des composants spécifiques du framework
Flex tels que les composants HTTPService ou RemoteObject (voir chapitre 13).=Flex3 FM.book Page 15 Mardi, 2. décembre 2008 3:32 15
À la découverte du framework Flex 3
15
CHAPITRE 2
Dans cette section, nous avons donc vu un élément essentiel du framework Flex dont
l’impact n’est pas négligeable si vous souhaitez créer des applications accédant à des
données : la mise en place impérative d’une couche Métier écrite dans un langage serveur.
Néanmoins, toutes les applications Flex n’utilisent pas forcément des données, c’est le
cas par exemple d’une calculatrice ou d’un simulateur d’emprunt. Qui plus est, il nous est
également possible de stocker des informations de façon temporaire au sein de notre
application à l’aide d’un modèle de données qui, là encore, est bien connu des développeurs Java.
L’application et le modèle-vue-contrôleur
Maintenant que nous savons que le framework Flex n’a pour but que la création de la
partie graphique d’une application, nous pouvons entrer dans le détail de la couche
graphique en abordant la notion de modèle-vue-contrôleur (MVC). Cette couche peut
elle aussi se découper en trois éléments :
• Le modèle représente les données et les règles métiers via un ensemble de classes et de
méthodes associées. Il permet également l’accès aux services décrits dans la couche
Métier de l’architecture 3-tiers. Enfin, c’est lui qui se chargera de prévenir la vue d’un
changement de données afin que celle-ci se mette à jour.
• La vue va afficher les données du modèle et permettre l’interaction avec l’utilisateur,
c’est l’interface homme-machine (IHM) de votre application. Notons, qu’il est tout à
fait possible d’avoir plusieurs vues affichant les données d’un même modèle.
• Le contrôleur, quant à lui, va jouer le rôle d’interface entre la ou les vues et le modèle.
Il récupère les actions de l’utilisateur pour ensuite les rediriger vers le modèle sous
forme d’événements et mettre à jour la vue appropriée.
Si vous n’avez jamais été confronté à la notion de MVC, ce qui vient d’être énoncé doit
vous paraître assez obscur. Pour vous aider à mieux comprendre cette notion, nous allons
l’illustrer à l’aide d’un petit exemple. Considérons l’action sur un bouton permettant de
lister l’ensemble des données contenues dans une table et de les afficher dans une grille
de résultats (figure 2-2).
1. L’utilisateur clique sur le bouton Afficher les données. Cette action déclenche alors
un événement que la vue se charge de faire suivre au contrôleur.
2.Le contrôleur approprié à cette action traite l’information reçue. Ce traitement
consiste à choisir la vue appropriée et à lui fournir les informations dont elle a besoin
en les choisissant à partir du modèle.
3. Le modèle fait appel au service de la couche Métier de l’architecture 3-tiers permettant
d’exécuter la requête de sélection, et se met à jour en fonction des données reçues.
Cette mise à jour peut être notifiée à la vue afin que cette dernière puisse être actualisée.
4. Le modèle indique au contrôleur que le traitement est terminé et envoie les données
au contrôleur.
5. Le contrôleur met à jour la vue afin de présenter les données à l’utilisateur.=Flex3 FM.book Page 16 Mardi, 2. décembre 2008 3:32 15
Comprendre Flex 3
16
PARTIE I
Figure 2-2
Architecture MVC
Le modèle MVC et la notion de design pattern
Le modèle MVC est un design pattern (modèle de conception), ce qui signifie qu’il peut être appliqué dans
tout type d’application et ne se limite donc pas aux applications Flex.
Si nous transposons cette explication à l’utilisation du framework Flex, l’implémentation
du modèle peut s’effectuer à l’aide du langage ActionScript, dont l’orientation objet, très
poussée depuis la dernière version en date, permet de créer facilement des classes et des
méthodes associées. Le contrôleur dont le rôle principal est l’interfaçage entre le modèle
et la vue sera lui aussi développé à l’aide de ce langage et souvent mis en application
grâce à la notion de DataBinding (voir chapitre 11). La vue sera quant à elle implémentée
à l’aide du langage MXML prévu à cet effet ; celui-ci ayant pour fonction principale la
description des interfaces graphiques.
Balise MODEL
Le langage MXML met à disposition la balise MODEL qui permet, comme son nom l’indique, de déclarer un
modèle de données.
Les langages ActionScript et MXML peuvent vous être totalement inconnus si vous n’êtes
pas habitué à développer des applications Flash. Comme nous l’avons déjà évoqué, une
application Flex est le résultat du mariage de ces deux langages où l’un permet de créer
l’interface graphique et l’autre de mettre en place la logique applicative. C’est donc tout
naturellement que nous allons poursuivre par la présentation de ces deux langages.=Flex3 FM.book Page 17 Mardi, 2. décembre 2008 3:32 15
À la découverte du framework Flex 3
17
CHAPITRE 2
Le langage MXML
Le MXML (Macromedia fleX Markup Language) est avant tout un langage de balises basé
sur XML. Son rôle principal est de permettre l’agencement des composants au sein d’une
interface graphique. Ainsi, chaque composant est défini par des balises spécifiques :
• Un bouton est défini par les balises <mx:Button></mx:Button>.
• Une zone de saisie est définie par les balises <mx:TextInput></mx:TextInput>.
• Un panel servant de conteneur de composants est défini par les balises <mx:Panel>
</mx:Panel>.
Bien entendu, le langage MXML ne se limite pas uniquement à la mise en place de
composants graphiques. Il permet également d’implémenter des composants capables de
faire appel à des services web, par exemple les composants HTTPService (<mx:HTTPService/>)
et WebService (<mx:WebServices/>).
Dans la mesure où le framework Flex a pour rôle de créer la couche graphique d’une
application, il est indispensable que toute application soit composée d’au moins un fichier
portant l’extension .mxml et dont le contenu de base sera le suivant (cas d’une application
exécutée dans le navigateur web) :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
</mx:Application>
La balise mx:Application permet d’indiquer qu’il s’agit du fichier applicatif principal. La
référence à l’espace de noms http://www.adobe.com/2006/mxml sert à définir l’ensemble
des balises du langage. Cet espace de noms est préfixé par la valeur mx, ce qui est fort
apprécié lors de l’utilisation de plusieurs espaces de noms au sein d’un même fichier
MXML. En effet, le préfixe permet d’identifier l’espace de noms concerné et de faire appel
aux balises associées, évitant ainsi toute confusion possible. De ce fait, les balises du
langage MXML seront appelées comme suit :
<mx:Button></mx:Button>
Chaque balise MXML correspond à une classe ou à des propriétés de classes
d’ActionScript. Lors de la phase de compilation du fichier applicatif principal, l’ensemble du
fichier MXML est analysé et transformé en classes ActionScript, ces dernières étant
compilées en code-octet (pour être exécutées par le Flash Player) et stockées dans un
fichier au format SWF. Vous l’aurez compris, tout ce qui est effectué à l’aide du langage
MXML pourrait être réalisé directement avec ActionScript.
Multiplicité des espaces de noms dans le framework Flex
Il est nécessaire de préfixer les espaces de noms afin d’éviter toute confusion quant à leur utilisation dans
le code. La question que l’on est en droit de se poser est l’utilité d’en déclarer plusieurs au sein d’une
même application Flex. Au chapitre 10, nous verrons que pour utiliser des composants personnalisés,
nous aurons recours à plusieurs espaces de noms, chacun étant associé à un composant.=Flex3 FM.book Page 18 Mardi, 2. décembre 2008 3:32 15
Comprendre Flex 3
18
PARTIE I
Flex 4
Flex 4 n’est annoncé que pour la seconde partie de l’année 2009. Mais nous savons dores et déjà, que
l’utilisation du MXML y sera quelque peu différente. En effet, le FXG, nouveau langage dédié à la réalisation
du design des interfaces, laissera à MXML 2009 les fonctions que l’on pourrait qualifier de « fonctions
métiers », à savoir la gestion d’appel du service web, de validation de données, etc. Nous aurons l’occasion
de revenir sur ce point au chapitre 25.
Le langage ActionScript
L’ECMA (European Computer Manufacturers Association) est une organisation travaillant
dans le domaine de la standardisation informatique, notamment des langages de scripts
grâce au standard ECMAScript. Ce standard couvre, entre autres choses, les langages
ActionScript et JavaScript. C’est la raison pour laquelle leurs syntaxes se ressemblent en
bien des points.
ActionScript est donc un langage standardisé (via le standard ECMA-262) dont l’usage
est restreint aux applications Flash et donc à celles créées à l’aide du framework Flex. Ce
langage est orienté objet et permet le développement de la partie dynamique de l’application
ainsi que l’implémentation de la notion de modèle abordée précédemment.
Afin que vous puissiez lire facilement les extraits de code ActionScript présents dans cet
ouvrage, nous avons jugé bon de vous apporter les bases de ce langage en abordant des
notions communes à tout apprentissage d’un nouveau langage :
• les variables ;
• les boucles et les conditions ;
• les opérations booléennes ;
• les procédures et les fonctions ;
• la programmation objet.
Version d’ActionScript
Le framework Flex 3 utilise le langage ActionScript dans sa version 3.
Les variables
Les variables permettent de stocker des informations en vue de les utiliser dans divers
traitements.
Une variable est déclarée par un nom précédé de la mention var. Il est également
indispensable de spécifier le type de la variable déclarée :
var nomVariable:type=Flex3 FM.book Page 19 Mardi, 2. décembre 2008 3:32 15
À la découverte du framework Flex 3
19
CHAPITRE 2
Le tableau 2-1 présente des exemples de déclaration de variables.
Tableau 2-1 Déclaration de variables
Code Description
Chaîne de caractères.var maChaine:String
var monNombre:Number Nombre décimal pouvant être positif ou négatif.
var monEntier:int Nombre entier pouv.
Booléen prenant pour valeur 0, 1, true ou false.var monBooleen:Boolean
Tableau contenant trois éléments.var monTableau:Array = new Array("1","2","3")
Les boucles et les conditions
Nous sommes souvent confrontés à la mise en place de boucles de traitement et à la
vérification de conditions. Voyons comment les implémenter.
Les boucles
Le tableau 2-2 présente la transcription en langage ActionScript des principaux algorithmes
de boucles. Ils permettent de réaliser un traitement selon un nombre d’itérations prédéfinies.
Tableau 2-2 Les boucles
Algorithme Transcription
Pour i est un entier = 1 à i<10 Faire For (i:int=1; i<10;i++) {
[Traitement] [Traitement]
I = i +1 }
Fin pour
I est un entier = 1 i:int = 1;
Tant que I<10 faire while (i<10){
I = i + 1 i++
Fin tant que }
Les conditions
Il existe deux types de conditions : la première consiste à vérifier si une situation est vraie,
la seconde à exécuter un traitement selon un cas précis. Le tableau 2-3 présente leur
implémentation.
Vous pourriez très bien utiliser une suite de if, else… if et else à la place d’un switch,
mais ce dernier vous apporte un plus non négligeable en matière de lisibilité du code.=Flex3 FM.book Page 20 Mardi, 2. décembre 2008 3:32 15
Comprendre Flex 3
20
PARTIE I
Tableau 2-3 Les conditions
Algorithme Transcription
X est un entier = 2 var x:int =2
Si x est supérieur à 10 Alors if (x>10) {
[Traitement] [Traitement]
Sinon } else {
Fin Si }
X est un entier = 10 var x:int = 2
Selon x Switch (i) {
Cas 10 : Case 10 :
Cas 20 : [Traitement]
Fin selon Break;
Case 20 :
[Traitment]
Break;
}
Pour pouvoir vérifier si une condition est vraie, nous avons besoin d’opérateurs de
comparaison. Le tableau 2-4 en dresse la liste exhaustive :
Tableau 2-4 Les opérateurs
Expression Description
X est égal à Y.X == Y
X != Y X est différent de Y.
X === Y X est strictement égal à Y.
X est strictement différent de Y.X !== Y
X est supérieur à Y.X > Y
X < Y X est inférieur à Y.
X est supérieur ou égal à Y.X >= Y
X est inférY.X <= Y
Les opérations booléennes
Comment déclencher un traitement lorsque deux conditions sont vraies ou lorsque l’une des
deux est vraie ? Le tableau 2-5 présente les opérateurs capables de réaliser ces opérations
de vérification.=Flex3 FM.book Page 21 Mardi, 2. décembre 2008 3:32 15
À la découverte du framework Flex 3
21
CHAPITRE 2
Tableau 2-5 Les opérations booléennnes
Expression Description
! X X prend la valeur opposée. Ainsi, si X = vrai alors ! X = faux.
X ET Y doivent être vérifiés (égaux à vrai) pour que le traitement puisse être effectué.X && Y
X OU Y doit être vrai pour que le traitement soit effectué.X || Y
Les procédures et les fonctions
Les procédures et les fonctions sont déclarées par un nom, précédé de la mention function.
Elles ont pour rôle d’exécuter un traitement susceptible d’être appelé plusieurs fois dans
un script. Une fonction retourne un résultat dont le type est spécifié en fin de déclaration.
A contrario, une procédure ne retourne rien, nous spécifierons donc void à la place d’un
type de retour.
Portée des procédures et des fonctions
La portée des procédures et des fonctions doit obligatoirement être mentionnée :
• private (privée) : la procédure ou la fonction ne peut être appelée que par la classe qui la contient.
• protected (protégée) :onction ne peut être appelée que par la classe qui la contient
ou par la classe héritant de cette classe.
• public (publique) : la procédure ou la fonction peut être appelée par l’ensemble des procédures et
fonctions du projet.
• static (statique) :onction n’est créée qu’une seule fois par classe et non pas dans
chaque objet instancié par la classe. On peut donc l’appeler sans instancier l’objet dans lequel elle est
déclarée.
Notons que ces portées peuvent également être appliquées aux variables.
L’exemple de code suivant présente la déclaration d’une procédure dont la portée est
publique et qui accepte un paramètre de type chaîne.
public function enregistrerDonnees(donnees:string):void {
[Traitement d’enregistrement]
}
Par la mention :String, on identifie qu’il s’agit d’une fonction renvoyant une chaîne de
caractères. On constate également que la portée de la fonction est privée par la présence
du terme private.
private function afficherDonnee():String{
var laDonneeARenvoyer:String="info"
Return laDonneeARenvoyer
}=Flex3 FM.book Page 22 Mardi, 2. décembre 2008 3:32 15
Comprendre Flex 3
22
PARTIE I
La programmation objet
Décrire l’ensemble des fonctionnalités d’ActionScript en termes de programmation objet
prendrait une place trop importante au sein de cet ouvrage et n’y apporterait pas de réelle
valeur. C’est par l’analyse de quelques lignes de code que nous vous proposons de découvrir
comment implémenter une classe et ses méthodes.
Package com.monpackage
{
import mx.containers.Canvas;
public class MaClasse extends Canvas
{
// Attribut
private var _nom:String
// Constructeur de la classe
public function MaClasse(parametre:String)
{
super();
_nom = parametre;
}
// Setter et Getter de l’attribut
public function set nom(parametre:String):void{
_nom = parametre
}
public function get nom():String{
return _nom;
}
}
}
Analysons à présent ce code. La première ligne sert à définir le package dans lequel se
situe la classe.
La notion de package
Le fait de séparer votre code en différents packages vous permettra par la suite de pouvoir le relire ou le
modifier facilement. Il s’agit ni plus ni moins de le structurer en dossiers et sous-dossiers.
Vient ensuite l’importation des classes nécessaires aux traitements décrits dans les
méthodes ou à la notion d’héritage. En effet, le compilateur ne connaissant pas votre
code, il vous faut lui indiquer explicitement quelles classes seront utilisées.
On constate qu’une classe est déclarée par la mention class suivie du nom attribué à cette
classe. La notion d’héritage est ici implémentée à l’aide du mot-clé extends. Dans notre
cas, la classe MaClasse hérite de la classe Canvas.=Flex3 FM.book Page 23 Mardi, 2. décembre 2008 3:32 15
À la découverte du framework Flex 3
23
CHAPITRE 2
Les attributs sont ensuite déclarés à la manière d’une variable dont le nom est précédé du
caractère de soulignement (_). Il est ainsi possible d’écrire les méthodes d’accès à cet
attribut comme suit : set nomattribut() et get nomattribut():type.
La méthode set a pour fonction d’affecter une valeur à un attribut, laquelle peut ensuite être
récupérée par l’emploi de la méthode get.
Enfin, pour créer des objets à partir d’une classe, il est nécessaire d’instancier cette
dernière. Pour cela, nous disposons d’un constructeur. Il s’agit d’une méthode portant le
nom de la classe et qui sera automatiquement appelée au moment de l’instanciation de
l’objet. À noter que le type de retour n’est pas précisé pour un constructeur.
Nous venons de décrire les éléments de bases du langage ActionScript dont vous aurez
besoin pour comprendre au mieux les différents extraits de code présentés dans cet
ouvrage. Néanmoins, les subtilités de ce langage n’ayant pas été abordées, nous ne
saurions que trop vous recommander l’acquisition d’un ouvrage spécialisé ou la pratique
d’ActionScript. Nous vous conseillons également de consulter les sites web spécialisés
tels que le site ActionScript.org (http://www.actionscript.org/), qui constitue une mine
d’informations sur ce langage et propose des cours et tutoriaux en téléchargement.
Intéressons nous à présent au mécanisme client/serveur d’une application Flex.
Le mécanisme client/serveur
Comme nous l’avons vu, une application Flex est composée d’un fichier MXML principal
faisant appel à des fichiers ActionScript permettant d’intégrer la notion d’architecture
MVC. L’ensemble de ces fichiers est ensuite compilé, donnant naissance à un fichier
SWF pouvant être intégré dans une page HTML. Ceci n’est qu’une petite partie du
processus. Nous allons à présent rassembler l’ensemble des informations véhiculées tout
au long de ce chapitre afin d’observer le mécanisme complet d’une application Flex.
Tout d’abord, nous avons vu qu’il est possible d’architecturer une application en trois
couches distinctes, chacune d’entre elles pouvant être hébergée (sous sa forme extrême)
sur trois serveurs différents :
• le serveur de base de données (couche Accès aux données) ;
• le serveur d’application (couche Métier) ;
• le serveur Flex (couche Présentation contenant le fichier SWF et la page web associée).
Imaginons à présent un utilisateur souhaitant utiliser l’application Flex située à l’adresse
http://www.monapplicationflex.com et pointant bien évidemment sur le serveur de
présentation qui sera le point d’entrée du processus (figure 2-6).
La première phase va consister à offrir l’application au client connecté (figure 2-6, ➊ et
➋). Nous entendons par « offrir » le fait que l’application sera téléchargée et exécutée sur
le poste client, ce qui nécessite par conséquent que Flash Player soit installé sur celui-ci.=Flex3 FM.book Page 24 Mardi, 2. décembre 2008 3:32 15
Comprendre Flex 3
24
PARTIE I
Attention
Le fait qu’une application soit exécutée sur le poste client induit un paramétrage consciencieux de cette
dernière. Lors du développement de l’application, nous devons faire appel aux services situés sur des
serveurs présents sur notre réseau local. Lorsque l’application est mise en ligne, n’oubliez pas que ces
serveurs ne sont plus accessibles via l’adresse IP locale mais à l’aide de leur adresse publique ! Les schémas
des figures 2-3, 2-4 et 2-5 illustrent ce principe.
Figure 2-3
Accès aux
services dans
un environnement
de développement
Sur ce schéma, nous pouvons accéder facilement aux services présents sur le serveur puisqu’il fait partie
de notre réseau local.
Figure 2-4
Paramétrage
incorrecte
de l’application :
recherche des
services sur le réseau
local du client
Si le changement d’adresse IP du serveur contenant les services n’est pas effectué lors du déploiement,
ces derniers ne seront plus accessibles par le poste client.
Figure 2-5
Paramétrage correcte
de l’application :
recherche
des services via
l’adresse IP Wan
du serveur
Pour résoudre ce problème, nous vous conseillons de définir l’ensemble des paramétrages dans un fichier
XML qui sera lu lors de l’initialisation de l’application sur le poste client. L’usage de ce type de fichier exclut
de ce fait une recompilation de l’application pour chaque modification de paramétrage.=Flex3 FM.book Page 25 Mardi, 2. décembre 2008 3:32 15
À la découverte du framework Flex 3
25
CHAPITRE 2
L’application présente sur le serveur permettant de lister les produits d’un magasin, la
deuxième étape va consister à faire appel à une suite de services permettant d’obtenir le
résultat attendu (ici, la liste des produits).
Lorsque l’utilisateur cliquera sur le bouton Mise à jour situé sur l’interface graphique,
cela déclenchera un événement qui sera transmis au contrôleur (figure 2-6, ➌), lequel ira
chercher le modèle concerné par cet événement (➍).
Le modèle va ensuite faire appel au service approprié situé sur le serveur d’application (➎).
Ce service va alors exécuter une requête sur le serveur de base de données (➏), s’en
suivra une succession de réponses de la part des différents serveurs concernés (➐ et ➑).
La dernière étape consistera ensuite à mettre à jour la couche de présentation via
l’interaction du modèle avec le contrôleur (➒ et ➓).
Figure 2-6
Mécanisme client/serveur
En résumé
Dans ce chapitre, nous avons voulu poser les premières pierres de l’édifice en vous
apportant les connaissances de base sur le rôle et l’utilisation du framework Flex. Les
points essentiels à retenir sont les suivants :
• Flex ne concerne que la partie graphique d’une application (front end).
• Une application Flex est composée de fichiers aux formats MXML et ActionScript. Le
langage MXML sert au développement de l’interface graphique et chacune de ses
balises correspond à une classe ou une propriété du langage ActionScript. Tout ce qui
est réalisé à l’aide du langage MXML peut également l’être réalisé à l’aide
d’ActionScript.=Flex3 FM.book Page 26 Mardi, 2. décembre 2008 3:32 15
Comprendre Flex 3
26
PARTIE I
• La partie graphique peut être implémentée selon l’architecture MVC, largement répandue
dans la plupart des grosses applications et ce, à l’aide de la combinaison des langages
ActionScript (modèle et contrôleur) et MXML (vues). Flex ne peut interagir directement
avec une source de données, mais uniquement en faisant appel à des services externes
ayant cette capacité.
• Une application Flex est téléchargée et exécutée sur le poste client, ce qui nécessite un
paramétrage assidu de l’application lorsque celle-ci fait appel à des services.
Ce chapitre nous a permis de délimiter le périmètre d’action du framework Flex. À ce
stade, vous pouvez légitimement vous interroger sur l’utilité de développer vos interfaces
en Flex alors que le langage HTML sait très bien le faire. À cette interrogation, nous
pouvons répondre que Flex étant basé sur la technologie Flash, dont la réputation en
termes d’animation n’est plus à faire, la richesse des IHM en termes de design et de
fonctionnalité s’en trouve accrue, ce qui augmente le pouvoir de séduction de vos applications
et par conséquent leur rentabilité ! Il ne nous reste plus qu’à nous mettre au travail et à
poursuivre par l’étude du SDK du framework Flex. =Flex3 FM.book Page 27 Mardi, 2. décembre 2008 3:32 15
3
Développer
avec le kit Flex SDK
Un peu à la manière de Java et son SDK (Software Development Kit), le kit de
développement Flex SDK offre un ensemble de fonctionnalités permettant de réaliser
gratuitement des applications à l’aide du framework Flex. Ce kit comprend des compilateurs, un
débogueur ainsi que les bibliothèques de composants du framework permettant de créer
des applications.
Depuis la version 3 de Flex, la volonté d’Adobe est de rendre le SDK disponible sous
licence MPL (Mozilla Public License). Selon l’éditeur, le passage à l’Open Source permettra
une augmentation de l’utilisation de son produit. En effet, le SDK pourra être intégré au
sein de divers IDE (Integrated Development Environment) et les entreprises à philosophie
Open Source pourront opter pour l’utilisation de Flex. Enfin, comme chacun le sait, les
produits libres sont souvent supportés par une communauté active, ce qui permet de
les faire évoluer et d’offrir un support très réactif. Ceci assure ainsi à Flex une place
prédominante par rapport à ses concurrents, notamment le géant Microsoft et son produit
SilverLight, dont le choix stratégique viserait à imiter Adobe.
Licence MPL
Contrairement à la licence GPL (General Public License), qui oblige à fournir les sources de l’ensemble
d’un programme, la MPL permet de ne pas divulguer certaines parties du programme. Ainsi, l’entreprise
éditrice peut ne communiquer que certaines parties du code de son logiciel et garder secrètes les parties
qu’elle juge sensibles.=Flex3 FM.book Page 28 Mardi, 2. décembre 2008 3:32 15
Comprendre Flex 3
28
PARTIE I
Prérequis
Avant d’aller plus loin, il convient de vérifier la présence des éléments indispensables au
bon fonctionnement du SDK.
Du point de vue matériel, vous devez disposer au minimum de 512 Mo de RAM et de
200 Mo d’espace disque.
Pour l’aspect logiciel, il est impératif que Java soit installé et correctement configuré sur
votre machine, bien que le Runtime de Java (JRE, Java Runtime Environment) suffise pour
exécuter Flex SDK.
JRE et JDK (Java Developpement Kit)
Il peut être intéressant d’installer le Java Developpement Kit (JDK) si vous souhaitez par la suite développer
vos propres applications Java. Sur ce point, nous verrons au chapitre 14 que Flex est capable d’interagir
avec les applications développées dans ce langage. De plus, vous en aurez besoin pour mener à bien les
exemples mentionnés dans ce chapitre. Étant donné que le JRE est contenu dans le JDK, pourquoi s’en
priver ?
Dans cet ouvrage, nous utiliserons la version 6 du JDK (Java SE6), qui peut être téléchargée
sur le site web de Sun Microsystems à l’adresse suivante : http://java.sun.com/ (rubrique
Downloads>Java SE). Une fois l’archive téléchargée, procédez à son installation en suivant
les indications de l’assistant.
Vous pouvez éventuellement configurer la variable d’environnement PATH de votre
système en y ajoutant le chemin du répertoire bin de Java. Ceci vous permettra d’appeler
les programmes Java (java.exe, javac.exe, etc.) à partir de n’importe quel répertoire de
votre système.
Important
Les instructions d’installation de logiciel ou de configuration d’environnement présentées dans cet ouvrage
sont essentiellement orientées vers le système d’exploitation Windows, car il s’agit de l’environnement le
plus utilisé.
Voici la marche à suivre pour modifier la variable PATH :
1. Cliquez sur Démarrer et sélectionnez Panneau de configuration>Système.
2. Dans la fenêtre qui apparaît alors à l’écran, cliquez sur l’onglet Avancé puis sur le
bouton Variables d’environnement.
3. Dans la zone Variables système, sélectionnez la variable PATH et cliquez sur le bouton
Modifier.
4. À la suite des valeurs déjà présentes, ajoutez le chemin du répertoire bin de Java (par
défaut, C:\Program Files\Java\jdk1.6.0_<version>\bin) précédé d’un point-virgule.
5. Validez la saisie et fermer l’ensemble des fenêtres précédemment ouvertes.=Flex3 FM.book Page 29 Mardi, 2. décembre 2008 3:32 15
Développer avec le kit Flex SDK
29
CHAPITRE 3
L’installation du JDK de Java est à présent terminée. Pour vérifier la bonne configuration
de votre système, ouvrez l’invite de commandes MS-DOS et saisissez l’instruction
suivante :
java –version
Le résultat obtenu doit être semblable à celui de la figure 3-1.
Figure 3-1
Vérification de la bonne configuration de Java
Vous aurez également besoin du Flash Player 9 d’Adobe, grâce auquel vous pourrez
exécuter les applications Flex. Son installation s’effectue en ligne à partir du site web
d’Adobe : http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=Shockwave
Flash.
Vous disposez à présent de tous les outils nécessaires pour utiliser le kit Flex SDK
correctement. Passons maintenant à son installation.
Mise en garde quant au choix du Flash Player
Comme nous l’avons vu au chapitre précédent, la version actuelle du Flash Player est la version 10.
Cependant, il se peut que vous possédiez encore la version 9. Mettre à jour le Flash Player alors que vous
avez déjà installé l’environnement de développement peut engendrer des disfonctionnements du Flex
Builder, notamment pour la fonctionnalité de débogage. Afin de réaliser l’ensemble des cas pratiques de
cet ouvrage dans les meilleurs conditions, nous vous conseillons de choisir l’une ou l’autre version et de
ne pas procéder encore à la mise à jour. Si pour une raison ou une autre, votre Flash Player est mis à jour
pour la version 10, reportez-vous au chapitre 25, où nous expliquerons comment adapter votre projet à la
version 10. Enfin, nous attirons votre attention sur le fait que la version 10 du Flash Player étant récente,
nous n’avons pas pu tester dessus l’ensemble des fonctionnalités de Flex 3. Par prudence, nous vous
conseillons d’installer la version 9 (http://www.adobe.com/support/flashplayer/downloads.html),
dans le cas où vous auriez déjà effectué la mise à jour de votre système.
Installation du kit Flex SDK
Pour commencer, téléchargez le kit Flex SDK sur le site d’Adobe à l’adresse suivante :
http://www.adobe.com/products/flex/flexdownloads/.
Une fois le téléchargement terminé, décompressez l’archive obtenue dans un répertoire
de votre choix. Nous avons ici choisi le répertoire C:\flex_sdk que nous nommerons=Flex3 FM.book Page 30 Mardi, 2. décembre 2008 3:32 15
Comprendre Flex 3
30
PARTIE I
root_flexsdk par convention. Le répertoire root_flexsdk contient désormais les dossiers
présentés et décrits dans le tableau 3-1.
Tableau 3-1 Les différents dossiers du répertoire root_flexsdk
Nom du dossier Description
Contient un ensemble de tâches Ant permettant d’automatiser certaines opérations lors desant
phases de compilation et de déploiement.
Contient l’ensemble de la documentation de l’outil ASDoc permettant de créer la documenta-asdoc
tion de votre application sous forme de pages HTML.
bin Contient un ensemble d’exécutables, tels que mxmlc.exe, compc.exe (voir sections suivantes)
ou encore asdoc.exe.
Contient l’ensemble des classes, des fichiers de configuration et du code source du framework.frameworksle des bibliothèques Java du framework.lib
runtimes Contient les exécutables permettant d’installer l’environnement Adobe AIR et le module de
débogage de Flash Player 10.
Contient des exemples d’applications.samples
Contient des templates de pages HTML contenant l’application Flex. Ceux-ci contiennenttemplates
notamment la fonctionnalité de détection du Flash Player. Ainsi, si vous utilisez un template
proposant cette fonctionnalité et que l’utilisateur ne possède pas le Flash Player, son
téléchargement sera automatiquement proposé.
L’installation est à présent terminée et le Flex SDK est opérationnel. Voyons à présent le
cœur du SDK, dont les compilateurs sont les principaux éléments.
Les compilateurs
Comme nous l’avons vu au chapitre précédent, une application Flex est composée de
fichiers MXML et ActionScript. Ces fichiers sont ensuite compilés, donnant naissance à
un fichier SWF. Flex distingue deux types de compilations qui dépendent chacune d’un
compilateur spécifique : la compilation d’application et la compilation de composants.
mxmlc : le compilateur d’application
Le rôle principal du compilateur mxmlc est de créer un fichier de type SWF (Shockwave
Flash) à partir des fichiers ActionScript et MXML d’une application Flex (figure 3-2).
Ce compilateur s’exécute en ligne de commande à l’aide de l’exécutable mxmlc.exe situé
dans le dossier bin du répertoire root_flexsdk.=Flex3 FM.book Page 31 Mardi, 2. décembre 2008 3:32 15
Développer avec le kit Flex SDK
31
CHAPITRE 3
Figure 3-2
Mécanisme de compilation mxmlc
La syntaxe générale d’exécution de la compilation est la suivante :
mxmlc options fichier
où mxmlc fait appel au compilateur mxmlc.exe, options spécifie les options de compilation
(date de création, nom du fichier SWF généré…) et fichier indique le fichier MXML à
compiler.
Le fichier MXML principal de l’application est spécifié en omettant les fichiers
ActionScript associés à celle-ci. Cependant, les fichiers ActionScript liés à l’application ne sont
pas oubliés lors de la compilation grâce aux liens spécifiés dans le fichier MXML principal.
Il est également important de noter que ce compilateur ne génère pas la page HTML
chargée de contenir le SWF créé. Elle devra être créée manuellement.
compc : le compilateur de composants
Flex offre la possibilité de créer des composants afin de les réutiliser dans plusieurs
applications différentes. Un composant peut être assimilé à une application Flex dans la
mesure où il est également composé d’un fichier MXML et de fichiers ActionScript.
La compilation de ces composants est réalisée à l’aide du compilateur compc dont la
syntaxe est décrite par l’exemple suivant :
compc -o composant.swc -root fichierMXML.mxml
où l’option –o permet de spécifier le nom du composant compilé et l’option –root indique
le nom du fichier MXML utilisé pour la compilation du composant. Cette simple ligne de
code permet de générer un composant (composant.swc) à partir d’un fichier MXML.