Flex 3, framework de référence pour le développement Flash Open Source, le SDK de Flex offre un véritable environnement en phase avec les bonnes pratiques de génie logiciel (MVC…) et de gestion de projet (travail collaboratif…). Il propose des bibliothèques de composants graphiques et des fonctions pour dialoguer avec le serveur, et s’interfacer avec des bases de données via des serveurs PHP/J2EE.
Une bible avec de nombreux cas pratiques et retours d’expérience Programmation Flex 3 explique aux développeurs web, qu’ils soient ou non rompus à Flash et ActionScript, comment utiliser le framework Flex pour concevoir et créer des applications web dites « riches » (RIA), à l’instar des applications Ajax ou Silverlight. Tout en rappelant les langages sur lesquels s’adosse cette technologie (ActionScript, MXML), l’ouvrage passe en revue l’intégralité des techniques de développement Flex : maîtrise de l’environnement de travail, création d’interfaces interactives et évoluées avec les vues, transitions et thèmes, gestion des données et échanges avec le serveur via RPC, mais aussi gestion et création des composants, débogage et optimisation. Il les met ensuite en situation avec deux études de cas détaillant la création d’un site e-commerce puis d’un lecteur MP3 tournant sur Adobe Air. Au sommaire Pourquoi utiliser Flex ? • Flex dans une architecture trois tiers • Flex et MVC • MXML et Actionscript • Procédures et fonctions • Programmation objet • Mécanisme client/serveur • Flex SDK et Flex Builder • Gestion d’un projet • Arborescence d’un projet Flex Builder • Exécution et test • Travail collaboratif • Export et import • Création d’interfaces graphiques • Composants de contrôles • Boutons • Listes • Zones de texte • Tableaux • 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 ActionScript ? • compc • Gestion des données • DataBinding • Validation des données • Accès aux services de la couche métier • HTTPService ou REST • RemoteObject • Flex et PHP • AMFPHP • HTTPService et ActionScript • Le générateur de Flex Builder • Flex et J2EE avec BlazeDS • Composants émetteurs et récepteurs • Créer des applications modulaires • Interagir avec le conteneur web • Deep linking • Flex-Ajax Bridge • Débogage d’une application • Points d’arrêt et exécution pas à pas • Analyse des performances • Optimisation et déploiement • Réduire la taille des fichiers SWF • Adobe AIR • Flex 4 Gumbo.
A.Vannieuwenhuyze Ingénieur concepteur dans une SSII et responsable d’applications pour l’association Outcomerea, spécialisée dans le domaine de la recherche médicale, Aurélien Vannieuwenhuyze s’est d’abord investi dans la conception et la réalisation d’applications J2EE. Pour créer des applications Internet riches, il a étudié les frameworks alliant richesse et rapidité de réalisation. Son choix s’est porté sur Flex, avec lequel il a réalisé des applicatifs à vocation médicale et des extranets pour de grandes entreprises. R. Pouclet Passionné de développement multimédia depuis plusieurs années, Romain Pouclet se tourne aujourd’hui vers le développement d’interfaces riches et de solutions pour supports mobiles.
À qui s’adresse cet ouvrage ?
Conception : Nord Compo
9 782212 123876
@
Sur le site www.editions-eyrolles.com – Téléchargez le code source des exemples et cas pratiques du livre
Code éditeur : G12387 ISBN : 978-2-212-12387-6
– À 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.
35 €
Flex 3
Applications Internet riches avec Flash ActionScript 3, MXML et Flex Builder
A. Vannieuwenhuyze
Flex 3
Programmation
Programmation
Programmation e Couvr tés uveau o n s le x 4 de Fle
Flex 3
Applications Internet riches avec Flash ActionScript 3, MXML et Flex Builder
Aurélien Vannieuwenhuyze
Programmation
FLEX 3
Programmation
FLEX 3
Applications Internet riches avec Flash ActionScript 3, MXML et Flex Builder
Aurélien
Vannieuwenhuyze
Avec
la
contribution de Romain Pouclet
CHEZ LE MÊME ÉDITEUR
G. Leblanc. – Silverlight 2. N°12375, 2008, 330 pages.
D. Séguy, P. Gamache. – Sécurité PHP 5 et MySQL. N°12114, 2007, 240 pages.
G. Ponçon et J. Pauli. – Zend Framework. N°12392, 2008, 460 pages.
R. Rimelé. – Mémento MySQL. N°12012, 2007, 14 pages.
E. Daspet et C. Pierre de Geyer. – PHP 5 avancé. N°12369, 5e édition, 2008, 844 pages.
M. Nebra. – Réussir son site web avec XHTML et CSS. N°12307, 2e édition, 2008, 316 pages.
C. Porteneuve. – Bien développer pour le Web 2.0. N°12391, 2e édition 2008, 600 pages.
A. Clarke. – Transcender CSS. Sublimez le design web ! N°12107, 2007, 370 pages.
A. Boucher. – Ergonomie web. Pour des sites web efficaces. N°12158, 2007, 426 pages.
J.-M. Defrance. – Premières applications Web 2.0 avec Ajax et PHP. N°12090, 2008, 450 pages (Collection Blanche).
A. Boucher. – Mémento Ergonomie web. N°12386, 2008, 14 pages.
K. Djaafar. – Développement JEE 5 avec Eclipse Europa. N°12061, 2008, 380 pages.
R. Goetter. – CSS 2 : pratique du design web. N°11976, 2e édition, 2007, 324 pages. E. Sloïm. – Sites web. Les bonnes pratiques. N°12101, 2007, 14 pages. A. Tasso. – Apprendre à programmer en ActionScript. N°12199, 2007, 438 pages. S. Bordage, D. Thévenon, L. Dupaquier, F. Brousse. – Conduite de projets Web. N°12325, 4e édition 2008, 394 pages. N. Chu. – Réussir un projet de site Web. N°12400, 5e édition ,2008, 246 pages.
S. Powers. – Débuter en JavaScript. N°12093, 2007, 386 pages. T. Templier, A. Gougeon. – JavaScript pour le Web 2.0. N°12009, 2007, 492 pages. D. Thomas et al. – Ruby on Rails. N°12079, 2e édition 2007, 800 pages. W. Altmann et al. – Typo3. N°11781, 2006, 532 pages. L. Bloch, C. Wolfhugel. – Sécurité informatique. Principes fondamentaux pour l’administrateur système. N°12021, 2007, 350 pages.
O. Andrieu. – Réussir son référencement web. N°12264, 2008, 302 pages.
G. Gete. – Mac OS X Leopard efficace. Déploiement, administration et réparation. N°12263, 2008, 476 pages.
G. Ponçon. – Best practices PHP 5. Les meilleures pratiques de développement en PHP. N°11676, 2005, 480 pages.
M. Mason. – Subversion. Pratique du développement collaboratif avec SVN. N°11919, 2006, 206 pages.
ÉDITIONS EYROLLES 61, bd Saint-Germain 75240 Paris Cedex 05 www.editions-eyrolles.com
Le code de la propriété intellectuelle du 1er 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 ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Qu’est-ce que Flex ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Quel est son fonctionnement ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Sur quelles technologies repose t-il ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . Choisir la méthode Open Source ou propriétaire ? . . . . . . . . . . . . . . . . . .
5 6 6 6 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
VI
Programmation Flex 3
CHAPITRE 2
À la découverte du framework Flex 3 . . . . . . . . . . . . . . . . . . . . . . .
13
Rôle du front end . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Architecture n-tiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Positionnement d’une application Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . L’application et le modèle-vue-contrôleur . . . . . . . . . . . . . . . . . . . . . . . Le langage MXML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le langage ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les boucles et les conditions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les procédures et les fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La programmation objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le mécanisme client/serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
13 13 14 15 17 18 18 19 21 22 23 25
CHAPITRE 3
Développer avec le kit Flex SDK . . . . . . . . . . . . . . . . . . . . . . . . . . . .
27
Prérequis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Installation du kit Flex SDK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les compilateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . mxmlc : le compilateur d’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . compc : le compilateur de composants . . . . . . . . . . . . . . . . . . . . . . . . . . . Première application Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Conception graphique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Création du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Écriture du fichier MXML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Écriture du fichier ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Liaison graphique et action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Compilation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Intégration dans une page web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Déploiement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Automatisation de la compilation à l’aide de Ant . . . . . . . . . . . . . . . . . Ant et Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Installation de Ant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Création d’un script de compilation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
28 29 30 30 31 32 32 33 33 35 35 36 38 39 39 40 40 40 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les différentes versions de Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . Les différents modes de distribution de Flex Builder . . . . . . . . . . . . . . . .
47 48 48
Installation de Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le mode Autonome . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le mode Plug-in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
49
Les perspectives de Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La perspective de développement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La perspective de design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La perspective de débogage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La perspective de profiling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
56
Créer un projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Arborescence d’un projet Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . Exécution et tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Travail collaboratif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
49 54 58 59 61 62 63 65 68 68
Exporter/importer un projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Exportation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Importation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
72
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
74
72 73
CHAPITRE 5
Les composants de contrôle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
75
Les boutons et interrupteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ToogleButton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
75
Permettre le choix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
76
Les zones de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les libellés : Label et Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les zones de saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les zones de texte « riches » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
82
Les tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . DataGrid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . AdvancedDataGrid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
76 76
82 82 83 85 85 88
=Flex3 FM.book Page VIII Mardi, 2. décembre 2008 3:32 15
VIII
Programmation Flex 3
Analyser un cube OLAP avec OLAPDataGrid . . . . . . . . . . . . . . . . . . Qu’est-ce qu’un cube OLAP ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Création d’un cube OLAP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Requête sur le cube . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
92
Insérer des images, des animations et vidéos Flash . . . . . . . . . . . . . . . Intégrer des animations Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Insérer des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Lecteur vidéo Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
100
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 . . . . . . . . . . . . . . . . . Implémentation et alimentation en données . . . . . . . . . . . . . . . . . . . . . . . Interaction avec l’utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
108
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
110
92 93 95 100 100 101
108 109
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 . . . . . . . . . Les composants HBox et VBox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 . . . . . . . . . . . . . . . . . . . Création du pop-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Appel du pop-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Communiquer avec le pop-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
118
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
122
113 113
118 119 120
=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 . . . . . . . . . . . . .
123
Les composants de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Navigation par onglets avec TabNavigator . . . . . . . . . . . . . . . . . . . . . . . . Vues empilées avec ViewStack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Navigation « en accordéon » : Accordion . . . . . . . . . . . . . . . . . . . . . . . . . Les composants de graphique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Implémentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . En pratique : création d’un outil de reporting . . . . . . . . . . . . . . . . . . . . . . En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
123 123 124 126 128 128 130 133
CHAPITRE 8
Réaliser le design des interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . .
135
Dimensionner et positionner les composants . . . . . . . . . . . . . . . . . . . . . Spécifier les dimensions des composants . . . . . . . . . . . . . . . . . . . . . . . . . Positionner les composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Utiliser les styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La balise Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le fichier CSS externe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . CSS et ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Habiller les composants : skinning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Utiliser des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Utiliser des fichiers SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . L’habillage par programmation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
135 135 138 147 148 149 150 151 152 152 153 155
CHAPITRE 9
Le dynamisme applicatif à l’aide des états, des transitions et des effets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les états ou view states . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Étude de cas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Combiner des effets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mise en pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Écrire des transitions en ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
157 157 158 163 165 166 169 172
=Flex3 FM.book Page X Mardi, 2. décembre 2008 3:32 15
X
Programmation Flex 3
CHAPITRE 10
Créer des composants personnalisés . . . . . . . . . . . . . . . . . . . . . .
173
Penser composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
173
Qu’est–ce qu’un composant ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . MXML ou ActionScript ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le compilateur compc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
174 174 174
Créer un composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Description du composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Méthodologie de création . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Réemploi du composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
175 175 177 195
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
198
CHAPITRE 11
Gérer les données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
199
Lier des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Utilisation de la balise . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le DataBinding en ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
199 201 201
Stocker des données grâce au modèle . . . . . . . . . . . . . . . . . . . . . . . . . . . Implémenter le modèle à l’aide de la balise . . . . . . . . . . . . Les modèles et ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
206 206 209
Valider des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Rendre la saisie obligatoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Vérification du format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Personnalisation des messages d’erreur . . . . . . . . . . . . . . . . . . . . . . . . . . . Les événements de validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Gestion de la validation en ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . .
212 213 215 215 215 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le service web en détail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
229 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Appel du service web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Analyse du fonctionnement de l’application . . . . . . . . . . . . . . . . . . . . . . .
234 235 236
Accéder aux classes distinctes grâce à RemoteObject . . . . . . . . . . . . . Comprendre RemoteObject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Implémentation de RemoteObject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
238 238 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 . . . . . . . . . . . . . . . Préparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Implémentation du composant HTTPService en ActionScript . . . . . . . . . RemoteObject en pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
244 244 247 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 . . . . . . . . . . . . . . . . . . . . . . . . . Le projet BlazeDS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les différentes versions du serveur BlazeDS . . . . . . . . . . . . . . . . . . . . . . Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le serveur Tomcat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Test d’installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
263 263 264 264 265 268
Interaction avec les méthodes J2EE . . . . . . . . . . . . . . . . . . . . . . . . . . . . Processus d’exécution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Exemple d’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
268
Échanger des données en temps réel . . . . . . . . . . . . . . . . . . . . . . . . . . . . Création du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Configuration du serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . et : les composants émetteurs et récepteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
276
269 270 277 278 279
=Flex3 FM.book Page XII Mardi, 2. décembre 2008 3:32 15
XII
Programmation Flex 3
Les procédures de communication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Test de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
280 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 . . . . . . . . . . . . . . . . . . . . . . . . Charger les modules à l’aide du composant ModuleLoader . . . . . . . . . . . Gestion des modules avec ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . .
288 288 288
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
297
CHAPITRE 16
Interagir avec le conteneur web . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
299
La notion de deep linking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Principe de fonctionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mise en pratique du deep linking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Déploiement du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
299 299 301 305
Communiquer avec le conteneur web . . . . . . . . . . . . . . . . . . . . . . . . . . . De l’application Flex vers le conteneur web . . . . . . . . . . . . . . . . . . . . . . . Du conteneur web vers l’application Flex . . . . . . . . . . . . . . . . . . . . . . . . .
305 306 309
La bibliothèque Flex-Ajax Bridge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ajout de la bibliothèque à un projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Utilisation de la bibliothèque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Déploiement et test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
313 313 313 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é . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Utilisation des points d’arrêt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Modifier la valeur des variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
321 322 325
=Flex3 FM.book Page XIII Mardi, 2. décembre 2008 3:32 15
Table des matières
XIII
Tracer un parcours . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Sélectionner les variables à surveiller . . . . . . . . . . . . . . . . . . . . . . . . . . . .
325 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Analyse de l’occupation mémoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
331 333
Méthodes d’analyse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
334
Détecter les allocations mémoire inutiles . . . . . . . . . . . . . . . . . . . . . . . . . Analyser le temps d’exécution des méthodes . . . . . . . . . . . . . . . . . . . . . . Déterminer le nombre d’instances d’une classe . . . . . . . . . . . . . . . . . . . . Visualiser les allocations d’objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
334 335 336 336
Bonnes pratiques d’optimisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
337
Calculer les performances applicatives . . . . . . . . . . . . . . . . . . . . . . . . . . . Améliorer l’exécution sur les postes clients . . . . . . . . . . . . . . . . . . . . . . . Réduire la taille des fichiers SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Multiplier les fichiers SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Améliorer les méthodes de codage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
337 338 339 340 340
Déployer une application Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
341
L’incontournable liste de contrôle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mise en ligne de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
341 342
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
344
CHAPITRE 19
Adobe AIR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
345
Le projet Adobe AIR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
345
Fonctionnement d’une application AIR . . . . . . . . . . . . . . . . . . . . . . . . . . Nouveaux composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
345 346
Première application AIR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
349
Création du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Déploiement de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
349 352
=Flex3 FM.book Page XIV Mardi, 2. décembre 2008 3:32 15
XIV
Programmation Flex 3
Gestion des données avec la bibliothèque SQLite . . . . . . . . . . . . . . . . . Utiliser la bibliothèque SQLite dans une application AIR . . . . . . . . . . . . SQLite par l’exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
354 355
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
362
354
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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le squelette . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Accès à l’espace d’administration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Préparation du serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
368 369 371 374
Faisons le point . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
377
CHAPITRE 21
Module d’administration du site e-commerce . . . . . . . . . . . . . .
379
Création du module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Phase préparatoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Design de l’interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
380
Gestion des fournisseurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Création des services PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Création des classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Logique IHM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Logique applicative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Vérification des données transmises . . . . . . . . . . . . . . . . . . . . . . . . . . . . Saisie obligatoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Vérifier le format du code postal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Aspect graphique de la validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
380 381 386 386 389 392 394 398 399 400 401
=Flex3 FM.book Page XV Mardi, 2. décembre 2008 3:32 15
Table des matières
À vos claviers : la gestion des produits . . . . . . . . . . . . . . . . . . . . . . . . . . Quelques pistes de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Version de déploiement du module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Intégration du module dans l’application principale . . . . . . . . . . . . . . En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
XV 403 403 405 419 419 421
CHAPITRE 22
Module de vente en ligne : le panier d’achat . . . . . . . . . . . . . . . .
423
Création du module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Design de l’interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les états . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Affichage du détail d’un produit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
423 424 424 435 437
Gestion du panier d’achat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Design du panier avec ItemRenderer . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ajouter un produit au panier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Vider le panier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
439 439 441 442
À vos claviers : création de l’interface graphique . . . . . . . . . . . . . . . . Ce qu’il faut réaliser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
443 443 445
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
450
CHAPITRE 23
Module de vente en ligne : commande et facturation . . . . . .
451
Création de la commande . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Implémenter le glisser-déposer dans le tableau de commander . . . . . . . . Supprimer l’article du panier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Calcul du prix total de la commande . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Création de la facture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Implémentation du pop-up de facturation . . . . . . . . . . . . . . . . . . . . . . . . . Impression de la facture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . À vos claviers : création d’un pop-up de paiement et de validation de la commande . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Répétition de composants : . . . . . . . . . . . . . . . . . . . . . . . Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
451 452 453 455 457 457 462 463 464 465
=Flex3 FM.book Page XVI Mardi, 2. décembre 2008 3:32 15
XVI
Programmation Flex 3
Déploiement du module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
468
Optimisation et déploiement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
470
Optimiser le temps de chargement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Faire patienter l’utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Déploiement de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
470 473 475
Fin du site E-Reflex ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
477
CHAPITRE 24
Créer un lecteur MP3 avec Adobe AIR . . . . . . . . . . . . . . . . . . . . . .
479
Rechercher des MP3 à l’aide de . . . . . . . . . . .
479
Implémentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Interaction avec l’utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
480 481
Lire un fichier MP3 avec ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . .
482
Principales fonctions de lecture d’un fichier audio . . . . . . . . . . . . . . . .
485
Stopper et mettre en pause . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Connaître la progression de la lecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . Exemple complet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
485 485 486
Définition des fonctionnalités de notre application . . . . . . . . . . . . . . . .
488
Gestion de la liste de lecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Interface de lecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
489 492
À vos claviers : création d’un lecteur MP3 . . . . . . . . . . . . . . . . . . . . . .
493
Fichier de styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Code de la classe ClassesLecteurMp3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . Fichier LecteurMP3AS3.as . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Fichier principal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
493 495 500 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Un nouvel espace de noms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La balise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le couple de balises et . . . . . . . . . . . . . . . . . . . . Le DataBinding bi-directionnel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
513 513 514 514 516
Amélioration de certains composants de Flex 3 . . . . . . . . . . . . . . . . . . Remplacement du composant . . . . . . . . . . . . . . . . . . . . . . . . Le composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
517 517 517 517
Installation de l’environnement de développement . . . . . . . . . . . . . . .
518
Première application 3D avec Flex 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . Création et configuration du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Création de l’interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Codage de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
520 520 521 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
XX
Programmation Flex 3
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
À 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.
XXI
=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
4
Comprendre Flex 3 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 ? 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
5
=Flex3 FM.book Page 6 Mardi, 2. décembre 2008 3:32 15
6
Comprendre Flex 3 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 ? 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 environnement de développement, de test et de déploiement efficace. Bien entendu, cet environnement de développement 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.
7
=Flex3 FM.book Page 8 Mardi, 2. décembre 2008 3:32 15
8
Comprendre Flex 3 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 client pour l’exécution de l’application
Oui
Non, même s’il nécessite l’activation de JavaScript sur le poste client
Coût du développement de l’application
Gratuit pour l’utilisation du SDK. Payant pour l’utilisation de l’IDE
Gratuit
Portabilité de l’application
Comportement identique sur l’ensemble des navigateurs
Le comportement de l’application peut différer selon le navigateur web (hors utilisation d’un framework)
Insertion de contenu multimédia (vidéo, son…) dans l’application à l’aide de fonctionnalités pré-existantes
De par son lien avec Flash, les fonctionnalités multimédias sont incluses dans le framework
Les fonctionnalités multimédias ne sont pas incluses
=Flex3 FM.book Page 9 Mardi, 2. décembre 2008 3:32 15
Pourquoi Flex ? 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 à l’emploi
Flex intègre de nombreux composants graphiques (menus accordéon…)
Ajax ne comporte pas de composants 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
9
=Flex3 FM.book Page 10 Mardi, 2. décembre 2008 3:32 15
10
Comprendre Flex 3 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’environnement de développement. 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 ? 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 :
11
=Flex3 FM.book Page 12 Mardi, 2. décembre 2008 3:32 15
12
Comprendre Flex 3 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
14
Comprendre Flex 3 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 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.
15
=Flex3 FM.book Page 16 Mardi, 2. décembre 2008 3:32 15
16
Comprendre Flex 3 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 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 . • Une zone de saisie est définie par les balises . • Un panel servant de conteneur de composants est défini par les balises . 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 () et WebService (). 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) :
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 :
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.
17
=Flex3 FM.book Page 18 Mardi, 2. décembre 2008 3:32 15
18
Comprendre Flex 3 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 CHAPITRE 2
Le tableau 2-1 présente des exemples de déclaration de variables. Tableau 2-1
Déclaration de variables
Code
Description
var maChaine:String
Chaîne de caractères.
var monNombre:Number
Nombre décimal pouvant être positif ou négatif.
var monEntier:int
Nombre entier pouvant être positif ou négatif.
var monBooleen:Boolean
Booléen prenant pour valeur 0, 1, true ou false.
var monTableau:Array = new Array("1","2","3")
Tableau contenant trois éléments.
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 à iSystè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_\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 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
29
=Flex3 FM.book Page 30 Mardi, 2. décembre 2008 3:32 15
30
Comprendre Flex 3 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
ant
Contient un ensemble de tâches Ant permettant d’automatiser certaines opérations lors des phases de compilation et de déploiement.
asdoc
Contient l’ensemble de la documentation de l’outil ASDoc permettant de créer la documentation 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.
frameworks
Contient l’ensemble des classes, des fichiers de configuration et du code source du framework.
lib
Contient l’ensemble des bibliothèques Java du framework.
runtimes
Contient les exécutables permettant d’installer l’environnement Adobe AIR et le module de débogage de Flash Player 10.
samples
Contient des exemples d’applications.
templates
Contient des templates de pages HTML contenant l’application Flex. Ceux-ci contiennent 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 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.
31
=Flex3 FM.book Page 32 Mardi, 2. décembre 2008 3:32 15
32
Comprendre Flex 3 PARTIE I
Le fonctionnement du compilateur compc est identique à celui du compilateur mxmlc à la seule différence qu’il génère un fichier de type SWC (Shockwave Component) et non SWF (figure 3-3).
Figure 3-3
Mécanisme de compilation compc
Si nous récapitulons, voici ce que nous avons appris jusqu’à présent : • Comment configurer un environnement pour exécuter le kit de développement Flex SDK et les applications Flex. • Comment installer le kit Flex SDK. • Quelques connaissances de base sur les différents compilateurs. Cela peut paraître léger, mais nous allons voir qu’avec ces trois éléments seulement, nous sommes en mesure de créer notre première application Flex.
Première application Flex Nous vous proposons ici de développer le fameux programme cher à tout informaticien et informaticienne, à savoir l’incontournable Hello World ! dont le but est d’afficher un message de bienvenue à l’écran.
Conception graphique Nombreux sont les projets prenant naissance à partir d’un dessin griffonné sur un coin de table. Notre projet n’a pas échappé à cette règle comme l’illustre la figure 3-4.
=Flex3 FM.book Page 33 Mardi, 2. décembre 2008 3:32 15
Développer avec le kit Flex SDK CHAPITRE 3
Figure 3-4
Conception graphique
Le principe de cette application est simple : un composant, nommé Panel contient un bouton qui, lorsqu’on clique dessus, affiche le message « Hello World ! ».
Création du projet Au cours du chapitre précédent, nous avons abordé la notion d’arborescence des projets Flex et nous avons vu que tout projet doit posséder un répertoire racine contenant un sous-répertoire src dans lequel seront enregistrées les sources de l’application. Le kit Flex SDK propose différents exemples d’applications situés dans le dossier samples. C’est dans ce dossier que nous allons placer la racine de notre projet, que l’on nommera HelloWorld. Dans la mesure où il s’agit du fichier racine de l’application, ce répertoire contiendra un sous-répertoire nommé src (figure 3-5).
Figure 3-5
Arborescence du projet
Écriture du fichier MXML Tout projet Flex comporte un fichier portant l’extension .mxml servant de base à l’application et permettant, entre autres choses, la description des interfaces graphiques. Mais il ne suffit pas de créer des composants, il faut également définir leurs caractéristiques (nom, hauteur, largeur...) et leur positionnement. Les tableaux 3-2 et 3-3 présentent les différentes caractéristiques des composants Panel et Button que nous allons créer.
33
=Flex3 FM.book Page 34 Mardi, 2. décembre 2008 3:32 15
34
Comprendre Flex 3 PARTIE I Tableau 3-2
Les différentes caractéristiques du composant Panel
Caractéristique
Description
Rôle
Conteneur principal de l’application
Nom
pn_principal
Titre (title)
Hello World !
Largeur (width)
270 pixels
Hauteur (height)
150 pixels
Position sur l’axe des X
10 pixels
Position sur l’axe des Y
10 pixels
Disposition (layout)
absolute (permet le positionnement des composants à l’aide de leurs coordonnées x et y).
Tableau 3-3
Les différentes caractéristiques du composant Button
Caractéristique
Description
Rôle
Bouton déclenchant l’affichage du message.
Nom
btn_message
Label
Hello !!
Largeur (width)
120 pixels
horizontalCenter
0 (centre le bouton à l’intérieur du panel sur l’axe horizontal de celui-ci).
verticalCenter
0 (centre le bouton à l’intérieur du panel sur l’axe vertical de celui-ci).
Figure 3-6
Mise en place des composants
=Flex3 FM.book Page 35 Mardi, 2. décembre 2008 3:32 15
Développer avec le kit Flex SDK CHAPITRE 3
Nous allons à présent nous placer dans le répertoire src et créer un nouveau fichier nommé HelloWorld.mxml, dans lequel nous saisirons le code suivant à l’aide du Bloc-notes de Windows :
Les caractéristiques décrites aux tableaux 3-2 et 3-3 sont bien spécifiées pour chacun des composants. Notre interface graphique est à présent terminée. Passons maintenant à la partie ActionScript qui permettra d’afficher le message « Hello World !! ».
Écriture du fichier ActionScript Tout d’abord, créez un nouveau fichier nommé HelloActionScript.as dans le répertoire src de l’application qui va contenir la procédure permettant d’afficher le message. Saisissez ensuite le code suivant dans ce fichier : import mx.controls.Alert; public function afficherMessage():void { Alert.show("Hello World !!"); }
Nous importons tout d’abord la bibliothèque nécessaire à l’utilisation de la classe Alert. Vient ensuite la création de la procédure afficherMessage() de type void étant donné qu’aucune valeur de retour n’est attendue. Cette procédure fait appel à la méthode show de la classe Alert dont l’analyse syntaxique du code suffit à sa compréhension.
Liaison graphique et action Nous possédons à présent un fichier MXML servant à la description de l’interface graphique et un fichier ActionScript permettant d’afficher le message « Hello World !! ». L’étape suivante va consister à créer la liaison entre ces deux fichiers et à définir l’action qui fera appel à la fonction afficherMessage(). Cette liaison s’effectue dans le fichier MXML à l’aide de la balise pour laquelle il suffit de spécifier la source du script à utiliser, c’est-à-dire le chemin relatif du fichier ActionScript :
35
=Flex3 FM.book Page 36 Mardi, 2. décembre 2008 3:32 15
36
Comprendre Flex 3 PARTIE I
Lors de la phase de conception graphique, nous avons décidé que le message doit s’afficher lorsque l’utilisateur clique sur l’unique bouton de l’interface. Cela se fera via la définition de l’action sur click du bouton faisant appel à la fonction afficherMessage().
Pour plus de clarté, voici le script complet du fichier HelloWorld.mxml :
Compilation Il nous faut à présent compiler notre application, ce qui aura pour effet de créer un fichier SWF pouvant être inséré dans une page HTML et diffusé sur Internet. Pour cela, ouvrez, l’invite de commandes MSDOS et placez-vous dans le répertoire root_flexsdk\bin avec la commande cd root_flexsdk\bin. Étant donné qu’il s’agit d’une application, il convient d’utiliser le compilateur mxmlc. Voici donc la commande à saisir pour générer le fichier SWF de notre application : mxmlc ../samples/HelloWorld/src/Helloworld.mxml
Placez-vous ensuite dans le répertoire src du projet, vous devriez à présent y trouver le fichier HelloWorld.swf issu de la compilation. Que s’est-il passé ? Le compilateur mxmlc a analysé le fichier .mxml de l’application et a constaté qu’il possédait un lien vers un fichier ActionScript. Il a donc pris en compte ce fichier et a transformé le fichier MXML en un ensemble de classes ActionScript pour ensuite les intégrer dans un fichier de type SWF. À ce stade, nous pouvons déjà tester notre application à l’aide du Flash Player. En cliquant sur le bouton, vous devriez en effet voir apparaître le message « Hello World !! » (figures 3-7 et 3-8).
=Flex3 FM.book Page 37 Mardi, 2. décembre 2008 3:32 15
Développer avec le kit Flex SDK CHAPITRE 3
Figure 3-7
Exécution de l’application dans le Flash Player 9
Figure 3-8
Affichage du message « Hello World !! »
37
=Flex3 FM.book Page 38 Mardi, 2. décembre 2008 3:32 15
38
Comprendre Flex 3 PARTIE I
Nous disposons maintenant d’un fichier SWF complet et autonome. Nous entendons par là que ce fichier n’a pas besoin des fichiers sources (MXML et ActionScript) pour son exécution car ceux-ci ont été compilés et intégrés au fichier SWF. L’étape suivante va consister à intégrer ce fichier dans une page web afin de diffuser notre application sur Internet.
Intégration dans une page web Pour intégrer notre application dans une page web, que nous nommerons index.html, nous allons utiliser le langage HTML et ses balises qui nous permettront de faire référence au fichier SWF. Hello World !
Cette insertion est des plus simples. Notez l’utilisation des propriétés width et height permettant de spécifier la taille de l’objet SWF par rapport à celle de la page HTML. Dans notre cas, l’application prendra la taille de la page HTML affichée dans le navigateur (figure 3-9). Nous verrons dans la section « Création d’un script de compilation » qu’il est possible de définir plusieurs options pour l’inclusion du fichier SWF, notamment la détection de la présence du Flash Player sur le poste client, nécessaire à l’exécution de l’application (cette fonctionnalité n’est pas implémentée ici).
=Flex3 FM.book Page 39 Mardi, 2. décembre 2008 3:32 15
Développer avec le kit Flex SDK CHAPITRE 3
Figure 3-9
Application insérée dans une page HTML
Déploiement Si vous possédez un serveur web, il vous suffit de placer les fichiers HelloWorld.swf et index.html dans l’un de ses répertoires, cela terminant par ailleurs la phase de déploiement. Libre à vous ensuite de communiquer l’URL de votre application à l’ensemble de vos contacts. Dans la mesure où celle-ci ne permet pas de détecter la présence du Flash Player sur le poste client, n’oubliez pas de mentionner qu’il est nécessaire et doit être installé pour pouvoir exécuter votre application.
Automatisation de la compilation à l’aide de Ant Nous verrons au chapitre suivant que l’utilisation de Flex Builder facilite grandement le déploiement d’une application Flex. Néanmoins, en fonction de votre budget, vous préférerez peut-être le kit Flex SDK. Vous devrez alors procéder à une compilation manuelle, mais cette tâche est particulièrement fastidieuse (notamment lors des phases de test). Nous vous proposons donc de voir comment automatiser les tâches de compilation à l’aide de Ant, outil développé par la Apache Software Foundation et communément utilisé dans le déploiement des applications Java.
39
=Flex3 FM.book Page 40 Mardi, 2. décembre 2008 3:32 15
40
Comprendre Flex 3 PARTIE I
Ant Projet de la Apache Software Foundation, Ant, signifie Another Neat Tool. Il est écrit en Java et a été développé par James Duncan Davidson en 2000. Ant permet d’automatiser la compilation et le déploiement des projets. Il repose sur l’exécution de scripts de « build » au format XML comportant un projet et un ensemble de tâches, organisées ou non, qui y sont liées.
Ant et Flex Lors de l’analyse du répertoire principal de Flex, nous avons noté la présence d’un dossier nommé ant. Ce répertoire contient la bibliothèque nécessaire à Ant pour pouvoir compiler et déployer des projets Flex. Cette bibliothèque est nommée flexTasks.jar et se trouve dans le répertoire lib du dossier ant. Elle contient trois tâches Ant qui permettent d’utiliser : • le compilateur mxmlc ; • le compilateur compc ; • la tâche html-wrapper permettant de générer la page HTML intégrant le fichier .swf créé lors de la compilation. Voyons comment utiliser le couple Ant/flexTasks pour automatiser la compilation et le déploiement d’une application Flex.
Installation de Ant Commencez par télécharger Ant à partir de l’adresse suivante : http://ant.apache.org. Décompressez ensuite l’archive obtenue dans le répertoire de votre choix et configurez votre système d’exploitation comme suit : 1. Créez une variable d’environnement nommée ANT_HOME pointant sur le répertoire ant (par exemple, c:\ant). 2. Modifiez la variable PATH en ajoutant le chemin du répertoire bin comme suit : %ANT_HOME%\bin
3. Ouvrez ensuite l’invite de commandes MS-DOS et tapez la commande ant. Si l’environnement est correctement configuré, vous devriez voir apparaître ceci : Buildfile: build.mxml does not exist ! BuildFailed
Passons maintenant aux choses sérieuses !
Création d’un script de compilation Avant tout, récapitulons : nous disposons d’un fichier MXML nommé HelloWorld.mxl situé dans le répertoire root_flexsdk\samples\HelloWorld\src, ainsi que d’un fichier ActionScript
=Flex3 FM.book Page 41 Mardi, 2. décembre 2008 3:32 15
Développer avec le kit Flex SDK CHAPITRE 3
nommé HelloActionScript.as. Notre objectif est de compiler et d’intégrer automatiquement le fichier SWF issu de la compilation dans une page HTML. Voyons comment procéder. Nous avons choisi de placer les scripts de compilation Ant dans le répertoire root_flexsdk \ant. Comme nous l’avons vu, un script de compilation est un fichier XML contenant une suite de tâches. La première étape va donc consister à créer ce fichier XML, que l’on nommera HelloWorld.xml. Nous devrons ensuite spécifier le projet Ant en lui affectant un nom.
Une fois cela fait, nous devrons préciser le chemin du fichier flexTasks.jar. Si vous avez choisi de placer le fichier de compilation dans le répertoire ant du Flex SDK, le fichier attendu se situe dans le répertoire suivant root_flexsdk\ant\lib :
Vous devrez ensuite paramétrer les variables qui seront utilisées lors de la compilation : • FLEX_HOME : répertoire d’installation du kit Flex SDK (root_flexsdk) ; • APPLICATION_HOME : répertoire du fichier à compiler (root_flexsdk/samples/HelloWorld/ src).
Vient ensuite la spécification de la tâche à réaliser. Une tâche () est définie par un nom qui sera invoqué lors de l’utilisation de Ant.
Chaque tâche doit comporter un certain nombre d’instructions. La première que nous allons écrire est l’action de création du fichier SWF. Comme nous l’avons vu précédemment, pour compiler un fichier ActionScript ou MXML relatif à une application, nous devons utiliser le compilateur mxmlc :
Ce script a pour résultat d’afficher un message « Génération du fichier SWF » et de réaliser la compilation de l’application en prenant les fichiers MXML et ActionScript situés dans le répertoire source spécifié dans la variable ${APPLICATION_HOME}.
41
=Flex3 FM.book Page 42 Mardi, 2. décembre 2008 3:32 15
42
Comprendre Flex 3 PARTIE I
Avant d’aller plus loin, testons notre script. Vérifiez d’abord que son contenu est indique à cela :
Ensuite, ouvrez l’invite de commandes MS-DOS et placez-vous dans le répertoire contenant le fichier de build que nous venons de créer : cd c:\root_flexsdk\ant
Pour exécuter le script, saisissez la commande suivante, faisant appel à la tâche de compilation : ant -buildfile HelloWorld.xml compilation
Si tout s’est correctement déroulé lors de la compilation, le fichier SWF est créé dans le répertoire de l’application Flex, root_flexsdk/samples/HelloWorld/src. Passons maintenant à l’instruction qui permet de générer le fichier HTML contenant le fichier SWF. Cette action est possible grâce à la tâche html-wrapper qui fournit plusieurs templates de génération. Le tableau 3-4 présente les différents arguments de la tâche html-wrapper. Tableau 3-4
Les arguments de la tâche html-wrapper
Arguments
Description
application
Nom de l’application SWF.
bgcolor
Couleur d’arrière-plan de la page HTML (blanc par défaut).
height
Hauteur de l’application SWF (400 pixels par défaut).
width
Largeur de l’application SWF (400 pixels par défaut).
output
Chemin de génération de la page HTML.
swf
Nom du fichier SWF à inclure (ne pas spécifier l’extension .swf du fichier).
=Flex3 FM.book Page 43 Mardi, 2. décembre 2008 3:32 15
Développer avec le kit Flex SDK CHAPITRE 3 Tableau 3-4
Les arguments de la tâche html-wrapper (suite)
Arguments
Description
template
Trois types de templates sont disponibles : • client-side-detection : détecte la version du Flash Player installée sur le poste client et propose son téléchargement le cas échéant. • express-installation : détecte si Flash Player est présent et propose son installation en mode Express s’il n’est pas installé. • no-player-detection : ne vérifie pas la présence du Flash Player.
history
Permet d’utiliser la fonction de DeepLinking, c’est-à-dire la navigation à l’aide des boutons Précédent et Suivant du navigateur ( false par défaut).
title
Titre de la page HTML ( Flex application par défaut).
version-major
Indique la version majeure du Flash Player à utiliser (version 9 par défaut). Cet argument n’a de sens que si le type de template spécifié est client-side-detection ou express-installation.
version-minor
Indique la version mineure du Flash Player à utiliser (version 0 par défaut). Cet argument n’a de sens que si le type de template spécifié est client-side-detection ou express-installation.
version-revision
Indique la version de mise à jour du Flash Player à utiliser (version 0 par défaut). Cet argument n’a de sens que si le type de template spécifié est client-side-detection ou express-installation.
Ajoutons donc une nouvelle action de génération de fichier HTML :
Avant d’exécuter ce script, attardons-nous sur la notion de dépendance entre les différentes tâches dans un fichier de compilation de Ant. En analysant l’exemple de code précédent, nous voyons que le terme depends a été ajouté à la tâche generationHTML. Cela signifie qu’elle ne pourra être exécutée que si la tâche compilation l’a été au préalable.
43
=Flex3 FM.book Page 44 Mardi, 2. décembre 2008 3:32 15
44
Comprendre Flex 3 PARTIE I
Ajoutons également la propriété default au projet, qui permet de spécifier la première tâche à réaliser lors de la compilation.
On définit la première tâche comme étant celle réalisant la génération du fichier HTML. Ne pouvant s’exécuter avant la tâche de compilation, Ant va d’abord compiler le projet puis terminer son travail par la génération de la page web. Lors de l’exécution du script Ant, il ne nous sera plus nécessaire de spécifier la tâche à exécuter étant donné que celle-ci est maintenant précisée. La nouvelle commande de compilation est donc : ant -buildfile HelloWorld.xml
Afin que tout ceci soit plus clair, voici le script de compilation dans sa totalité :
Procédons à la compilation et rendons-nous ensuite dans le répertoire src de l’application. Nous notons alors la création des fichiers suivants : • AC_OETags.js : il s’agit du fichier JavaScript vérifiant la version du Flash Player installée en fonction des paramètres version-major, version-minor et version-revision spécifiés dans la tâche html-wrapper.
=Flex3 FM.book Page 45 Mardi, 2. décembre 2008 3:32 15
Développer avec le kit Flex SDK CHAPITRE 3
• playerProductInstall.swf : application permettant l’installation du Flash Player requis si le client ne le possède pas. • index.html : page HTML contenant le fichier SWF généré lors de la compilation. Nous pourrions nous arrêter là, mais nous avons décidé de pousser l’automatisation jusqu’au bout en évitant la saisie de la commande ant dans la console MS-DOS. Pour ce faire, nous vous proposons de créer un script bat qui s’exécutera en double-cliquant dessus. Nous vous invitons donc à créer un fichier nommé compilation.bat dans le répertoire src de l’application et contenant les paramètres suivants (à adapter selon votre configuration) : @ECHO OFF cls echo *************************************** echo .::::: COMPILATION ANT :::::. echo *************************************** ant -buildfile c:\root_flexsdk\ant\HelloWorld.xml
Double-cliquez ensuite dessus pour l’exécuter. Grâce à ce script exécutant la tâche ant spécifiée auparavant, nous automatisons les tâches de déploiement et diminuons ainsi le nombre d’opérations à effectuer dans la console MS-DOS. Ceci réduit le temps requis pour le déploiement et les tests d’exécution de l’application.
En résumé Ce chapitre vous a permis de créer votre première application Flex. Certes, elle est très simple, mais elle nous a néanmoins permis de découvrir les principaux aspects de la réalisation d’une application. Nous avons également vu les différentes phases de développement d’une application : • la conception de l’interface graphique ; • la création du fichier MXML dérivé de la conception ; • le développement des traitements ActionScript ; • la mise en relation entre les actions et l’interface graphique ; • la compilation ; • le déploiement. De toutes ces phases, la plus compliquée est sans doute celle visant à concevoir l’interface graphique, car elle demande une grande part d’abstraction, notamment pour disposer les composants à l’aide de leurs coordonnées. Le rêve serait qu’un un outil WYSIWG regroupant toutes ces phases existe ! Eh bien ce rêve est devenu réalité grâce à Flex Builder, que nous vous invitons à découvrir grâce au chapitre suivant.
45
=Flex3 FM.book Page 46 Mardi, 2. décembre 2008 3:32 15
=Flex3 FM.book Page 47 Mardi, 2. décembre 2008 3:32 15
4 Développer des applications à l’aide de Flex Builder Flex Builder est un environnement de développement intégré (EDI ou IDE en anglais), basé sur l’outil Eclipse, bien connu des développeurs Java. Son principal objectif est de faciliter le développement des applications Flex en offrant au sein d’un seul environnement, toutes les fonctionnalités nécessaires au cycle de vie d’un projet (développement, compilation, tests et déploiement). Son interface conviviale fait de Flex Builder l’outil de prédilection pour la création d’applications Flex. Dans ce chapitre, nous allons tout d’abord présenter cet outil, puis nous verrons comment l’installer sur notre environnement de travail. Enfin, nous nous intéresserons aux nombreuses fonctionnalités qu’il propose.
Présentation de Flex Builder Au cours du chapitre précédent, nous avons vu qu’il est possible de créer une application à partir du kit de développement Flex SDK. Le résultat obtenu est certes concluant, mais le développement à l’aide du SDK n’est pas des plus aisés, car la tâche de compilation peut très rapidement devenir lourde à mettre en place, le design de l’interface graphique est difficile à réaliser et la phase de développement manque de convivialité. Avec Flex Builder, toutes ces difficultés disparaissent. Pour vous faire une petite idée de la puissance de cet outil, voici une liste non exhaustive des fonctionnalités qu’il offre : • un mode Design de type WYSIWYG pour la création d’interface graphique ;
=Flex3 FM.book Page 48 Mardi, 2. décembre 2008 3:32 15
48
Comprendre Flex 3 PARTIE I
• un mode Code évolué permettant la détection des éventuelles erreurs de programmation et offrant une aide au développement grâce à la fonction d’auto-complétion ; • un débogueur ; • un outil de tests intégré (gestion de la mémoire, test de régression, etc.) ; • la prise en charge native des applications Adobe AIR ; • la refactorisation (maintenance) du code ; • la création de composants personnalisés ; • la génération des fichiers SWF et HTML associées.
Les différentes versions de Flex Builder Flex Builder est disponible en version standard ou en version professionnelle. Dans sa version standard, il offre les fonctionnalités de base nécessaires à la création d’applications. La version professionnelle, quant à elle, permet la réalisation de graphiques utiles dans les applications de reporting. Elle met également à la disposition des développeurs un outil de tests très performant permettant, entre autres, de visualiser la capacité mémoire utilisée par l’application et de générer des tests automatisés. Le choix de la version dépend donc du type d’applications que vous souhaitez développer et de votre budget.
Les différents modes de distribution de Flex Builder Deux modes de distribution de Flex Builder sont proposés : • Le mode Plug-in, qui concerne les développeurs possédant déjà l’IDE Eclipse, plateforme sur laquelle Flex Builder peut être ajouté sous forme de plug-in. • Le mode Autonome, qui consiste à installer une version « autonome », contenant l’IDE Eclipse et le plug-in Flex Builder pré-installé. L’intérêt du second mode de distribution est qu’il permet de disposer d’un environnement entièrement dédié au développement d’applications Flex, non pollué par les divers plug-ins pouvant déjà être installés dans Eclipse. Néanmoins, si votre espace disque est limité, optez pour le premier mode car il évite de réinstaller l’IDE Eclipse qui nécessite 400 Mo ! Version de Flex Builder Cet ouvrage traite de Flex Builder dans sa version professionnelle. Le mode de distribution retenu est le mode Autonome.
Évaluer avant d’acheter une licence À ce stade de l’ouvrage, il est prématuré de faire l’acquisition d’une licence. Faites-vous d’abord une idée de Flex Builder professionnel en téléchargeant une version de démonstration limitée dans le temps sur le site d’Adobe. Pour cela, rendez-vous à l’adresse suivante : http://www.adobe.com.
=Flex3 FM.book Page 49 Mardi, 2. décembre 2008 3:32 15
Développer des applications à l’aide de Flex Builder CHAPITRE 4
Installation de Flex Builder Il est temps à présent de passer à la phase d’installation de Flex Builder qui nous permettra de l’étudier en détail. Flex Builder est disponible sous Mac et sous Windows. Nous avons choisi ici de détailler son installation sous Windows. À noter que si vous optez pour le mode de distribution Plug-in et que vous êtes dans un environnement Mac, vous devez disposer au minimum de la version 3.2 d’Eclipse pour que l’installation soit concluante. Flex Builder 3 et Linux La version commerciale de Flex Builder n’est malheureusement pas compatible avec Linux. Néanmoins, pour les utilisateurs de cet environnement, Adobe a développé le projet Flex Builder Public Alpha, qui consiste en un plug-in à ajouter à l’IDE Eclipse et offrant notamment les fonctionnalités de coloration syntaxique, de compilation, de débogage… Ce plug-in est téléchargeable à l’adresse suivante : http://labs.adobe.com/technologies/flex/flexbuilder_linux/.
Le mode Autonome Voici la marche à suivre pour installer Flex Builder professionnel en mode Autonome : 1. Enregistrez-vous sur le site d’Adobe. Vous pouvez acheter soit une version téléchargeable soit un CD-Rom. Si vous optez pour la version téléchargeable, vous disposez alors d’un exécutable nommé FB3_win.exe. Version d’évaluation Avant d’acquérir Flex Builder, vous pouvez télécharger la version d’évaluation (disponible uniquement en anglais) sur le site d’Adobe.
2. Double-cliquez sur ce fichier pour lancer la procédure d’installation (figure 4-1).
Figure 4-1
Extraction des fichiers d’installation
49
=Flex3 FM.book Page 50 Mardi, 2. décembre 2008 3:32 15
50
Comprendre Flex 3 PARTIE I
3. La fenêtre qui s’affiche à la fin de la procédure d’extraction des fichiers d’installation permet de sélectionner la langue souhaitée. Cliquez sur OK pour poursuivre l’installation.
Figure 4-2
Choix de la langue d’installation
4. Acceptez les termes de la licence d’utilisation (figure 4-3) et cliquez sur le bouton Next.
Figure 4-3
Acception des termes de la licence d’utilisation de Flex Builder
5. Sélectionnez le répertoire souhaité pour l’installation (figure 4-4) et cliquez sur Next.
=Flex3 FM.book Page 51 Mardi, 2. décembre 2008 3:32 15
Développer des applications à l’aide de Flex Builder CHAPITRE 4
Figure 4-4
Choix du répertoire d’installation
6. Cochez les deux options permettant d’installer Flash Player 9 et, éventuellement, les options permettant d’installer les extensions ColdFusion pour Flex Builder et le plug-in JSEclipse (figure 4-5), si vous utilisez l’un des deux éléments. Cliquez ensuite sur le bouton Next pour continuer.
Figure 4-5
Sélection des éléments additionnels à installer (Flash Player 9, extensions ColdFusion et plug-in JSEclipse)
51
=Flex3 FM.book Page 52 Mardi, 2. décembre 2008 3:32 15
52
Comprendre Flex 3 PARTIE I
ColdFusion Actuellement disponible dans sa version 8, Adobe ColdFusion est un langage de balises permettant la réalisation d’applications web. Pour plus d’informations sur ce produit, nous vous invitons à vous rendre à l’adresse suivante : http://www.adobe.com/fr/products/coldfusion/.
JSEclipse JSEclipse est un plug-in gratuit développé par interAKT (qui est une branche d’Adobe), permettant l’édition de fichier JavaScript en proposant une coloration syntaxique, l’auto-complétion…
7. Cliquez sur le bouton Install de la fenêtre récapitulant les paramètres d’installation (figure 4-6). L’installation démarre alors (figure 4-7), suivie de sa configuration (figure 4-8).
Figure 4-6
Récapitulatif des paramètres de l’installation
=Flex3 FM.book Page 53 Mardi, 2. décembre 2008 3:32 15
Développer des applications à l’aide de Flex Builder CHAPITRE 4
Figure 4-7
État d’avancement de l’installation de Flex Builder
Figure 4-8
Configuration de Flex Builder
53
=Flex3 FM.book Page 54 Mardi, 2. décembre 2008 3:32 15
54
Comprendre Flex 3 PARTIE I
Figure 4-9
Fin de l’installation
Voilà, l’installation est terminée (figure 4-9). Double-cliquez sur le programme flexBuilder .exe situé dans le répertoire d’installation spécifié afin de vérifier que tout s’est déroulé correctement et que le logiciel se lance bien.
Le mode Plug-in Le principal prérequis pour ce mode de distribution est la présence de l’IDE Open Source Eclipse, Flex Builder étant basé sur cet outil, qui peut être téléchargé à l’adresse suivante : http://www.eclipse.org/.
L’installation d’Eclipse se résume en la décompression de l’archive téléchargée sur le site de l’éditeur dans un répertoire du disque dur de votre machine. Un nouveau répertoire est alors créé, contenant le fichier eclipse.exe (figure 4-10).
Figure 4-10
Répertoire d’installation d’Eclipse
=Flex3 FM.book Page 55 Mardi, 2. décembre 2008 3:32 15
Développer des applications à l’aide de Flex Builder CHAPITRE 4
Si vous avez opté pour l’installation du plug-in Eclipse, vous devez être en possession du programme FB3_WWEJ_Plugin.exe, préalablement téléchargé depuis le site d’Adobe. Doublecliquez alors sur cet exécutable pour lancer la procédure d’installation dont les différentes étapes sont les suivantes : 1. Extraction des fichiers d’installation. 2. Choix de la langue d’installation souhaitée (anglais par défaut). 3. Acception des termes de la licence d’utilisation. 4. Spécification du chemin d’installation du plug-in. 5. Indication du chemin d’installation d’Eclipse. 6. Configuration du plug-in. 7. Installation de Flash Player 9 et des extensions ColdFusion et JSEclipse optionnelles. 8. Après une reconfiguration du plug-in, un récapitulatif d’installation est affiché. 9. Installation du plug-in. 10. Fin de l’installation. Pour vérifier que l’installation du plug-in s’est correctement déroulée, exécutez l’IDE Eclipse et créez un nouveau projet de type Flex Project en procédant comme suit : 1. Sélectionnez le menu File>New>Other. 2. Dans la fenêtre qui s’ouvre alors, sélectionnez Flex Builder puis Flex Projet. 3. Une série de questions vous est alors posée. Acceptez les options proposées par défaut en indiquant Test pour le nom du projet. 4. Après validation, une perspective Eclipse s’affiche, identique à celle de Flex Builder en mode Autonome (figure 4-11). Flex Builder est désormais correctement installé. Étudions à présent ses caractéristiques et son mode de fonctionnement dans le détail.
55
=Flex3 FM.book Page 56 Mardi, 2. décembre 2008 3:32 15
56
Comprendre Flex 3 PARTIE I
Figure 4-11
Perspective Eclipse de Flex Builder
Les perspectives de Flex Builder Dans cette partie, nous allons aborder les deux notions essentielles de Flex Builder que nous retrouverons tout au long de cet ouvrage : la perspective et la vue. Le terme « perspective » peut être défini par une combinaison d’éditeurs et de vues permettant de réaliser des tâches précises. Comme son nom l’indique, un éditeur permet d’éditer des fichiers. Dans le cas d’une application Flex, il existe trois éditeurs : • un éditeur MXML ; • un éditeur ActionScript ; • un éditeur CSS. Une vue, quant à elle, est liée à un éditeur. Si, par exemple, on souhaite éditer un fichier de type MXML dont le rôle principal est la description d’une interface graphique, nous verrons apparaître à l’écran les composants disponibles pouvant être insérés dans cette interface ainsi
=Flex3 FM.book Page 57 Mardi, 2. décembre 2008 3:32 15
Développer des applications à l’aide de Flex Builder CHAPITRE 4
que leurs propriétés respectives. Si nous éditons à présent un fichier ActionScript, une autre vue sera affichée présentant les variables et les classes du fichier en cours d’édition. Flex Builder professionnel est composé de quatre perspectives : • la perspective de développement, permettant de visualiser le code de l’application ; • la perspective de design qui nous permet de créer les interfaces graphiques de nos applications ; • la perspective de débogage nous offre une aide précieuse pour corriger les problèmes rencontrés lors de l’exécution d’une application ; • la perspective de profiling ajoute des fonctionnalités à la perspective de débogage en permettant d’étudier le temps processeur ou l’occupation mémoire de certaines procédures. Lors de la création d’un nouveau projet, la perspective Design est sélectionnée par défaut (figure 4-12). Pour passer à la perspective de développement, il suffit de cliquer sur le bouton Source situé dans la barre de menus de la vue centrale (figure 4-13).
Figure 4-12
La perspective de design
57
=Flex3 FM.book Page 58 Mardi, 2. décembre 2008 3:32 15
58
Comprendre Flex 3 PARTIE I Figure 4-13
Boutons permettant d’afficher les perspectives de design et de développement
La perspective de développement La perspective de développement comprend les éditeurs et les vues nécessaires à la création des fichiers en mode Code. Nous pouvons ainsi éditer des fichiers ActionScript, CSS, MXML… Au centre de cette perspective (figure 4-14) se trouve l’éditeur principal permettant la saisie du code. La vue Flex Navigator, située en haut à gauche, affiche l’arborescence du projet et l’ensemble des fichiers qu’il contient. La vue Outline présente la structure hiérarchique du code saisi et permet également de visualiser les alertes et erreurs présentes. Enfin, la vue Problems, située sous l’éditeur, présente l’ensemble des alertes et erreurs de compilation pouvant perturber le bon déroulement de l’application.
Figure 4-14
La perspective de développement
=Flex3 FM.book Page 59 Mardi, 2. décembre 2008 3:32 15
Développer des applications à l’aide de Flex Builder CHAPITRE 4
La perspective de design Cette perspective vous permettra de disposer facilement les composants d’une interface graphique comme nous le ferions avec un éditeur WYSWYG (figure 4-15).
Figure 4-15
La perspective de design
Au centre de cette perspective se trouve l’éditeur MXML. Pour y ajouter des composants, il suffit de les sélectionner dans la vue Components et de les faire glisser dans l’éditeur. Par ailleurs, leurs propriétés peuvent être modifiées dans la vue Flex Properties, située à droite de l’éditeur MXML. La vue States permet, quant à elle, de créer des états d’interface. Il est ainsi possible de définir différents états pour une interface donnée. Prenons pour exemple une interface graphique contenant un panneau permettant de saisir un identifiant et un mot de passe. À l’état initial, sont affichés les deux zones de saisie, le
59
=Flex3 FM.book Page 60 Mardi, 2. décembre 2008 3:32 15
60
Comprendre Flex 3 PARTIE I
bouton Valider et le bouton Perte du mot de passe. Cet état est représenté par l’état principal (Base state, figure 4-16). Si l’utilisateur clique sur le bouton Perte du mot de passe, un nouvel état apparaîtra dans la vue States (perteMDP) et une zone de texte s’affichera demandant la saisie de l’adresse e-mail à laquelle envoyer le mot de passe oublié. Ce nouvel état, créé à partir de l’état principal, est illustré par la figure 4-17. Pour le moment, nous ne développerons pas davantage la notion d’état, que nous détaillerons au chapitre 9.
Figure 4-16
L’état « Saisie du mot de passe »
Figure 4-17
L’état « Perte du mot de passe »
=Flex3 FM.book Page 61 Mardi, 2. décembre 2008 3:32 15
Développer des applications à l’aide de Flex Builder CHAPITRE 4
La perspective de débogage La perspective de débogage (figure 4-18) est activée lors de l’exécution de l’application en mode Débogage (menu Run>Debug). Elle est très intéressante pour résoudre les problèmes dans vos applications, comme lorsqu’une fonction renvoie une erreur ou bien lorsqu’un appel à un service web échoue.
Figure 4-18
La perspective de débogage
La vue Debug affiche les différentes tâches (thread/processus) réalisées par l’application. Cette vue permet de suspendre ou de reprendre l’exécution d’une tâche précédemment suspendue afin d’analyser l’exécution de l’application.
61
=Flex3 FM.book Page 62 Mardi, 2. décembre 2008 3:32 15
62
Comprendre Flex 3 PARTIE I
Multithreading Il est important de souligner qu’une application Flex n’est pas multithread (multi-tâche). Par conséquent, l’implémentation d’une barre de progression permettant d’afficher l’état d’avancement de l’exécution d’un traitement n’est pas envisageable.
Il peut parfois s’avérer intéressant de stopper l’exécution à un point précis de son avancement. Pour cela, il suffit de placer des points d’arrêt dans le code applicatif. La vue Breakpoints présente les différents points d’arrêt insérés et permet de les gérer (désactivation, passage au point d’arrêt suivant et suppression). Par ailleurs, pour vérifier qu’un traitement a bien été effectué, il peut parfois être nécessaire de « tracer » son passage. Pour cela, il convient d’utiliser la fonction trace du langage ActionScript. La vue Console permet de visualiser l’ensemble du traçage réalisé. La vue Variables, quant à elle, affiche les valeurs prises par les différentes variables déclarées dans le code ce qui permet de résoudre les problèmes de variables non affectées. Enfin, la vue Expressions permet de surveiller les variables jugées critiques pour l’application (saisie d’un mot de passe, etc.). Les valeurs des variables présentes dans cette vue peuvent être modifiées dynamiquement à l’aide de la vue Variables. Affichage des différentes vues Il se peut que l’ensemble des vues ne soit pas affiché par défaut. Dans ce cas, il suffit de sélectionner le menu Window et de choisir la vue désirée parmi la liste proposée. Néanmoins, lors de l’exécution du projet en mode Débogage, Flex Builder vous demandera si vous souhaitez ou non utiliser la perspective de débogage.
La perspective de profiling Cette perspective est la grande nouveauté de la version 3 de Flex Builder professionnel. Grâce à elle, il est désormais possible d’analyser en profondeur l’exécution d’une application Flex. En effet, la perspective Profile permet d’effectuer une analyse statistique du nombre d’objets instanciés, de la place mémoire qu’ils occupent, des méthodes exécutées et de leur temps d’exécution. La perspective Profile (figure 4-19) comprend deux vues essentielles : • la vue Live Objects, qui permet de visualiser les objets créés et les méthodes exécutées ; • la vue Memory usage, dédiée à la visualisation du taux d’utilisation de la mémoire. Maintenant que nous avons passé en revue les différentes perspectives, nous allons nous consacrer à la création de projets Flex.
=Flex3 FM.book Page 63 Mardi, 2. décembre 2008 3:32 15
Développer des applications à l’aide de Flex Builder CHAPITRE 4
Figure 4-19
La perspective de profiling
Créer un projet Tout nouveau développement commence inévitablement par la création d’un nouveau projet ; voici la marche à suivre pour effectuer cela dans Flex Builder : 1. Sélectionnez le menu File>New>Flex Project. 2. Dans la fenêtre qui s’ouvre alors (figure 4-20), saisissez le nom projet (ici ProjetFlex) et choisissez le type d’application souhaité : – Web application permet de créer une page HTML contenant le fichier SWF issu de la compilation ; – Desktop application permet de créer une application Adobe AIR. 3. Pour spécifier le répertoire de destination du projet, désactivez l’option Use Default Location et spécifiez le chemin du répertoire dans le champ Folder.
63
=Flex3 FM.book Page 64 Mardi, 2. décembre 2008 3:32 15
64
Comprendre Flex 3 PARTIE I
4. Indiquez ensuite la technologie serveur à utiliser grâce à la liste déroulante Application server type. En effet, pour pouvoir accéder à des données stockées dans une base, Flex doit être couplé à un langage serveur (ASP.Net, ColdFusion, J2EE, PHP, etc.) qui servira de passerelle. Notez que si vous sélectionnez J2EE ou ColdFusion, Flex propose d’utiliser l’outil LiveCycle Data Services ES (voir encadré) permettant d’accéder aux services de la couche métier développée dans ces technologies. LiveCycle Data Services ES et ColdFusion Flash Remoting LiveCycle Data Services ES permet une intégration complète de Flex dans une architecture J2EE en autorisant la simplification du code et en offrant certaines fonctionnalités telles que l’édition de rapports PDF. ColdFusion Flash Remoting facilite l’intégration de Flex à la technologie ColdFusion qui offre une fonction de création d'applications Internet riches (RIA) côté serveur. Il rend également Flex et la technologie J2EE interopérables. Ces deux produits sont développés par Adobe.
Figure 4-20
Création d’un nouveau projet
5. Cliquez ensuite sur le bouton Next. La fenêtre qui apparaît alors permet de préciser le répertoire dans lequel les fichiers issus de la compilation seront enregistrés (bin-debug par défaut). Même si le chemin du répertoire est spécifié manuellement, il apparaîtra
=Flex3 FM.book Page 65 Mardi, 2. décembre 2008 3:32 15
Développer des applications à l’aide de Flex Builder CHAPITRE 4
tout de même sous le nom bin-debug dans l’arborescence du projet, mais il s’agira d’un raccourci vers le répertoire spécifié. 6. Cliquez à nouveau sur le bouton Next. La fenêtre qui s’affiche alors permet de configurer le répertoire dans lequel les sources du projet seront enregistrées (src par défaut), ainsi que le nom du fichier principal de l’application (figure 4-21). Il est également possible de désigner des répertoires de sources externes et d’importer des bibliothèques telles que des composants personnalisés.
Figure 4-21
Spécification des répertoires
7. Cliquez enfin Finish pour terminer la création du projet.
Arborescence d’un projet Flex Builder L’arborescence d’un projet Flex Builder dépend du type d’application choisi lors de la création du projet.
65
=Flex3 FM.book Page 66 Mardi, 2. décembre 2008 3:32 15
66
Comprendre Flex 3 PARTIE I
Les applications de type web
Lorsque l’option Web Application est activée (figure 4-20), votre projet aura une arborescence semblable à celle illustrée par la figure 4-22.
Figure 4-22
Arborescence d’un projet Flex Builder
Le tableau 4-1 détaille les répertoires et fichiers de cette arborescence. Tableau 4-1
Arborescence d’un projet de type Web
Répertoire/Fichier
Description
\ProjetFlex
Répertoire racine du projet.
\bin-debug
Répertoire de compilation.
\history
Répertoire contenant un ensemble de fichiers dédiés à la prise en charge des actions sur les boutons Suivant et Précédent du navigateur web
history.css
Feuille de styles utilisée par la page historyFrame.html.
history.js
Fichier JavaScript traitant les actions sur les boutons Suivant et Précédent du navigateur web.
historyFrame.html
Page HTML affichant le résultat du traitement réalisé par le fichier history .js.
AC_OETags.js
Script détectant la présence du Flash Player sur le poste client. Associé au fichier playerProductInstall.swf, il permet son exécution le cas échéant.
playerProductInstall.swf
Fichier SWF réalisant l’installation du Flash Player si ce dernier n’est pas présent sur le poste client.
=Flex3 FM.book Page 67 Mardi, 2. décembre 2008 3:32 15
Développer des applications à l’aide de Flex Builder CHAPITRE 4 Tableau 4-1
Arborescence d’un projet de type Web (suite)
Répertoire/Fichier
Description
ProjetFlex.html
Page HTML contenant le fichier SWF de l’application.
ProjetFlex.swf
Fichier SWF de l’application.
\html-template
Répertoire dans lequel sont placés les fichiers nécessaires à la génération de la page HTML contenant le fichier SWF.
index.template.html
Page HTML utilisée comme modèle pour la création de la page w eb contenant le fichier SWF.
\libs
Répertoire accueillant les bibliothèques.
\src
Répertoire des sources de l’application.
ProjetFlex.mxml
Fichier MXML de l’application.
Les applications Adobe AIR
Une application Adobe AIR s’exécute sur le poste client à la manière d’une application standard (figure 4-23). De ce fait, le fichier SWF n’est pas contenu dans une page web, ce qui implique que nous ne trouverons pas les fichiers relatifs à la gestion des événements sur les boutons Suivant et Précédent du navigateur dans le répertoire \history, ni ceux nécessaires à la création de la page web, normalement situés dans le répertoire \html-template. Nous constatons cependant l’apparition d’un nouveau fichier XML, nommé nomDuProjet app.xml situé dans le répertoire src contenant l’ensemble des informations permettant de créer la fenêtre applicative.
Figure 4-23
Application de type Adobe AIR
67
=Flex3 FM.book Page 68 Mardi, 2. décembre 2008 3:32 15
68
Comprendre Flex 3 PARTIE I
Le tableau 4-2 détaille l’ensemble des répertoires et des fichiers de l’arborescence représentée à la figure 4-24. Tableau 4-2
Arborescence d’un projet Adobe AIR
Répertoire/fichier
Description
\ProjetAir
Répertoire racine du projet.
\bin-debug
Répertoire de compilation.
ProjetAir.swf
Fichier SWF de l’application.
ProjetAir-app.xml
Fichier XML chargé de décrire les spécificités de la fenêtre d’exécution du projet.
\libs
Répertoire contenant les bibliothèques du projet.
\src
Répertoire contenant les sources du projet.
ProjetAir.mxml
Fichier applicatif principal.
Figure 4-24
Arborescence d’un projet de type AIR
Exécution et tests L’exécution d’un projet s’effectue en cliquant sur l’icône Run de la barre d’outils de Flex Builder. Si vous souhaitez l’exécuter en mode Débogage, cliquez sur l’icône . La perspective de débogage, dont les fonctionnalités ont été décrites précédemment, s’affiche alors. Nous ne nous étendrons pas d’avantage sur ces notions de test et de débogage qui seront abordées en détail dans le chapitre 17.
Travail collaboratif Flex Builder offre la possibilité d’effectuer un travail collaboratif sur un projet, ce qui peut s’avérer très intéressant pour les projets de grande envergure. Néanmoins, vous devrez pour cela disposer d’un serveur CVS (Concurrent Versions System) capable de gérer les différentes versions du projet, de répercuter les modifications effectuées par chaque développeur tout en analysant leurs impacts. Un système CVS fonctionne selon le principe suivant. Les sources du projet sont copiées dans un répertoire de synchronisation situé sur un serveur. Les acteurs participant au développement du projet peuvent ainsi télécharger ces sources sur leur poste de travail à l’aide d’un client CVS. Chaque développeur possède alors une copie des sources
=Flex3 FM.book Page 69 Mardi, 2. décembre 2008 3:32 15
Développer des applications à l’aide de Flex Builder CHAPITRE 4
(working copy) qu’il peut modifier à l’envi. Une fois toutes les modifications apportées, il transfère les nouveaux fichiers sur le serveur CVS, on parle alors de commit. Les autres développeurs sont alors informés que des modifications ont été apportées et peuvent récupérer les nouveaux fichiers mis à jour en effectuant un update. Pour vous permettre de mieux comprendre ce point, nous allons à présent détailler la configuration d’un serveur CVS dans un environnement Windows. Configuration du serveur CVSNT
Sous Windows, vous devrez utiliser le serveur CVSNT. Cet outil est gratuit et peut être téléchargé à l’adresse suivante : http://www.march-hare.com/cvspro/. Son installation est des plus simples car il vous suffira de suivre les différentes étapes de l’assistant. Pour configurer le serveur, suivez la procédure suivante : 1. Exécutez le programme CVSNT Control Panel (menu Démarrer>Tous les programmes>CVSNT). 2. Cliquez sur l’onglet Repository Configuration permettant de définir le répertoire dans lequel les sources du projet à synchroniser seront enregistrées. Pour cela, cliquez sur le bouton ADD afin d’afficher la fenêtre Server Settings (figure 4-25).
Figure 4-25
Création du répertoire de synchronisation
Configuration des utilisateurs
Les utilisateurs pouvant accéder au serveur CVSNT sont définis dans le fichier passwd situé dans le sous-répertoire CVSROOT du répertoire de synchronisation défini précédemment. Nous allons ajouter l’utilisateur Administrateur qui possédera tous les droits sur le répertoire de synchronisation et dont le mot de passe sera vide. Pour ce faire, éditez le fichier passwd et ajoutez-y la ligne suivante : Administrateur::Administrateur
69
=Flex3 FM.book Page 70 Mardi, 2. décembre 2008 3:32 15
70
Comprendre Flex 3 PARTIE I
Paramétrage du projet Flex Builder
La phase de configuration des utilisateurs terminée, il ne nous reste plus qu’à paramétrer le travail collaboratif pour un projet Flex Builder : 1. Effectuez un clic droit sur l’icône du projet et sélectionnez Team>Share Project. 2. Dans la fenêtre qui s’affiche alors, spécifiez les différents paramètres nécessaires à la réalisation de la connexion au serveur CVS (figure 4-26). Cliquez ensuite sur le bouton Next.
Figure 4-26
Paramétrage de la connexion au serveur CVS
3. Dans la fenêtre suivante, conservez l’option cochée par défaut spécifiant que le nom du module CVS portera le nom du projet. Un répertoire du même nom que celui du projet sera alors créé dans le dossier de synchronisation de CVS. Cliquez ensuite sur le bouton Next > pour valider. 4. Le récapitulatif de la configuration s’affiche alors. Cliquez sur le bouton Finish pour terminer (figure 4-27). 5. Une nouvelle fenêtre apparaît alors, vous informant que des nouveaux fichiers ont été détectés et qu’une synchronisation est nécessaire. Cliquez sur le bouton Next. 6. Dans la fenêtre suivante, saisissez un commentaire sur la raison de la synchronisation et validez en cliquant sur le bouton Finish (figure 4-28).
=Flex3 FM.book Page 71 Mardi, 2. décembre 2008 3:32 15
Développer des applications à l’aide de Flex Builder CHAPITRE 4
Figure 4-27
Récapitulatif du paramétrage CVS
Figure 4-28
Première synchronisation du projet
71
=Flex3 FM.book Page 72 Mardi, 2. décembre 2008 3:32 15
72
Comprendre Flex 3 PARTIE I
Synchronisation des sources
Si nous sélectionnons à nouveau le menu Team du projet, nous pouvons constater qu’il comporte désormais des nouvelles entrées, dont les principales sont : • Commit, permettant de déposer les modifications effectuées sur le serveur ; • Update, offrant la possibilité de mettre à jour les sources du projet à partir de celles situées sur le serveur ; • Synchronize with repository, perspective de synchronisation du projet chargée d’analyser les modifications effectuées et leur impact. Nous n’allons pas nous attarder davantage sur le travail collaboratif. Cette section nous a permis de voir que Flex Builder est capable de s’adapter à toutes les tailles de projets, du plus petit aux projets de grande envergure développés par plusieurs personnes nécessitant une architecture de développement bien définie.
Exporter/importer un projet Nous venons de voir qu’il est possible de travailler en collaboration sur un même projet, l’ensemble des développeurs partagent alors les sources. Cependant, il arrive que nous soyons seuls à développer et que nous devions exporter notre projet afin de l’utiliser sur un autre poste équipé du Framework Flex 3, à des fins de démonstration ou de sauvegarde. Dans cette partie, nous allons donc voir comment il est possible d’exporter mais aussi d’importer un projet au sein de l’environnement de développement.
Exportation Voici la marche à suivre pour exporter un projet en vue de le déployer ou de l’archiver : 1. Effectuez un clic droit sur la vue Flex Navigator et sélectionnez Export. 2. Dans la fenêtre qui s’ouvre alors, indiquez le type d’exportation souhaité (figure 4-29) : – Flex Project Archive, crée une archive pouvant être stockée afin de conserver, par exemple, plusieurs versions différentes du projet ; – Release Build, exporte le projet vers l’environnement de production, le rendant ainsi disponible pour l’ensemble des utilisateurs concernés. 3. Cliquez ensuite sur le bouton Next afin de sélectionner le projet concerné par l’exportation.
=Flex3 FM.book Page 73 Mardi, 2. décembre 2008 3:32 15
Développer des applications à l’aide de Flex Builder CHAPITRE 4
Figure 4-29
Choix du type d’exportation
Importation Pour importer un projet, suivez les étapes suivantes : 1. Effectuez un clic droit sur la vue Flex Navigator et sélectionnez Import. 2. Dans la fenêtre qui s’ouvre alors, indiquez le type de fichier à importer dans Flex Builder. Un projet Flex Builder peut être importé à partir d’un fichier archive ou du fichier .project présent dans le répertoire racine de chaque projet Flex Builder (figure 4-30).
Figure 4-30
Fichier .project
73
=Flex3 FM.book Page 74 Mardi, 2. décembre 2008 3:32 15
74
Comprendre Flex 3 PARTIE I
3. Cliquez sur le bouton Next. Dans la fenêtre présente à l’écran, si vous souhaitez importer un projet archivé (zip), cliquez sur le bouton Browse situé en regard de la ligne Archive file afin de parcourir votre disque dur et sélectionner l’archive correspondante, puis cliquez sur le bouton OK. Si vous souhaitez importer un projet non archivé, cliquez alors le bouton Browse situé en regard de la ligne Project Folder, puis parcourez votre disque dur jusqu’au répertoire racine du projet souhaité. Cette action sélectionne automatiquement le fichier .project qui y est situé. Cliquez enfin sur le bouton OK. 4. Une fois le projet sélectionné, cliquez sur le bouton Finish afin d’importer le projet dans l’environnement de développement.
En résumé Au cours de ce chapitre, nous avons découvert les nombreuses fonctionnalités de développement offertes par Flex Builder. Cet environnement de développement complet offre des fonctionnalités de design, de codage, de débogage et de gestion de projets, le tout intégré à l’outil Eclipse, ce qui rend son utilisation conviviale, contrairement au mode de développement étudié dans le chapitre précédent. De plus, le développeur dispose de l’ensemble des outils nécessaires au sein d’un même environnement lui permettant d’optimiser et d’accélérer son développement. Avant de poursuivre avec l’étude des composants graphiques proposés par le framework Flex, nous vous conseillons de vous familiariser avec l’utilisation de Flex Builder et de ses perspectives. Vous serez ainsi tout à fait à l’aise pour réaliser les exemples et cas pratiques proposés dans la suite de cet ouvrage.
=Flex3 FM.book Page 75 Mardi, 2. décembre 2008 3:32 15
5 Les composants de contrôle Comme nous le savons à présent, Flex est le framework dédié à la création de la partie front end d’une application. Pour cela, il convient de disposer de composants permettant de réaliser cette interface graphique. Les composants proposés par Flex peuvent se diviser en quatre catégories : • les composants de contrôle de type boutons, zones de texte, etc. ; • les conteneurs comme les panneaux, canevas, etc. ; • les composants de navigation (menus, onglets, etc.) ; • et enfin les composants permettant de générer des graphiques et autres histogrammes pour la visualisation de statistiques. Au cours des trois chapitres suivants, nous n’allons pas vous présenter l’ensemble des composants dans leurs moindres détails, car cela pourrait faire l’objet d’un ouvrage à part entière, mais découvrir l’usage des composants les plus fréquemment utilisés dans les applications Flex. Nous allons donc commencer par l’étude des composants de contrôle dont le rôle est de permettre l’interaction entre l’utilisateur et l’application. Soulignons que certains d’entre eux permettent également de présenter des données (tableaux, images, etc.).
Les boutons et interrupteurs Commençons notre étude des composants par la présentation des plus fréquemment utilisés : les boutons et interrupteurs.
=Flex3 FM.book Page 76 Mardi, 2. décembre 2008 3:32 15
76
Comprendre Flex 3 PARTIE I
Button Les boutons sont communément utilisés pour déclencher l’exécution de procédures ou de fonctions. Voici un exemple d’implémentation :
Le bouton correspondant à cet extrait de code possède les caractéristiques suivantes : • un identifiant (id="btn_chercher") ; • un label correspondant au texte affiché sur le bouton (label="Rechercher") ; • une icône (icon="@Embed(source='../image/iconeRechercher.gif')") ; • une action déclenchée en cliquant sur le bouton (click="rechercher()"). Dans notre exemple, lorsque l’utilisateur clique sur le bouton, la procédure rechercher() est alors déclenchée.
ToogleButton En ajoutant la propriété toogle="true" au composant Button, nous obtenons un bouton de type interrupteur. Il peut être utilisé pour visualiser l’état d’une action, par exemple, le partage d’un fichier.
Si l’utilisateur clique sur l’interrupteur, le fichier est partagé et reste dans cet état (le fond du bouton apparaît alors en grisé, comme sur la figure 5-1). Pour annuler le partage, il suffit de cliquer une seconde fois sur le bouton. Figure 5-1
État « partagé »
Permettre le choix CheckBox : les cases à cocher
Les cases à cocher permettent à l’utilisateur de réaliser plusieurs choix parmi une liste proposée (figure 5-2).
=Flex3 FM.book Page 77 Mardi, 2. décembre 2008 3:32 15
Les composants de contrôle CHAPITRE 5
Figure 5-2
Cases à cocher
Voici comment implémenter ce composant de contrôle :
La propriété booléenne selected permet de connaître l’état de la case à cocher. Ainsi, si elle est égale à true, la case est cochée. Dans l’exemple ci-dessus, la troisième case est cochée par défaut. Grâce aux cases à cocher, il nous est possible de déclencher des exécutions de procédures lors de la réalisation de certains événements. L’exemple ci-dessous permet de lancer la procédure changementEtat() lors du changement d’état de la case à cocher :
Les listes simples et déroulantes
Les composants ListBox et ComboBox ayant un mode de fonctionnement identique, nous avons fait le choix d’illustrer la mise en place d’une liste déroulante dont l’usage semble être plus répandu. Implémentation
77
=Flex3 FM.book Page 78 Mardi, 2. décembre 2008 3:32 15
78
Comprendre Flex 3 PARTIE I
En analysant ce code, nous voyons que l’implémentation des ListBox s’effectue à l’aide des balises et grâce aux balises pour les ComboBox. Nous profitons de cet exemple pour insister sur le fait que chaque composant implémenté doit comporter un identifiant, soit l’attribut id. En effet, c’est grâce à cet identifiant que le composant pourra être utilisé au sein de vos procédures ActionScript. Par ce biais, nous pourrons modifier ses propriétés mais aussi récupérer la ou les valeurs sélectionnées lorsque cela est nécessaire et lorsque le composant en offre la possibilité. Alimentation en données
Considérons la liste d’enregistrements issus d’une table contenue dans une base de données ornithologiques dont le contenu est décrit par le tableau 5-1. Tableau 5-1
Enregistrements de base de données ornithologiques
Identifiant
Oiseau
1
Merle
2
Colibri
3
Mésange
Voyons comment alimenter une ComboBox à partir de ces éléments :
Une collection d’objets, présentant les attributs label et data, a été créée en reprenant les données du tableau 5-1. Cette collection est source d’alimentation pour le dataProvider de la ComboBox car elle a été créée entre les deux balises de cette dernière. À retenir L’alimentation d’une liste simple ou d’une liste déroulante s’effectue toujours à l’aide de deux éléments : • l’attribut label stipulant la donnée à afficher ; • l’attribut data permettant d’affecter un identifiant à la donnée affichée dans la liste déroulante.
Notons également la propriété selectedIndex="0" qui indique que nous sélectionnons par défaut le premier élément de la liste (figure 5-3).
=Flex3 FM.book Page 79 Mardi, 2. décembre 2008 3:32 15
Les composants de contrôle CHAPITRE 5
Figure 5-3
Sélection du premier élément de la liste
Nous aurions également pu alimenter le dataProvider de la ComboBox à l’aide d’ActionScript :
Signification de la balise
est utilisée pour spécifier que le code situé à l’intérieur de celle-ci n’est pas du XML. Dans notre cas, il s’agit d’un ensemble de lignes de code ActionScript.
Si nous observons l’alimentation du dataProvider de la ComboBox à l’aide de la collection listeOiseau, nous notons que l’emploi de variables ActionScript au sein du code MXML s’effectue à l’aide d’accolades ouvrante et fermante. Cette notation permet de spécifier la relation existant entre le composant et la variable ; on parle alors de DataBinding.
Le DataBinding ou la liaison de données Vous avez sans doute remarqué la présence de la mention [Bindable] juste avant la déclaration du tableau d’objets listeOiseau. Nous reviendrons sur ce point en détail lors du chapitre 11 qui traite de la gestion des données. Mais vous pouvez d’ores et déjà retenir qu’elle permet de créer une liaison entre le tableau listeOiseau et le dataProvider de la liste déroulante. Ainsi, si le tableau listeOiseau est mis à jour, les données contenues dans la liste déroulante le seront également.
79
=Flex3 FM.book Page 80 Mardi, 2. décembre 2008 3:32 15
80
Comprendre Flex 3 PARTIE I
Interaction avec l’utilisateur
Il est intéressant de pouvoir récupérer l’attribut data de la valeur sélectionnée par l’utilisateur afin de l’utiliser dans un traitement. Pour ce faire, il suffit d’utiliser la propriété selectedItem du composant : Combo_oiseau.selectedItem.data
Précisons que ce qui vient d’être énoncé pour le composant ComboBox est également valable pour le composant ListBox :
Les boutons radio
Un bouton radio seul est apparenté à une case à cocher. Utilisé dans un groupe, il permet de contraindre l’utilisateur à ne faire qu’un seul choix parmi plusieurs propositions (figure 5-4).
Figure 5-4
Boutons radio
Implémentation
Il convient tout d’abord de créer un groupe qui va contenir l’ensemble des boutons radio, puis les boutons radio proprement dits. Chaque bouton créé devra ensuite être intégré au groupe à l’aide de la propriété groupName. Alimentation en données
Pour pouvoir exploiter les boutons radio dans les traitements, il est nécessaire de leur affecter une valeur grâce à la propriété value. Attention à ne pas la confondre avec la propriété label dont la valeur correspond au libellé du composant.
=Flex3 FM.book Page 81 Mardi, 2. décembre 2008 3:32 15
Les composants de contrôle CHAPITRE 5
Interaction avec l’utilisateur
Pour récupérer la valeur d’un bouton radio sélectionné au sein d’un groupe, nous devons utiliser l’écouteur d’événement ItemClickEvent de ce groupe. En guise d’illustration, l’exemple ci-dessous permet d’afficher le choix de l’utilisateur lors de chaque sélection (itemClick) :
Lorsque l’utilisateur sélectionne un bouton radio, il déclenche l’exécution de la procédure selection(). Cette procédure reçoit en paramètre l’événement de type ItemClickEvent qui permet de déterminer quel bouton radio du groupe a été sélectionné. Dès lors, il nous est possible de récupérer la valeur de celui-ci. Notez cependant que la propriété value est ici remplacée par la propriété item. En modifiant quelque peu le code ActionScript, il nous est possible de récupérer le libellé du bouton radio sélectionné (label) :
81
=Flex3 FM.book Page 82 Mardi, 2. décembre 2008 3:32 15
82
Comprendre Flex 3 PARTIE I
Les zones de texte L’unique moyen de communication mis à la disposition du développeur pour guider l’utilisateur à travers son application, ou pour récolter les données saisies par ce dernier, sont les zones de texte. Dans cette partie, nous allons voir comment utiliser ces composants.
Les libellés : Label et Text Les libellés permettent d’afficher du texte de taille réduite (par exemple un intitulé de champ) et non modifiable par l’utilisateur. Contrairement au champ Label, le champ Text permet d’afficher un texte sur plusieurs lignes (figure 5-5).
Figure 5-5
Les libellés
Flex 4 Ce composant est voué à disparaître dans la version 4 du framework. Son successeur portera le nom de
TextBox.
Les zones de saisie Permettre la saisie d’informations est l’une des fonctions principales de toute interface homme-machine. C’est le rôle des composants TextInput et TextArea grâce auxquelles l’utilisateur saisira des données, qui seront ensuite interprétées et traitées par l’application. Implémentation TextInput et TextArea permettent tous deux à l’utilisateur de saisir des informations. La différence entre ces composants réside dans la possibilité offerte par le composant TextArea de saisir un texte sur plusieurs lignes, contrairement au composant TextInput (figure 5-6).
Figure 5-6
Les zones de texte
=Flex3 FM.book Page 83 Mardi, 2. décembre 2008 3:32 15
Les composants de contrôle CHAPITRE 5
Alimentation en données et interaction avec l’utilisateur
La propriété text des composants TextInput et TextArea a été affectée du texte que l’on souhaite afficher. Cette même propriété peut être utilisée en ActionScript afin de récupérer ou d’alimenter le contenu de la zone de texte. public var texteEcrit:String = nomZoneTexte.text nomZoneTexte.text = "texte à afficher" Flex 4 Grâce à la propriété withInChars, Flex 4 permettra de dimensionner automatiquement les zones de texte en longueur, en fonction du nombre de caractères maximum que l’utilisateur pourra saisir. Pour le composant textArea, nous aurons en plus la possibilité de définir le nombre de lignes visibles à l’écran via la propriété heightInLines.
Les zones de texte « riches » Les composants RichTextEditor offrent de nombreuses possibilités : • modification de la police (choix de la police, taille, gras, souligné, italique) ; • mise en forme du texte (modification de la couleur, aligné à gauche ou à droite, centré, justifié) ; • utilisation de listes à puces ; • insertion de liens hypertextes. Implémentation
Le code suivant montre comment alimenter la zone de texte du composant. La mise en forme du texte (gras, italique…) est effectuée à l’aide de balises HTML alimentant la propriété htmlText du composant. Les balises sont ensuite interprétées par le composant qui en affiche le rendu final (figure 5-7).
L’événement creationComplete appelle la fonction d’alimentation de la zone de texte une fois le composant créé. Il peut également être utilisé pour l’ensemble des composants y compris l’application. Ceci peut s’avérer utile si une procédure doit être exécutée après la création de l’application. Figure 5-7
Composant RichTextEditor
Informer l’utilisateur Si vous souhaitez mettre en place ce composant au sein de vos interfaces, il est nécessaire d’informer l’utilisateur sur la méthode de création des liens hypertextes, car la tâche n’est pas des plus faciles. En effet, il devra tout d’abord sélectionner le texte faisant office de lien. La zone de texte contenant http:// s’activera alors et l’invitera à saisir le lien souhaité. Une fois la saisie effectuée, il suffira d’appuyer sur la touche Entrée du clavier pour valider la saisie et créer le lien.
=Flex3 FM.book Page 85 Mardi, 2. décembre 2008 3:32 15
Les composants de contrôle CHAPITRE 5
Les tableaux DataGrid Pour présenter des données tabulaires de façon classique, le plus simple est de recourir au composant DataGrid. Nous verrons que malgré cet aspect simpliste, il offre tout de même différentes fonctionnalités dont la possibilité de trier des colonnes par un simple clic sur leur en-tête. Implémentation et alimentation en données
Le code suivant permet d’implémenter le composant DataGrid et de l’alimenter en données à l’aide d’une collection d’objets (figure 5-8) (ArrayCollection).
Ici, nous avons tout d’abord créé une collection d’objets ayant pour attributs id, prenom et nom. Nous avons ensuite créé le tableau, la propriété dataField permettant de faire le lien entre la source de données et la colonne du tableau. Ainsi, la première colonne affichera l’attribut id de la collection d’objets. Puis, la fonction alimenterDatagrid() est appelée
85
=Flex3 FM.book Page 86 Mardi, 2. décembre 2008 3:32 15
86
Comprendre Flex 3 PARTIE I
après la création de l’application (creationCompleted) et affecte la collection d’objets au dataProvider du DataGrid. Il est également possible de cacher une colonne en affectant la propriété visible à false.
Figure 5-8
Le composant DataGrid
Interaction avec l’utilisateur
Comme pour les composants précédents, il est intéressant de savoir comment exploiter l’interaction du composant DataGrid avec l’utilisateur. La question souvent posée dans ce cas est « Comment récupérer les valeurs de la ligne sélectionnée ?». Pour y répondre, nous allons écrire une fonction mettant en œuvre l’utilisation de la propriété selectedItem du composant. Voici comment procéder si nous souhaitons récupérer l’identifiant de l’individu sélectionné dans le tableau :
Comme pour les boutons radio, on utilise l’événement itemClick faisant appel à la procédure infoLigneSelectionnee dont le rôle est d’afficher la valeur de l’attribut id. Manipuler les colonnes par programmation
Toujours dans l’objectif d’offrir à l’utilisateur une part importante d’interaction avec l’interface graphique, il est intéressant de mettre en place des fonctionnalités liées aux colonnes du tableau et, pourquoi pas, de lui permettre de masquer ou non certaines d’entre elles. Pour ce faire, il convient d’affecter un identifiant à chaque colonne, ce qui permettra de les identifier et d’invoquer leur méthode dans le code ActionScript. L’exemple de code suivant illustre la mise en place d’une procédure permettant de cacher la colonne Id du tableau :
AdvancedDataGrid Nouveauté du framework Flex 3, le composant AdvancedDataGrid apporte des nombreuses fonctionnalités concernant la présentation des données tabulaires : • la présentation de données hiérarchiques (sous forme d’arborescence) ; • le regroupement de colonnes ; • le tri sur plusieurs colonnes. Implémentation et alimentation en données
Voici un exemple permettant de créer un tableau avancé mettant en œuvre la présentation hiérarchique des données ainsi que le regroupement de colonnes :
=Flex3 FM.book Page 89 Mardi, 2. décembre 2008 3:32 15
Les composants de contrôle CHAPITRE 5
89
=Flex3 FM.book Page 90 Mardi, 2. décembre 2008 3:32 15
90
Comprendre Flex 3 PARTIE I
La figure 5-9 illustre le résultat obtenu à l’aide de ce code.
Figure 5-9
Les tableaux avancés
Par l’instanciation de la classe HierarchicalData, nous indiquons au composant Advanced DataGrid que les données alimentant son dataProvider sont de type hiérarchiques. Notons également la spécification du mode de visualisation des données grâce à la propriété designViewDataType, ici affectée à tree, précisant que les données seront présentées sous
la forme d’une arborescence. Il nous est également possible de présenter les données de la même manière que pour le composant DataGrid, c’est-à-dire de façon non hiérarchisée, en affectant la valeur Flat à la propriété designViewDataType. Enfin, notons la présence d’un regroupement de colonnes, obtenu grâce à la présence des balises et . La première indique au composant AdvancedDataGrid que certaines de ces colonnes feront l’objet d’un regroupement, la seconde balise permet de préciser les colonnes devant être regroupées. Interaction avec l’utilisateur
La première interaction avec l’utilisateur est la possibilité de trier le tableau sur plusieurs colonnes. Pour ce faire, nous devons activer le mode de tri Expert du composant Advanced DataGrid en affectant la valeur de la propriété sortExpertMode à true.
Voici comment procéder si nous souhaitons trier la colonne Matière et les valeurs de la colonne Quantité associées : 1. Sélectionnez la colonne Matière en cliquant sur son en-tête. 2. Cliquez ensuite sur la colonne Quantité tout en maintenant la touche Ctrl du clavier enfoncée. Les matières seront alors triées par ordre alphabétique et par quantité croissante (figure 5-10). L’ordre du tri est spécifié par les numéros 1 et 2 apparus à droite des en-têtes des colonnes utilisées pour le tri, et le critère croissant/décroissant est, quant à lui, indiqué par la flèche pointant vers le haut/vers le bas. Notons qu’il est également possible de trier le tableau sur plusieurs colonnes sans activer le mode Expert. Voici la marche à suivre pour cela : 1. Sélectionnez la colonne Matière en cliquant sur son en-tête. 2. Choisissez une seconde colonne pour le tri. 3. En survolant avec la souris l’emplacement où se trouve le numéro d’ordre de tri, celui-ci est alors incrémenté de un. En cliquant sur ce dernier, il est possible d’ajouter un filtre supplémentaire.
Figure 5-10
Tri croissant sur les colonnes Matière et Quantité
Comme précédemment, si nous maintenons la touche Ctrl enfoncée et cliquons sur la colonne Quantité, les matières seront triées par ordre alphabétique et seront regroupées cette fois-ci par quantité décroissante (figure 5-11).
Figure 5-11
Tri croissant sur la colonne Matière et décroissant sur la colonne Quantité
91
=Flex3 FM.book Page 92 Mardi, 2. décembre 2008 3:32 15
92
Comprendre Flex 3 PARTIE I
En ce qui concerne la récupération des données de la ligne sélectionnée par l’utilisateur, la méthode employée est identique à celle utilisée pour le composant DataGrid.
Analyser un cube OLAP avec OLAPDataGrid L’introduction de ce composant dans la version 3 du framework ouvre les applications Flex vers le monde décisionnel. En effet, grâce au composant OLAPDataGrid, il est possible d’afficher les données issues de requêtes effectuées sur un cube OLAP (OnLine Analytical Processing).
Qu’est-ce qu’un cube OLAP ? Dans la mesure où les requêtes décisionnelles exécutées sur des bases de données relationnelles demandaient un nombre important de ressources système pour leur exécution, il convenait d’apporter une solution aux utilisateurs cherchant une réponse à leurs besoins tout en minimisant le temps d’exécution. C’est dans ce but que les bases de données OLAP ont été mises au point, permettant de stocker les données sous forme de dimensions, lesquelles représentent les axes de recherche des utilisateurs. Il devient ainsi possible de combiner ces dimensions afin d’obtenir les résultats voulus. Les bases de données OLAP peuvent être représentées sous forme de cube, appelé cube OLAP. Sur la figure 5-12 illustrant ce concept de base de données, nous pouvons distinguer trois dimensions : • D1 : produit ; • D2 : région ; • D3 : montant des ventes.
Figure 5-12
Cube OLAP
=Flex3 FM.book Page 93 Mardi, 2. décembre 2008 3:32 15
Les composants de contrôle CHAPITRE 5
Ces trois dimensions nous permettent de calculer le montant des ventes par région et par produit, représenté par le sous-cube grisé symbolisant la rencontre des trois données. Ce sous-cube sera appelé mesure dans le composant OLAPDataGrid. Le nombre de dimensions étant illimité, il nous sera ainsi possible de déterminer le chiffre d’affaires (dimension 1) d’une filiale (dimension 2) sur une période de 4 mois (dimension 3) pour un certain produit (dimension 4) d’une certaine gamme (dimension 5). L’interrogation des données sur un cube OLAP s’effectue donc par la combinaison de dimensions. Aller plus loin Si vous souhaitez en savoir davantage sur ce point, nous vous conseillons de consulter le site Internet suivant : http://pagesperso-orange.fr/bernard.lupin/index.htm.
Création d’un cube OLAP Pour créer notre cube OLAP, nous allons nous baser sur une liste d’enregistrements issus d’une base de données. Nous pourrons ainsi en déduire les dimensions du cube et procéder à sa création. Tableau de données
Le tableau 5-2 présente les enregistrements issus d’une base de données totalisant le nombre skieurs annuels sur les trois stations de ski S1, S2 et S3. Tableau 5-2
Données à analyser avec un cube OLAP
Station
Année
Nombre de skieurs
S1
2008
12 000
S1
2007
11 000
S1
2006
18 000
S1
2005
17 444
S2
2008
1 200
S2
2007
4 500
S2
2006
8 000
S2
2005
500
S3
2008
12 500
S3
2007
40 000
S3
2006
8 550
S3
2005
6 000
93
=Flex3 FM.book Page 94 Mardi, 2. décembre 2008 3:32 15
94
Comprendre Flex 3 PARTIE I
Ce tableau peut être dès à présent implémenté en ActionScript comme suit :
Pour l’instant, nous n’avons fait que réaliser l’implémentation d’un tableau de données. Nous allons à présent voir comment l’utiliser afin de créer les dimensions du cube OLAP. Mise en place des dimensions
Grâce au tableau que nous venons de créer, nous pouvons déduire la composition du cube. Celui-ci contiendra ainsi trois dimensions et un champ qui nous servira de mesure : • dimension 1 : le champ station ; • dimension 2 : le champ skieurs ; • dimension 3 : le champ annee ; • champ de mesure : skieurs, dont nous calculerons la somme. Voyons comment créer le cube et ses dimensions :
=Flex3 FM.book Page 95 Mardi, 2. décembre 2008 3:32 15
Les composants de contrôle CHAPITRE 5
Notre cube OLAP est créé à l’aide de la balise . Les dimensions, quant à elles, sont créées à l’aide de la balise . Chaque dimension est définie par un attribut () et un niveau de hiérarchie ( et ). Une hiérarchie représente, de façon simplifiée, le nombre de champs contenus dans la dimension. Dans notre exemple, chaque dimension possède une hiérarchie à un seul niveau. Enfin, nous devons créer une mesure, c’est-à-dire une valeur que nous pourrons visualiser lorsque nous effectuerons des opérations sur le cube. Nous avons ici choisi comme mesure la somme du nombre de skieurs (). Le cube sera alimenté en données à l’aide de sa propriété dataProvider qui doit être liée à au tableau. Notre cube est à présent créé et nous pouvons désormais effectuer notre première requête.
Requête sur le cube La requête que nous allons effectuer nous permettra de visualiser le nombre de skieurs par station et par année. Le résultat obtenu sera affiché dans le composant OLAPDataGrid. La liste des stations s’affichera en lignes et la liste des années en colonnes. À chaque intersection, nous retrouverons notre mesure spécifiée lors de la création du cube, c’està-dire la somme du nombre de skieurs. Le code suivant correspond au code complet de l’application. Nous l’avons commenté pour vous permettre de comprendre la méthode de création d’une requête sur un cube OLAP afin d’en afficher le résultat.
95
=Flex3 FM.book Page 96 Mardi, 2. décembre 2008 3:32 15
96
Comprendre Flex 3 PARTIE I
Important Le composant OLAPDataGrid sert uniquement à afficher le résultat d’une requête réalisée sur un cube OLAP. Il est donc impossible d’afficher les données du cube dans le composant OLAPDataGrid. En effet, un cube possédant plusieurs dimensions, il serait très difficile de les représenter dans un composant ne présentant que deux dimensions (lignes et colonnes) !
=Flex3 FM.book Page 99 Mardi, 2. décembre 2008 3:32 15
Les composants de contrôle CHAPITRE 5
La figure 5-13 illustre le résultat obtenu lors de l’exécution de la requête sur le cube OLAP. Les lignes correspondent comme convenu aux stations et les années s’affichent en colonnes. À l’intersection de ces lignes et colonnes, nous pouvons voir la valeur de la mesure.
Figure 5-13
Utilisation du composant OLAPDataGrid
99
=Flex3 FM.book Page 100 Mardi, 2. décembre 2008 3:32 15
100
Comprendre Flex 3 PARTIE I
Tri des colonnes Le composant OLAPDataGrid ne permet pas de tri sur les colonnes affichées alors que c’est le cas avec le composant AdvancedDataGrid.
Insérer des images, des animations et vidéos Flash Intégrer des animations Flash Grâce au composant SWFLoader, il est possible d’intégrer des animations ou tout autre programme Flash dans les applications Flex.
L’attribut scaleContent permet d’adapter la taille de l’animation par rapport à celle du composant. La propriété autoLoad sert, quant à elle, à spécifier si l’animation doit être lue automatiquement (true) ou non (false). Pour charger une animation par programmation, il convient donc de spécifier la source et d’exécuter la procédure load() du composant : public function chargerSWF():void { animation_flash.source = "animation.swf"; animation_flash.load(); }
Insérer des images L’insertion d’images est possible par l’utilisation du composant Image. L’implémentation de ce composant est identique à celle du composant SWFLoader. Nous retrouvons donc les propriétés source et scaleContent. Conseil Afin que vos images et animations Flash soient prises en compte lors de la compilation de votre projet, nous vous conseillons de créer un dossier images dans le répertoire src du projet et d’y ajouter l’ensemble de vos images ou animations Flash.
=Flex3 FM.book Page 101 Mardi, 2. décembre 2008 3:32 15
Les composants de contrôle CHAPITRE 5
101
Lecteur vidéo Flash Le composant VideoDisplay permet de lire des vidéos Flash (fichiers .flv), comme le propose par exemple le site de YouTube. Le code suivant illustre l’utilisation du composant VideoDisplay et de ses méthodes Play() et Stop() permettant respectivement de démarrer et de stopper la lecture d’une vidéo (figure 5-14) :
La propriété source permet de définir le chemin de la vidéo qui doit être lue par le composant. La lecture de la vidéo s’effectue par l’appel de la méthode Play() de la classe Video Display.L’arrêt passe par l’emploi de la méthode Stop(). Notez qu’il est également possible de lire automatiquement la vidéo en affectant la valeur true à la propriété autoPlay du composant.
Figure 5-14
Lecture d’une vidéo Flash
=Flex3 FM.book Page 102 Mardi, 2. décembre 2008 3:32 15
102
Comprendre Flex 3 PARTIE I
Afficher la progression du chargement de la vidéo Le composant VideoDisplay ne dispose pas d’une barre de progression intégrée. Pour l’afficher, il convient de développer cette fonctionnalité en utilisant la méthode progress du composant qui tout au long du chargement exécutera une procédure permettant de calculer le nombre d’octets chargés. L’exemple de code suivant montre comment procéder pour afficher le pourcentage du chargement de la vidéo dans une zone de texte :
=Flex3 FM.book Page 103 Mardi, 2. décembre 2008 3:32 15
Les composants de contrôle CHAPITRE 5
103
Choisir une couleur dans une palette avec ColorPicker Ce composant trouve sa place dans une application à vocation graphique. En effet, il permet de choisir une couleur dans une palette par défaut ou définie par le développeur (figure 5-15).
Figure 5-15
Composant ColorPicker
Prenons comme exemple de travail un jeu de Mastermind où l’utilisateur peut choisir une couleur parmi les suivantes (figure 5-16) : Couleur
Code correspondant
Bleu
0x0033CC 0x33CC00 0xFF0000 0xFFFF00 0xFF9900 0x9900CC 0xFF00FF
Vert Rouge Jaune Orange Violet Fuchsia
=Flex3 FM.book Page 104 Mardi, 2. décembre 2008 3:32 15
104
Comprendre Flex 3 PARTIE I Figure 5-16
Exemple d’utilisation du composant ColorPicker dans le jeu Mastermind
La liste des couleurs est contenue dans un tableau servant à alimenter le dataProvider du composant. Pour récupérer le code couleur sélectionné, on utilisera la propriété selected Item du composant, comme nous l’aurions fait pour une simple liste.
Contrôler le format de date avec DateChooser et DateField Afin de faciliter la saisie et d’éviter les erreurs de format de date, Flex met à votre disposition deux composants : • Le composant dateChooser qui se présente sous la forme d’un calendrier grâce auquel l’utilisateur peut sélectionner la date souhaitée. Notez néanmoins que la date ainsi choisie n’est pas présente sous forme littérale (par exemple : 16 octobre 2008). • Le composant dateField qui se présente sous la forme d’une zone de texte contenant la date au format littéral et dont le contenu ne peut être modifié qu’en sélectionnant une date dans le calendrier associé.
=Flex3 FM.book Page 105 Mardi, 2. décembre 2008 3:32 15
Les composants de contrôle CHAPITRE 5
105
De nombreux paramétrages peuvent être effectués sur ces composants. Dans l’exemple suivant, nous avons choisi de les « franciser » en affichant les mois en français dans les calendriers et la date au format jour/mois/année dans le composant dateField.
Il est possible de connaître la date sélectionnée à l’aide de la propriété selectedDate accompagnée de la donnée choisie. Prenons pour exemple la date 02/03/2008, sélectionnée dans le composant Calendrier : • Calendrier.selectedDate.date renverra la valeur 2. • Calendrier.selectedDate.month retournera la valeur 2 étant donné que le premier mois de l’année porte le numéro 0. • Calendrier.selectedDate.fullYear retournera la valeur 2008.
Ajouter un curseur avec HSlider et VSlider L’intérêt de ces composants est qu’ils permettent à l’utilisateur de sélectionner une valeur dans un intervalle défini en déplaçant simplement un curseur sur une barre horizontale (HSlider) ou verticale (VSlider). Voyons comment implémenter ce composant à travers les quelques lignes suivantes :
=Flex3 FM.book Page 106 Mardi, 2. décembre 2008 3:32 15
106
Comprendre Flex 3 PARTIE I
Figure 5-17
Composant HSlider
Comme le montre la figure 5-17, le composant créé pour le code précédent est de type horizontal et propose un intervalle de valeurs comprises entre 0 et 20 avec un pas de 2 (tickInterval). Le déplacement du curseur sera également effectué à l’aide d’un pas de 2 grâce à la propriété snapInterval portée à cette valeur. Par ailleurs, les libellés ont été définis manuellement afin de rendre l’utilisation du composant plus conviviale, car les libellés ne sont pas spécifiés par défaut lors de la mise en place de ces deux composants. Enfin, la valeur sur laquelle est positionné le curseur peut aisément être récupérée grâce à la propriété value du composant.
L’incrémentation avec NumericStepper Le composant NumericStepper est semblable aux composants HSlider et Vslider à la seule différence que l’utilisateur utilise dans ce cas un ascenseur et non un curseur (figure 5-18). Figure 5-18
Composant NumericStepper
Au titre des différences, soulignons également l’emploi la propriété stepSize (au lieu de tickInterval pour les composants Hslider et Vslider) qui permet de définir le pas.
Présentation de données avec HorizontalList et TileList Ces composants permettent de présenter des données en combinant aspect graphique et données. En d’autres termes, si nous considérons une application spécifique au domaine du e-commerce, ces composants peuvent êtres utilisés afin de visualiser l’image d’un produit ainsi que ses caractéristiques (prix, description, etc.). Dans un autre domaine, nous pouvons utiliser ces composants dans le milieu médical afin d’afficher la liste des lits hospitaliers occupés ou non avec le nom du patient le cas échéant (figure 5-19). Pour cela, il convient de placer deux images dans le répertoire images préalablement créé dans le répertoire src du projet.
=Flex3 FM.book Page 107 Mardi, 2. décembre 2008 3:32 15
Les composants de contrôle CHAPITRE 5
107
Figure 5-19
Composant HorizontalList
Cet exemple permet d’introduire la méthode d’alimentation du dataProvider de notre composant ; elle est bien évidemment identique pour l’ensemble des composants utilisant un dataProvider. Il s’agit d’illustrer en MXML le ArrayCollection du langage ActionScript. On retrouve la balise Array, contenant l’ensemble des objets (object) possédant les attributs label et icon.
Réaliser des hyperliens grâce à LinkButton Ce composant permet à l’utilisateur d’ouvrir la page web associée à un hyperlien après avoir cliqué dessus (figure 5-20), grâce à la méthode navigateToUrl.
Figure 5-20
Composant LinkButton
=Flex3 FM.book Page 108 Mardi, 2. décembre 2008 3:32 15
108
Comprendre Flex 3 PARTIE I
Cette portion de code provoque l’ouverture d’une nouvelle fenêtre dans le navigateur web. Notez que l’affichage de cette fenêtre peut être bloqué en fonction des paramètres de sécurité spécifiés sur votre poste de travail.
Afficher des données sous forme d’arborescence Le composant Tree est très souvent utilisé pour afficher des données organisées de façon hiérarchique (listing des fichiers d’un répertoire, e-mails contenus dans la boîte de réception d’un logiciel de messagerie électronique…).
Implémentation et alimentation en données ); ]]>
=Flex3 FM.book Page 109 Mardi, 2. décembre 2008 3:32 15
Les composants de contrôle CHAPITRE 5
109
Un arbre (figure 5-21) ayant pour vocation d’afficher des données hiérarchiques telles que celles contenues dans un fichier XML, nous avons donc tout naturellement créé une variable XML contenant un ensemble de données. Cette variable va alimenter le dataProvider du composant Tree en prenant soin de sélectionner le niveau1 comme premier niveau hiérarchique. Il faut également spécifier les libellés pour assurer la présentation des données (labelField). Pour cela que nous faisons appel à la propriété label (@label) de chaque nœud.
Figure 5-21
Affichage de données hiérarchiques à l’aide du composant Tree
Interaction avec l’utilisateur La principale interaction consiste à récupérer la valeur d’un nœud de l’arbre sélectionné par l’utilisateur afin de l’exploiter dans un traitement. Voici comment procéder :
=Flex3 FM.book Page 110 Mardi, 2. décembre 2008 3:32 15
110
Comprendre Flex 3 PARTIE I
);
public function afficherLabel(e:ListEvent):void { Alert.show(e.currentTarget.selectedItem.@label); } ]]>
Lorsque l’utilisateur clique sur un élément de l’arbre (itemClick), cela déclenche l’exécution de la procédure afficherLabel() dont l’événement de type ListeEvent est passé en paramètre, permettant ainsi de déterminer l’élément de l’arbre sélectionné et d’en extraire sa propriété label (@label)
En résumé Dans ce chapitre, nous avons étudié les composants permettant une interaction avec l’utilisateur de l’application. Nous sommes à présent en mesure de créer des listes déroulantes, de déclencher des actions à l’aide de boutons, de présenter des données sous forme tabulaire, etc. L’étape suivante va consister à étudier les composants qui vont nous permettre de positionner ces composants de contrôle.
=Flex3 FM.book Page 111 Mardi, 2. décembre 2008 3:32 15
6 Les composants conteneurs Grâce à la lecture du chapitre précédent, vous connaissez maintenant les principaux composants de contrôle. Nous allons désormais vous présenter les différents composants chargés de jouer le rôle de « conteneur de composants » et permettant d’agencer et d’organiser ces derniers.
Créer une barre de menus avec ApplicationControlBar Le composant ApplicationControlBar permet de créer une barre de menus utile à la navigation dans laquelle diverses actions, comme un champ de recherche, peuvent être proposées. Le code suivant permet de créer une barre de menus contenant une zone de texte et un bouton Rechercher afin que l’utilisateur puisse effectuer une recherche dans un champ d’une base de données (figure 6-1).
=Flex3 FM.book Page 112 Mardi, 2. décembre 2008 3:32 15
112
Comprendre Flex 3 PARTIE I
En affectant la valeur true à la propriété dock, nous indiquons que nous souhaitons que la barre de menus soit positionnée en haut de l’application. Pour la placer à un autre endroit dans l’application, il suffit de passer cette valeur à false.
Figure 6-1
Utilisation du composant ApplicationControlBar
Le composant Canvas Ce composant conteneur Canvas permet de placer d’autres composants à l’intérieur de celui-ci à l’aide de leurs coordonnées x et y.
Nous constatons que le composant Button est positionné à l’intérieur du canevas à l’aide de ses propriétés x et y (figure 6-2). Exactement comme en algèbre, les coordonnées (x,y) des éléments situés dans le canevas ont pour coordonnées relatives le coin supérieur gauche du canevas. Ainsi, notre bouton est espacé de 51 pixels sur l’axe horizontal et de 93 pixels sur l’axe vertical du coin supérieur gauche du canevas. Figure 6-2
Utilisation du composant Canvas
=Flex3 FM.book Page 113 Mardi, 2. décembre 2008 3:32 15
Les composants conteneurs CHAPITRE 6
113
Aligner verticalement ou horizontalement les composants Nous allons à présent voir comment aligner automatiquement les composants selon un axe horizontal ou vertical.
Les composants HBox et VBox Le composant HBox permet d’aligner automatiquement les composants sur l’axe horizontal (les uns à côté des autres), alors que le composant VBox permet de les aligner sur l’axe vertical (les uns en dessous des autres). À l’aide du code suivant, nous avons illustré l’implémentation des composants HBox et VBox via l’organisation horizontale (HBox) et ou verticale (VBox) de trois boutons.
La figure 6-3 présente le résultat ainsi obtenu. Figure 6-3
Composants HBox et VBox
Les composants HDividedBox et VDividedBox Ces composants ont le même rôle que les composants HBox et VBox à la seule différence qu’ils permettent d’afficher un séparateur mobile.
=Flex3 FM.book Page 114 Mardi, 2. décembre 2008 3:32 15
114
Comprendre Flex 3 PARTIE I
Le code suivant illustre un exemple d’implémentation de ces deux composants :
La figure 6-4 illustre le résultat obtenu après exécution de ce code. On constate la présence d’un séparateur pouvant être déplacé vers la gauche ou vers la droite pour le composant HDividedBox, et vers le haut ou vers le bas pour le composant VdividedBox. L’utilisateur peut ainsi agrandir ou réduire la zone de son choix en sélectionnant ce séparateur et en déplaçant sa souris de droite à gauche ou de haut en bas. Figure 6-4
Implémentation des composants HDividedBox et VDividedBox
=Flex3 FM.book Page 115 Mardi, 2. décembre 2008 3:32 15
Les composants conteneurs CHAPITRE 6
115
Créer des formulaires avec Form, FormHeading et FormItem Les composants Form, FormHeading et FormItem sont les plus communément utilisés au sein des applications Flex car ils permettent de créer des formulaires de saisie. Le code suivant permet de créer un formulaire d’inscription intitulé « Nouvel utilisateur : » (FormHeading) ainsi que les trois items de formulaire (FormItem) suivants : • l’item Prénom, dont la saisie est obligatoire (required="true") ; • l’item Nom ; • le bouton Valider.
La figure 6-5 illustre le résultat obtenu. Figure 6-5
Création d’un formulaire
=Flex3 FM.book Page 116 Mardi, 2. décembre 2008 3:32 15
116
Comprendre Flex 3 PARTIE I
Créer une grille grâce à Grid Le composant Grid permet d’organiser les composants selon une grille. Le code suivant illustre son implémentation constitué de trois lignes et de trois colonnes dont certaines doivent contenir un chiffre.
=Flex3 FM.book Page 117 Mardi, 2. décembre 2008 3:32 15
Les composants conteneurs CHAPITRE 6
117
Chaque ligne est créée grâce à la balise et le nombre de cellules qu’elle contient est spécifié par la balise . La figure 6-6 illustre le résultat obtenu après exécution du code. Figure 6-6
Utilisation du composant Grid
Les panneaux : Panel Le composant Panel est l’un des composants de type conteneur les plus utilisés. Il permet en effet de disposer les composants à l’aide de leur coordonnées x et y, tout comme le composant Canvas mais en offrant un aspect graphique plus intéressant comme la présence d’un titre ou la possibilité d’ajouter une icône. Le code suivant met en place un composant Panel contenant un formulaire d’identification et une icône.
=Flex3 FM.book Page 118 Mardi, 2. décembre 2008 3:32 15
118
Comprendre Flex 3 PARTIE I
Par l’utilisation de la propriété titleIcon, il nous est possible d’affecter une icône au composant Panel. Notez également que nous avons affecté la valeur true à la propriété displayPassword du composant mdp_txt. Ceci a pour effet de remplacer le texte en cours de saisie par des astérisques, permettant ainsi de cacher le mot de passe. Le résultat obtenu après exécution de ce code est représenté à la figure 6-7. Figure 6-7
Composant Panel
Créer des fenêtres pop-ups avec TitleWindow La création d’une fenêtre pop-up s’effectue en deux temps : la première étape consiste à créer le pop-up et la seconde, à faire appel à ce dernier dans la fenêtre de l’application principale. Nous allons voir cela en détail.
Création du pop-up Pour réaliser un pop-up, il convient tout d’abord de créer un projet que nous nommerons projetPopUp, dans lequel nous créerons un nouveau fichier composant MXML, nommé popUp.mxml, via le menu File>New>MXML Component. Ce fichier doit être basé sur le composant TitleWindow, et va décrire l’interface graphique du pop-up grâce au code suivant :
=Flex3 FM.book Page 119 Mardi, 2. décembre 2008 3:32 15
Les composants conteneurs CHAPITRE 6
119
Ici, nous avons implémenté une procédure faisant appel à la classe PopUpManager qui permet de gérer les pop-ups. Cette classe propose deux méthodes principales pour cela : • createPopUp(fenêtre chargée de contenir le pop-up, Nom du pop-up, pop-up modal (true/false)) permet de créer et d’afficher le pop-up ; • removePopUp(nom du pop-up) supprime le pop-up. Grâce à ces méthodes, nous avons créé une procédure déclenchant la fermeture du popup lorsque l’utilisateur clique sur la croix de fermeture située en haut à droite du pop-up, dont nous avons spécifié la présence en affectant la valeur true à la propriété showCloseButton (figure 6-8). Figure 6-8
Création de la fenêtre pop-up
Appel du pop-up Maintenant que nous avons créé le pop-up, nous allons voir comment l’utiliser au sein de notre application. Plaçons-nous à présent dans le fichier principal de l’application (projetPopUp.mxml) et saisissons le code suivant :
Dans cet exemple, le bouton btn_ouvrirpopup déclenche l’exécution de la procédure ouvrirPopUp() qui crée un nouveau pop-up à partir du fichier popUp.mxml que nous venons d’enregistrer (figure 6-9). La création de cette fenêtre pop-up est réalisée à l’aide de la méthode createPopUp de la classe PopUpManager. Voyons sa syntaxe en détail : • This = fenêtre parent (dans notre cas, il s’agit de la fenêtre principale de l’application). • popUp = nom du fichier MXML implémentant le composant TitleWindow. • true = spécifie si le pop-up doit être modal (c’est-à-dire s’il doit être fermé pour permettre l’utilisation de la fenêtre parent) ou non. Figure 6-9
Ouverture d’un pop-up
Communiquer avec le pop-up Créer un pop-up c’est bien, mais pouvoir communiquer avec lui c’est encore mieux ! Nous allons, à travers le code suivant, montrer comment envoyer des données au pop-up. Ces dernières seront ensuite affichées dans une zone de texte du pop-up. var objetPopUp:popUp = popUp(PopUpManager.createPopUp(this,popUp,true)); objetPopUp.txt_message.text = "Message transferé !"; } ]]>
En premier lieu, nous avons ajouté une zone de texte dans le fichier MXML de l’application, afin que les données transmises puissent y être affichées :
Nous avons ensuite modifié le code du pop-up comme suit :
=Flex3 FM.book Page 122 Mardi, 2. décembre 2008 3:32 15
122
Comprendre Flex 3 PARTIE I
Lorsque l’utilisateur cliquera sur le bouton btn_ok, la propriété text du champ txt_messageapplication de l’application parente (celle contenant le pop-up) sera mise à jour. C’est donc en utilisant la propriété parentApplication reprenant la notion de parenté qu’il devient possible de communiquer à partir du pop-up vers l’application qui le contient. La figure 6-10, illustre les résultats obtenus par la communication de l’application avec le pop-up et inversement. Figure 6-10
Communication de l’application vers le pop-up puis du pop-up vers l’application
En résumé Au cours de ce chapitre, nous avons découvert les principaux composants conteneurs qui vont nous permettre d’agencer les différents composants de contrôle au sein de nos interfaces. Nous avons également vu qu’il est possible de créer un pop-up et de communiquer avec lui. Ce dernier point nous a permis d’aborder la notion de composant que nous étudierons en détail au chapitre 10 de cet ouvrage. Nous pouvons à présent poursuivre notre apprentissage en découvrant les composants qui vont nous permettre de naviguer à travers nos applications et ceux dédiés à la notion de reporting : les composants graphiques.
=Flex3 FM.book Page 123 Mardi, 2. décembre 2008 3:32 15
7 Les composants de navigation et de reporting Nous voici à présent au dernier chapitre consacré aux différents composants contenus dans le framework Flex. Après les composants de contrôle et les composants conteneurs, nous allons à nous concentrer sur les composants chargés de la navigation au sein de notre application (onglets, menus en accordéon…), ainsi que ceux permettant de créer des applications de reporting (analyse statistique) : les composants de graphiques.
Les composants de navigation Au cours de cette section, nous allons étudier les composants proposant aux utilisateurs des options de navigation dans l’application. Nous allons ici décrire les trois composants les plus utilisés : TabNavigator, ViewStack et Accordion.
Navigation par onglets avec TabNavigator Lorsque le nombre de composants devient trop important pour que l’ensemble soit contenu dans un seul panneau, il est préférable d’utiliser des onglets, ce que permet le composant TabNavigator.
=Flex3 FM.book Page 124 Mardi, 2. décembre 2008 3:32 15
124
Comprendre Flex 3 PARTIE I
Cette portion de code permet de créer deux onglets. Si nous observons attentivement ces quelques lignes, nous voyons qu’un onglet n’est rien d’autre qu’un composant Canvas dont le libellé servira à définir le titre de l’onglet (figure 7-1). Figure 7-1
Exemple d’implémentation de deux onglets
Le libellé du composant Canvas ne s’affichera pas si ce dernier n’est pas contenu dans un composant TabNavigator.
Vues empilées avec ViewStack Ce type de navigation s’apparente à la navigation par onglets. Cependant, à l’inverse du composant TabNavigator, le composant ViewStack utilise un système de vues empilées et la navigation entre chacune de ces vues peut être réalisée à l’aide des composants suivants : • LinkBar ; • TabBar ; • ButtonBar ; • ToggleButtonBar.
En alimentant le dataProvider de chacun de ces composants avec le nom du composant ViewStack, ces derniers sont alors capables de récupérer les libellés des vues et de les afficher. Voici un exemple utilisant le composant ViewStack couplé au composant ToggleButtonBar.
=Flex3 FM.book Page 125 Mardi, 2. décembre 2008 3:32 15
Les composants de navigation et de reporting CHAPITRE 7
125
Chaque vue n’est autre qu’un composant Canvas. Nous pouvons également observer que le composant ViewStack alimente le dataProvider du composant ToggleButtonBar, permettant ainsi l’affichage du libellé de chaque vue dans ce dernier (figure 7-2).
Figure 7-2
Utilisation des composants ViewStack et ToggleButtonBar
=Flex3 FM.book Page 126 Mardi, 2. décembre 2008 3:32 15
126
Comprendre Flex 3 PARTIE I
Si nous souhaitons sélectionner une vue par défaut, il suffit d’affecter son numéro d’index à la méthode selectedIndex du composant ToogleButtonBar : Attention Le premier élément du composant ViewStack a pour numéro d’index la valeur 0, le deuxième le numéro 1, et ainsi de suite. Il en va de même pour les éléments de type tabulaire en ActionScript (ArrayList, ArrayCollection…).
Navigation « en accordéon » : Accordion Grâce au composant Accordion, il est possible de proposer une navigation entre chaque écran sous la forme d’un accordéon (menu empilé). Pour vous faire une idée de ce type de navigation, nous vous invitons à saisir ces quelques lignes de code au sein d’une nouvelle application Flex et à tester l’application.
La figure 7-3 illustre le résultat obtenu après exécution du code.
=Flex3 FM.book Page 127 Mardi, 2. décembre 2008 3:32 15
Les composants de navigation et de reporting CHAPITRE 7
127
Figure 7-3
Exemple de navigation « en accordéon »
Nous constatons que nos panneaux (panels) sont positionnés dans des parties mobiles, permettant un gain de place important sur l’interface graphique principale de l’application. Le composant Accordion est souvent utilisé pour la création de menus car il permet d’obtenir un aspect graphique assez intéressant et prisé par les utilisateurs.
=Flex3 FM.book Page 128 Mardi, 2. décembre 2008 3:32 15
128
Comprendre Flex 3 PARTIE I
Les composants de graphique Ces composants servant pour la génération de graphiques sont uniquement disponibles dans la version professionnelle de Flex Builder 3. Le tableau 7-1 en dresse la liste exhaustive : Tableau 7-1 Nom du composant
Les composants à vocation statistiques Icône
Utilisation
AreaChart
Représentation sous forme d’aires
BarChart
Représentation sous forme d’histogramme horizontal
ColumnChart
Représentation sous forme d’histogramme vertical
BubbleChart
Graphique sous forme de bulles
CandlestickChart
Représentation sous forme de chandelles
LineChart
Graphique linéaire
PieChart
Graphique en secteurs
PlotChart
Représentation sous forme d’un nuage de points
HLOCChart (HLOC (Hight, Low, Open, Close))
Graphique boursier
Implémentation L’implémentation de chacun de ces composants étant plus ou moins semblable, nous avons choisi de présenter l’utilisation du composant PieChart, car c’est le plus fréquemment utilisé dans les applications de reporting. Dans la portion de code suivante, nous représentons le nombre de dossiers médicaux non clôturés au sein d’un service hospitalier :
Les données présentées dans le graphique sont obtenues grâce au tableau etatDossier venant alimenter le dataProvider du composant. La valeur du champ Dossier est alors extraite, ce qui permet de générer le graphique. La propriété showDataTips affectée de la valeur true affiche les légendes de chaque quartier lorsque l’utilisateur les survole. La figure 7-4 illustre le résultat obtenu après exécution du code. Figure 7-4
Implémentation du composant PieChart
Les légendes (dataTip) sont automatiquement créées par le composant PieChart : « Clôturés : 86,7 % (1 500) ». Si nous souhaitons personnaliser cet affichage, nous devrons utiliser la méthode dataTipFunction comme suit :
Si nous exécutons ce code, nous notons que les légendes ont à présent la valeur « Nombre de dossiers : valeur du quartier survolé par la souris ».
En pratique : création d’un outil de reporting En guise de synthèse, réalisons une petite application permettant d’afficher le reporting des ventes par produit pour un mois donné, sélectionné par l’utilisateur. Le graphique utilisé est un histogramme BarChart et les données visualisées correspondront au mois sélectionné par l’utilisateur à l’aide du composant HSlider étudié au chapitre 5. Étape 1 : création des données
La première étape (outre la création d’un nouveau projet Flex) va consister à créer les tableaux de données. Nous avons ici choisi de créer trois tableaux contenant la somme des ventes réalisées pour trois produits aux mois de janvier, février et mars.
=Flex3 FM.book Page 131 Mardi, 2. décembre 2008 3:32 15
Les composants de navigation et de reporting CHAPITRE 7
131
Étape 2 : mise en place de l’histogramme
Nous souhaitons afficher par défaut les données du mois de janvier. Pour cela, nous affectons le dataProvider de l’histogramme du tableau Janvier créé précédemment.
Sur l’axe horizontal (HorizontalAxis), qui sera alimenté en données, nous allons afficher les libellés des produits, soit P1, P2 et P3. À partir des données contenues sur cet axe,
=Flex3 FM.book Page 132 Mardi, 2. décembre 2008 3:32 15
132
Comprendre Flex 3 PARTIE I
nous allons créer une série qui nous permettra d’extraire les valeurs devant être affichées sur l’axe vertical (yField) et sur l’axe horizontal (xField). À ce stade, si nous exécutons le projet, nous pouvons visualiser les données du mois de janvier. Cependant nous souhaitons donner la possibilité à l’utilisateur de choisir le mois de visualisation à l’aide du composant HSlider. Étape 3 : utilisation du composant HSlider
Nous ajoutons un composant HSlider afin de mettre à jour le dataProvider du graphique en fonction du mois sélectionné. Pour cela, il convient tout d’abord d’implémenter notre composant :
HSlider va donc comporter les libellés Janvier, Février et Mars. Chaque mois va corres-
pondre à un numéro précis correspondant à l’indice sélectionné dans le composant : 1 = Janvier, 2 = Février et 3 = Mars. À partir de cette information, il sera aisé de déterminer le mois sélectionné et de mettre à jour les données contenues dans l’histogramme. Remarquez également la suppression des infobulles par l’utilisation de la propriété showDataTip portée à false. Il ne nous reste plus qu’à mettre en place la partie dynamique de l’application en écrivant le code de la fonction afficherGraphique() qui sera déclenchée à chaque changement de valeur du composant HSlider : // Affichage des données en fonction du mois sélectionné // dans le HSlider import mx.controls.Alert; public function afficherGraphique():void { switch (choixDuMois.value){ case 1 : histogramme.dataProvider = Janvier; break; case 2 : histogramme.dataProvider = Fevrier; break;
=Flex3 FM.book Page 133 Mardi, 2. décembre 2008 3:32 15
Les composants de navigation et de reporting CHAPITRE 7
133
case 3 : histogramme.dataProvider = Mars; break; } // Mise à jour du dataProvider du composant HorizontalAxis donneesGraphiques.dataProvider = histogramme.dataProvider; }
Ainsi, lorsque l’utilisateur sélectionne un mois dans le composant HSlider, sa valeur est récupérée et le tableau de données correspondant est chargé dans le dataProvider de l’histogramme et de l’axe horizontal (donneesGraphiques.dataProvider = histogramme.dataProvider). La figure 7-5 illustre le résultat obtenu après exécution de l’application.
Figure 7-5
Outil de reporting
En résumé Après la lecture des chapitres 5 à 7, vous connaissez à présent les principaux composants que Flex met à votre disposition pour créer les interfaces de vos applications. Vous savez donc résoudre les problèmes les plus fréquemment rencontrés lors de la phase de développement : comment alimenter une liste déroulante ? Comment en récupérer la valeur sélectionnée ? et bien d’autres… Pour poursuivre notre apprentissage du framework Flex, nous allons à présent étudier les méthodes qui vont nous permettre d’agencer ces composants au sein d’une interface graphique.
=Flex3 FM.book Page 134 Mardi, 2. décembre 2008 3:32 15
=Flex3 FM.book Page 135 Mardi, 2. décembre 2008 3:32 15
8 Réaliser le design des interfaces Au cours de ce chapitre, vous allez apprendre à personnaliser le design des interfaces graphiques grâce au framework Flex et à Flex Builder. Nous découvrirons tout d’abord comment positionner et dimensionner les composants de Flex, puis nous aborderons la notion de style et nous terminerons par la réalisation de nos propres habillages de composants.
Dimensionner et positionner les composants L’une des premières étapes dans la conception d’interfaces graphiques consiste à agencer les composants au sein de cette interface. Le designer devra trouver la taille et la disposition adéquates pour les différents composants de l’application afin d’obtenir une certaine harmonie dans l’interface, ce qui la rendra conviviale. Nous allons donc dans un premier temps nous attarder sur les méthodes permettant de définir les dimensions des composants et de les positionner.
Spécifier les dimensions des composants Il existe plusieurs méthodes permettant de définir les dimensions des composants au sein d’une interface graphique : • Vous pouvez laisser cette tâche au framework Flex qui vous proposera alors une taille par défaut pour chaque composant inséré dans l’interface. • Vous pouvez préciser manuellement la taille en pixels de chaque composant. • Enfin, vous pouvez spécifier les dimensions des composants en pourcentage des dimensions de leur conteneur.
=Flex3 FM.book Page 136 Mardi, 2. décembre 2008 3:32 15
136
Comprendre Flex 3 PARTIE I
La spécification des dimensions d’un composant consiste ni plus ni moins à modifier certaines des propriétés présentées dans le tableau 8-1. Tableau 8-1
Propriétés permettant de déterminer la taille des composants
Propriété
Rôle
Height
Hauteur du composant exprimée en pixels.
Width
Largeur du composant exprimée en pixels.
minHeight
Hauteur minimale du composant exprimée en pixels.
minWidth
Largeur minimale du composant exprimée en pixels.
maxHeight
Hauteur maximale du composant exprimée en pixels.
maxWidth
Largeur maximale du composant exprimée en pixels.
percentHeigth
Hauteur du composant exprimée en pourcentage de la hauteur de son conteneur.
percentWidth
Largeur du composant exprimée en pourcentage de la largeur de son conteneur.
Quelques exemples
Les exemples suivants vous permettront de voir comment implémenter les différentes propriétés présentées au tableau 8-1 et les résultats obtenus pour chaque type de dimensionnement. Dimensionnement par défaut
Dans cet exemple de code, aucune dimension n’a été spécifiée pour le bouton. Le composant Button aura donc les dimensions spécifiées par défaut par Flex (figure 8-1). Figure 8-1
Dimensionnement par défaut
=Flex3 FM.book Page 137 Mardi, 2. décembre 2008 3:32 15
Réaliser le design des interfaces CHAPITRE 8
137
Spécification des dimensions
Dans cet exemple, une largeur et une hauteur ont été précisées pour le bouton. Le résultat obtenu est illustré par la figure 8-2. Figure 8-2
Spécification des dimensions
Utilisation des pourcentages
Dans cet exemple de code, nous avons spécifié les dimensions du bouton en fonction de la taille de son conteneur. Ainsi, la largeur du composant est égale à 50 % de la largeur de son conteneur et sa hauteur correspond à 80 % de la hauteur de son conteneur. Pour vous aider dans la compréhension de cette notion parfois difficile à saisir, nous vous invitons à étudier la figure 8-3 présentant le résultat obtenu après exécution du code.
=Flex3 FM.book Page 138 Mardi, 2. décembre 2008 3:32 15
138
Comprendre Flex 3 PARTIE I
Figure 8-3
Dimensionnement à l’aide des pourcentages
À noter que nous aurions également pu utiliser les propriétés percentWidth et percentHeight comme suit :
Cependant, la méthode la plus communément utilisée consiste à spécifier des pourcentages pour les propriétés width et height. Nous savons à présent définir la taille d’un composant selon trois méthodes distinctes. Voyons maintenant comment disposer ce dernier au sein d’une interface.
Positionner les composants Pour placer un composant à un endroit précis de l’interface, nous disposons également de trois méthodes : • le positionnement automatique ; • le positionnement absolu ; • le positionnement à l’aide de contraintes (ancrages). Le positionnement automatique
Par défaut, Flex place les composants de façon automatique en fonction des règles de positionnement de leur conteneur. Par exemple, un composant intégré dans le conteneur HBox sera automatiquement positionné en haut à gauche, aux coordonnées x = 0 et y = 0.
=Flex3 FM.book Page 139 Mardi, 2. décembre 2008 3:32 15
Réaliser le design des interfaces CHAPITRE 8
139
Nous pouvons néanmoins intervenir sur ce positionnement en modifiant certaines propriétés du conteneur. Le tableau 8-2 présente les propriétés les plus communément modifiées. Tableau 8-2
Propriétés de positionnement automatique
Propriété
Rôle
horizontalAlign
Aligne les composants par rapport à l’axe horizontal du conteneur : Center : centre le composant. Left : place le composant à gauche. Right : place le composant à droite.
verticalAlign
Aligne les composants par rapport à l’axe vertical du conteneur : Bottom : place le composant en bas. Middle : place le composant au centre. Top : place le composant en haut.
layout : applicable à l’application et aux composants Panel et Canvas.
Permet de modifier la disposition des composants : Absolute : positionne les composants en fonction de leur coordonnées x et y. Vertical : positionne les composants les uns en dessous des autres. Horizontal : positionne les composants côte à côte.
paddingBottom
Marge inférieure du conteneur.
paddingLeft
Marge gauche du conteneur.
paddingRight
Marge droite du conteneur.
paddingTop
Marge supérieure du conteneur.
La propriété horizontalAlign
L’exemple de code suivant implémente les trois positions d’alignement horizontal illustrées par la figure 8-4.
=Flex3 FM.book Page 140 Mardi, 2. décembre 2008 3:32 15
140
Comprendre Flex 3 PARTIE I
Figure 8-4
Positionnement à l’aide de la propriété horizontalAlign
La propriété verticalAlign
Voici à présent un exemple de code illustrant le positionnement des composants dont la propriété verticalAlign du conteneur a été modifiée. Le résultat obtenu est représenté à la figure 8-5.
=Flex3 FM.book Page 141 Mardi, 2. décembre 2008 3:32 15
Réaliser le design des interfaces CHAPITRE 8
141
Figure 8-5
Positionnement des composants à l’aide de la propriété verticalAlign
La propriété layout
Dans l’exemple de code suivant, nous voyons que l’application possède une mise en forme de type absolute. Les composants qu’elle contient seront donc placés à l’aide de leurs coordonnées. Nous pouvons observer ce positionnement pour les composants Panel, pour lesquels des valeurs ont été affectées aux propriétés x et y. Le résultat obtenu après exécution de ce code est représenté à la figure 8-6.
=Flex3 FM.book Page 142 Mardi, 2. décembre 2008 3:32 15
142
Comprendre Flex 3 PARTIE I
Figure 8-6
Utilisations de la propriété layout
La propriété padding
L’exemple de code suivant illustre le positionnement des composants à l’aide des marges.
=Flex3 FM.book Page 143 Mardi, 2. décembre 2008 3:32 15
Réaliser le design des interfaces CHAPITRE 8
143
Les marges gauche et supérieure du conteneur HBox ont été définies, impliquant le positionnement du bouton à une distance de 20 pixels par rapport à la ligne supérieure du conteneur et à 50 pixels de son bord gauche (figure 8-7). Figure 8-7
Utilisation des marges pour le positionnement du composant
Le positionnement absolu
Ce type de positionnement est appliqué par défaut à l’application ainsi qu’aux composants Panel et Canvas. Comme mentionné précédemment, ce type de positionnement s’effectue en affectant la valeur absolute à la propriété layout des composants concernés. Cette méthode permet de positionner les composants au sein du conteneur selon les axes de coordonnées x et y et, si besoin, d’effectuer des superpositions de composants. Le positionnement à l’aide de contraintes
Ce type de positionnement est également appelé positionnement par ancrage. Il peut s’effectuer de deux façons : • en modifiant les propriétés de positionnement par ancrage (voir tableau 8-3) ; • en utilisant la perspective de design et plus particulièrement la vue layout de celle-ci (cette vue est activée lorsqu’on sélectionne un composant et elle se situe en bas à droite de la perspective de design (figure 8-8)). Ancrage du conteneur ou du composant ? Jusqu’à présent, nous avons modifié les propriétés du conteneur afin de positionner les composants à l’intérieur de celui-ci. L’ancrage concerne le composant. C’est donc sur ce dernier que les modifications devront être effectuées. Ceci peut se résumer par : « Le composant est ancré par rapport à son conteneur ».
=Flex3 FM.book Page 144 Mardi, 2. décembre 2008 3:32 15
144
Comprendre Flex 3 PARTIE I Tableau 8-3
Propriétés de positionnement par ancrage
Propriété
Rôle
horizontalCenter
Distance exprimée en pixels entre le centre de l’axe horizontal du composant et celui de son conteneur.
verticalCenter
Distance exprimée en pixels entre le centre de l’axe vertical du composant et celui de son conteneur.
top
Distance exprimée en pixels entre le bord supérieur du composant et celui de son conteneur.
bottom
Distance exprimée en pixels entre le bord inférieur du composant et celui de son conteneur.
left
Distance exprimée en pixels entre le bord gauche du composant et celui de son conteneur.
right
Distance exprimée en pixels entre le bord droit du composant et celui de son conteneur.
Figure 8-8
Vue d’ancrage de la perspective design
=Flex3 FM.book Page 145 Mardi, 2. décembre 2008 3:32 15
Réaliser le design des interfaces CHAPITRE 8
145
Exemple d’application
Considérons une application servant de conteneur à un composant Panel correspondant au code suivant :
Dans cet exemple de code, nous remarquons que des contraintes de positionnement ont été spécifiées pour le composant Panel : • il doit se situer au centre de l’application : horizontalCenter="0" ; • il doit se situer à 175 pixels du bord supérieur de l’application : top="175" ; • il doit se situer à 275 pixels du bord inférieur de l’application : bottom="275". Ces caractéristiques sont reprises dans la vue de positionnement des contraintes, comme l’illustre la figure 8-9.
Figure 8-9
Répercussions du code sur la vue spécifique aux ancrages
=Flex3 FM.book Page 146 Mardi, 2. décembre 2008 3:32 15
146
Comprendre Flex 3 PARTIE I
Le positionnement des composants à l’aide d’ancrages présente l’avantage de permettre un ajustement de l’interface en fonction de la résolution d’écran de l’utilisateur en adaptant la taille et la disposition des composants (figure 8-10).
Figure 8-10
Adaptation de l’interface graphique en fonction de la résolution du navigateur
Gestion des ascenseurs Dans certaines configurations (lorsque la taille du composant est sensiblement identique ou supérieure à celle du conteneur), les ascenseurs verticaux et horizontaux du conteneur peuvent s’afficher. Pour pallier cela, il suffit de passer la valeur des propriétés horizontalScrollPolicy et verticalScrollPolicy du conteneur à off (figure 8-11).
=Flex3 FM.book Page 147 Mardi, 2. décembre 2008 3:32 15
Réaliser le design des interfaces CHAPITRE 8
147
Figure 8-11
Gestion des ascenseurs horizontaux et verticaux
Utiliser les styles Selon les goûts de chacun, le style proposé par défaut dans une application Flex peut parfaitement convenir, alors que d’autres y ajouteraient bien un peu de couleur. Au-delà de cela, il convient de garder à l’esprit qu’une application doit respecter une charte graphique éditée par l’entreprise dont il est très difficile de déroger. C’est pourquoi Flex permet de personnaliser le style d’une application au moyen du langage CSS (Cascading Style Sheet). Le CSS de Flex supporte quelques propriétés du langage CSS standardisé dont voici la liste exhaustive : • color ; • fontFamily ; • fontSize ; • fontStyle ; • fontWeight ; • paddingBottom ; • paddingLeft ;
=Flex3 FM.book Page 148 Mardi, 2. décembre 2008 3:32 15
148
Comprendre Flex 3 PARTIE I
• paddingRight ; • paddingTop ; • textAlign ; • textDecoration ; • textIndent. Bien entendu, le CSS de Flex ne se limite pas à ces quelques propriétés standardisées, mais englobe un ensemble de propriétés propres à chacun de ses composants. Visualiser les propriétés de style d’un composant Pour visualiser l’ensemble des propriétés de style d’un composant, il suffit de le placer sur l’interface et de le sélectionner. Dans la vue Flex Properties, il est alors possible de cliquer sur le bouton Category view, lequel permet d’afficher la liste des propriétés du composant sous la forme d’un treeview. Dans cette représentation hiérarchique, nous pouvons apercevoir un nœud nommé Style qui reprend l’ensemble des propriétés stylistiques du composant.
Étudions en détail l’implémentation de ce langage au sein d’une application Flex.
La balise Style La première méthode d’implémentation du langage CSS consiste à utiliser la balise du langage MXML, comme illustré dans l’exemple de code suivant : .classePersonnalisee{ fontSize: 10; color:red; } Button { fontSize: 20; }
L’analyse de ces quelques lignes de code permet de comprendre aisément la notion de classes CSS. Le sélecteur Button permet de définir le style de l’ensemble des composants de type bouton de l’interface. La classe personnalisée (classePersonnalisee) ne fait référence à aucune classe de composant et doit donc être appelée à l’aide de la propriété styleName du composant concerné. Cela permet de définir des styles différents pouvant
=Flex3 FM.book Page 149 Mardi, 2. décembre 2008 3:32 15
Réaliser le design des interfaces CHAPITRE 8
149
alors être appliqués pour un même type de composant (un bouton rouge, vert, bleu, etc.). Notez que l’utilisation de styles ne se limite pas au composant de type Button mais peut également être appliquée à l’ensemble de composants du framework. Figure 8-12
Emploi de la balise
Le fichier CSS externe La seconde méthode d’implémentation consiste à faire appel à un fichier CSS externe. Pour ce faire, nous utiliserons de nouveau la balise mais en lui précisant le chemin d’accès du fichier CSS à utiliser.
Le fichier CSS (ici, feuilleDeStyle.css) peut être édité à l’aide de la perspective de développement en choisissant la création d’un nouveau fichier CSS, ou en utilisant l’application Flex Style Explorer développée par l’éditeur. Le Flex Style Explorer vous permet de modifier les propriétés de chaque composant de façon graphique. Le code correspondant est alors automatiquement généré et vous pouvez ensuite l’exporter et l’utiliser dans votre application Flex (figure 8-13). Si vous souhaitez utiliser cette application, rendez-vous sur la page web suivante : http://weblogs.macromedia.com/mc/archives/FlexStyleExplorer.html.
Utilisation des images Pour utiliser des images, il convient de faire appel à la méthode Embed(). Dans l’exemple de code suivant, l’image monImage.jpg est employée comme arrière-plan de l’application. backgroundImage : Embed('monImage.jpg')
=Flex3 FM.book Page 150 Mardi, 2. décembre 2008 3:32 15
150
Comprendre Flex 3 PARTIE I
Figure 8-13
Application Flex Style Explorer
CSS et ActionScript La troisième méthode d’implémentation consiste à créer le style CSS à l’aide du langage ActionScript. Ceci est possible grâce à la classe StyleManager qui permet de définir de nouveaux styles et de les appliquer aux composants de l’application. Voyons ceci de plus près à travers un exemple :
La première étape consiste à instancier la classe CSSStyleDeclaration permettant de déclarer un nouveau style. Nous y ajoutons ensuite des propriétés CSS grâce à la méthode setStyle(). Enfin, nous affectons ce style à la classe Label en employant la méthode setStyleDeclaration(nom de la classe CSS, style, mise à jour (true/false)). À noter que l’ensemble de ces instructions est contenu dans la fonction appliquerStyle(), exécutée à la fin de la création de l’application. Grâce à la classe StyleManager, il devient possible de manipuler le style CSS de notre application. Ceci nous ouvre la voie vers une multitude de possibilités, notamment celle du dynamisme applicatif, c’est-à-dire le changement de style en fonction de l’utilisateur connecté ou lors d’un déclenchement d’événement…
Habiller les composants : skinning Une autre particularité de Flex est de permettre l’habillage des composants au moyen d’images, de fichiers SWF (animations Flash) ou de classes contenant des instructions de design. Les habillages (skins) sont généralement appliqués sur les états d’un composant. Ainsi, nous pouvons, par exemple, définir huit skins différents pour les composants de type bouton : • un skin pour l’état relâché : upSkin ; • un skin pour l’état cliqué : downSkin ; • un skin pour l’état survolé : overSkin ; • un skin pour l’état désactivé : disabledSkin ; • un skin pour la prise de focus : focusSkin ; • un skin pour l’état cliqué d’un bouton de type interrupteur : selectedDownSkin ; • un skin pour l’état relâché d’un bouton de type interrupteur : selectedUpSkin ; • un skin pour l’état survolé d’un bouton de type interrupteur : selectedOverSkin.
=Flex3 FM.book Page 152 Mardi, 2. décembre 2008 3:32 15
152
Comprendre Flex 3 PARTIE I
Utiliser des images Pour implémenter un habillage sur un composant, il est possible d’utiliser la balise , tout comme nous l’aurions fait pour créer un nouveau style CSS ou pour modifier directement les propriétés souhaitées au sein du composant. L’exemple de code suivant illustre l’utilisation de cette balise : Button { downSkin: Embed('monImage.jpg'); }
Dans l’exemple suivant, vous notez que l’habillage a été modifié à l’aide des propriétés du composant :
Utiliser des fichiers SWF L’habillage des composants est réalisé de la même façon qu’à l’aide d’une image, c’està-dire en utilisant la balise ou en modifiant les propriétés du composant. Cela est illustré par le code suivant : Button { downSkin: Embed('monSWF.swf'); }
=Flex3 FM.book Page 153 Mardi, 2. décembre 2008 3:32 15
Réaliser le design des interfaces CHAPITRE 8
153
Dans l’exemple suivant, les propriétés du composant ont été modifiées :
L’habillage par programmation Dans cette section, nous allons aborder la programmation de skins à l’aide d’Action Script à travers un exemple d’application, ce qui est le meilleur moyen pour en comprendre les rouages. L’objectif est de créer un habillage pour le composant VBox en redessinant son contour afin d’obtenir le résultat illustré par la figure 8-14.
Figure 8-14
Skin personnalisé pour le composant VBox
Pour cela, la première étape va consister à créer une classe, dans un package que nous nommerons com.test.skin, qui définira notre skin personnalisé : Package com.test.skin { import mx.skins.RectangularBorder;
=Flex3 FM.book Page 154 Mardi, 2. décembre 2008 3:32 15
154
Comprendre Flex 3 PARTIE I
public class SkinPersonnalise extends RectangularBorder { // Constructeur public function SkinPersonnalise(){} // Redéfinition de la méthode updateDisplayList override protected function updateDisplayList(unscaledWidth:Number, ➥unscaledHeight:Number):void{ // Récupération de la taille du skin composant super.updateDisplayList(unscaledWidth, unscaledHeight); // Nettoyage de la forme graphics.clear(); // Dessin de la bordure drawRoundRect(0,0,unscaledWidth,unscaledHeight,{tl:50,tr:10,bl:10,br:30} ➥,0xCCCC99,0.8); } } }
Analysons un peu ce code. Tout d’abord, nous importons la classe RectangularBorder qui nous permettra de manipuler les bordures du composant. Notons au passage que notre classe SkinPersonnalise hérite de cette classe. Puis, nous spécifions le constructeur et redéfinissons la méthode updateDisplayList. Pour faire très simple, nous dirons que cette méthode permet de gérer l’affichage de tout composant au sein d’une interface graphique (positionnement et dimensionnement des composants ainsi que leur représentation (bordure, couleurs…)). En modifiant quelque peu cette méthode, nous serons en mesure de redessiner les contours de notre VBox. Par ailleurs, nous remarquons la présence des paramètres unscaleWidth et unscaleHeight qui contiennent les valeurs des propriétés width et heigth du composant afin d’en connaître la largeur et la hauteur. Passons à présent aux choses sérieuses. Les contours de notre composant seront redessinés à l’aide de la méthode drawRoundRect qui permet de dessiner un rectangle aux bords arrondis. Les deux premiers paramètres passés à cette méthode correspondent aux coordonnées x et y du composant, les deux suivants à sa largeur et à sa hauteur. Vient ensuite un tableau contenant les dimensions des arcs de cercle redessinant les arrondis de chaque angle du composant : • tl (pour top left) : en haut à gauche ; • tr (pour top right) : en haut à droite ; • bl (pour bottom left) : en bas à gauche ; • br (pour bottom right) : en bas à droite. Enfin, les deux derniers paramètres spécifient la couleur et la transparence du composant.
=Flex3 FM.book Page 155 Mardi, 2. décembre 2008 3:32 15
Réaliser le design des interfaces CHAPITRE 8
155
Notre skin est à présent terminé, il est temps de passer à la seconde étape qui consiste à appeler le skin personnalisé en affectant la propriété borderSkin du composant VBox avec le nom de la classe précédemment créée :
Voilà, c’est terminé ! À noter que dans notre exemple, nous avons utilisé la méthode drawRoundRect, mais il en existe d’autres telles que : • curveTo() qui permet de créer des courbes ; • drawCircle() qui permet de dessiner des cercles ; • drawRect() qui permet de dessiner des rectangles ; • lineTo() qui permet de dessiner une ligne, etc. La création de skins à l’aide du langage ActionScript n’est pas des plus aisées. Néanmoins, tout comme pour la création de styles CSS grâce à ce langage, il nous est maintenant possible de conférer une part de dynamisme aux habillages de nos composants, offrant un réel plus à nos interfaces graphiques.
En résumé Au cours de ce chapitre, nous avons abordé les concepts de base utiles à la création d’interfaces graphiques. Nous sommes à présent en mesure de positionner et de dimensionner les composants afin qu’ils répondent à l’ergonomie souhaitée de l’application. Nous savons également personnaliser les interfaces à l’aide du langage CSS et de l’utilisation de skins. Si nous avions pour habitude d’utiliser le langage HTML pour générer nos interfaces web nous pourrions nous contenter de ce qui vient d’être énoncé, mais nous perdrions la notion de richesse des interfaces proposée par Flex. En effet, ce qui différencie Flex du langage HTML, c’est la possibilité d’ajouter un dynamisme visuel aux interfaces. Cette différence se traduit par la mise en place d’effets, de mouvements, de transitions, etc. C’est ce dynamisme que nous allons aborder dans le chapitre suivant en traitant les notions d’états, de transitions et d’effets.
=Flex3 FM.book Page 156 Mardi, 2. décembre 2008 3:32 15
=Flex3 FM.book Page 157 Mardi, 2. décembre 2008 3:32 15
9 Le dynamisme applicatif à l’aide des états, des transitions et des effets Dans le chapitre précédent, nous avons vu comment agencer les composants au sein d’une interface. Nous allons à présent aborder les notions d’états, de transitions et d’effets permettant d’ajouter dynamisme et convivialité à nos applications Flex.
Les états ou view states Comme nous le savons, une application Flex est composée d’un fichier MXML décrivant son interface graphique. Sur cette dernière, nous pouvons disposer des composants selon un agencement précis répondant aux besoins d’ergonomie et de fonctionnalité de l’application. Il n’est pas faux d’affirmer qu’une interface graphique doit être « vivante », dans le sens où un événement peut déclencher l’ouverture d’une interface spécifique, cacher certains composants ou parties de l’interface, en modifier totalement l’apparence… En HTML, ceci s’obtient aisément en combinant les langages CSS et JavaScript ou bien en créant une nouvelle page. Néanmoins, n’oublions pas que nous ne possédons qu’un seul fichier de description d’interface, alors comment procéder ? C’est la notion d’état qui va nous apporter la réponse. Cette notion repose sur l’interface de base d’une application Flex, que l’on nommera état de base (base state). Cet état peut par ailleurs donner naissance à des états enfants ayant les mêmes caractéristiques que leur parent, mais pour lesquels il est possible d’ajouter ou de supprimer des composants ou encore de modifier les comportements et événements qui leur sont associés.
=Flex3 FM.book Page 158 Mardi, 2. décembre 2008 3:32 15
158
Comprendre Flex 3 PARTIE I
La compréhension de la notion d’état n’est pas facile. C’est pourquoi nous allons nous appuyer sur une étude de cas qui va nous permettre de mieux comprendre le mécanisme de ce concept. Vers une première définition Pour introduire la notion d’état, nous pouvons l’assimiler au changement de page d’un site web. Un état correspond alors à une nouvelle page web.
Étude de cas Imaginons une interface graphique permettant d’effectuer des recherches sur des patients dans une base de données médicale. Deux types de recherche sont possibles : • la recherche simple contenant quelques critères de base (numéro de patient, prénom et nom) ; • la recherche avancée comportant davantage de critères (numéro de chambre, date d’admission…). La recherche basique sera proposé par défaut à l’utilisateur, mais il lui sera possible de basculer vers la recherche avancée en sélectionnant cette option. Création de l’état de base
La première étape va consister à créer l’interface de base proposant la recherche simple :
=Flex3 FM.book Page 159 Mardi, 2. décembre 2008 3:32 15
Le dynamisme applicatif à l’aide des états, des transitions et des effets CHAPITRE 9
159
Cet exemple de code permet de sélectionner le type de recherche souhaité à l’aide du composant RadioButton (figure 9-1). Le bouton radio proposant la recherche simple est sélectionné par défaut (selected="true"). S’en suit la mise en place d’un Panel contenant un formulaire, composé de trois champs correspondant aux trois critères de base. Enfin, un bouton avec un intitulé clair quant à sa fonction est inséré dans le composant Panel. Notre interface de base, ou état de base, est à présent créé. Figure 9-1
Interface de recherche simple
Comme le sous-entend le cahier des charges de ce cas pratique, le type de recherche avancée doit inclure les champs de recherche de base tout en proposant des critères supplémentaires. Nous allons donc créer un état enfant qui héritera de l’état de base auquel nous ajouterons d’autres critères. Création de l’état enfant
Pour créer ce nouvel état, nous allons ajouter le code suivant dans le fichier MXML de notre application :
La balise a pour fonction de lister l’ensemble des états contenus dans l’application. Par ailleurs, une balise y a été ajoutée, cette dernière permettant d’indiquer la création d’un nouvel état nommé rechercheAvancee. Notre état enfant est désormais créé.
=Flex3 FM.book Page 160 Mardi, 2. décembre 2008 3:32 15
160
Comprendre Flex 3 PARTIE I
Il convient à présent de modifier quelques propriétés afin de proposer les nouveaux critères de recherche : • agrandissement du panel ; • agrandissement du formulaire, occasionnant le déplacement du bouton Rechercher ; • ajout des critères de recherche supplémentaires. Pour cela, nous agrémentons le code précédemment saisi :
Quelques explications s’imposent. Grâce à la balise , il nous est possible de modifier les propriétés du composant dont l’identifiant est précisé dans la propriété target. Ainsi, la première ligne de code consiste à modifier la hauteur (name="height") du composant panel1, en passant la valeur de cette propriété à 267 pixels. Avec ce décryptage en tête, nous vous laissons le soin d’analyser les trois autres lignes de code concernant le déplacement du bouton (lignes 2 et 3) et l’agrandissement du formulaire (ligne 4). Passons à présent à la suite du code :
=Flex3 FM.book Page 161 Mardi, 2. décembre 2008 3:32 15
Le dynamisme applicatif à l’aide des états, des transitions et des effets CHAPITRE 9
161
Vous l’avez certainement deviné, ce code permet d’ajouter les nouveaux critères de recherche. Cela est réalisé à l’aide de la balise , qu’il faut comprendre comme suit : « Ajouter à la suite des champs déjà présents (position="lastChild") dans le formulaire form1 (relativeTo="{form1}"), un nouveau champ de formulaire () dont le label est N° chambre et dont le type est une zone de saisie () ». Cette traduction est également applicable au champ dateAdmission ajouté à l’aide de la seconde balise . Notre état enfant est à présent terminé. Pour visualiser le résultat obtenu, placez-vous dans la perspective Design de Flex Builder. En haut à droite de cette perspective, vous trouverez la vue States. Si le code a été correctement saisi, vous devriez visualiser le nouvel état héritant de l’état de base (), comme l’illustre la figure 9-2. Vous pouvez également naviguer entre les différents états en cliquant dessus, ce qui permet d’en visualiser les différences (figure 9-3). Figure 9-2
Visualisation de l’état rechercheAvancee dans Flex Builder
Figure 9-3
Visualisation des états
=Flex3 FM.book Page 162 Mardi, 2. décembre 2008 3:32 15
162
Comprendre Flex 3 PARTIE I
La dernière tâche qui nous incombe consiste à mettre en place l’aspect dynamique de l’application, c’est-à-dire permettre à l’utilisateur de passer d’un état à un autre en sélectionnant l’option de recherche de son choix. Mise en place de l’interactivité
Le passage d’un état à un autre sera effectué lors de la sélection du type de recherche à l’aide des boutons radio. C’est donc sur l’événement click de ceux-ci que nous ferons appel à l’état correspondant à l’option sélectionnée. La sélection d’un état s’effectue grâce à la méthode currentState à laquelle nous passons en paramètre l’état à afficher :
Cet exemple de code présente la méthode d’appel de l’état à afficher lors de l’événement click du bouton radio. À noter qu’aucun paramètre n’a été défini pour la méthode currentState du bouton btn_simple, l’état appelé sera donc l’état de base. N’oublions pas que l’état enfant doit hériter de l’état parent, sauf volonté contraire du développeur. Dans notre cas, nous souhaitons que le changement d’état s’effectue également sur l’état enfant. Il convient donc d’ajouter ces deux événements à l’état rechercheAvancee :
Vous l’aurez compris, la balise permet d’ajouter des événements sur des composants des états enfants. Pour plus de clarté, voici le code complet de l’état de recherche avancée :
=Flex3 FM.book Page 163 Mardi, 2. décembre 2008 3:32 15
Le dynamisme applicatif à l’aide des états, des transitions et des effets CHAPITRE 9
163
Grâce à cette étude de cas, nous avons pu apprécier la notion d’état. Les états permettent de définir l’architecture de l’application en fonction des actions de l’utilisateur. Vous pouvez ainsi modifier l’apparence de l’interface ou d’un composant en fonction d’un événement déclenché par l’utilisateur. Cette nouvelle notion peut être un peu difficile à assimiler pour celles et ceux habitués à développer des applications web classiques, mais ils en apprécieront pleinement les avantages par la suite. Nous allons à présent aborder la notion de transition qui, comme vous allez le voir, représente une partie très importante de la notion d’interface cliente riche en nous permettant d’ajouter du dynamisme à nos états.
Les transitions Un peu à la manière d’un logiciel de montage vidéo, Flex permet d’effectuer des transitions entre chaque changement d’état. Vous pourrez ainsi obtenir des applications à l’aspect visuel très intéressant et attractif. La création d’une transition s’effectue en définissant les quatre paramètres de base suivants : • l’identifiant de la transition ; • l’état de départ ; • l’état d’arrivée ; • l’effet de transition exécuté. En explorant la documentation du package mx.effects , nous pouvons dresser la liste des effets de transition disponibles, repris dans le tableau 9-1, ainsi que leur description. Tableau 9-1
Liste des effets de transition disponibles
Effet
Description
Blur
Exécution d’un effet de flouté.
Dissolve
Passe de l’état transparent à l’état opaque ou inversement.
Fade
Effet semblable à celui de composant.
Glow
Applique un effet de surbrillance sur le composant.
Iris
Utilise un masque rectangulaire centré sur la cible afin de dévoiler petit à petit le contenu de celle-ci.
Move
Modifie la position d’un composant.
Dissolve en jouant sur la valeur de la propriété alpha du
=Flex3 FM.book Page 164 Mardi, 2. décembre 2008 3:32 15
164
Comprendre Flex 3 PARTIE I Tableau 9-1
Liste des effets de transition disponibles (suite)
Effet
Description
Rezise
Modifie la hauteur et la largeur d’un composant.
Rotate
Effectue la rotation d’un objet suivant un angle spécifique.
WipeDown
Effet de « baisser de rideau ».
WipeLeft
Effet de « tirer de rideau » vers la gauche.
WipeUp
Effet de « lever de rideau ».
WipeRight
Effet de « tirer de rideau » vers la droite.
Zoom
Effet de zoom sur le composant concerné.
Voyons à présent comment implémenter une transition à travers l’exemple de code suivant :
La première étape consiste à mettre en place la balise qui va contenir l’ensemble des transitions de l’application. Vient ensuite la création de la transition proprement dite qui, comme mentionné précédemment, est définie par : • son identifiant : id="transition" ; • l’état de départ : fromState="*" ; • l’état d’arrivée : toState="*" ; • l’effet : . En analysant attentivement les quelques lignes de code précédentes, nous pouvons observer quelques subtilités. La première concerne le nom des états. En effet, leur nom a été remplacé une astérisque (*), signifiant que la transition concerne l’ensemble des changements d’états de l’application. L’expression littérale de notre transition est la suivante : « Pour chaque changement d’état effectué dans l’application, appliquer l’effet WipeDown, ayant une durée de 1000 millisecondes, au composant panel1 ». Si nous avions souhaité créer une transition entre deux états particuliers, nous aurions remplacé les astérisques par l’identifiant de ces états :
La seconde subtilité concernera l’emploi de la balise , dont la signification sera détaillée à la section suivante « Combiner des effets ».
=Flex3 FM.book Page 165 Mardi, 2. décembre 2008 3:32 15
Le dynamisme applicatif à l’aide des états, des transitions et des effets CHAPITRE 9
165
Effet et cible (target) Chaque effet doit être appliqué sur une cible, dont l’identifiant est passé en paramètre de la propriété target de l’effet à l’aide d’accolades ouvrante et fermante. Pour appliquer l’effet à plusieurs cibles, il convient d’utiliser la propriété targets, à laquelle nous passons en paramètre la liste des identifiants des cibles concernées :
Combiner des effets Chaque effet a une durée d’exécution déterminée dans le temps. Cette durée, exprimée en millisecondes, est précisée à l’aide de la propriété duration. Pour bien comprendre, revenons sur la notion de transition. Nous avons vu qu’une transition peut comporter un effet, mais elle peut également en comporter plusieurs ! Dans ce cas, comment ordonner leur exécution ? La réponse réside dans l’utilisation des balises et dont nous allons à présent étudier le fonctionnement. Exécution en séquence
La balise va nous permettre d’exécuter les effets de façon successive (figure 9-4). Si la transition comporte deux effets, l’effet 1 sera exécuté, puis l’effet 2, à condition que l’exécution du premier effet soit terminée. Figure 9-4
Séquence d’effets
Dans cet exemple de code, les effets WipeDown et Blur seront exécutés l’un après l’autre. Voyons à présent les particularités de la balise .
=Flex3 FM.book Page 166 Mardi, 2. décembre 2008 3:32 15
166
Comprendre Flex 3 PARTIE I
Exécution en parallèle
Comme vous l’avez sans doute deviné, la balise permet l’exécution d’effets de façon simultanée (figure 9-5). Ainsi, si la transition comporte deux effets, l’effet 1 et l’effet 2 sont exécutés en même temps.
Dans cet exemple de code, les effets WipeDown et Blur sont exécutés de façon simultanée. Il est temps à présent de mettre en pratique de ce que vous venez d’apprendre sur les transitions et les effets associés. Pour cela, nous vous proposons de reprendre l’étude de cas précédente afin d’y ajouter une transition. Figure 9-5
Effets exécutés en parallèle
Mise en pratique La transition que nous souhaitons implémenter sera jouée à chaque changement d’état de l’application. Nous y ajouterons deux effets exécutés de façon simultanée et ayant pour cible commune le composant Panel contenant le formulaire. Les effets choisis sont : • une rotation complète du panneau (figure 9-6) ; • un effet « d’Iris », c’est-à-dire la découverte progressive du panneau (figure 9-7). L’implémentation de la transition se résume à l’ajout des quelques lignes de code suivantes :
=Flex3 FM.book Page 167 Mardi, 2. décembre 2008 3:32 15
Le dynamisme applicatif à l’aide des états, des transitions et des effets CHAPITRE 9 Figure 9-6
Effet de rotation
Figure 9-7
Effet « d’Iris »
167
=Flex3 FM.book Page 168 Mardi, 2. décembre 2008 3:32 15
168
Comprendre Flex 3 PARTIE I
Notre transition est donc jouée à chaque changement d’état grâce à la valeur * affectée aux propriétés fromState et toState. Comme nous souhaitons que l’exécution des effets soit simultanée, nous utilisons la balise ayant pour cible principale le panneau portant l’identifiant panel1. Le premier effet est une rotation complète du panneau (angleFrom="0" angleTo="360") sur une durée de 1000 millisecondes. Quant au second, il s’agit de l’effet Iris ayant une durée équivalente à l’effet précédent. La transition est à présent mise en place. Nous vous laissons le soin de l’apprécier en exécutant le projet. Pour plus de clarté, voici le code complet de l’application qui pourra vous aider en cas d’éventuels dysfonctionnements :
=Flex3 FM.book Page 169 Mardi, 2. décembre 2008 3:32 15
Le dynamisme applicatif à l’aide des états, des transitions et des effets CHAPITRE 9
169
Écrire des transitions en ActionScript Comme nous l’avons vu au chapitre 2, tout ce qui est réalisé en MXML peut l’être grâce à ActionScript. C’est donc tout naturellement que nous allons recréer l’effet de transition précédent à l’aide du langage ActionScript. Pour cela, il convient tout d’abord d’effacer toute notion de transition dans l’application en supprimant le code suivant :
Ensuite, nous allons devoir créer un nouveau fichier ActionScript dans le répertoire src du projet, que nous nommerons TransitionAS3.as. Attention à ne pas oublier de créer le lien entre l’application et ce fichier en utilisant la balise :
=Flex3 FM.book Page 170 Mardi, 2. décembre 2008 3:32 15
170
Comprendre Flex 3 PARTIE I
Passons à présent à l’écriture du code de notre transition : // Importation des classes nécessaires import mx.effects.Iris; import mx.effects.Parallel; import mx.effects.Rotate; import mx.states.Transition; public function creationTransition ():void{ // Création de la transition var transitionAS:Transition = new Transition; transitionAS.fromState = "*"; transitionAS.toState = "*"; // Création de la notion de parallélisme d’effets var parallelisme:Parallel = new Parallel; parallelisme.target = panel1; // Création de l’effet de rotation var rotation:Rotate = new Rotate(); rotation.angleFrom = 0; rotation.angleTo = 360 rotation.duration = 1000; // Création de l’effet d’Iris var iris:Iris = new Iris(); iris.duration = 1000; // Ajout des effets au conteneur d’effets parallelisme.addChild(rotation); parallelisme.addChild(iris); // Ajout du conteneur à la transition transitionAS.effect = parallelisme; // Ajout de la transition à la balise de l’application application.transitions = [transitionAS]; }
La lecture de ce code parle d’elle-même. Nous importons tout d’abord l’ensemble des classes nécessaires à la réalisation de la transition, puis nous construisons petit à petit l’ensemble des éléments la composant. Le tableau 9-2 présente la correspondance entre le code MXML utilisé précédemment pour la création de la transition et le code ActionScript. Souvenez-vous, les effets de rotation et d’Iris sont dans le conteneur d’effets définissant leur mode d’exécution :
=Flex3 FM.book Page 171 Mardi, 2. décembre 2008 3:32 15
Le dynamisme applicatif à l’aide des états, des transitions et des effets CHAPITRE 9 Tableau 9-2
171
Correspondances entre le code MXML et le code ActionScript
Étape
MXML
Actionscript
Création de la transition.
var transitionAS:Transition = new Transition; transitionAS.fromState = "*"; transitionAS.toState = "*";
Définition du mode d’exécution des effets et de la cible concernée.
var parallelisme:Parallel = new Parallel; parallelisme.target = panel1;
Création de l’effet de rotation.
var rotation:Rotate = new Rotate(); rotation.angleFrom = 0; rotation.angleTo = 360 rotation.duration = 1000;
Création de l’effet d’Iris.
var iris:Iris = new Iris(); iris.duration = 1000;
Bien entendu, MXML étant un langage basé sur XML, la notion d’inclusion d’élément se fait tout naturellement : // L’élément B est contenu dans l’élément A
En ActionScript, cela n’est possible que si la classe utilisée permet de réaliser cette inclusion via l’une de ses méthodes. Si nous analysons la classe Parallel, nous constatons la présence de la méthode addChild(childEffect:IEffect) permettant d’ajouter à notre conteneur les deux effets créés : parallelisme.addChild(rotation); parallelisme.addChild(iris);
Il convient ensuite d’inclure notre transition dans la propriété transitions () de l’application chargée de contenir dans un tableau l’ensemble des transitions de l’application : application.transitions = [transitionAS];
La dernière étape consiste tout simplement à faire appel à notre procédure creationTransition() dans notre application et à vérifier par l’exécution du projet que le résultat obtenu est identique à celui obtenu par l’usage du langage MXML.
=Flex3 FM.book Page 172 Mardi, 2. décembre 2008 3:32 15
172
Comprendre Flex 3 PARTIE I
En résumé Dans ce chapitre, nous avons vu comment il est possible d’organiser l’interface graphique de nos applications à l’aide des états et comment réaliser des transitions « animées ». Ces dernières permettent de réaliser des interfaces graphiques plus conviviales, avec un pouvoir commercial indéniable : si l’application est agréable à l’œil l’utilisateur aimera s’en servir et en parlera autour de lui. Attention toutefois à ne pas abuser des animations car en trop grand nombre, elles pourraient être gênantes pour les utilisateurs, qui la rejetteraient alors très rapidement, anéantissant ainsi votre dur labeur. Comme nous l’avons vu, Flex offre un éventail de fonctionnalités très large, couvrant la majeure partie de nos besoins. Néanmoins, il peut s’avérer que le composant nécessaire ne soit pas présent dans la bibliothèque de Flex. Nous allons donc voir dans le chapitre suivant comment créer nos propres composants.
=Flex3 FM.book Page 173 Mardi, 2. décembre 2008 3:32 15
10 Créer des composants personnalisés Par définition, un composant est un objet faisant partie d’un système. Une application Flex contient un ensemble de composants ayant chacun un rôle précis : • un bouton qui déclenche l’exécution d’une action ; • un DataGrid qui offre la possibilité de présenter les données sous forme tabulaire ; • une zone de saisie, lieu de l’interaction avec l’utilisateur : elle lui offre la possibilité d’alimenter le système d’information, etc. Cependant, ces composants ne sont pas toujours entièrement satisfaisants, car leurs possibilités sont parfois limitées. Fort heureusement, le framework Flex nous permet de remédier à cela en créant nos propres composants.
Penser composant Avant d’entrer dans le cœur du sujet, il est souhaitable de bien comprendre la notion de composant. Un composant est un élément autonome offrant un ensemble de fonctionnalités et pouvant être utilisé de façon similaire dans plusieurs applications. Il doit donc être capable de s’adapter à l’environnement applicatif dans lequel il est utilisé, tout en assurant une continuité de ses services. Prenons l’exemple du composant Button. Vous pouvez l’adapter à l’environnement applicatif en changeant son libellé ou son design (couleur,
=Flex3 FM.book Page 174 Mardi, 2. décembre 2008 3:32 15
174
Comprendre Flex 3 PARTIE I
police…), il assurera toujours sa fonctionnalité principale, qui est le déclenchement d’une action lorsque l’utilisateur clique dessus. Pour pouvoir être considéré comme tel, un composant doit offrir une ou plusieurs fonctionnalités qui pourront être invoquées quelle que soit l’application dans lequel il sera utilisé, ainsi qu’un certain nombre de paramètres lui permettant de s’adapter à son environnement. Tout ceci dans le but d’être réutilisable. Comme mentionné précédemment, une application Flex est constituée d’un ensemble de composants. Par ailleurs, un composant peut lui aussi comprendre d’autres composants. Par exemple, un composant permettant de suivre des flux RSS devra être constitué d’un composant permettant de saisir l’URL du flux à lire et d’un composant DataGrid présentant les articles de ce flux sous forme tabulaire. Un tel composant pourrait être qualifié de complexe mais nous lui préférons le nom de module. Ainsi, une application peut facilement être découpée en modules réutilisables dans d’autres applications. L’intérêt de développer des modules réside dans le fait qu’ils peuvent être développés et maintenus séparément, ne remettant pas en cause la stabilité de l’application dans laquelle ils sont intégrés.
Qu’est–ce qu’un composant ? Un composant est un fichier portant l’extension .swc, obtenu grâce à la compilation d’autres fichiers, écrits à l’aide des langages ActionScript et/ou MXML.
MXML ou ActionScript ? La première question que nous sommes en droit de nous poser est : faut il créer le composant à l’aide du langage MXML ou ActionScript ? Il n’existe pas de règle réellement établie à ce sujet. Pour les composants simples, c’est-à-dire ayant peu de fonctionnalités (un composant de présentation d’images par exemple), le MXML peut suffire. Pour un composant demandant la mise en place d’une logique complexe, la combinaison des langages ActionScript et MXML est à préférer, mais rien ne vous empêche d’utiliser exclusivement ActionScript. C’est d’ailleurs cette méthode que nous allons privilégier ici afin d’illustrer au mieux la mise en place d’un composant. Libre à vous d’opter pour l’une ou l’autre de ces méthodes en fonction de vos affinités avec les langages ActionScript et MXML, et de la complexité du composant à développer.
Le compilateur compc Maintenant que le choix de la méthode de développement a été effectué, nous pouvons passer à la réalisation du composant. Une fois ce dernier créé, il nous faut le compiler afin de le rendre utilisable dans d’autres applications Flex. C’est le rôle du compilateur compc.
=Flex3 FM.book Page 175 Mardi, 2. décembre 2008 3:32 15
Créer des composants personnalisés CHAPITRE 10
175
Le compilateur de composants compc s’exécute en ligne de commande. Il permet de créer un fichier SWC à partir de fichiers MXML et ActionScript passés en paramètres. Sa syntaxe d’exécution est la suivante : compc [options] -include-classes class [...] compc -o monComposant.swc -root monComposant.mxml
Dans cet exemple de code, nous compilons le fichier monComposant.mxml donnant naissance (-o = output) au fichier monComposant.swc. Nous ne nous attarderons pas davantage sur ce compilateur dont le fonctionnement sera détaillé à la section « Compilation avec compc » de ce chapitre.
Créer un composant Un exemple valant souvent mieux qu’un long discours, nous vous proposons à présent de créer un composant que vous réutiliserez sans doute dans un grand nombre de vos futures applications Flex, qui vous permettra de filtrer un tableau en fonction d’une donnée saisie dans une zone de texte.
Description du composant Le composant que nous allons créer permettra de filtrer le contenu d’un tableau sur une colonne donnée en fonction des informations saisies par l’utilisateur dans un champ prévu à cet effet. Le fonctionnement du composant est synthétisé par la figure 10-1 qui nous permet de définir les étapes suivantes : Étape ➊ : le composant reçoit des données sous la forme d’une collection d’objets (ArrayCollection). Étape ➋ : les données reçues sont affichées dans le DataGrid du composant. Étape ➌ : l’utilisateur saisit son critère de recherche dans la zone de texte prévue à cet effet. Étape ➍ : à chaque modification de la zone de saisie, le filtre est effectué sur la colonne du DataGrid concerné selon la règle suivante : « Afficher les éléments de la colonne contenant la valeur de l’expression saisie dans la zone de texte », ce qui entraîne la mise à jour du DataGrid. Étape ➎ : la sélection d’une ligne du DataGrid permet d’extraire la valeur servant d’identifiant pour la donnée cliquée, valeur qui peut alors être exploitée dans un autre traitement.
=Flex3 FM.book Page 176 Mardi, 2. décembre 2008 3:32 15
176
Comprendre Flex 3 PARTIE I
Figure 10-1
Fonctionnement du composant
Compte tenu de ce que nous venons d’énoncer, les éléments faisant partie intégrante du composant sont donc : • un composant TextInput qui permettra à l’utilisateur de saisir des données ; • un composant Label précédant la zone de saisie et permettant d’indiquer à l’utilisateur la colonne du tableau concernée par le filtre ; • un composant DataGrid représentant les données sous forme tabulaire ; • un composant Canvas servant de conteneur principal. Comme nous l’avons vu précédemment, un composant doit être réutilisable et s’adapter à toutes les situations. Pour que cette adaptation soit effective, certaines propriétés du composant doivent être paramétrables. La plupart des paramétrages sont liés à l’aspect graphique (couleur, libellés…). Pour que notre composant soit réutilisable, nous devons offrir la possibilité de paramétrer les éléments suivants : • le nombre de colonnes du DataGrid ; • les propriétés des colonnes (nom, taille, visibilité…) ; • le texte du composant Label précédant la zone de texte.
=Flex3 FM.book Page 177 Mardi, 2. décembre 2008 3:32 15
Créer des composants personnalisés CHAPITRE 10
177
Les paramètres liés aux traitements ne peuvent que très rarement être spécifiés car ils obéissent à des règles précises énoncées dans le code du composant. Dans notre cas, nous allons demander à ce que la collection d’objets transmise au composant (ArrayCollection) ait une structure particulière : • le champ sur lequel portera le filtre devra être nommé champFiltre ; • le champ contenant l’identifiant de la donnée devra porter le nom idt. Si l’on considère l’exemple illustré par la figure 10-1, la collection d’objets (ArrayCollection) s’apparente au code suivant :
Le fonctionnement général du composant étant à présent défini, il est temps de se lancer dans sa réalisation.
Méthodologie de création La création de notre composant se déroule en six phases que allons découvrir ensemble : 1. création du projet ; 2. création du composant ; 3. mise en place des éléments graphiques du composant ; 4. alimentation du DataGrid (tableau de données) ; 5. gestion des événements ; 6. compilation. Phase 1 – Création du projet
Bien que nous allons créer un élément aussi important, il n’existe pas de projet de ce type au sein de Flex Builder. Il faut donc procéder comme si nous allions créer un projet Flex standard. Fichier MXML Component Il est possible de créer un composant au sein d’une application Flex en créant un nouveau fichier MXML Component.
1. Ouvrez Flex Builder et sélectionnez le menu File>New>Flex Project. 2. Dans la fenêtre qui s’ouvre alors, saisissez le nom du projet (compFiltreTableau pour notre exemple) et indiquez que vous souhaitez créer une application de type web (option Web application).
=Flex3 FM.book Page 178 Mardi, 2. décembre 2008 3:32 15
178
Comprendre Flex 3 PARTIE I
3. Conservez les options de configuration proposées par défaut et cliquez sur le bouton Finish. Phase 2 − Création du composant
La phase suivante consiste à créer la classe ActionScript du composant et à l’insérer dans l’interface graphique du projet afin de pouvoir tester son bon fonctionnement. Dans l’arborescence du projet, nous allons tout d’abord créer un package que l’on nommera com.composants et qui contiendra la classe du composant : 1. Effectuez un clic droit sur le répertoire src et sélectionnez New>Folder. 2. Nommez ce nouveau répertoire com 3. Répétez l’étape 1 avec le répertoire com nouvellement créé et nommez le nouveau sousrépertoire composants. 4. Créez ensuite la classe du composant en effectuant un clic droit sur le répertoire composants et en sélectionnant ActionScript Class>New dans le menu contextuel. 5. Dans la fenêtre qui s’affiche alors, vous constatez que le package com.composants est renseigné de façon automatique. 6. Spécifiez ensuite le nom de la classe, soit FiltreTableau. Le composant étant avant tout un Canvas comportant différents éléments (TextInput, DataGrid), la classe FiltreTableau devra hériter de la classe mx.containers.Canvas. Cet héritage est à spécifier dans le champ Superclass de la fenêtre de configuration (figure 10-2). Convention de nommage Pour respecter la convention de nommage du langage ActionScript, le nom de la classe doit obligatoirement commencer par une majuscule.
7. Cliquez sur le bouton Finish. Si vous observez l’arborescence du projet, vous notez la présence de la classe FiltreTableau créée dans le répertoire composants et contenant le code suivant : package com.composants { import mx.containers.Canvas; public class FiltreTableau extends Canvas { public function FiltreTableau() { super(); } } }
=Flex3 FM.book Page 179 Mardi, 2. décembre 2008 3:32 15
Créer des composants personnalisés CHAPITRE 10
179
Figure 10-2
Création de la classe FiltreTableau
Nous observons que la classe Canvas (import mx.containers.Canvas) a été importée et que notre classe hérite de cette dernière (extends Canvas). Nous notons aussi la présence du constructeur FiltreTableau(), appelé lors de l’instanciation de la classe. À l’intérieur de ce constructeur, on remarque également la présence du mot-clé super. Celui-ci doit être obligatoirement spécifié car notre composant hérite de la classe Canvas et de ce fait, le constructeur de cette classe doit être appelé avant toute autre instruction. Il faut ensuite mettre en place le composant dans l’interface graphique du projet en modifiant le fichier comFiltreTableau.mxml créé lors de la phase d’initialisation du projet. Pour ce faire, activez le mode Source et apportez les modifications suivantes au code déjà présent :
La première chose à faire est de préciser l’espace de noms du composant à l’aide de xmlns (pour XML Name Space). C’est grâce à cet espace de noms que le compilateur est en mesure de trouver les classes ActionScript correspondant à notre composant. L’espace de noms utilisé est com.composant.* préfixé par la valeur compFT. C’est ce préfixe qui sera utilisé dans l’interface graphique, Flex étant alors en mesure de faire la relation entre le préfixe et la classe spécifiée dans l’espace de noms. Nous pourrons ainsi faire appel aux méthodes du composant. Vient ensuite la mise en place du composant en faisant appel à son constructeur (). Étant donné qu’il hérite de la classe Canvas, nous pouvons lui affecter les propriétés id, width, height, x et y. À présent, si nous activons le mode Design, nous remarquons la présence de notre composant sous la forme d’un Canvas comme l’illustre la figure 10-3. Figure 10-3
Mise en place du composant
Phase 3 − Mise en place des éléments
Nous allons à présent modifier la classe FiltreTableau pour que les éléments TextInput, Label et DataGrid soient créés dynamiquement. package com.composants { import mx.containers.Canvas; import mx.controls.DataGrid;
=Flex3 FM.book Page 181 Mardi, 2. décembre 2008 3:32 15
Créer des composants personnalisés CHAPITRE 10
181
import mx.controls.Label; import mx.controls.TextInput; public class FiltreTableau extends Canvas { private var _libelle:Label = new Label(); private var _zoneTexte:TextInput = new TextInput; private var _datagrid:DataGrid = new DataGrid(); public function FiltreTableau() { super(); // Ajout du libellé _libelle.x=10 _libelle.y=10 _libelle.width = 100; this.addChild(_libelle); // Ajout de la zone de texte _zoneTexte.x = 110; _zoneTexte.y = 10; this.addChild(_zoneTexte); // Ajout du DataGrid _datagrid.x=10; _datagrid.y=40; this.addChild(_datagrid); } } }
Après avoir importé les classes relatives à chaque élément, nous devons les instancier en créant les objets _libelle, _zoneTexte et _datagrid. Chaque objet pourra alors être ajouté au Canvas de notre composant grâce à sa méthode addChild(). La figure 10-4 illustre le résultat obtenu après l’ajout de ces quelques lignes de code. Figure 10-4
Mise en place des éléments
=Flex3 FM.book Page 182 Mardi, 2. décembre 2008 3:32 15
182
Comprendre Flex 3 PARTIE I
Vous aurez sans doute remarqué que le libellé ne semble pas être présent sur l’interface. Cette impression est due au fait que la propriété text du libellé n’a pas été renseignée, mais rassurez-vous, le libellé est bien présent. Nous verrons par la suite comment il est possible de le personnaliser. Phase 4 − Alimentation du DataGrid
Le DataGrid du composant sera alimenté via une collection d’objets (ArrayCollection) passée en paramètre. La première étape va donc consister à créer ce paramètre en déclarant un attribut _tableauDonnees de type ArrayCollection ainsi que les méthodes set et get qui lui seront associées. Dans la méthode set, on affectera le dataProvider de l’objet _datagrid avec la valeur reçue en paramètre, permettant l’affichage des données dans le DataGrid. import mx.collections.ArrayCollection; public class FiltreTableau extends Canvas { […] private var _tableauDonnees:ArrayCollection = new ArrayCollection(); public function FiltreTableau() { super(); […] } public function set tableauDonnees(t:ArrayCollection):void{ _datagrid.dataProvider = t; _tableauDonnees = t; } public function get tableauDonnees():ArrayCollection{ return _tableauDonnees; } }
Modifions à présent le code du fichier FiltreTableau.mxml en créant une nouvelle collection d’objets (ArrayCollection) qui sera passée en paramètre de notre composant.
=Flex3 FM.book Page 183 Mardi, 2. décembre 2008 3:32 15
Créer des composants personnalisés CHAPITRE 10
183
Exécutons ensuite l’application et vérifions que tout se déroule bien correctement (figure 10-5). Figure 10-5
Alimentation du DataGrid
Nous pourrions nous contenter du résultat obtenu, mais n’oublions pas qu’un composant n’est réutilisable que s’il peut s’adapter à une multitude de situations. Dans notre cas, il serait préférable que les colonnes du DataGrid soient paramétrables, c’est-à-dire qu’il soit au moins possible de définir leur libellé, leur taille et leur visibilité. Pour cela, nous allons procéder de la même manière que pour la création du paramètre tableauDonnees. Les colonnes seront décrites dans une ArrayCollection qui sera ensuite analysée, modifiant ainsi les colonnes du DataGrid. import mx.controls.dataGridClasses.DataGridColumn; public class FiltreTableau extends Canvas { […] private var _colonnes:ArrayCollection = new ArrayCollection(); […] public function set colonnes(col:ArrayCollection):void{ _colonnes = col; ajouterColonnes() }
=Flex3 FM.book Page 184 Mardi, 2. décembre 2008 3:32 15
184
Comprendre Flex 3 PARTIE I
public function get colonnes():ArrayCollection{ return _colonnes; } public function ajouterColonnes():void { var listeColonnes:Array = new Array(); for (var i:int=0; i
Figure 11-2
Oubli de l’étiquette [Bindable]
La variable variableSource est considérée comme source de données du fait que sa déclaration est précédée de l’étiquette [Bindable]. La procédure afficherValeur() est appelée à chaque modification de la valeur du NumericStepper et a pour fonction de modifier la
=Flex3 FM.book Page 204 Mardi, 2. décembre 2008 3:32 15
204
Comprendre Flex 3 PARTIE I
variable source. La liaison de données est effectuée sur la propriété text du composant TextInput, ce qui signifie qu’à chaque modification de la variable source, la valeur de la propriété text sera modifiée en conséquence. Pour plus de clarté, la figure 11-3 schématise le principe de ce processus.
Figure 11-3
Utilisation de l’étiquette [Bindable]
Nous pouvons alors distinguer quatre étapes : ➊ La valeur du composant NumericStepper est modifiée par l’utilisateur, ce qui déclenche l’exécution de la procédure afficherValeur(). ➋ La procédure modifie alors la valeur de la variable variableSource. ➌ Flex vérifie l’existence d’une liaison. ➍ Étant donné qu’une liaison a été établie entre la variable ActionScript et la propriété text du composant TextInput, la valeur de cette propriété est mise à jour. Spécification d’un événement
Par défaut, la synchronisation s’effectue sur la modification de la valeur source, mais il est possible de modifier ce comportement en permettant la synchronisation sur le déclenchement d’un événement précis. Pour ce faire, nous devons définir un événement de synchronisation et l’affecter à l’étiquette [Bindable] précédant la variable source. Lorsque le dispatch de l’événement sera exécuté, l’étiquette [Bindable] concernée en sera avertie et procédera à la synchronisation des données.
=Flex3 FM.book Page 205 Mardi, 2. décembre 2008 3:32 15
Gérer les données CHAPITRE 11
205
Dans le code suivant, nous allons faire en sorte que la synchronisation des données ne s’effectue que si la valeur du composant NumericStepper est supérieure ou égale à 5. = 5) { variableSource = "Valeur du NumericStepper : "+ String(numericStepper ➥.value); // Déclaration de l’événement var evenement:Event = new Event("siSupOuEgalA5"); // Action de dispatch dispatchEvent(evenement); } } ]]>
L’expression [Bindable(event="siSupOuEgalA5")] précise que l’action de synchronisation ne peut se produire que lorsque l’événement siSupOuEgalA5 est déclenché. Par ailleurs, cet événement n’est déclaré dans la procédure afficherValeur() que lorsque la valeur du NumericStepper répond aux conditions fixées. Vient ensuite l’envoi de l’ordre de mise à jour de la variable à l’étiquette [Bindable], par l’exécution du dispatch de l’événement. La valeur de variable est alors immédiatement mise à jour et modifiée. Flex 4 et le DataBinding bi-directionnel Le DataBinding consiste à mettre à jour une donnée source, qui répercute cette modification à une donnée destination. Dans l’autre sens, cette action est impossible. Ce problème est résolu dans la version 4 du framework par l’apparition de la notion de DataBinding bi-directionnel.
=Flex3 FM.book Page 206 Mardi, 2. décembre 2008 3:32 15
206
Comprendre Flex 3 PARTIE I
Stocker des données grâce au modèle Comme nous l’avons vu au chapitre 2, la partie graphique d’une application peut être divisée en trois couches distinctes (modèle, vue et contrôleur) selon l’architecture MVC. Au cours de la section précédente, nous avons également vu que la balise peut jouer le rôle du contrôleur. Nous allons maintenant découvrir comment le modèle peut être implémenté à l’aide des langages MXML et ActionScript. Un modèle a pour fonction principale de stocker des données. Ce stockage précède le stockage persistant réalisée par la base de données. L’utilisation d’un modèle permet donc un stockage temporaire des données afin de les manipuler avant leur enregistrement définitif. Dans cette section, nous vous proposons d’étudier les différentes méthodes de déclaration d’un modèle ainsi que son utilité à travers un exemple concret.
Implémenter le modèle à l’aide de la balise Imaginons une petite application dont le but est d’enregistrer les nouvelles admissions dans un centre hospitalier. Une admission consiste à enregistrer les données caractéristiques d’un patient, à savoir son identifiant, son prénom et son nom. La première étape va donc consister à créer un modèle capable de stocker ces informations. Pour cela, nous recourons à la balise du langage MXML.
En analysant ce code, nous voyons tout d’abord qu’un modèle se caractérise par un identifiant qui lui est propre. À l’intérieur de ce modèle, nous spécifions ce qui peut être considéré comme la classe patient et ses trois attributs id, prenom et nom. Afin d’étudier l’utilisation du modèle, nous devons ajouter un formulaire de saisie, qui nous permettra d’alimenter le modèle en données
=Flex3 FM.book Page 207 Mardi, 2. décembre 2008 3:32 15
Gérer les données CHAPITRE 11
207
Il convient ensuite d’implémenter une procédure qui va utiliser notre modèle pour stocker les informations. Cette procédure sera appelée lorsque l’utilisateur cliquera sur le bouton Ajouter.
La procédure affecte les attributs du modèle à partir des champs du formulaire pour ensuite afficher la valeur de ces attributs dans une fenêtre d’alerte (figure 11-4). Figure 11-4
Interaction avec le modèle
=Flex3 FM.book Page 208 Mardi, 2. décembre 2008 3:32 15
208
Comprendre Flex 3 PARTIE I
Pour plus de clarté, voici le code complet de cet exemple :
Il aurait également été possible d’utiliser le DataBinding. L’objet source de la liaison aurait alors été la zone de saisie et l’objet de destination, l’attribut du modèle correspondant à cette zone de saisie.
=Flex3 FM.book Page 209 Mardi, 2. décembre 2008 3:32 15
Gérer les données CHAPITRE 11
209
{id_txt.text} {prenom_txt.text} {nom_txt.text}
Nous venons de réaliser notre première application faisant usage d’un modèle, nous donnant aussi l’occasion de faire nos premiers pas dans l’architecture MVC à l’aide de Flex. Néanmoins, l’usage de la balise ne se limite qu’à la description du modèle en lui-même et ne nous permet pas d’y inclure la logique métier. Pour faire cela, nous devrons utiliser le langage ActionScript.
Les modèles et ActionScript La première alternative à l’usage de la balise est son implémentation à l’aide du langage ActionScript : public var ModelePatient:Object={ id:null, // Affecte la valeur nulle à l’identifiant... prenom:null, nom:null }
Néanmoins, ceci ne procure guère plus d’avantages que l’emploi de la balise , car il est toujours impossible d’implémenter la logique métier et d’y typer nos variables. La solution va donc consister à créer des classes ActionScript dont le rôle est de décrire le modèle et de typer les attributs (chaîne, entier…). La figure 11-5 illustre la conceptualisation de la classe Patient. Cette classe comporte les trois attributs id, prenom et nom dont la portée est privée, c’est-à-dire que leur accès est strictement réservé à la classe Patient. Trois méthodes publiques d’affectation de valeur aux attributs sont ensuite créées (set) ainsi que trois méthodes publiques récupérant la valeur des attributs (get). Figure 11-5
La classe Patient
=Flex3 FM.book Page 210 Mardi, 2. décembre 2008 3:32 15
210
Comprendre Flex 3 PARTIE I
Cette classe sera retranscrite dans un fichier ActionScript distinct du fichier MXML de l’application en créant un fichier de type ActionScript Class (menu File>New de Flex Builder). Le code de la classe est le suivant : package { public class Patient { // Déclaration des attributs private var _id:int; private var _prenom:String; private var _nom:String; // Méthodes d’affectation public function set id(param:int):void{ _id = param; } public function set prenom(param:String):void{ _prenom = param; } public function set nom (param:String):void{ _nom = param; } // Méthodes de récupération des valeurs public function get id():int{ return _id } public function get prenom():String{ return _prenom; } public function get nom():String{ return _nom } } }
Passons à présent à l’utilisation de cette classe dans notre application. Commençons par importer notre classe en procédant comme nous l’avons fait pour l’importation des composants personnalisés (chapitre 10), c’est-à-dire en ajoutant la syntaxe suivante au code déclaratif de l’application :
=Flex3 FM.book Page 211 Mardi, 2. décembre 2008 3:32 15
Gérer les données CHAPITRE 11
211
Étant donné que notre classe joue le rôle de modèle, il convient de lui affecter un identifiant afin de pouvoir y faire référence dans les différents scripts qui pourront être développés ultérieurement : Attention La syntaxe n’est pas fortuite. En effet, Patient correspond au nom de la classe à employer.
Notre classe est à présent intégrée dans l’interface graphique. Elle remplit sa fonction de modèle, comme le montrent ces quelques lignes de code :
=Flex3 FM.book Page 212 Mardi, 2. décembre 2008 3:32 15
212
Comprendre Flex 3 PARTIE I
Le résultat auquel nous aboutissons est identique à celui obtenu avec la balise (figure 11-4). Grâce aux classes, nous pouvons implémenter la logique métier en y développant des méthodes spécifiques, ce qui était jusque-là impossible à l’aide des méthodes traditionnelles d’implémentation de modèle. Dans notre exemple, nous aurions pu développer une méthode calculant le nombre de lettres contenues dans le nom de famille saisi, lequel aurait alors été concaténé à ce même nom : […] public function set nom (param:String):void{ _nom = param + " NB Lettres -> "+String(calculNbLettres(param)); } […] // Méthode de calcul du nombre de lettres contenues dans le nom de famille public function calculNbLettres(param:String):int{ return param.length; }
Ceci ne présente, certes, que peu d’intérêt ici, mais vous voyez ainsi que l’utilisation des classes nous offre de nombreuses possibilités, notamment celle de manipuler les données stockées dans le modèle avant de les transférer à la couche de persistance de données. Nous pourrions nous arrêter là mais il nous a semblé important de poursuivre avec les méthodes de validation des données. En effet, qui n’a jamais été confronté au codage parfois fastidieux d’une vérification d’une adresse e-mail ? Eh bien ce temps est révolu grâce aux composants Validator qui réalisent ce travail pour vous !
Valider des données Valider les données, c’est s’assurer de la cohérence et de la qualité des informations contenues dans le système. Pour une entreprise de marketing, par exemple, il serait inconcevable que le format des adresses e-mail des clients ne soit pas correct, de même que celui du code postal ou du numéro de carte bancaire. Jusqu’à présent, ces vérifications de format devaient être implémentées par le développeur de l’application. Tout cela est désormais de l’histoire ancienne grâce au composant Validator de Flex. Flex permet de vérifier le format des éléments suivants : • carte de crédit (en fonction du type : Visa, MasterCard…) ; • valeur monétaire ; • date ; • adresse e-mail ;
=Flex3 FM.book Page 213 Mardi, 2. décembre 2008 3:32 15
Gérer les données CHAPITRE 11
• • • • • •
213
nombre ; numéro de téléphone ; numéro de Sécurité sociale ; code postal ; chaîne de caractères ; expression régulière.
Nous n’allons pas ici décrire tous ces formats de validation, mais nous nous concentrerons sur un type en particulier, très largement utilisé dans les applications : la validation du format de l’adresse e-mail. Pour commencer, créons un formulaire contenant une zone de texte dédiée à la saisie de l’adresse e-mail :
Rendre la saisie obligatoire Pour cet exemple, le champ mail_txt doit obligatoirement être renseigné. Dans une application web classique (non développée à l’aide d’un framework), il nous faudrait éventuellement développer une fonction JavaScript qui vérifierait la présence ou non de caractères spécifiques dans la zone (point, arobase…). Les choses sont beaucoup plus simples grâce au framework Flex, car il suffit de lui préciser que ce champ est obligatoire grâce à la propriété required du composant FormItem.
En passant à true la valeur de la propriété required du composant FormItem, nous indiquons à Flex que la saisie de ce champ est obligatoire. Un astérisque apparaît alors après le libellé du champ (figure 11-6). Figure 11-6
Saisie obligatoire
=Flex3 FM.book Page 214 Mardi, 2. décembre 2008 3:32 15
214
Comprendre Flex 3 PARTIE I
Il ne nous reste plus qu’à mettre en place le validateur comme suit : ➥
Le fonctionnement de la validation est basé sur la notion de DataBinding. La source du Validator est le champ mail_txt. Lorsque sa propriété text est modifiée, l’action de validation est alors déclenchée. Nous vous laissons à présent le soin d’exécuter cette application et de vérifier que lorsque l’on clique sur le bouton Valider sans avoir saisi d’adresse e-mail, le contour du champ devient rouge et un message d’erreur s’affiche (figure 11-7) au survol du champ.
Figure 11-7
Contrôle de la saisie obligatoire
=Flex3 FM.book Page 215 Mardi, 2. décembre 2008 3:32 15
Gérer les données CHAPITRE 11
215
Vérification du format Pour qu’une adresse e-mail soit valide, elle doit obligatoirement être composée : • d’un nom d’utilisateur (par exemple, jean.dupont) ; • d’une arobase (@) ; • d’un nom de domaine (par exemple, domaine.fr). La vérification de la présence de ces trois éléments est chose complexe à développer. Grâce à Flex, elle se résume à une simple ligne de code grâce au composant qui se charge d’effectuer l’ensemble des vérifications nécessaires. Voyons ceci en détail. Pour commencer, nous devons remplacer le composant de validation présent dans notre application par celui-ci :
Ce composant fonctionne de la même façon que le précédent, à la seule différence qu’il vérifie également, en plus de la saisie obligatoire, la syntaxe de l’adresse e-mail. Si vous testez de nouveau l’application, vous verrez que tous les critères sont correctement vérifiés et ce, grâce à une simple ligne de code. Néanmoins, il reste un petit problème qu’en tant que lecteur attentif vous avez certainement remarqué : les messages d’erreur sont en anglais ! Mais rassurez-vous, il est possible de personnaliser ces messages, ce que nous allons voir à présent.
Personnalisation des messages d’erreur Chaque composant de validation possède sa propre bibliothèque de textes à afficher en fonction du type d’erreur rencontré. Il est possible de personnaliser ces messages. Voyons comment procéder pour notre composant :
En exécutant à nouveau l’application, vous notez que les messages d’erreur affichés correspondent désormais à ceux qui ont été spécifiés suivant le cas de figure concerné.
Les événements de validation Par défaut, l’événement de validation de format correspond à la notification de changement de la valeur source du composant de validation. Il nous est possible de modifier ce comportement à l’aide des propriétés trigger et triggerEvent du composant de validation.
=Flex3 FM.book Page 216 Mardi, 2. décembre 2008 3:32 15
216
Comprendre Flex 3 PARTIE I
La propriété trigger sert à spécifier qu’un composant de l’interface déclenchera l’action de validation. Quant à la propriété triggerEvent, elle précise l’action qui devra être réalisée sur notre composant. Ainsi, si nous souhaitons déclencher la validation d’un champ lorsque l’utilisateur clique sur le bouton btn_verifier de l’interface, la propriété trigger de l’élément de validation devra porter la valeur btn_verifier et il faudra affecter la propriété triggerEvent de la valeur click. Appliquons ceci à notre exemple en définissant la règle suivante : « L’action de validation doit être effectuée à chaque fois que l’utilisateur clique sur le bouton Valider ».
Gestion de la validation en ActionScript Maintenant que nous sommes en mesure de valider le format des données de nos formulaires, il est important d’étudier l’interaction entre la validation et les traitements ActionScript. En effet, il serait bien regrettable que le traitement d’enregistrement ait lieu malgré l’erreur de format détectée par le composant de validation. Pour cela, nous avons recours à la méthode validate() du composant de validation. Grâce à lui, nous vérifierons le résultat des différentes validations et permettrons ou non l’exécution de traitements applicatifs :
Le type de résultat retourné par la méthode validate() est VALID si la validation s’est correctement déroulée, et INVALID si la validation a échoué. Un simple test sur la valeur de la variable resultatValidation permet d’exécuter ou non le traitement d’ajout.
=Flex3 FM.book Page 217 Mardi, 2. décembre 2008 3:32 15
Gérer les données CHAPITRE 11
217
Voici le code de l’exemple dans son intégralité :
Ainsi se termine cette section sur la validation des formats de données. Grâce aux composants de validation, vous êtes à présent en mesure de fournir des données cohérentes à votre système d’information. Dans la mesure où nous ne pouvons pas dans cet ouvrage définir toutes les possibilités offertes par ces composants, nous les utiliserons par la suite au travers d’exemples grâce auxquels vous pourrez notamment apprécier les méthodes de création de composant de validation personnalisés. Pour l’heure nous allons aborder un autre sujet tout aussi intéressant : le formatage des données.
=Flex3 FM.book Page 218 Mardi, 2. décembre 2008 3:32 15
218
Comprendre Flex 3 PARTIE I
Validation complète d’un formulaire Si un formulaire comporte de nombreux champs, la méthode que nous venons de voir deviendra rapidement fastidieuse à implémenter. La classe Validator pallie ce problème grâce à sa méthode validateAll([composants de validation séparés par une virgule]).
Formater des données Nous ne pouvions pas écrire un chapitre sur la gestion des données sans aborder la notion de formatage. Cette opération consiste à transformer une donnée en une chaîne dont le format aura préalablement été précisé. L’application la plus commune est le formatage du numéro de téléphone, ce que nous allons voir à travers l’exemple suivant.
=Flex3 FM.book Page 219 Mardi, 2. décembre 2008 3:32 15
Gérer les données CHAPITRE 11
219
Nous commençons l’écriture de l’application par la spécification d’un composant de formatage propre aux données téléphoniques et qui nous permet de formater les données à notre convenance. Nous affectons ainsi la propriété formatString de la valeur ##.##.##.##.##. Vient ensuite l’écriture de l’interface graphique qui sera composée d’un panneau et de deux zones de texte. La première servira à saisir le numéro de téléphone, la seconde affichera le résultat du formatage. Attardons-nous quelques instants sur la propriété text de la seconde zone de texte : text="{formatTelephone.format(tel_txt.text)}"
Ces quelques instructions signifient que le formatage est exécuté sur la propriété text de la zone tel_txt lorsque celle-ci est mise à jour (nous retrouvons ici la notion de DataBinding). Le résultat obtenu est illustré par la figure 11-8. Figure 11-8
Formatage de données téléphoniques
Les composants de formatage proposés par Flex sont les suivants : • composant de formatage monétaire () ; • composant de formatage de date () ; • composant de formatage de numéro de téléphone () ; • composant de formatage de nombre () ; • Composant de formatage de code postal (). Intéressons-nous à présent au composant de formatage de date dont la particularité est de proposer un système de notation particulier pour le formatage des années, mois, jours…
=Flex3 FM.book Page 220 Mardi, 2. décembre 2008 3:32 15
220
Comprendre Flex 3 PARTIE I
Le système proprement dit est basé sur une notation par lettres, lesquelles sont présentées dans le tableau 11-1, ainsi que leur signification afin de vous aider dans la manipulation de ce champ très spécial qu’est le champ date : Tableau 11-1
Formatage des différents éléments d’une date
Lettre
Description
Y
Permet de formater l’année. Par exemple :
YY = 08 YYYY = 2008. M
Permet de formater le mois. Par exemple :
M = 7 MM = 07 MMM = jul MMMM =july D
Permet de formater le jour. Par exemple :
D = 1 DD = 01 E
Permet de format le jour de la semaine. Par exemple :
E = 1 EE = 01 EEE = mon EEEE = monday A
Permet d’ajouter l’indicateur Matin/Après midi.
J
Permet de formater l’heure de 0 à 23.
H
Permet de formater l’heure de 1 à 24.
K
Permet de formater l’heure au format AM/PM (0-1).
L
Permet de formater l’heure au format AM/PM (1-12).
N
Permet de formater les minutes.
S
Permet de formater les secondes.
Le tableau 11-2 contient quelques exemples de formatage. Tableau 11-2
Exemples de formatage
Formatage
Résultat obtenu
YYYY.MM.DD
2008.05.15
H:NN
9:05 AM
EEE, DD MMMM YYYY
Thu, 15 May 2008
L’exemple de code suivant montre comment formater la date du jour à l’aide de l’expression EEE, DD MMMM YYYY.
=Flex3 FM.book Page 221 Mardi, 2. décembre 2008 3:32 15
Gérer les données CHAPITRE 11
221
En résumé Grâce à ce chapitre, vous êtes désormais en mesure de créer des liaisons de données grâce à la notion de DataBinding qui permet d’éviter l’écriture de procédures de recopie de données comme c’est le cas dans d’autres langages. Vous avez également pu découvrir les méthodes utilisées afin de mettre en place la notion de modèle de l’architecture MVC qui permet un stockage temporaire des données avant leur enregistrement définitif dans la base de données. Par ailleurs, vous êtes à présent en mesure de vérifier le format des données afin de vous assurer de la qualité des données insérées dans le système d’information, et de formater les données afin de les présenter conformément aux attentes de l’utilisateur. À ce stade, vous savez donc comment faire pour fournir des données de qualité à votre système d’information. La question que nous sommes maintenant en droit de nous poser est la suivante : Comment insérer ces données dans le système d’information ? Le contenu du chapitre 2 nous apporte déjà un élément de réponse en nous indiquant que Flex n’est pas capable de communiquer directement avec la couche de persistance de données. En effet, cette communication est réservée à la couche métier qui, en offrant ses services à l’application Flex, permet la manipulation des données. L’étape suivante va donc consister à étudier les différentes méthodes qui nous permettront de communiquer avec cette couche.
=Flex3 FM.book Page 222 Mardi, 2. décembre 2008 3:32 15
=Flex3 FM.book Page 223 Mardi, 2. décembre 2008 3:32 15
12 Accéder aux services de la couche métier Dans la mesure où Flex ne peut accéder aux informations contenues dans une base de données en raison de son appartenance à la couche graphique, il va demander à un tiers, la couche métier, de réaliser ce travail, exactement comme nous demandons parfois à une personne de notre entourage de nous rendre un service. Pour communiquer avec cette couche, Flex dispose de trois composants RPC (Remote Procedure Call) : • HTTPService, également dénommé REST-Style webservice ; • WebService ; • RemoteObject. Ce chapitre sera donc consacré à l’étude de ces composants
Employer les requêtes HTTP avec HTTPService ou REST-Style webservice L’emploi de ce composant dépend du langage utilisé pour la création et le développement des services. Si ce dernier accepte de recevoir des données à l’aide des méthodes POST et GET (ce qui est le cas des langages PHP, JSP, ColdFusion, ASP.NET, Ruby on Rails ou encore Servlet Java), il conviendra alors d’utiliser le composant HTTPService. Le principe est le suivant : 1. Le composant appelle le service grâce à son URL.
=Flex3 FM.book Page 224 Mardi, 2. décembre 2008 3:32 15
224
Comprendre Flex 3 PARTIE I
2. Lors de cet appel, des données peuvent être transférées au service via les méthodes POST ou GET. 3. Le service exécute la tâche qui lui a été confiée (connexion à la base de données, exécution de requêtes…). 4. Il renvoie la réponse préalablement formatée au format XML. L’exemple suivant illustre l’interaction d’une application Flex avec un service écrit en PHP. Précisons que pour réaliser cet exemple, vous devez disposer sur votre machine d’un environnement PHP correctement configuré. Environnement PHP Si vous ne connaissez pas du tout le langage PHP, nous vous invitons à consulter son site officiel (http://www.php.net/), qui répondra sans doute à une grande partie des questions que vous pourriez vous poser. Nous vous conseillons d’installer soit EasyPHP qui contient l’ensemble des composants nécessaires à l’utilisation de PHP (http://www.easyphp.org/), soit WampServer (http://www.wampserver.com/).
L’interface graphique de l’application sera composée de trois zones de texte. Les deux premières permettront à l’utilisateur de saisir son prénom et son nom, la troisième sera chargée d’afficher le résultat du traitement réalisé par le service PHP. Ce traitement consistera à récupérer les données saisies par l’utilisateur et à les exploiter pour créer la phrase « Bonjour prénom nom ». Le résultat du traitement sera ensuite envoyé à l’application. Pour commencer, il convient donc de créer un formulaire (figure 12-1) :
=Flex3 FM.book Page 225 Mardi, 2. décembre 2008 3:32 15
Accéder aux services de la couche métier CHAPITRE 12
225
Ce formulaire ressemble en tous points à ceux que vous avez désormais l’habitude de créer.
Figure 12-1
Interface de saisie
La deuxième étape va consister à implémenter et paramétrer le composant : {prenom_txt.text} {nom_txt.text}
étant un composant, il n’échappe pas à la règle de base consistant à lui
affecter un identifiant. Vient ensuite la phase de spécification de certains paramètres : • url : adresse web du service ; • result : action à réaliser si le service s’exécute correctement ; • fault : action à réaliser si l’exécution du service échoue ; • resultFormat : format de réception du message de réponse ; • method : méthode de transmission des données.
=Flex3 FM.book Page 226 Mardi, 2. décembre 2008 3:32 15
226
Comprendre Flex 3 PARTIE I
Pour terminer cette phase de paramétrage, vous devrez ensuite définir les paramètres qui seront envoyés et leurs sources de données via la balise . Le proxy de Flex Le Flash Player dispose d’un espace de sécurité (proxy) qui limite les requêtes d’appels aux services au domaine de chargement du fichier SWF. Pour faire appel à des services web situés en dehors de ce domaine, il convient d’outrepasser cette sécurité en affectant à la propriété useProxy du composant d’accès au service la valeur false (valeur attribuée par défaut si l’attribut useProxy n’est pas utilisé, ce qui est le cas dans l’exemple décrit précédemment).
E4X (ECMAScript for XML) E4X est une extension du langage de programmation ECMAScript facilitant l’exploitation des fichiers XML. Considérons le fichier XML suivant stocké dans la variable listeAvions de type XML : var listeAvions = Storch Cesna Pour accéder à l’identifiant du premier élément, il suffit d’employer la syntaxe suivante : listeAvions.appareil[0].@id En spécifiant le format du résultat du composant HTTPService en tant que E4X dans l’attribut result Format, vous pourrez exploiter le résultat obtenu, tout comme nous venons de le faire.
La troisième étape va ensuite consister à écrire service PHP :
=Flex3 FM.book Page 227 Mardi, 2. décembre 2008 3:32 15
Accéder aux services de la couche métier CHAPITRE 12
227
Le service ainsi défini récupère les valeurs des paramètres prenom et nom spécifiés dans notre composant . Ces valeurs sont ensuite stockées dans des variables afin d’être utilisées dans le traitement. Une fois le traitement terminé, la réponse est formatée à l’aide du langage XML afin d’obtenir le format de réponse suivant : bonjour prenom nom
La réponse est ensuite envoyée à l’application Flex : print $reponse;
La quatrième étape consistera ensuite à implémenter les procédures ActionScript chargées d’appeler le service et d’interpréter le résultat reçu.
La procédure executerService() a pour fonction de réaliser la requête d’appel du service (service.send()) lorsque l’utilisateur clique sur le bouton Valider. La procédure reponseOK (event) interprète le résultat reçu et l’affiche dans la zone de texte resultat_txt. Enfin, la procédure reponseKO(event) intercepte l’erreur d’exécution du service et en affiche la cause. Tous nos fichiers sont à présent complets et nous pouvons donc tester notre application. Pour faciliter la compréhension du fonctionnement général, ce dernier est illustré par la figure 12-2.
=Flex3 FM.book Page 228 Mardi, 2. décembre 2008 3:32 15
228
Comprendre Flex 3 PARTIE I
Figure 12-2
Utilisation du composant HTTPService
=Flex3 FM.book Page 229 Mardi, 2. décembre 2008 3:32 15
Accéder aux services de la couche métier CHAPITRE 12
229
Étape ➊ : l’utilisateur saisit les informations demandées, ce qui entraîne la mise à jour des paramètres grâce au DataBinding (voir chapitre 11). Étape ➋ : lorsque l’utilisateur clique sur le bouton Valider, la requête d’exécution du service est déclenchée ainsi que l’envoi des paramètres au service. Étape ➌ : le service récupère les données envoyées via la méthode POST et exécute le traitement. Étape ➍ : le résultat du traitement est formaté en XML. Étape ➎ : le résultat est envoyé à l’application. Étape ➏ : puisque le composant reçoit un résultat, il exécute la procédure reponseOK(event). Étape ➐ : cette procédure extrait le résultat et met à jour l’interface graphique. Nous pouvons ainsi conclure que l’emploi du composant HTTPService est similaire à celui de la majorité des applications web. Il sera donc tout naturellement utilisé dans la plupart des cas. Format des valeurs renvoyées Les valeurs retournées sont au format texte. De ce fait, si la valeur renvoyée comporte des erreurs (par exemple, Bonjour), cela provoquera une erreur de parsing et la valeur ne pourra pas être interprétée et affichée dans l’application Flex. Il est donc préférable d’utiliser des outils tels que SimpleXML proposé par PHP (http://fr.php.net/simplexml), qui vous permettra d’éviter ce genre de désagréments en « échappant » les caractères spéciaux.
Le composant WebService Un service web (Web Service dans la langue de Shakespeare) est un mécanisme de communication entre deux applications distantes. La communication est réalisée à l’aide du protocole HTTP dans lequel l’échange des données et l’appel des différentes fonctions sont réalisés à l’aide du langage XML. De nombreux services web sont disponibles sur Internet, tels que : • les services météorologiques ; • les services boursiers ; • les services d’informations, etc. Néanmoins, pour accéder à un service, il faut en connaître l’adresse ainsi que les méthodes d’interrogation. L’implémentation d’un service web s’effectue à l’aide du composant . Pour vous permettre de bien appréhender l’utilisation de ce composant, nous allons implémenter un service choisi parmi ceux mis à notre disposition sur le site Internet http://www.web servicex.net. Pour notre exemple, nous avons sélectionné le service permettant de convertir la température exprimée en degrés Celsius en une température exprimée en degrés Fahrenheit.
=Flex3 FM.book Page 230 Mardi, 2. décembre 2008 3:32 15
230
Comprendre Flex 3 PARTIE I
Le service web en détail Pour commencer, étudions le service web que nous allons utiliser à titre d’exemple. La description du service web est disponible à l’adresse suivante : http://www.webservicex.net /ConvertTemperature.asmx?WSDL. Elle va nous permettre de comprendre le fonctionnement du service : - - - - - - - - - - -
=Flex3 FM.book Page 231 Mardi, 2. décembre 2008 3:32 15
Accéder aux services de la couche métier CHAPITRE 12
- - - - - - - - - - - - - - -
231
=Flex3 FM.book Page 232 Mardi, 2. décembre 2008 3:32 15
232
Comprendre Flex 3 PARTIE I
- - - - - - - - - - - - -
=Flex3 FM.book Page 233 Mardi, 2. décembre 2008 3:32 15
Accéder aux services de la couche métier CHAPITRE 12
233
Cela peut paraître très complexe à première vue mais décortiquons ce fichier afin d’en comprendre le fonctionnement. La première étape consiste à définir la méthode d’utilisation de ce service web. Pour cela, nous savons que le protocole HTTP est utilisé pour le transport des données et que les méthodes d’envoi des données via ce protocole sont POST ou GET. En parcourant le fichier, nous remarquons les lignes suivantes : - -
Cela signifie que notre service attend trois paramètres : • Le premier s’intitule Temperature et reçoit des données numériques (type="s:double"). • Le deuxième, nommé FromUnit, sert à définir l’unité de conversion de base. • Le troisième, nommé ToUnit, permet de définir l’unité de conversion. Il est également important de souligner que ces trois paramètres sont de type chaîne (type="s:string"). Pour faire appel à ce service, nous devons donc lui fournir ces trois paramètres, en respectant cet ordre précis et en veillant au format des données transmises. Nous avons déterminé les paramètres requis et leur type, mais qu’en est-il du format de la réponse fournie par le service ? Continuons notre lecture du fichier et observons les lignes suivantes : - -
Ces lignes de code indiquent que le format de la réponse sera de type décimal numérique (double). La dernière étape va consister à trouver le nom de la méthode, également appelée opération, qui va être invoquée pour réaliser le traitement. Pour cela, recherchons la balise operation correspondant à notre protocole d’envoi (HTTP).
=Flex3 FM.book Page 234 Mardi, 2. décembre 2008 3:32 15
234
Comprendre Flex 3 PARTIE I
- - - -
Nous retrouvons les deux éléments propres à notre protocole : ConvertTemperatureHttpGet et ConvertTemperatureHttpPost. Nous remarquons également la présence de la balise operation définissant le nom de la méthode devant être invoquée (ConvertTemp) et l’appel aux paramètres d’entrée (input) et de sortie (output). Ceci termine l’analyse de notre service web qui, avouons-le, n’est pas des plus simples. L’étape suivante va consister à créer une application Flex faisant appel à ce service.
Création de l’interface graphique L’interface graphique de notre application comprend seulement deux zones de texte et un bouton permettant l’appel du service web (figure 12-3).
Figure 12-3
Interface graphique de conversion de températures
=Flex3 FM.book Page 235 Mardi, 2. décembre 2008 3:32 15
Accéder aux services de la couche métier CHAPITRE 12
235
Appel du service web Le service web sera appelé grâce au composant , comme suit :
L’URL du service est spécifiée dans la propriété wsdl. Vient ensuite l’appel de l’opération ConvertTemp dont le résultat est ici spécifié comme un objet. On trouve ensuite les procédures resultatOK(event) et resultatKO(event) exécutées en fonction du résultat de l’exécution du service. La configuration de l’appel de notre service web terminée, passons maintenant à l’écriture des procédures d’appel et d’analyse du résultat.
Les commentaires insérés dans cette portion de code parlent d’eux-mêmes. Nous aimerions tout de même attirer votre attention sur la méthode d’appel du service. Cette méthode se résume en l’appel de l’opération appropriée et en la transmission des paramètres requis : serviceConversion.ConvertTemp(temperature,uniteSource,uniteConversion);
Soulignons également que l’ordre et le type des paramètres transmis doivent coïncider avec ceux établis en phase d’étude du service web, sous peine d’un dysfonctionnement de celui-ci. Nous pouvons à présent exécuter notre application afin de vérifier qu’elle fonctionne correctement (figure 12-4).
Figure 12-4
Appréciation du bon fonctionnement de l’application
Analyse du fonctionnement de l’application Au cours de cette section, nous allons analyser le fonctionnement global de notre application afin de synthétiser la notion de service web et son mode d’interaction avec les applications Flex. Sept étapes jalonnent le processus de communication : Étape ➊ : l’utilisateur saisit la température en degrés Celsius et clique sur le bouton Convertir. Étape ➋ : l’action sur le bouton entraîne l’appel du service via son URL et la transmission des paramètres à l’opération de traitement concerné. Étape ➌ : le service reçoit les informations et les transmet à un programme chargé d’exécuter la conversion. À noter que nous n’avons pas accès à ce programme et il nous est impossible d’en déterminer les procédures de calcul.
=Flex3 FM.book Page 237 Mardi, 2. décembre 2008 3:32 15
Accéder aux services de la couche métier CHAPITRE 12
Figure 12-5
Fonctionnement du composant WebService
237
=Flex3 FM.book Page 238 Mardi, 2. décembre 2008 3:32 15
238
Comprendre Flex 3 PARTIE I
Étape ➍ : le programme retourne le résultat du traitement au service web. Étape ➎ : le service web communique à son tour le résultat à l’application Flex. Étape ➏ : la procédure liée à l’événement de retour positif du service est alors exécutée. Étape ➐ : l’interface graphique est mise à jour. Cet exemple nous a permis de démontrer que l’emploi des services web est assez fastidieux. La phase la plus complexe est sans doute l’analyse du service web, car la méthode d’appel du service reste très simple grâce à l’utilisation du composant . Flex nous propose enfin une troisième et dernière méthode de communication que nous allons nous empresser de découvrir au cours de la section suivante.
Accéder aux classes distinctes grâce à RemoteObject Comprendre RemoteObject Le composant RemoteObject se distingue des composants HTTPService et WebService par son mode d’accès aux services. En effet, alors que nous devions préciser le mode d’envoi des données avec le composant HTTPService ou choisir l’opération adéquate avec WebService, le composant RemoteObject nous offre la possibilité d’accéder directement à la classe métiers souhaitée. Cette connexion directe n’est possible qu’à l’aide du langage ColdFusion ou de l’applicatif LiveCycle Data Service d’Adobe, souvent utilisé pour les environnements J2EE. Pour les services écrits en PHP et .NET, le composant RemoteObject ne peut accéder directement aux classes métiers, nous devons donc recourir à une passerelle qui effectuera cette connexion. Elle est réalisé au moyen d’applicatifs tels que AMFPHP (http://amfphp.sourceforge.net/), SabreAMF (http://www.osflash.org/sabreamf) ou encore WebORB de Midnight Coders (http://www.themidnightcoders.com/). Nous vous invitons à visiter les sites web de ces outils pour de plus amples informations à leur sujet.
Implémentation de RemoteObject L’implémentation du composant RemoteObject à l’aide du langage MXML s’effectue comme suit :
=Flex3 FM.book Page 239 Mardi, 2. décembre 2008 3:32 15
Accéder aux services de la couche métier CHAPITRE 12
239
Voyons maintenant comment utiliser la classe RemoteObject en ActionScript : import mx.rpc.remoting.mxml.RemoteObject; var service:RemoteObject = new RemoteObject(); service.endpoint = adresse de la classe à utiliser; service.source="classe à utiliser"; service.nom_de_la_methode(); service.nom_de_la_methode.addEventListener("result", procédure à exécuter en cas de ➥succès d’exécution de la méthode); service.nom_de_la_methode.addEventListener("fault", procédure à exécuter en cas ➥d’échec d’exécution de la méthode)
À ce stade, nous ne nous attarderons pas d’avantage sur l’utilisation de ce composant, car nous étudierons son application en détail au cours du chapitre suivant. Néanmoins, penchonsnous sur le schéma de son fonctionnement dans le cadre d’une utilisation avec le langage PHP couplé à la passerelle AMFPHP (figure 12-6). Ce schéma nous permet de distinguer les différentes étapes suivantes :
Figure 12-6
Fonctionnement du composant RemoteObject avec AMFPHP et PHP
=Flex3 FM.book Page 240 Mardi, 2. décembre 2008 3:32 15
240
Comprendre Flex 3 PARTIE I
Étape ➊ : le composant établit la connexion avec AMFPHP et lui transmet la classe et la méthode recherchées. Étape ➋ : AMFPHP recherche la classe et la méthode. Étape ➌ : une fois la méthode trouvée, celle-ci est exécutée. Étape ➍ : le résultat de l’exécution de la méthode est transmis à AMFPHP. Étape ➎ : la procédure resultatOK(event) est exécutée afin de présenter le résultat obtenu.
En résumé Au cours de ce chapitre, nous avons abordé les différentes méthodes de connexion aux services proposés par la couche métier. La méthode à employer dépend de la nature du service et du type de résultat souhaité (XML ou non). Néanmoins, dans la plupart des cas, le composant HTTPService est le plus communément utilisé car il se rapproche des méthodes de communication traditionnelles. Le chapitre suivant va nous permettre d’approfondir nos connaissances en matière de communication avec la couche métier en détaillant l’interaction avec les services écrits en PHP.
=Flex3 FM.book Page 241 Mardi, 2. décembre 2008 3:32 15
13 Flex et PHP L’utilisation du langage PHP est très répandue pour la création de sites web. En effet, il représente aujourd’hui le langage utilisé par 80 % des sites Internet. C’est pourquoi, il est indispensable de comprendre comment il interagit avec le framework Flex.
Accès aux services PHP PHP est un langage serveur dont le fonctionnement est basé sur l’interprétation et l’exécution de requêtes HTTP. La transmission des données entre le client et le script PHP s’effectue le plus communément à l’aide des méthodes POST ou GET. À première vue, le composant du framework Flex répondant à ces critères de communication est le composant HTTPService. Néanmoins, ce dernier présente un petit inconvénient : la réponse doit obligatoirement être formatée sous forme de balise XML (voir chapitre 12). Une autre solution consiste alors à utiliser le composant RemoteObject. En effet, grâce à ce composant, il est inutile de formater la réponse, car celle-ci peut être utilisée dans son format originel (chaîne, tableau, entier…). Cependant, RemoteObject ne peut interagir directement avec les objets PHP comme nous aurions pu l’envisager avec le langage ColdFusion. Il va donc falloir utiliser une passerelle capable de réaliser la communication entre l’application Flex et les services PHP. Nous avons ici choisi de vous présenter la passerelle AMFPHP (Action Message Format PHP).
Installation et fonctionnement de la passerelle AMFPHP AMFPHP est une bibliothèque PHP sous licence Open Source permettant la communication entre des applications Flash (et par extension Flex) et le langage PHP. Elle joue le rôle de passerelle entre l’application et les services PHP.
=Flex3 FM.book Page 242 Mardi, 2. décembre 2008 3:32 15
242
Comprendre Flex 3 PARTIE I
Le principal avantage de cette bibliothèque est de ne pas modifier les types des données transmises. Par exemple, si nous transmettons un objet via l’application Flex, PHP reçoit un objet et inversement. Le protocole AMF La libraire AMFPHP utilise le protocole AMF, mis au point par Adobe. Il s’agit d’un protocole binaire de transfert de données entre le client et le serveur, ce qui permet de réduire la taille des paquets échangés entre ces deux entités et, par conséquent, de diminuer la part de la bande passante utilisée par l’application qui le met en œuvre. Il présente également l’avantage d’augmenter la rapidité d’exécution des applications en raison de la diminution des paquets échangés.
Pour installer la bibliothèque AMFPHP, il suffit de la télécharger à l’adresse suivante : http://sourceforge.net/project/showfiles.php?group_id=72483#files, et de décompresser l’archive ainsi obtenue à la racine de votre serveur web. Attention Pour que l’interaction avec le composant RemoteObject soit effective, vous devez disposer au minimum de la version amfphp-1.9.beta.20070513.
En explorant les différents répertoires de la bibliothèque AMFPHP, nous notons la présence du répertoire services. C’est ici que nous allons déposer l’ensemble de nos services PHP. Rappelons qu’un service PHP est une méthode contenue dans une classe PHP dont le nom doit être rigoureusement identique au nom du fichier PHP qui la contient. En effet, c’est à partir de ce nom de fichier qu’AMFPHP va pouvoir effectuer la corrélation entre la classe et le service appelé. À la racine de la bibliothèque AMFPHP, nous notons également la présence du fichier gateway.php. Ce fichier va être le point d’entrée entre notre application Flex et les services
PHP. Les différentes étapes de communication entre une application Flex et les services PHP sont les suivantes (figure 13-1) : Étape 1 : l’application Flex effectue une demande d’exécution de service en se connectant au fichier gateway.php de la bibliothèque AMFPHP et en lui spécifiant la classe et le service (méthode) recherchés. Étapes 2, 3 et 4 : le fichier gateway.php vérifie la présence de la classe, en fonction des noms de fichiers PHP présents dans le répertoire service, et si la méthode demandée est bien implémentée dans la classe. Étape 5 : la méthode renvoie un résultat au fichier gateway.php. Étape 6 : le fichier gateway.php transmet à l’application Flex le résultat fourni par la méthode. Notez que la sérialisation/désérialisation des données est effectuée par AMFPHP,
=Flex3 FM.book Page 243 Mardi, 2. décembre 2008 3:32 15
Flex et PHP CHAPITRE 13
243
ce qui permet de ne pas modifier le type de données transmises et reçues. De ce fait, si le service retourne un tableau, c’est un tableau qui sera reçu par l’application Flex et si l’application Flex transmet un tableau au service, c’est sous cette forme qu’il sera réceptionné par le service.
Figure 13-1
Processus d’échange entre une application Flex et les services PHP
Pour plus de clarté, nous avons choisi d’illustrer l’ensemble des notions abordées jusqu’à présent à travers un exemple dans lequel les composants HTTPService et RemoteObject sont utilisés.
=Flex3 FM.book Page 244 Mardi, 2. décembre 2008 3:32 15
244
Comprendre Flex 3 PARTIE I
Cas pratique : gestion d’un magasin informatique En guise d’exemple, nous vous proposons de développer une petite application permettant de gérer l’ensemble des produits d’un magasin informatique. Le but n’étant pas ici de développer un cas pratique complet (ceci sera abordé dans la seconde partie de cet ouvrage), nous allons plutôt illustrer l’ensemble des concepts et observer les différences entre les composants HTTPService et RemoteObject. Afin d’observer ces différences, nous réaliserons le listing des produits à l’aide de ces deux composants.
Préparation Avant d’entrer dans le vif du sujet, il convient tout d’abord de créer le projet Flex et la base de données qui contiendra les produits du magasin informatique, sans oublier de satisfaire à certains prérequis techniques. Prérequis Pour mener à bien cet exemple, vous devez impérativement disposer d’un environnement PHP correctement installé et configuré sur votre machine. Pour plus de facilité, nous vous conseillons d’utiliser EasyPHP, pack logiciel contenant l’ensemble des éléments requis (PHP, MySQL et le serveur Apache). Vous trouverez toutes les informations nécessaires sur cette application à l’adresse suivante : http://www.easyphp.org/.
Création de la base de données
Le schéma de la base de données MySQL découle du diagramme de classes représenté à la figure 13-2. La base de données contient donc deux tables : la première synthétise les catégories de produits (carte mère, disque dur, etc.), la seconde permet de stocker les composants informatiques mis en vente.
Figure 13-2
Diagramme de classes
Voici le script de création de la base de données, issue de la transcription du diagramme précédemment décrit. --- SCHÉMA DE LA BASE DE DONNÉES db_configurateur
=Flex3 FM.book Page 245 Mardi, 2. décembre 2008 3:32 15
Flex et PHP CHAPITRE 13
-CREATE DATABASE IF NOT EXISTS db_configurateur; USE db_configurateur; --- CRÉATION DE LA TABLE tb_categorie -CREATE TABLE `tb_categorie` ( `idCategorie` int(10) unsigned NOT NULL auto_increment, `nomCategorie` varchar(45) NOT NULL default '', PRIMARY KEY (`idCategorie`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1; --- INSERTION DE DONNÉES DANS LA TABLE tb_categorie -INSERT INTO `tb_categorie` (`idCategorie`,`nomCategorie`) VALUES (1,'Disques durs'), (2,'Mémoires'), (3,'Cartes graphiques'), (4,'Processeurs'), (5,'Cartes mères'), (6,'Graveurs & Lecteurs'), (7,'Boîtiers & Alimentations'); --- CRÉATION DE LA TABLE tb_composant liée à la table tb_categorie par le biais de la ➥clé étrangère fkCategorie -CREATE TABLE `tb_composant` ( `idComposant` int(10) unsigned NOT NULL auto_increment, `nomComposant` varchar(45) NOT NULL default '', `prixComposant` float NOT NULL default '0', `fkCategorie` int(10) unsigned NOT NULL default '0', PRIMARY KEY (`idComposant`), KEY `FK_tb_composant` (`fkCategorie`), CONSTRAINT `FK_tb_composant` FOREIGN KEY (`fkCategorie`) REFERENCES `tb_categorie` ➥(`idCategorie`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1; --- INSERTION DE DONNÉES DANS LA TABLE tb_composant -INSERT INTO `tb_composant` (`idComposant`,`nomComposant`,`prixComposant`, ➥`fkCategorie`) VALUES (1,'SATA - 160 Go, 8 Mo, S-ATA/II, 7200 trs/min',48.99,1), (2,'SATA - 80 Go, 8 Mo, S-ATA/II, 7200 trs/min',38.52,1), (3,'SATA - 400 Go, 16 Mo, S-ATA/II, 7200 trs/min',154.25,1), (4,'IDE - 160 Go, 8 Mo',59,1), (5,'IDE - 320 Go, 8 Mo',72.5,1), (6,'IDE - 400 Go, 16 Mo',150,1),
245
=Flex3 FM.book Page 246 Mardi, 2. décembre 2008 3:32 15
246
Comprendre Flex 3 PARTIE I
(7,'1024 Mo, PC3200 (400 MHz)',60.42,2), (8,'512 Mo, PC133',54.12,2), (9,'2048 Mo, PC4200 (533 MHz)',118.99,2), (10,'512 Mo, PC3200 (400 MHz)',32.75,2), (11,'256 Mo, PC133',22.15,2), (12,'512 Mo, PC4200 (533 MHz)',25.89,2), (13,'Radeon X1600 Pro, PCI-Express 16x, 256 Mo',124.52,3), (14,'GeForce 7600 GS, PCI-Express 16x, 256 Mo',98,3), (15,'GeForce 7800 GS, AGP 8x, 256 Mo',300.41,3), (16,'Radeon X1950 Pro, PCI-Express 16x, 256 Mo',174.98,3), (17,'Quadro FX 3500, PCI-Express 16x, 256 Mo',1200.58,3), (18,'GeForce 7300 GS, PCI-Express 16x, 256 Mo',70.25,3), (19,'2,67 GHz, 256 Ko, 533 MHz',35,4), (20,'3,00 GHz, 4 Mo, 800 MHz',125.36,4), (21,'1,86 GHz, 4 Mo, 1066 MHz',41.73,4); INSERT INTO `tb_composant` (`idComposant`,`nomComposant`,`prixComposant`, ➥`fkCategorie`) VALUES (22,'3,33 GHz, 512 Ko, 533 MHz',60.81,4), (23,'2,00 GHz, 2 Mo, 800 MHz',132.84,4), (24,'2,93 GHz, 4 Mo, 1066 MHz',978.68,4), (25,'VIA PT880 Ultra',31.69,5), (26,'NVIDIA nForce Dual PCI-E x 16',254.94,5), (27,'Intel P965',154,5), (28,'NVIDIA nForce 680i SLI',500.84,5), (29,'Intel 946GZ Express',85.24,5), (30,'Intel 975X',100,5), (31,'GRAVEUR DVD - S-ATA, noir',50,6), (32,'GRAVEUR DVD - USB 2.0, aluminium',125.41,6), (33,'LECTEUR DVD - BLANC',19.99,6), (34,'LECTEUR DVD - NOIR',19.99,6), (35,'GRAVEUR DVD - IDE Noir',45,6), (36,'GRAVEUR DVD - IDE Beige',54.26,6), (37,'Digital-B - 480 w',52,7), (38,'NSK6000 - 380 w',98,7), (39,'P160 - 430 w',114.83,7), (40,'Vague 8609B - 500 w',81.23,7), (41,'Nine Hundred - 400 w',100.14,7), (42,'Oxygen 8611B',95.24,7);
Passons à présent à la création de l’interface graphique de notre application. Création de l’interface graphique
Après avoir créé un nouveau projet Flex, nous vous invitons à saisir les quelques lignes de code suivantes afin d’obtenir l’interface graphique capable de lister l’ensemble des produits de notre magasin (figure 13-3).
=Flex3 FM.book Page 247 Mardi, 2. décembre 2008 3:32 15
Flex et PHP CHAPITRE 13
247
Figure 13-3
Interface graphique
Nous disposons désormais de l’ensemble des éléments nécessaires au bon déroulement de notre application. Voyons maintenant comment utiliser les composants HTTPService et RemoteObject.
Implémentation du composant HTTPService en ActionScript Au cours du chapitre précédent, nous avions vu un exemple mettant en évidence l’utilisation du composant HTTPService pour accéder aux services PHP. Nous allons l’utiliser également dans notre cas pratique, mais cette fois, nous l’implémenterons à l’aide du langage ActionScript. Pour cela, la première étape va consister à créer le service PHP devant se connecter à la base de données et lister les produits qu’elle contient. Il ne faudra pas omettre de transformer le résultat en langage XML, afin qu’il soit exploitable par notre application. Voici le code du fichier listerProduits.php, qui va nous permettre d’obtenir la liste des produits de notre magasin et de la transmettre à l’application Flex sous forme XML :
=Flex3 FM.book Page 248 Mardi, 2. décembre 2008 3:32 15
248
Comprendre Flex 3 PARTIE I
Nous devons ensuite créer la procédure alimentant notre tableau. Pour cela, nous vous conseillons de créer un fichier ActionScript nommé httpService.as, que nous lierons par la suite au fichier MXML. Dans la portion de code suivante, nous avons commenté l’ensemble des lignes devant être insérées dans ce fichier afin que vous puissiez apprécier la signification et le rôle de chacune : // Importation des classes nécessaires import mx.controls.Alert; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.rpc.http.HTTPService; // Procédure déclenchée à la fin de la création de l’application public function listerComposants():void{
=Flex3 FM.book Page 249 Mardi, 2. décembre 2008 3:32 15
Flex et PHP CHAPITRE 13
249
var serviceHttp:HTTPService = new HTTPService; // Spécification de l’URL serviceHttp.url = "http://localhost/PHP/httpServices/listerProduits.php" // Spécification du format des données reçues serviceHttp.resultFormat = "e4x"; // Type de méthode d’envoi des données serviceHttp.method = "POST"; // Procédure à exécuter en cas de succès serviceHttp.addEventListener(ResultEvent.RESULT,resultatOk) // Procédure a exécuter en cas d’erreur serviceHttp.addEventListener(FaultEvent.FAULT,resultatKo) // Exécution du service serviceHttp.send() } // Procédure exécutée en cas de réception du résultat public function resultatOk(e:ResultEvent):void { // Récupération du résultat var resultatXML:XML = e.result as XML; // Alimentation du dataProvider du DataGrid grilleComposants.dataProvider = resultatXML.composant; } // Procédure exécutée en cas d’erreur public function resultatKo(e:FaultEvent):void { // Message d’erreur Alert.show("Erreur !"); }
L’implémentation du composant HTTPService en ActionScript est identique à celle utilisée en MXML (voir chapitre 12) : • spécification de l’URL ; • spécification de la méthode d’envoi des données ; • indication des procédures à exécuter en cas de succès ou d’erreur ;
=Flex3 FM.book Page 250 Mardi, 2. décembre 2008 3:32 15
250
Comprendre Flex 3 PARTIE I
• indication du format des données récupérées. À présent, il ne nous reste plus qu’à lier notre fichier ActionScript au fichier MXML principal et faire appel à l’exécution de la procédure listerComposants() après la création de l’application :
Nous pouvons maintenant tester notre application et observer que le résultat obtenu est bien concluant (figure 13-4).
Figure 13-4
Résultat obtenu à l’aide du composant HTTPService
Nous allons réitérer cette procédure, mais en utilisant le composant remoteObject couplé à AMFPHP.
RemoteObject en pratique Nous allons à présent voir le couple RemoteObject et AMFPHP en action. Création du service PHP
Avant toute chose, il convient de créer le service PHP. Pour cela, nous allons nous placer dans le répertoire services de la bibliothèque AMFPHP et créer un fichier nommé servComposants.php qui va contenir l’ensemble des services accessibles pour notre application :
251
=Flex3 FM.book Page 252 Mardi, 2. décembre 2008 3:32 15
252
Comprendre Flex 3 PARTIE I
Ce fichier comporte une classe nommée servComposants. Nous insistons sur le fait que le nom de la classe doit obligatoirement comporter le nom du fichier PHP car ces deux entités sont liées. Le fichier est ensuite découpé en deux parties. La première permet de créer, dans le constructeur de la classe, un tableau contenant la liste des services disponibles : function servComposants () { /****************************************** /* LISTE DES SERVICES * /******************************************/ $this->methodTable = array( "serviceListerComposants" => array( "description" => "Liste des composants", "access" => "remote" ) ); }
La seconde partie contient les services proprement dits : function serviceListerComposants () { […] // Alimentation d’un tableau avec la liste des composants while ($Composant = mysql_fetch_object ($Resultat)) { $tableauComposants[] = $Composant; } // Envoi du tableau return( $tableauComposants); }
Notre service serviceListerComposants() va donc rechercher les informations dans la base de données et pour chaque ligne trouvée, il va les stocker dans une ligne d’un tableau qui sera ensuite transmis à l’application Flex en suivant les étapes décrites à la section précédente « Installation et fonctionnement » de ce chapitre. Test du service
Avant de se lancer dans le codage du fichier MXML de notre application, il convient de s’assurer que notre service fonctionne correctement. Pour cela, nous allons utiliser l’interface prévue à cet effet située dans le répertoire browser de la bibliothèque AMFPHP. Pour tester le service : 1. Dans la partie gauche de l’interface, sélectionnez votre fichier php (ServComposant) contenant la liste des services.
=Flex3 FM.book Page 253 Mardi, 2. décembre 2008 3:32 15
Flex et PHP CHAPITRE 13
253
2. Dans la partie droite de l’interface s’affiche alors la liste des services contenus dans ce fichier PHP. Sélectionnez le service serviceListerComposant. 3. Cliquez sur le bouton Call qui déclenche l’appel du service. Vous obtenez alors le résultat illustré à la figure 13-5.
Figure 13-5
Test du service dans l’interface Service Browser
Première exécution du service browser d’AMFPHP Pour accéder à l’interface de test des services, il faut appeler le fichier index.html du répertoire browser de la bibliothèque AMFPHP via votre navigateur (par exemple, http://localhost/amfphp/browser). Au premier lancement de cette application, une fenêtre vous indique les paramètres utilisés : • le chemin d’accès au fichier gateway.php ; • le type d’encodage : – AMF0 (à utiliser si l’application a été développée à l’aide d’ActionScript 1.0 ou 2.0) ; – AMF3. • les onglets de résultat visibles après l’exécution d’un service : – l’onglet Info, qui permet de visualiser les temps de traitement du service ; – l’onglet Results, qui permet d’afficher le résultat sous forme de trace de log ; – l’onglet Tree view, qui permet de visualiser les résultats sous forme d’arborescence, un nœud étant caractérisé par un objet.
=Flex3 FM.book Page 254 Mardi, 2. décembre 2008 3:32 15
254
Comprendre Flex 3 PARTIE I
Conseil Pour une prise en main de cette interface, nous vous conseillons de conserver les paramètres spécifiés par défaut, qui sont généralement les plus utilisés.
Si vous visualisez la liste des composants informatiques dans l’onglet Results, cela signifie que notre service s’est exécuté correctement. Dans le cas contraire, cela signifie que le fichier PHP contient une erreur. Il est important de noter que seule cette interface vous permettra de déboguer vos services PHP. En effet, dans la mesure où l’application Flex et les services PHP sont séparés par la notion de couche métier, il est impossible de remonter dans l’application les erreurs rencontrées dans les services. Le seul indice nous indiquant un éventuel dysfonctionnement du service est une erreur de connexion au service, ou parfois aucune erreur…, mais dans tous les cas nous n’obtiendrons aucun résultat. Implémentation en MXML
Dans un premier temps, nous allons étudier la mise en place du composant RemoteObject à l’aide du langage MXML. Pour cela, analysons les lignes de code suivantes :
Comme nous l’avons vu au chapitre précédent, le composant RemoteObject nécessite quelques paramétrages : • source : sert à spécifier le nom de la classe contenant la méthode à exécuter ; • endPoint : contient l’URL du fichier gateway.php de la bibliothèque AMFPHP ; • destination : permet de faire le lien avec le sous-répertoire amfphp du répertoire services, ce dernier contenant le fichier DiscoveryService.php qui va permettre à AMFPHP de connaître les fichiers PHP contenant l’ensemble des services ; • showBusyCursor : affiche le curseur « Occupé » pendant l’exécution de la méthode ; • method name : précise le nom de la méthode à exécuter ; • result : contient le nom de l’action à réaliser lorsque la méthode retourne un résultat ; • fault : déclare le nom de l’action à réaliser lorsque la méthode a provoqué une erreur. Nous faisons ici appel à la méthode serviceListerComposants de la classe servComposants. Si la méthode retourne un résultat, la procédure resultatOk() est exécutée. Dans le cas contraire, la procédure resultatKO() est exécutée.
=Flex3 FM.book Page 255 Mardi, 2. décembre 2008 3:32 15
Flex et PHP CHAPITRE 13
255
Afin de pouvoir réaliser l’appel à notre méthode, nous allons ajouter un bouton comme suit :
Notre composant est à présent configuré, il ne reste plus qu’à écrire les procédures ActionScript.
Observons en détail comment l’appel de l’exécution de la méthode serviceListerComposants est réalisé . En effet, cet appel s’effectue par la combinaison des méthodes getOperation() et send() du composant RemoteObject. La traduction littérale de ceci serait alors : « Recherche l’opération serviceListerComposant(getOperation('serviceListerComposants')) et exécute la méthode send() ». Notre composant est à présent configuré et fonctionnel. Soulignons également le travail réalisé par la bibliothèque AMFPHP : le résultat tabulaire renvoyé par la méthode est directement exploitable sous cette forme par le composant RemoteObject, ce qui facilite ainsi son exploitation ultérieure.
=Flex3 FM.book Page 256 Mardi, 2. décembre 2008 3:32 15
256
Comprendre Flex 3 PARTIE I
Implémentation en ActionScript
Nous allons de nouveau appeler le service serviceListerComposants, mais cette fois-ci avec le langage ActionScript. Pour cela, il convient de modifier quelque peu la procédure executerService() : public function executerService():void { var servRO:RemoteObject = new RemoteObject; // Paramétrage servRO.source = "ServComposants" servRO.destination = "amfphp" servRO.endpoint = "http://localhost/amfphp/gateway.php" // Événements si succès ou erreur servRO.serviceListerComposants.addEventListener("result", resultatOK); servRO.serviceListerComposants.addEventListener("fault", resultatKO) // Exécution de la méthode servRO.serviceListerComposants() }
Nous n’utilisons pas ici les méthodes getOperation() et send() pour exécuter le service serviceListerComposants. En effet, nous préférons utiliser la syntaxe servRO.serviceLister Composants (). Pour passer des paramètres au service, il suffit alors de les spécifier à l’intérieur des parenthèses, comme suit : servRO.serviceListerComposants(parametre1, parametre2)
Vous pouvez à présent tester l’application afin de vérifier que tout fonctionne correctement (figure 13-6).
Figure 13-6
Résultat obtenu à l’aide du composant RemoteObject
=Flex3 FM.book Page 257 Mardi, 2. décembre 2008 3:32 15
Flex et PHP CHAPITRE 13
257
Le générateur d’application de Flex Builder L’une des grandes nouveautés de Flex Builder 3 est la possibilité de générer automatiquement l’interface graphique et le service PHP associés à une table d’une base de données. Voici la marche à suivre pour cela : 1. Créez un nouveau projet nommé listerComposant et sélectionnez PHP pour le paramètre Application server type (figure 13-7).
Figure 13-7
Création d’un nouveau projet utilisant la technologie PHP
2. Spécifiez le répertoire racine de votre serveur web (pour EasyPHP, il s’agit du chemin d’accès au répertoire www) ainsi que son URL (généralement http://localhost). Cliquez ensuite sur le bouton Validate Configuration (figure 13-8). 3. Le nouveau projet est désormais créé et il faut à présent le connecter à une source de données. Pour cela, sélectionnez le menu Data de Flex Builder et choisissez l’option Create application from database… Dans la fenêtre qui s’ouvre alors, sélectionnez le projet précédemment créé et spécifiez la connexion à la base de données souhaitée à l’aide du champ Connection. Après avoir testé la connexion (en cliquant sur le bouton Test Connexion), renseignez le champ Table en indiquant le nom de la table de la base de données qui fera l’objet du développement. Pour notre exemple, nous avons choisi la table tb_composant (figure 13-9). Le champ Primary key permet de spécifier le champ de la table servant de clé primaire.
=Flex3 FM.book Page 258 Mardi, 2. décembre 2008 3:32 15
258
Comprendre Flex 3 PARTIE I
Figure 13-8
Configuration des paramètres du serveur web
Figure 13-9
Paramétrage de la base de données et sélection de la table
=Flex3 FM.book Page 259 Mardi, 2. décembre 2008 3:32 15
Flex et PHP CHAPITRE 13
259
4. Cliquez ensuite sur le bouton Next. Une nouvelle fenêtre apparaît alors, vous permettant de définir le nom et le lieu de stockage du fichier PHP contenant les services nécessaires (figure 13-10).
Figure 13-10
Paramétrage du fichier PHP
5. Cliquez à nouveau sur le bouton Next et dans la nouvelle fenêtre qui s’ouvre, spécifiez éventuellement un critère de filtre sur une colonne précise de la table (figure 13-11). 6. Cliquez enfin sur le bouton Finish. Flex Builder va alors générer les interfaces et services nécessaires à la gestion des données contenues dans la table : – Liste des données ; – Ajout ; – Suppression ; – Modification ; – Recherche de données. À première vue, tout semble parfait. Nous disposons d’une interface dans laquelle nous pouvons visualiser la liste des composants et procéder aux opérations de base : ajout, suppression et modification (figure 13-12).
=Flex3 FM.book Page 260 Mardi, 2. décembre 2008 3:32 15
260
Comprendre Flex 3 PARTIE I
Figure 13-11
Spécification d’un critère de filtre sur une colonne de la table
Figure 13-12
Interface générée par Flex Builder
=Flex3 FM.book Page 261 Mardi, 2. décembre 2008 3:32 15
Flex et PHP CHAPITRE 13
261
Si nous naviguons dans le composant ViewStack de l’application, nous remarquons la présence d’un formulaire permettant la saisie des informations nécessaires à la création d’un composant informatique (figure 13-13).
Figure 13-13
Formulaire d’ajout d’un composant informatique
Pour le moment, tout cela est assez satisfaisant. Analysons à présent le code. La première chose que l’on peut remarquer en sélectionnant le mode source pour le fichier MXML, est l’abondance de commentaires au début du fichier, lesquels favorisent une bonne compréhension de ce qui a été réalisé par le générateur. Si nous nous aventurons dans le fichier ActionScript tb_composant.as, nous voyons également de nombreux commentaires expliquant le rôle et le fonctionnement de chaque procédure et fonction. Si le code présenté ici n’est pas très complexe pour les néophytes en ActionScript, il demande tout de même quelques précisions. L’emploi du composant HTTPService permet de réaliser l’appel des services PHP décrits dans le fichier tb_composant.php situé dans le répertoire bin-debug de l’application. C’est à partir d’ici que les choses se compliquent car pour les non-initiés au langage PHP, le fichier tb_composant.php est assez difficile à comprendre. Si nous faisons la synthèse de tout cela, nous pouvons dire que le générateur est assez simple d’utilisation mais que le code généré demande tout de même certaines connaissances et une certaine maîtrise des langages ActionScript et PHP. Cette complexité du code peut dérouter les utilisateurs débutants et c’est l’un des points négatifs que nous pouvons soulever.
=Flex3 FM.book Page 262 Mardi, 2. décembre 2008 3:32 15
262
Comprendre Flex 3 PARTIE I
Par ailleurs, le résultat final est concluant. Nous disposons en effet d’une application fonctionnelle, réalisée en quelques clics de souris seulement, même si elle ne concerne qu’une seule table de notre base de données. Pour les autres tables, il faudra procéder de la même manière et créer une nouvelle connexion à une source de données en choisissant une autre table de la base. La fusion de plusieurs tables n’est donc pas possible au sein d’une même interface, ce qui est tout de même assez gênant.
En résumé Au cours de ce chapitre, nous avons vu qu’il est assez aisé de combiner des services PHP avec une application Flex grâce aux composants HTTPService et RemoteObject. Nous avons ouvert une porte sur la réécriture d’applications PHP existantes vers une application plus dynamique grâce au framework Flex. Flex Builder propose certes un générateur automatique d’interface homme-machine et de services PHP, mais nous vous conseillons de développer vous-même ces éléments. En effet, vous en connaîtrez ainsi les subtilités et cela vous permettra de prévenir tout dysfonctionnement, dont la maîtrise vous échapperait en utilisant la génération automatique. Dans le chapitre suivant, nous allons mettre de côté PHP pour nous consacrer à l’étude du projet BlazeDS d’Adobe, dédié à la communication entre une application Flex et les services Java, ainsi qu’à l’utilisation de données en temps réel (une application de tchat par exemple).
=Flex3 FM.book Page 263 Mardi, 2. décembre 2008 3:32 15
14 BlazeDS : ouverture Open Source vers le monde J2EE et la communication d’applications Dans ce chapitre, nous allons faire connaissance avec l’un des produits Open Source d’Adobe : le projet BlazeDS. Grâce à lui, nous pourrons, entre autres, faire appel à des méthodes J2EE de la couche métier et réaliser des échanges de données en temps « réel » entre deux applications Flex.
Le projet BlazeDS Pour accéder aux méthodes Java et réaliser l’échange de données en temps « réel » entre deux applications RIA (data push), nous devions jusqu’à présent utiliser la solution serveur LiveCycle Data Service ES d’Adobe dont le prix d’acquisition nécessitait un investissement supplémentaire à l’utilisation de la plate-forme de développement Flex. Il existe certes une version gratuite de cet applicatif, la version LiveCycle Data Service ES Express, mais elle ne peut être utilisée sur un environnement de production. C’est pourquoi le projet BlazeDS a vu le jour, offrant au développeur Flex la possibilité d’utiliser les briques de communication avec les méthodes Java et le push de données du LiveCyle Data Service ES sous licence Open Source (LGPL v3).
=Flex3 FM.book Page 264 Mardi, 2. décembre 2008 3:32 15
264
Comprendre Flex 3 PARTIE I
La technologie de communication utilisée par le serveur BlazeDS est le protocole AMF (Action Message Format) permettant l’échange de données au format binaire, jugé plus rapide que l’échange de données au format texte (XML).
Les différentes versions du serveur BlazeDS Le serveur BlazeDS est disponible sous deux versions : la version BlazeDS Turnkey et une version binaire. La version BlazeDS Turnkey
Pour être fonctionnel, BlazeDS doit être déployé sur le serveur web conteneur de servlets bien connu des développeurs J2EE : le serveur Tomcat. La version BlazeDS Turnkey propose aux utilisateurs le téléchargement d’une version « prête à l’emploi » contenant le serveur Tomcat et les services BlazeDS déjà déployés et configurés sur ce serveur. La version binaire
Cette version est à privilégier si vous disposez déjà d’un serveur Tomcat sur votre machine. En effet, la version binaire consiste à télécharger l’archive BlazeDS.war pouvant ainsi être déployée sur votre serveur Tomcat. Dans notre cas, nous allons privilégier l’usage de la version BlazeDS Turnkey proposant une facilité d’installation non négligeable et permettant une meilleure approche du serveur BlazeDS. Néanmoins, si vous souhaitez déployer vous-même l’archive du serveur BlazeDS sur votre serveur Tomcat, nous vous conseillons de consulter le lien suivant, qui vous apportera toute les précisions nécessaires pour mener à bien son déploiement : http://opensource.adobe.com/wiki/display/blazeds/Installation+Guide.
Installation Avant de procéder à l’installation du serveur BlazeDS, il convient de vérifier certains prérequis. Prérequis
Pour que le serveur BlazeDS Turnkey soit fonctionnel, Java SDK (Software Development Kit) doit être installé et correctement configuré sur votre machine. Par ailleurs, la variable d’environnement JAVA_HOME doit être spécifiée.
Installation du SDK Pour plus de détails sur l’installation de Java SDK, nous vous invitons à vous reporter au chapitre 3 de cet ouvrage ou à consulter le site web de Sun Microsytems à l’adresse suivante : http://java.sun.com/ javase/downloads/index.jsp.
=Flex3 FM.book Page 265 Mardi, 2. décembre 2008 3:32 15
BlazeDS : ouverture Open Source vers le monde J2EE et la communication d’applications CHAPITRE 14
265
Afin de nous assurer que notre environnement est correctement configuré, nous allons procéder à la saisie de quelques lignes de commande MS-DOS. Voici celle à saisir pour vérifier la présence de Java : java –version
Nous obtenons alors le résultat suivant. Notez que l’affichage de ce résultat peut être différent en fonction de la version de Java installée sur votre système : java version version de java « 1.6.0_05 » Java™ SE Runtime Environnement (build 1.6.0_05-b13) Java HotSpot™ Vlient VM (build 10.0-b19, mixed mode, sharing)
Pour vérifier la présence de la variable d’environnement JAVA_HOME, nous saisissons ensuite la ligne de commande suivante : Echo %JAVA_HOME%
La valeur spécifiée dans la variable d’environnement doit s’afficher à l’écran. Dans le cas contraire, ajoutez-la comme nous l’avons vu au chapitre 3. Si ces tests sont concluants, vous pouvez passer à l’installation du serveur BlazeDS. L’installation pas à pas
L’installation du serveur BlazeDS Turnkey comprend trois phases distinctes : 1. Le téléchargement de l’archive du serveur à partir du site d’Adobe : http://open source.adobe.com/wiki/display/blazeds/Release+Builds. 2. La décompression de l’archive sur votre disque dur. 3. Le renommage du répertoire issu de la décompression en blazeds. Dans la mesure où le répertoire d’installation peut être différent en fonction de la configuration de votre machine, nous nommerons par convention {blazeds} le répertoire racine du serveur BlazeDS correspondant au chemin d’installation que vous avez choisi.
Le serveur Tomcat Tomcat est un conteneur d’applications Java également appelées servlets. Souvent associé au serveur web Apache faisant office de serveur de présentation, Tomcat est chargé de gérer la partie dynamique de l’application J2EE par la prise en charge des requêtes effectuées sur les servlets. Nous ne détaillerons pas davantage l’étude de ce serveur dans cet ouvrage. Si vous souhaitez en savoir plus, nous vous conseillons de consulter le site de l’éditeur (http:// jakarta.apache.org/tomcat) ou de vous référer à l’ouvrage Java – (1) Premières applications professionnelles en Java d’Emmanuel Puybaret publié aux éditions Eyrolles.
=Flex3 FM.book Page 266 Mardi, 2. décembre 2008 3:32 15
266
Comprendre Flex 3 PARTIE I
Configuration
Avant de démarrer le serveur Tomcat , il convient de créer une variable d’environnement CATALINA_HOME pointant vers le répertoire racine de Tomcat, c’est-à-dire le répertoire {blazeds}\tomcat. Cette variable d’environnement doit être spécifiée afin d’indiquer au système l’endroit où se situent les fichiers nécessaires à la bonne exécution du serveur Tomcat. Pour cela, suivez les indications fournies au chapitre 3 dans la section des prérequis et saisissez les paramètres suivants (figure 14-1) : • Nom de la variable : CATALINA_HOME ; • Valeur de la variable : répertoire racine de Tomcat. Terminez ensuite en cliquant sur le bouton OK et fermez la fenêtre de propriété du poste de travail.
Figure 14-1
Création de la variable d’environnement CATALINA_HOME
Démarrage du serveur
Avant de lancer le serveur Tomcat, vous devez démarrer le serveur de base de données HSQLDB. Il a été installé avec le serveur BlazeDS, et est indispensable au bon fonctionnement de certaines applications de démonstration livrées avec le serveur BlazeDS Turnkey. Pour cela, placez-vous dans le répertoire sampledb du répertoire racine de BlazeDS et double-cliquez sur le script startdb.bat pour l’exécuter (figure14-2).
=Flex3 FM.book Page 267 Mardi, 2. décembre 2008 3:32 15
BlazeDS : ouverture Open Source vers le monde J2EE et la communication d’applications CHAPITRE 14
267
Figure 14-2
Démarrage du server HSQLDB
Pour exécuter à présent le serveur Tomcat, placez-vous dans le sous-répertoire bin de son répertoire racine et exécutez le script startup.bat (figure 14-3).
Figure 14-3
Démarrage du serveur Tomcat
Arrêt du serveur
Pour arrêter le serveur Tomcat, il faut tout d’abord exécuter le script shutdown.bat situé dans le sous-répertoire bin de Tomcat. Une fois ceci fait, stoppez le serveur de base de données HSQLDB en exécutant le script stopdb.bat situé dans le répertoire {blazeds}/ sampledb.
=Flex3 FM.book Page 268 Mardi, 2. décembre 2008 3:32 15
268
Comprendre Flex 3 PARTIE I
Test d’installation Après avoir démarré le serveur Tomcat, il est possible de vérifier le bon fonctionnement de BlazeDS en saisissant l’URL suivante dans la barre d’adresse du navigateur web (figure 14-4) : http://localhost:8400/samples/. Cette adresse nous donne accès à une multitude d’applications de tests situées dans le répertoire webapps/samples de Tomcat. Nous vous laissons le soin de les découvrir avant d’entrer dans le détail de l’interaction entre le serveur BlazeDs et les méthodes de classe J2EE.
Figure 14-4
Applications de tests
Interaction avec les méthodes J2EE Étudions à présent le processus d’exécution d’une méthode J2EE ainsi qu’un exemple d’application qui vous permettra de mieux comprendre l’interaction entre une application Flex et cette classe Java.
=Flex3 FM.book Page 269 Mardi, 2. décembre 2008 3:32 15
BlazeDS : ouverture Open Source vers le monde J2EE et la communication d’applications CHAPITRE 14
269
Processus d’exécution Pour pouvoir exécuter une méthode J2EE (contenue dans une classe J2EE) à l’aide de BlazeDS, elle doit être connue du serveur. Pour cela, il convient de respecter une certaine organisation :
Figure 14-5
Processus d’exécution d’une méthode J2EE
=Flex3 FM.book Page 270 Mardi, 2. décembre 2008 3:32 15
270
Comprendre Flex 3 PARTIE I
• Les classes J2EE doivent être déployées dans le répertoire {blazeds}\tomcat\webapps\ blazeDS\webapps\classes. • Les classes J2EE doivent ensuite être spécifiées dans le fichier remoting-config.xml, situé dans le répertoire {blazeds}\tomcat\webapps\blazeDS\WEB-INF\flex, qui joue le rôle de routeur vers les classes J2EE. Ce fichier contient ce que l’on appelle des destinations, pointant vers chaque classe présente sur le serveur BlazeDS. Le fichier remoting-config.xml est donc le point d’entrée de chaque requête de demande d’exécution de méthodes. Pour exécuter une méthode, il faut en quelque sorte montrer patte blanche en fournissant le nom de la destination ainsi que le nom de la méthode J2EE à exécuter. La présence de la destination dans le fichier remoting-config.xml est ensuite vérifiée. Si elle est bien détectée, la requête est redirigée vers la classe liée pour permettre la recherche et l’exécution de la méthode. La figure 14-5 résume ce processus.
Exemple d’application Illustrons à présent ce concept, en créant notre propre méthode J2EE et en l’appelant dans un projet Flex. Le but de cette méthode sera d’additionner deux entiers et d’en retourner le résultat. Important Avant tout développement, nous vous conseillons d’arrêter les serveurs Tomcat et HSQLDB. En effet, ceci permet de faciliter le déploiement des applications. Même si le serveur est capable de déployer une application alors qu’il est toujours en fonctionnement, il est conseillé de l’arrêter, afin que le déploiement se réalise proprement.
Création de la classe J2EE
La première étape consiste à créer un fichier Java nommé ClasseJ2ee.java contenant la logique applicative de la méthode. Nous vous suggérons de créer ce fichier à la racine de votre disque dur à l’aide du Bloc-notes de Windows si vous ne disposez pas d’un environnement de développement Java. Néanmoins, si vous désirez utiliser Java et Flex de manière plus poussée, nous vous recommandons fortement d’installer sur votre poste un IDE tel que Eclipse ou NetBeans, car ils contiennent un ensemble de fonctionnalités propres au développement Java. Voici le code du fichier ClasseJ2ee.java : public class ClasseJ2ee{ // Méthode public int calculer (int a, int b) { return (a + b); } }
=Flex3 FM.book Page 271 Mardi, 2. décembre 2008 3:32 15
BlazeDS : ouverture Open Source vers le monde J2EE et la communication d’applications CHAPITRE 14
271
Une fois ce fichier créé, il convient de le compiler afin d’obtenir un fichier binaire portant l’extension .class, lequel sera ensuite déployé sur le serveur BlazeDS. 1. Ouvrez l’invite de commandes MS-DOS. 2. Placez-vous dans le répertoire du fichier Java précédemment créé. 3. Saisissez ensuite la commande de compilation suivante : javac ClasseJ2ee.java
Le résultat de cette compilation est la création du fichier ClasseJ2ee.class. Notre classe créée, nous allons à présent procéder à la configuration du serveur BlazeDS. Configuration du serveur BlazeDS
La configuration du serveur se déroule en deux étapes : la configuration du fichier « passerelle » remote-config.xml permettant d’orienter la requête d’exécution d’une méthode J2EE vers la classe Java la contenant, et le déploiement de la classe J2EE. Le fichier remoting-config.xml
Comme nous l’avons vu, ce fichier, situé dans le répertoire {blazeds}\tomcat\webapps\ blazeds\WEB-INF\flex, permet de rediriger la requête de demande d’exécution de la méthode J2EE vers la classe qui la contient. ClasseJ2ee application
Une nouvelle destination (destJ2ee) pointant vers notre classe ClasseJ2ee.class a été créée en spécifiant le nom de la classe dans la balise des propriétés de la destination.
=Flex3 FM.book Page 272 Mardi, 2. décembre 2008 3:32 15
272
Comprendre Flex 3 PARTIE I
Déploiement de la classe J2EE
Le déploiement de la classe J2EE consiste tout simplement à copier le fichier ClasseJ2ee .class dans le répertoire {blazeds}\tomcat\webapps\blazeds\WEB-INF\classes.
Vous pouvez à présent redémarrer le serveur Tomcat afin de vous assurer qu’aucune erreur n’est survenue lors du chargement de la classe. Création du projet Flex
Nous allons maintenant nous pencher sur la création du projet Flex. Il sera chargé de réaliser le front end de l’application et de faire appel à méthode J2EE : 1. Créez un nouveau projet Flex que vous nommerez BzJ2ee. 2. Dans la fenêtre qui s’ouvre alors (figure 14-6), sélectionnez la technologie serveur J2EE, puisque nous allons faire appel à une méthode J2EE. Activez également l’option LiveCycle Data Services, car BlazeDS se substitue à ce serveur. Cliquez sur le bouton Next.
Figure 14-6
Configuration du projet
=Flex3 FM.book Page 273 Mardi, 2. décembre 2008 3:32 15
BlazeDS : ouverture Open Source vers le monde J2EE et la communication d’applications CHAPITRE 14
273
3. Précisez ensuite le chemin d’installation du serveur BlazeDS. Dans la mesure où nous n’allons pas utiliser LiveCycle Data Services, désactivez l’option Use default location for local LiveCycle Data Services Server et spécifiez les différents paramètres du serveur (figure 14-7) : – Root folder : {blazeds}\tomcat\webapps\blazeds ; – Root URL : http://localhost:8400/blazeds ; – Context root : /blazeds. Répertoire Le répertoire de compilation sera situé dans le répertoire {blazeds}\tomcat\webapps\blazeds et non dans le répertoire de l’application, comme c’est le cas habituellement.
Figure 14-7
Configuration du serveur J2EE
4. Cliquez enfin sur le bouton Finish pour terminer la création du projet Flex. Notre projet créé, nous mettons en place l’interface graphique (figure 14-8).
=Flex3 FM.book Page 274 Mardi, 2. décembre 2008 3:32 15
274
Comprendre Flex 3 PARTIE I
Figure 14-8
Interface graphique du projet
La tâche suivante va consister à configurer le composant RemoteObject afin de réaliser l’appel de la méthode J2EE. Exécution de la méthode J2EE
Maintenant que notre interface graphique est terminée, la dernière étape va consister à configurer le composant RemoteObject afin d’exécuter la méthode Java :
=Flex3 FM.book Page 275 Mardi, 2. décembre 2008 3:32 15
BlazeDS : ouverture Open Source vers le monde J2EE et la communication d’applications CHAPITRE 14
275
La propriété destination du composant RemoteObject doit prendre la valeur de la balise destination spécifiée dans le fichier remote-config.xml. En effet, c’est à partir de la concordance des deux propriétés que la méthode Java sera exécutée. La touche finale consiste à écrire les procédures ActionScript permettant de réaliser l’appel de la méthode Java :
Il convient par ailleurs de ne pas oublier de déclencher la procédure executerMethode J2ee() lorsque l’utilisateur clique sur le bouton Calculer :
Test de l’application
Pour tester l’application, assurez-vous tout d’abord que le serveur Tomcat est démarré, puis saisissez l’URL suivante dans la barre d’adresse de votre navigateur web : http://localhost:8400/blazeds/BzJ2ee-debug/BzJ2ee.html. Vous constatez que l’application est bien appelée et s’exécute correctement (figure 14-9). Nous venons de réaliser une première application faisant appel à une méthode Java. Le plus compliqué est de créer correctement la classe Java et la méthode et de configurer le serveur BlazeDS. L’appel du service via l’utilisation du composant RemoteObject reste, quant à lui, identique à ce que nous avons pu réaliser au chapitre précédent avec PHP.
=Flex3 FM.book Page 276 Mardi, 2. décembre 2008 3:32 15
276
Comprendre Flex 3 PARTIE I
Figure 14-9
Test de l’application
Nous allons à présent aborder un autre aspect du serveur BlazeDS qui nous permet de créer des applications « communicantes ».
Échanger des données en temps réel L’exemple le plus communément développé pour illustrer le mécanisme d’échange de données en temps réel avec le serveur BlazeDS est une application de messagerie instantanée (chat). Pour nous démarquer un peu, nous allons utiliser ce procédé, mais en en détourner l’usage, afin de réaliser une application capable de piloter un « robot » virtuel. Il sera matérialisé par un petit carré rouge au centre de l’interface graphique. L’utilisateur disposera de quatre boutons, représentant les quatre directions, qui lui permettront de déplacer le carré. Comme nous vous l’avons indiqué, nous allons utiliser le procédé de la messagerie instantanée pour piloter notre robot. Pour qu’une communication soit définie comme telle, la présence de deux interlocuteurs est nécessaire. Nous devons donc exécuter deux instances d’applications. Nous allons à nouveau utiliser une destination qui servira ici de point d’échange entre les deux applications. Chaque application sera connectée à cette destination afin d’en être à l’écoute et d’être informée des modifications apportées par chacune d’entre elles. L’échange est donc réalisé selon le principe suivant : 1. Une destination d’échange est créée sur le serveur. 2. Chaque application se connecte à cette destination et se met à son écoute. 3. L’application A envoie un message à la destination. 4. La destination reçoit le message. 5. L’application B, à l’écoute de la destination, est informée de la notification de réception d’un nouveau message et le récupère. 6. L’application B traite le message. C’est sur ce principe que nous allons offrir la possibilité à une application A de piloter le robot d’une application B et inversement. Chaque direction correspondra à une lettre :
=Flex3 FM.book Page 277 Mardi, 2. décembre 2008 3:32 15
BlazeDS : ouverture Open Source vers le monde J2EE et la communication d’applications CHAPITRE 14
277
• Haut : « H » ; • Bas : « B » ; • Droite : « D » ; • Gauche : « G ». Par ailleurs, nous devrons créer une destination sur le serveur et mettre à l’écoute les deux applications. Bien entendu, chaque application aura également la possibilité d’envoyer un message à la destination afin de faire bouger le robot. Ainsi, si l’application A envoie le message « H » à la destination, l’application B interceptera le message, l’analysera grâce à procédure d’analyse et déterminera que « H » signifie « déplacer le robot vers le haut ».
Création du projet Pour commencer, nous allons créer un nouveau projet nommé robot. Nous procéderons de la même manière que pour créer un projet faisant appel à l’exécution d’une méthode J2EE, car nous allons avoir besoin du serveur BlazeDS pour permettre l’échange de données entre les applications. La première étape va consister à créer l’interface graphique :
La composition de cette interface est assez simple (figure 14-10) : • un Canvas définissant le périmètre de déplacement du robot ; • un Canvas représentant le robot ; • quatre boutons représentant les quatre directions.
=Flex3 FM.book Page 278 Mardi, 2. décembre 2008 3:32 15
278
Comprendre Flex 3 PARTIE I
Figure 14-10
Interface de pilotage du robot
Configuration du serveur La configuration du serveur consiste à créer dessus une destination. Pour cela, placez-vous tout d’abord dans le répertoire {blazeds}\tomcat\webapps\blazeds\WEB-INF\flex et ouvrez le fichier service-config.xml, fichier de configuration principal du serveur BlazeDS. Il fait appel au fichier messaging-config.xml :
C’est ce fichier qui va particulièrement nous intéresser, car c’est à cet endroit que nous allons créer notre destination. Avant d’en visualiser le contenu, poursuivons notre lecture du fichier service-config.xml et attardons-nous sur les lignes de code suivantes : true 4
Vous remarquez la présence du canal my-polling-amf. C’est lui qui sera utilisé pour l’échange de données en temps réel, car il est spécifié comme service par défaut dans le fichier messaging-config.xml. Notons que le temps de consultation de la destination est défini à 4 secondes. Pour plus de réactivité d’échange, il est possible de réduire cette valeur.
=Flex3 FM.book Page 279 Mardi, 2. décembre 2008 3:32 15
BlazeDS : ouverture Open Source vers le monde J2EE et la communication d’applications CHAPITRE 14
279
Intéressons-nous à présent au fichier messaging-config.xml. Comme nous venons de le spécifier, le canal utilisé par défaut est my-polling-amf. Notre travail va donc se résumer à créer une destination, que nous nommerons bougerrobot, et qui fera appel à ce canal de communication comme suit :
Le serveur est à présent correctement configuré. L’étape suivante consiste à implémenter les méthodes d’écoute et d’échange avec la destination.
et : les composants émetteurs et récepteurs Le composant permet à l’application de se connecter à une destination afin d’en être à l’écoute et de réceptionner les messages qu’elle reçoit. À l’inverse, le composant permet de transmettre des messages à la destination. Nous allons donc utiliser ces composants pour nous connecter à la destination bougerrobot, afin de détecter d’une part tout message qui pourrait nous être transmis via une application distante, et d’autre part de communiquer avec elle. La communication sera donc bidirectionnelle : nous pourrons transmettre et recevoir des informations, ce qui nous permettra de piloter le robot de l’application distante, et l’utilisateur de cette application pourra à son tour piloter notre robot. Voici le code d’implémentation de l’écouteur :
Nous avons spécifié la destination d’écoute et une action à réaliser en cas de réception d’un message. Cette action permettra d’interpréter le message reçu et de déplacer le robot en conséquence.
=Flex3 FM.book Page 280 Mardi, 2. décembre 2008 3:32 15
280
Comprendre Flex 3 PARTIE I
Il convient également d’initialiser l’écoute dès la fin de la création de l’application en faisant appel à la méthode subscribe() du composant Consumer :
Voyons à présent la mise en place de l’émetteur qui nous permettra de déplacer le robot de l’application distante :
Nous avons simplement connecté l’émetteur à la destination bougerrobot. L’envoi du message sera réalisé grâce à la méthode send() du composant Producer dont nous allons voir de suite l’utilisation.
Les procédures de communication Nous allons à présent mettre en place les procédures permettant de réaliser l’échange de données et d’interpréter le message reçu. Envoyer un message
Comme nous venons de l’évoquer, l’envoi d’un message s’effectue via la méthode send() du composant Producer. Nous allons donc écrire une procédure, que nous nommerons envoyer(), qui transmettra à la destination bougerrobot la lettre correspondant à la direction de déplacement du robot choisi par l’utilisateur :
Cette procédure crée un message asynchrone dont la propriété body.chatMessage contient la direction à transmettre à la destination. Cette dernière est alors avertie de la transmission d’un nouveau message. Voyons à présent comment récupérer ce message. Recevoir un message
Lors de la mise en place du composant , nous avons spécifié une action à réaliser à chaque réception d’un message de la part de la destination. Le code de cette action est le suivant :
=Flex3 FM.book Page 281 Mardi, 2. décembre 2008 3:32 15
BlazeDS : ouverture Open Source vers le monde J2EE et la communication d’applications CHAPITRE 14
281
private function receptionner(messageDestination:IMessage):void{ var directionRecue:String = messageDestination.body.chatMessage; switch (directionRecue) { case "G" : gauche(); break; case "D" : droite(); break; case "H" : haut(); break; case "B" : bas(); break; } }
Nous récupérons la propriété body.chatMessage du message reçu et nous exécutons une procédure de déplacement en fonction de la lettre reçue. Pour terminer, voici le code des quatre procédures permettant de déplacer le robot : public function gauche():void { irobot.x = irobot.x-5 } public function droite():void { irobot.x = irobot.x+5 } public function haut():void { irobot.y = irobot.y-5 } public function bas():void { irobot.y = irobot.y+5 }
Pour chaque destination, nous récupérons la position actuelle à laquelle nous ajoutons ou soustrayons 5 pixels. Libre à vous de modifier cette valeur en fonction de vos préférences.
=Flex3 FM.book Page 282 Mardi, 2. décembre 2008 3:32 15
282
Comprendre Flex 3 PARTIE I
Test de l’application Le moment est venu de tester notre application. Pour cela, exécutez-la deux fois dans votre navigateur web, afin de créer deux interlocuteurs. En cliquant sur les différents boutons de l’interface, nous voyons que l’échange des données s’effectue correctement (figure 14-11).
Figure 14-11
Exécution de l’application
En résumé Dans ce chapitre, nous avons abordé les deux principales opérations pouvant être réalisées à l’aide du serveur BlazeDS, à savoir l’appel de méthodes Java et l’échange de données entre plusieurs applications. Adobe mise beaucoup sur ce serveur en nous le proposant en Open Source malgré son offre de distribution du serveur LiveCycle Data Service ES. Néanmoins, BlazeDS ne permet pas d’effectuer l’ensemble des fonctionnalités proposées par son concurrent payant (citons par exemple la génération de fichiers PDF ou la présence d’options de déploiement avancées…). Vous êtes désormais en mesure de créer des applications dynamiques capables d’interagir avec la couche métier développée en Java, ce qui améliorera l’interactivité de vos applications en offrant la possibilité d’interaction entre deux applications Flex.
=Flex3 FM.book Page 283 Mardi, 2. décembre 2008 3:32 15
BlazeDS : ouverture Open Source vers le monde J2EE et la communication d’applications CHAPITRE 14
283
Ce chapitre nous également permis d’approfondir notre étude des méthodes de communication avec la couche métier. Nous avons vu au chapitre précédent que pour communiquer avec la couche métier PHP, il convenait d’utiliser le protocole AMF couplé au composant RemoteObject afin d’obtenir des résultats plus concluants (rapidité, sérialisation des données…). Pour accéder aux méthodes Java, nous observons le même mode opératoire. Par conséquent, nous pouvons en déduire que le couple RemoteObject/AMF semble être le mode le plus approprié pour communiquer avec la couche métier à condition que celle-ci le permette.
=Flex3 FM.book Page 284 Mardi, 2. décembre 2008 3:32 15
=Flex3 FM.book Page 285 Mardi, 2. décembre 2008 3:32 15
15 Créer des applications modulaires Au cours de ce chapitre, vous allez utiliser des modules applicatifs afin de les intégrer au sein d’une application Flex.
La notion de module Un module est une application (fichier .swf) proposant un certain nombre de fonctionnalités pouvant être intégrées à une autre application. En d’autres termes, si nous considérons qu’une application Flex est un puzzle, un module est une pièce le constituant. Les modules ne sont pas indépendants : ils ont impérativement besoin d’une application pour pouvoir être exécutés. Il existe de nombreux avantages à l’utilisation de modules : • une diminution de la taille de l’application principale ; • une diminution du temps de chargement de l’application ; • un découpage applicatif (module de comptabilité, module de vente en ligne…) ; • une meilleure maintenance de l’application : chaque module étant indépendant, il est possible d’y apporter des modifications sans remettre en cause la stabilité complète de l’application ; • une optimisation de la performance d’exécution de l’application : le module peut être chargé et déchargé à volonté. Un module se crée à partir d’un fichier MXML, tout comme une application Flex standard, à la différence que la balise est remplacée par la balise .
=Flex3 FM.book Page 286 Mardi, 2. décembre 2008 3:32 15
286
Comprendre Flex 3 PARTIE I
C’est le seul élément qui différencie un module d’une application. Il est ensuite possible d’y placer des composants et d’y décrire des procédures ActionScript, tout comme nous le ferions pour une application Flex.
Créer un module Afin de mieux comprendre la notion de module, nous vous proposons d’en créer un qui soit capable de déterminer le nombre de caractères d’une chaîne saisie dans une zone de texte. Voici la marche à suivre pour cela : 1. Créez un nouveau projet Flex à l’aide de Flex Builder 3 nommé module. 2. Dans ce projet, créez ensuite un fichier de type MXML Module, que vous nommerez modLettre, en effectuant un clic droit sur le nom du projet et en sélectionnant New. 3. Dans la fenêtre qui s’ouvre alors, assurez-vous que l’option Do not optimize (module can be loaded by multiple applications) est bien cochée afin que le module puisse s’exécuter sur plusieurs applications (figure 15-1).
Figure 15-1
Création d’un module
=Flex3 FM.book Page 287 Mardi, 2. décembre 2008 3:32 15
Créer des applications modulaires CHAPITRE 15
287
Notre module est désormais créé. Il convient à présent d’implémenter les composants et procédures nécessaires à la réalisation de la tâche demandée (figure 15-2) :
Figure 15-2
Interface graphique du module
Ainsi, quelques clics de souris et lignes de code suffisent pour créer un module entièrement fonctionnel et prêt à être utilisé. Mais, avant cela, il convient de le compiler et de créer une version de déploiement. 1. Effectuez un clic droit sur le nom du projet et sélectionnez Export. 2. Dans la fenêtre qui s’ouvre alors, indiquez que vous souhaitez réaliser une version de déploiement (build release) en veillant à ne pas modifier les options spécifiées par défaut.
=Flex3 FM.book Page 288 Mardi, 2. décembre 2008 3:32 15
288
Comprendre Flex 3 PARTIE I
À l’issue de l’exportation, vous pouvez voir qu’un nouveau dossier bin-release est apparu dans l’arborescence du projet. Il contient le fichier modLettre.swf correspondant à la version de déploiement du module. Voyons à présent comment intégrer ce module dans une nouvelle application.
Intégrer un module dans une application Nous allons ici créer un nouveau projet puis ajouter, dans son répertoire src, un dossier modules qui contiendra l’ensemble des modules de notre application. Nous copierons ensuite dans ce dossier le module du répertoire bin-release du précédent projet, puis nous l’intégrerons à notre projet.
Charger les modules à l’aide du composant ModuleLoader Pour charger un module dans une application, la première méthode consiste à utiliser le composant ModuleLoader comme suit :
Grâce à la propriété url, nous spécifions le chemin du module permettant de le charger automatiquement. Cependant, il est possible de gérer de façon plus poussée le chargement des modules grâce à ActionScript, ce que nous allons voir dans la section suivante.
Gestion des modules avec ActionScript Nous allons ici aborder la gestion du chargement/déchargement de modules à l’aide du langage ActionScript. Charger un module
Le chargement d’un module s’effectue très simplement à l’aide de la méthode loadModule() du composant ModuleLoader :
Décharger un module
Pour décharger un module, il suffit d’utiliser la méthode unload() du composant Module Loader comme suit : public function dechargerModule():void{ // Déchargement du module chargeurModule.unloadModule(); }
Gérer les erreurs de chargement
La plupart des erreurs surviennent lors du chargement du module. Nous allons voir comment les intercepter afin d’en avertir l’utilisateur et de prévenir tout désagrément.
L’exécution de la procédure interceptionErreur() n’est déclenchée que lorsque le composant ModuleLoader rencontre une erreur (grâce au paramètre error du ModuleLoader). La procédure reçoit alors en paramètre l’événement qui déclenche l’erreur et nous permet d’en afficher la description (figure 15-3).
Figure 15-3
Interception des erreurs de chargement
Afficher la progression du chargement
Quoi de plus désagréable pour un utilisateur que d’attendre devant une page blanche sans savoir ce qui se passe ? Pour lui éviter cela, il est possible de déterminer l’état d’avancement du chargement du module en se « connectant », par l’usage du terme [Bindable] (voir le chapitre 11), à la propriété progress du composant ModuleLoader :
=Flex3 FM.book Page 291 Mardi, 2. décembre 2008 3:32 15
Créer des applications modulaires CHAPITRE 15
291
=Flex3 FM.book Page 292 Mardi, 2. décembre 2008 3:32 15
292
Comprendre Flex 3 PARTIE I
La procédure afficherProgression() est déclenchée à chaque fois que le taux de chargement du module augmente. Par ailleurs, l’événement ProgressEvent nous permet de capturer le nombre d’octets chargés, nous pouvons ainsi déterminer le pourcentage de chargement du module et l’afficher dans une zone de texte (figure 15-4).
Figure 15-4
Affichage de la progression du chargement
Interagir avec le module
Pour pouvoir interagir avec le module depuis l’application, nous devons utiliser une interface qui servira de passerelle permettant l’accès aux méthodes du module. Cet accès est possible car l’interface elle-même connaît l’ensemble des méthodes. La figure 15-5 illustre le processus de communication entre une application et un module :
Figure 15-5
Notion d’interface
1. L’application fait appel à une procédure du module. Pour cela elle s’adresse à l’interface qui est liée au module. 2. L’interface recherche l’existence de la procédure parmi celles contenues dans sa liste. Si la procédure est trouvée, l’interface demande son exécution au module. 3. Le module exécute la procédure demandée. Nous allons à présent modifier le module pour y implanter une procédure chargée d’alimenter le champ chaine_txt. Notez que toutes les modifications à apporter devront être effectuées dans le projet module car une nouvelle compilation du module sera nécessaire.
=Flex3 FM.book Page 293 Mardi, 2. décembre 2008 3:32 15
Créer des applications modulaires CHAPITRE 15
293
La propriété text du champ chaine_txt est liée à la variable texte. Cette dernière est mise à jour à l’aide de la méthode set chaine(param:String):void impliquant une actualisation du champ chaine_txt par la notion de DataBinding reliant la propriété text de ce champ à la variable texte. L’étape suivante consiste à créer l’interface permettant de réaliser la communication entre l’application et le module. Pour cela, il suffit de créer un nouveau fichier ActionScript Interface, nommé InterfaceModule, héritant de la classe IEventDispatcher, et d’y insérer le code suivant : package { import flash.events.IEventDispatcher; public interface InterfaceModule extends IEventDispatcher { function set chaine(param:String):void; } }
L’héritage de la classe IEventDispatcher est utile afin d’intercepter les appels aux procédures du module et de les dispatcher correctement. Cette répartition est effectuée parmi les
=Flex3 FM.book Page 294 Mardi, 2. décembre 2008 3:32 15
294
Comprendre Flex 3 PARTIE I
procédures spécifiées dans l’interface, dont la déclaration doit être identique à celle effectuée dans le module (en excluant leur visibilité publique/privée, figure 15-6).
Figure 15-6
Similitude des déclarations de procédure
Enfin, il nous reste à établir la liaison entre l’interface et le module en modifiant la propriété implements de ce dernier :
La première étape est terminée, il convient à présent de recompiler le module et d’en réaliser une version de déploiement, comme expliqué précédemment. 1. Créez un nouveau projet Flex. 2. Après avoir copié les fichiers modLettre.swf, modLettre.mxml et interfaceModule.as du projet module dans le répertoire src de notre nouveau projet, éditez le fichier MXML comme suit : ➥
La procédure chargerModule est appelée lorsque l’utilisateur clique sur le bouton Charger. Elle a pour fonction de charger le module modLettre.swf dans le composant ModuleLoader. Une fois celui-ci chargé, la procédure finChargementModule est exécutée, laquelle établit une connexion avec l’interface et fait appel à la procédure chaine() du module en passant en paramètre la chaîne « Message à afficher ». Le résultat obtenu est illustré par la figure 15-7.
Figure 15-7
Résultat concluant de la communication avec le module depuis l’application
Interagir avec l’application
Nous allons à présent voir qu’il est également possible de communiquer avec l’application à partir du module. Pour cela, nous allons quelque peu modifier le code de notre module :
Grâce à la propriété parentApplication, il nous est possible de faire appel à une procédure déclarée dans l’application contenant le module. C’est ainsi que nous appellerons la procédure resultatCalcul() de l’application que nous allons à présent implémenter : ➥
Après avoir recréé une version de déploiement du module et copié les fichiers modLettre .swf et modLettre.mxml dans l’application, nous pouvons la tester afin de vérifier que la communication entre le module et l’application s’effectue correctement (figure 15-8).
Figure 15-8
Résultat de la communication entre le module et l’application
En résumé La création et l’implémentation d’un module s’effectuent très facilement grâce à l’emploi du composant ModuleLoader. Nous avons également vu qu’il est possible d’interagir avec le module depuis l’application et inversement. En organisant l’architecture de vos applications sous forme de modules, vous allez pouvoir en améliorer la qualité en réduisant leur délai de chargement et en optimisant leur exécution.
=Flex3 FM.book Page 298 Mardi, 2. décembre 2008 3:32 15
=Flex3 FM.book Page 299 Mardi, 2. décembre 2008 3:32 15
16 Interagir avec le conteneur web Jusqu’à présent, nous avons réduit l’espace de communication d’une application Flex à elle-même. Cependant, il n’est pas inconcevable d’imaginer une application Flex intégrée au sein d’une application web statique afin d’offrir des fonctionnalités plus évoluées et de communiquer avec celle-ci. C’est pourquoi, nous avons décidé de consacrer un chapitre à l’étude de cette communication. Nous aborderons tout d’abord la notion de deep linking qui va nous permettre de naviguer au sein de notre application à l’aide des boutons Précédent et Suivant du navigateur, comme nous pourrions le faire avec une application web standard. Nous étudierons ensuite la classe ExternalInterface et la bibliothèque Flex-Ajax Bridge, qui nous permettront de réaliser un canal de communication entre une application Flex et son conteneur web.
La notion de deep linking Les applications Flash n’offrent pas la possibilité de se déplacer dans l’application à l’aide du navigateur. En effet, les boutons Précédent et Suivant sont dans ce cas inactifs, ce qui peut dérouter certains utilisateurs habitués à utiliser ce moyen de navigation au sein des applications web classiques. Grâce au deep linking, ce problème est désormais résolu et l’utilisateur peut naviguer au sein de l’application Flex à l’aide de ces boutons.
Principe de fonctionnement Le principe de base est assez simple, car il consiste à enregistrer toute action réalisée dans l’application dans l’URL de la page qui la contient. Étant donné que le navigateur
=Flex3 FM.book Page 300 Mardi, 2. décembre 2008 3:32 15
300
Comprendre Flex 3 PARTIE I
enregistre l’historique des URL utilisées, lorsque l’utilisateur cliquera sur les boutons Précédent ou Suivant, l’URL archivée sera affichée. En analysant cette URL, nous pourrons alors déterminer l’action correspondante et la partie de l’application associée. Voyons ceci à travers un exemple. Imaginons une application composée d’un état principal et d’un état secondaire héritant de l’état principal. Un bouton situé sur l’état de base permet d’accéder à l’état suivant, soit l’état sécondaire. La figure 16-1 illustre le fonctionnement de cette application, que nous pouvons détailler comme suit : Étape ➊ : à l’initialisation de l’application, son URL se termine par le caractère dièse (#), ce qui indique qu’il s’agit de la racine du site. Étape ➋ : lorsque l’utilisateur clique sur le bouton Passer à la vue 2, l’état secondaire s’affiche à l’écran. Étape ➌ : nous ajoutons alors une information dans l’URL de l’application qui nous servira de clé de navigation, à savoir vue2 (le nom attribué à cette clé est à la libre appréciation du développeur). Étape ➍ : si l’utilisateur clique à présent sur le bouton Précédent, l’URL affichée correspond à celle de la racine du site.
Figure 16-1
Principe du deep linking
=Flex3 FM.book Page 301 Mardi, 2. décembre 2008 3:32 15
Interagir avec le conteneur web CHAPITRE 16
301
Étape ➎ : dans notre application Flex, nous allons extraire cette information et l’analyser : • si la clé est vide, nous afficherons l’état de base de l’application ; • si la clé est égale à la valeur vue2, nous afficherons l’état secondaire. Comme la clé est vide (DeepLinking.html#), nous affichons l’état de base de l’application. Étape ➏ : si l’utilisateur clique à présent sur le bouton Suivant de son navigateur, l’URL affichée comporte la clé vue2 (DeepLinking.html#vue2). L’analyse de cette clé par l’application Flex aura pour résultat l’affichage de l’état secondaire. Passons à présent à la mise en pratique de ce concept. Navigateurs compatibles Les navigateurs permettant d’utiliser la notion de deep linking sont : • Internet Explorer 6 ; • Internet Explorer 7 ; • Firefox ; • Safari ; • Google Chrome.
Mise en pratique du deep linking Nous allons à présent nous pencher sur le concept de deep linking en développant l’application dont nous venons de décrire le fonctionnement, afin de concrétiser cette nouvelle notion. Configuration du projet
Pour commencer, il convient de créer un nouveau projet Flex et de vérifier que la navigation à l’aide des boutons Précédent et Suivant du navigateur est activée pour le projet. Pour cela, rendez-vous dans les propriétés de votre projet en réalisant un clic droit sur celui-ci, et dans la rubrique Flex Compiler, activez l’option Enable integration with browser navigation (figure 16-2). En activant cette option, vous indiquez que les fichiers history.css et history.js devront être utilisés lors de la création du conteneur web, dont la fonction principale est de permettre l’exécution du deep linking. // Extrait du fichier HTML généré chargé de contenir l’application
=Flex3 FM.book Page 302 Mardi, 2. décembre 2008 3:32 15
302
Comprendre Flex 3 PARTIE I
Figure 16-2
Configuration du projet
Création de l’interface graphique
Notre projet étant à présent créé et correctement configuré, nous allons créer l’état principal et l’état secondaire de l’application comme suit :
=Flex3 FM.book Page 303 Mardi, 2. décembre 2008 3:32 15
Interagir avec le conteneur web CHAPITRE 16
303
À l’écoute du navigateur
Comme nous l’avons vu, la notion de deep linking est essentiellement basée sur l’échange d’informations entre le navigateur et l’application. Pour réaliser cet échange, nous allons utiliser les éléments suivants : • La classe BrowserManager du package mx.manager permettant d’établir la communication avec le navigateur. • L’interface IBrowserManager du package mx.manager, qui va utiliser l’instance de la classe BrowserManager, et permettre de réaliser l’ensemble des opérations sur l’URL de la page affichée dans le navigateur. • La classe BrowserChangeEvent du package mx.events permettant d’intercepter tout événement réalisé à l’aide des méthodes de l’interface IBrowserManager sur l’URL de la page affichée dans le navigateur. Le code suivant illustre l’implémentation de ces éléments :
Nous pouvons à présent saisir le code permettant de gérer le deep linking :
Exécutons à présent notre application et étudions son fonctionnement. La première action réalisée est l’initialisation de l’application par la procédure initialiserUrl(), qui va récupérer l’instance de la classe BrowserManager et l’affecter à la variable navigateur. Cette instance correspond au navigateur utilisé par l’application en cours d’exécution. Nous profitons également de cette initialisation pour placer un écouteur d’événement qui
=Flex3 FM.book Page 305 Mardi, 2. décembre 2008 3:32 15
Interagir avec le conteneur web CHAPITRE 16
305
déclenchera l’action actionSurUrl à chaque changement de la valeur de l’URL du navigateur. Cet écouteur a un rôle primordial dans la notion de deep linking car c’est grâce à lui qu’il nous sera possible d’intercepter les changements d’URL déclenchés par l’utilisation des boutons Précédent et Suivant du navigateur et d’en afficher la vue associée. Enfin, l’initialisation se termine par l’utilisation de la méthode init("")qui va ajouter le caractère dièse (#) à la fin de l’URL de l’application, signifiant que nous sommes à la racine du site. Si nous cliquons sur le bouton Passer à la vue 2, la procédure modifierUrl est exécutée. Cette procédure permet d’ajouter une clé de navigation à l’URL du navigateur (#vue2). Cet ajout est réalisé à l’aide de la procédure setFragment de l’interface IBrowserManager, qui est chargée d’ajouter la valeur qui lui est passée en paramètre à la suite du dièse de l’URL : #cléDeNavigation. Si nous cliquons à présent sur le bouton Précédent de notre navigateur, cela déclenche une modification de l’URL qui est interceptée par l’écouteur que nous avons mis en place. Cet écouteur déclenche alors l’exécution de la procédure actionSurUrl, qui analyse la clé de navigation (via la méthode getFragment() de l’interface IBrowserManager) et affiche l’état correspondant à cette clé. Modifier le titre du navigateur Pour modifier le titre du navigateur, il est possible d’utiliser la méthode setTitle("titreAAfficher") de l’interface IbrowserManager.
Déploiement du projet Comme nous l’avons vu lors de la phase de configuration du projet, le deep linking n’est possible que si les fichiers permettant cette fonctionnalité sont présents dans le répertoire de l’application. Par conséquent, lors de la phase de déploiement, il convient de ne pas omettre ces fichiers et de les placer dans le répertoire history (situé par défaut dans le répertoire bin-debug de l’application) à l’endroit où se trouve le conteneur web de l’application Flex.
Communiquer avec le conteneur web Jusqu’à présent, nous avons réalisé des applications autonomes, mais il peut arriver qu’une application soit développée à l’aide du framework Flex dans le but de dynamiser l’aspect graphique d’une page statique. Nous vous proposons ici d’étudier une telle application à travers un exemple. L’application Flex sera chargée de lister les produits d’un site marchand dans un composant DataGrid ou autre. Lorsque l’utilisateur sélectionnera l’un des produits, ses caractéristiques devront être communiquées et affichées dans la page contenant l’application. Cet exemple vous permettra de voir comment il est possible d’interagir avec le conteneur de l’application mais aussi comment communiquer avec l’application à partir de ce conteneur.
=Flex3 FM.book Page 306 Mardi, 2. décembre 2008 3:32 15
306
Comprendre Flex 3 PARTIE I
Ainsi, l’exemple que nous allons mettre en place va consister dans un premier temps à saisir deux nombres dans une application Flex. Ces deux nombres seront ensuite envoyés à une fonction présente dans la page HTML chargée d’en effectuer la somme. Dans un second temps, ce travail sera délégué à l’application Flex qui recevra en paramètres les données saisies dans la page HTML.
De l’application Flex vers le conteneur web Comme nous venons de le préciser, l’addition des deux nombres sera effectuée par une fonction JavaScript de la page contenant notre application Flex. La première chose à faire est donc de créer l’application et d’étudier comment il est possible d’appeler cette fonction. Création du projet Flex
Pour commencer, créez un nouveau projet Flex que vous nommerez JsFlex. Ajoutez ensuite les lignes de code suivantes à ce projet :
=Flex3 FM.book Page 307 Mardi, 2. décembre 2008 3:32 15
Interagir avec le conteneur web CHAPITRE 16
307
La première étape consiste à importer la classe ExternalInterface du package flash.external qui va nous permettre de communiquer avec la page HTML. Nous déclarons ensuite la procédure calculJavascript dont le principe est le suivant : si une communication peut être établie avec la page HTML, nous faisons alors appel à la procédure JavaScript nommée calculerSomme() en prenant soin de lui passer en paramètres les deux nombres A et B nécessaires à sa bonne exécution. Vient ensuite l’écriture de la description de l’interface graphique qui se résume à l’implémentation d’un composant Panel contenant deux zones de saisie ainsi que les libellés de ces dernières au sein d’un formulaire. Enfin, le bouton btnCalculer est inséré afin de permettre l’appel de la procédure calculerSomme lorsque l’utilisateur clique dessus. Pour tester le projet, il convient tout d’abord d’exporter l’application Flex vers une version de déploiement située dans le répertoire bin-release du projet : 1. Effectuez un clic droit sur le nom du projet et sélectionnez Export dans le menu contextuel qui s’affiche alors. 2. Choisissez ensuite Release Build et poursuivez en acceptant les options par défaut. Nous ne nous étendrons pas d’avantage sur la création de la version de déploiement du projet à l’aide de Flex Builder. Pour plus de renseignements à ce sujet, reportez-vous au chapitre 18 de cet ouvrage. Si tout s’est déroulé correctement, vous devriez être en possession d’un fichier SWF nommé JsFlex.swf et situé dans le répertoire bin-release de votre projet. Nous pouvons à présent nous consacrer à la réalisation du fichier HTML qui servira de conteneur à notre application et hébergera la fonction JavaScript qu’il nous faudra également développer. Création de la page HTML
Nous allons à présent créer un nouveau fichier HTML dans le répertoire bin-release de notre projet que nous nommerons index.html. Pour ce faire, il suffit d’effectuer un clic droit sur le répertoire bin-release, de sélectionner New>File et de spécifier le nom du fichier HTML à créer, soit index.html. Une fois cela fait, passons à l’écriture du conteneur :
=Flex3 FM.book Page 308 Mardi, 2. décembre 2008 3:32 15
308
Comprendre Flex 3 PARTIE I
Calcul de sommes function calculerSomme(a,b) { var nombreA = new Number(a); var nombreB = new Number(b); var total = a+b; document.getElementById("id_total").setAttribute("value",total); }
Application Flex -> Conteneur web Somme des deux nombres :
Notre fichier est constitué de la procédure JavaScript calculerSomme, dont le rôle est de récupérer les deux nombres passés en paramètres, d’en effectuer la somme et d’afficher le résultat dans la zone de texte id_total. Soulignons également la présence de la balise , qui contient notre application. Tout semble à présent fonctionnel. Pour nous en assurer, il suffit d’appeler la page du conteneur HTML via son URL, par exemple http://localhost/FLEX_3/JsFlex/bin-release/. La figure 16-3 illustre le résultat obtenu. Conseil Notez que cette URL doit être adaptée à votre configuration. Pour cet exemple, FLEX_3 correspond à notre espace de travail Flex Builder et JsFlex représente le nom du projet.
Nous allons à présent voir comment réaliser l’opération inverse, c’est-à-dire appeler une fonction ActionScript à partir du conteneur web.
=Flex3 FM.book Page 309 Mardi, 2. décembre 2008 3:32 15
Interagir avec le conteneur web CHAPITRE 16
309
Figure 16-3
Interaction entre l’application Flex et le conteneur web
Du conteneur web vers l’application Flex Nous allons quelque peu modifier notre fichier HTML en lui ajoutant un formulaire, deux zones de saisie, une procédure JavaScript faisant appel à une procédure ActionScript de notre application Flex, et un bouton permettant de déclencher l’appel à cette procédure. Calcul de somme ! function calculerSomme(a,b) { var nombreA = new Number(a); var nombreB = new Number(b); var total = a+b; ‰document.getElementById("id_total").setAttribute("value",total); }
=Flex3 FM.book Page 310 Mardi, 2. décembre 2008 3:32 15
310
Comprendre Flex 3 PARTIE I
function appelProcedureFlex() { var nombreA = parseInt(document.getElementById("nb_a") ➥.getAttribute("value")); var nombreB = parseInt(document.getElementById("nb_b") ➥.getAttribute("value")); document.getElementById("fichierSWF").calculerSomme(nombreA,nombreB); }
Application Flex -> Conteneur web Somme des deux nombres : Nombre A : Nombre B :
En observant la procédure appelProcedureFlex, nous remarquons que la procédure ActionScript permettant de réaliser la somme des deux nombres est appelée via le nom du conteneur SWF qui la contient, soit fichierSWF.calculerSomme(nombreA,nombreB);. Formatage Les paramètres envoyés à la procédure ActionScript doivent être formatés, afin que celle-ci puisse les considérer comme des entiers et en réaliser la somme.
Nous pouvons à présent passer à l’écriture de la procédure ActionScript contenue dans notre application Flex : CONTENEUR WEB --import flash.external.ExternalInterface; public function calculJavascript():void{ if (ExternalInterface.available) { var fonctionJavascript:String = "calculerSomme" var s:String = ExternalInterface.call(fonctionJavascript, ➥Number(txt_a.text), Number(txt_b.text)); } } // Création d’un alias pour la procédure de calcul public function aliasProcedure():void { ExternalInterface.addCallback("calculerSomme",calculActionScript); } // Procédure de calcul public function calculActionScript(a:Number, b:Number):void{ var somme:Number = a + b txt_somme.text = String(somme); } ]]> ‰
311
=Flex3 FM.book Page 312 Mardi, 2. décembre 2008 3:32 15
312
Comprendre Flex 3 PARTIE I
L’appel à la procédure de calcul est réalisé à partir d’un alias qui lui est attribué. Ainsi, lorsque nous faisons appel à la procédure caculerSomme dans notre fichier HTML, nous appelons en réalité la procédure ActionScript calculActionScript. Pour créer un alias, nous utilisons la méthode addCallBack de la classe ExternalInterface, soit ExternalInterface .addCallback("calculerSomme",calculActionScript);. Pour que cet alias soit reconnu et utilisable, il ne faut pas oublier de l’initialiser lors de la création de l’application. Cette initialisation est réalisée par un appel à la procédure aliasProcedure dès la fin de la création de l’application : creationComplete="aliasProcedure()". Vient ensuite la création de la procédure de calcul et la mise en place d’une zone de texte chargée de contenir le résultat obtenu. Pour cela, nous vous laissons le soin d’analyser la procédure calculActionScript et le code MXML ajouté en fin de fichier, dont le contenu vous est maintenant familier.
Figure 16-4
Interaction entre le conteneur web et l’application Flex
=Flex3 FM.book Page 313 Mardi, 2. décembre 2008 3:32 15
Interagir avec le conteneur web CHAPITRE 16
313
La dernière étape va consister à créer une nouvelle version de déploiement comme nous l’avons fait pour la première version de ce projet. Une fois cette étape terminée, ouvrez une nouvelle fenêtre dans votre navigateur (afin d’éviter tout problème de cache) et saisissez l’URL de la page HTML du projet dans la barre d’adresse (figure 16-4). Nous venons de voir comment il est possible d’interagir avec une application Flex via l’utilisation de la classe ExternalInterface. Nous allons à présent étudier une autre méthode consistant à utiliser la bibliothèque Flex-Ajax Bridge.
La bibliothèque Flex-Ajax Bridge Flex-Ajax Bridge est une bibliothèque qui permet de se passer de la classe External Interface pour communiquer depuis le conteneur HTML vers l’application Flex. Nous allons voir que son implémentation est assez simple et offre de nombreuses possibilités : accès aux composants pour en modifier les propriétés, accès à l’ensemble des procédures…
Ajout de la bibliothèque à un projet Pour ajouter la bibliothèque Flex-Ajax Bridge à notre projet, il suffit d’effectuer un clic droit sur le nom de ce dernier et de sélectionner Create Ajax Bridge. Une fenêtre apparaît alors, dans laquelle il suffit d’accepter les options par défaut implémentant les fonctionnalités Flex-Ajax Bridge dans le répertoire src du projet. Si nous nous plaçons ensuite dans le répertoire src du projet, nous notons la présence d’un nouveau répertoire nommé bridge et contenant un fichier ActionScript (FABridge.as) dont le rôle est délivrer les procédures et les fonctions nécessaires à l’implémentation de la bibliothèque Flex-Ajax Bridge. Analysons à présent le fichier MXML de notre application :
Comme nous l’avons vu au chapitre 10 consacré à la création de composants personnalisés, l’importation d’un composant est réalisée à l’aide de la spécification d’un nouvel espace de noms XML. Cet espace de noms est chargé de pointer vers les classes nécessaires à l’utilisation du composant. Pour utiliser les fonctionnalités de Flex-Ajax Bridge au sein d’une application, il convient de procéder de la même manière en définissant un nouvel espace de noms XML (ns1) faisant appel aux classes contenues dans le fichier FABridge.as.
Utilisation de la bibliothèque Reprenons l’exemple de la procédure de calcul consistant à saisir les valeurs dans le conteneur et à déléguer le calcul à l’application Flex. Le fichier MXML correspondant est le suivant :
=Flex3 FM.book Page 314 Mardi, 2. décembre 2008 3:32 15
314
Comprendre Flex 3 PARTIE I
Jusque là, rien de bien nouveau si ce n’est la disparition de la classe ExternalInterface et de la procédure de création d’alias. La plupart des changements ont été effectués dans le fichier index.html : Calcul de sommes function calculerActionscript(){ var nombreA = parseInt(document.getElementById("nb_a").value); var nombreB = parseInt(document.getElementById("nb_b").value); var instanceFlex = FABridge.pontAjax.root(); instanceFlex.calculActionScript(nombreA,nombreB); }
=Flex3 FM.book Page 315 Mardi, 2. décembre 2008 3:32 15
Interagir avec le conteneur web CHAPITRE 16
315
Flex-Ajax Bridge Nombre A : Nombre B : Calculer
Pour que Flex-Ajax Bridge fonctionne correctement, nous devons faire appel au fichier FABridge.js contenant l’ensemble des procédures capables de communiquer avec l’application Flex. Ce fichier se trouve dans le répertoire frameworks\javascript\fabridge\src\ bridge du SDK de Flex 3 et doit être copié à l’endroit où se trouve la page index.html. Nous reviendrons plus tard sur la phase de déploiement du projet. Observons à présent la balise permettant d’inclure notre application dans le conteneur HTML. Elle contient le paramètre FlashVars qui va nous permettre de faire le lien avec l’application Flex et les procédures s’y trouvant : bridgeName=pontAjax
Par cette instruction, nous définissons un nom pour notre connexion afin que celle-ci puisse être identifiée. Vient ensuite l’appel de la procédure en elle-même à l’aide de l’instruction suivante : var instanceFlex = FABridge.pontAjax.root(); instanceFlex.calculActionScript(nombreA,nombreB);
Grâce à ce code, nous créons une variable instanceFlex chargée de stocker l’instance de notre application que nous pouvons récupérer grâce à la connexion que nous avons définie précédemment. À partir de cette instance, il nous est alors possible d’invoquer une fonction, une procédure ou encore un composant de notre application Flex.
Déploiement et test Comme nous en avons maintenant l’habitude, il convient tout d’abord de réaliser une version de déploiement du projet Flex. La deuxième étape va ensuite consister à copier le répertoire bridge du kit Flex SDK et son fichier FABridge.js dans le répertoire bin-release de notre projet. Pour ce faire, rendezvous dans le répertoire d’installation de Flex Builder 3 et parcourez l’arborescence pour
=Flex3 FM.book Page 316 Mardi, 2. décembre 2008 3:32 15
316
Comprendre Flex 3 PARTIE I
retrouver le répertoire devant être copié. Si cette arborescence ne correspond pas à votre installation, n’hésitez pas à utiliser les outils de recherche de votre système d’exploitation à partir du répertoire d’installation de Flex Builder. {répertoire d’installation de Flex Builder 3}\sdks\3.0.0\frameworks\javascript\ ➥fabridge\src\bridge
La dernière étape va tout simplement consister à ouvrir la page index.html dans une nouvelle fenêtre de votre navigateur à l’aide de son URL afin de s’assurer de la bonne exécution de la procédure calculActionScript (figure 16-5).
Figure 16-5
Utilisation de Flex-Ajax Bridge
Il est donc plus simple d’utiliser la bibliothèque Flex-Ajax Bridge que la classe External Interface. En effet, là où nous devions créer des alias de procédures, il nous suffit d’importer la bibliothèque qui se charge de réaliser ce travail pour nous, ce qui représente un gain de temps non négligeable. Notez également que la bibliothèque Flex-Ajax Bridge permet de manipuler l’ensemble des propriétés des composants de l’application Flex ce qui peut s’avérer fort utile dans certaines situations (par exemple, le changement de couleur des zones de texte…).
=Flex3 FM.book Page 317 Mardi, 2. décembre 2008 3:32 15
Interagir avec le conteneur web CHAPITRE 16
317
//* //* Modification du texte du champ txt_somme à partir de Javascript /* with(FABridge.pontAjax.root()){ // Récupération du composant getNomDuComposant() var txt = getTxt_somme(); // Affectation de la nouvelle valeur setText() txt.setText("Bonjour!"); }
En résumé Au cours de ce chapitre, nous avons qu’une application Flex peut être totalement intégrée à une application web statique et communiquer avec elle. Nous vous avons également présenté les différentes méthodes permettant de réaliser cette communication non seulement de l’application Flex vers le conteneur web mais également du conteneur vers l’application Flex. Nous avons aussi étudié la notion de deep linking qui apporte une fonctionnalité non négligeable aux applications, lesquelles sont désormais comparables aux applications web classiques en termes de navigation. Vous êtes désormais capable d’implémenter des fonctionnalités riches au sein d’applications web statiques existantes, ce qui vous permet d’étendre leurs aspects graphiques et fonctionnels. Dans le chapitre suivant, nous allons aborder un tout autre domaine : le débogage d’une application Flex.
=Flex3 FM.book Page 318 Mardi, 2. décembre 2008 3:32 15
=Flex3 FM.book Page 319 Mardi, 2. décembre 2008 3:32 15
17 Déboguer une application Dans ce chapitre nous allons voir comment déboguer des applications à l’aide du débogueur de Flex Builder. Pour plus de clarté, nous aborderons ce point à travers un exemple comportant volontairement un certain nombre d’erreurs que nous corrigerons au fur et à mesure afin de découvrir les subtilités du débogueur.
Création de l’application d’étude Nous allons développer une application simple consistant à calculer l’indice de masse corporelle (IMC) d’un patient. L’IMC est obtenu en effectuant le rapport du poids du patient en kilogrammes par sa taille en mètres élevée au carré, soit : IMC = masse/taille2. Pour cela, nous allons tout d’abord créer l’interface graphique (figure 17-1) :
=Flex3 FM.book Page 320 Mardi, 2. décembre 2008 3:32 15
320
Comprendre Flex 3 PARTIE I
Figure 17-1
Interface graphique de l’application
L’interface créée, nous allons implémenter la procédure de calcul. Pour ce faire, nous avons choisi de la créer dans un fichier ActionScript, dont l’appel s’effectuera dans le fichier MXML de l’application. Ce fichier ActionScript s’intitulera IMC.as et sera situé dans le répertoire src de l’application. Pour le créer, il suffit d’effectuer un clic droit sur le répertoire src et de sélectionner New>ActionScript File dans le menu contextuel qui apparaît alors. Lorsque l’assistant vous demande le nom du fichier à créer, indiquez IMC.as. Une fois le fichier créé, saisissez les lignes de code suivantes : public function calculerIMC() { var taille:Number = Number(taille_txt.text); var poids:Number = Number(poids_txt.text); var imc:Number = (poids)/(taille * taille) imc_txt.text = String(imc); } Calculer la valeur d’un nombre à la puissance n Dans notre exemple, pour élever la taille au carré, nous l’avons multipliée par elle-même. Il est également possible d’utiliser la méthode pow(nombre,puissance) de la classe Math comme suit : var imc:Number = (poids)/ (Math.pow(taille,2))
Nous devons ensuite lier ce fichier ActionScript à notre application et définir l’appel de la procédure calculerIMC() qui sera exécutée lors du clic sur le bouton btn_calculer :
Notre application est à présent terminée, concentrons-nous sur son exécution et son débogage.
=Flex3 FM.book Page 321 Mardi, 2. décembre 2008 3:32 15
Déboguer une application CHAPITRE 17
321
Identifier et corriger les erreurs grâce à la vue Problems Avant d’exécuter l’application, nous vous invitons à consulter les informations présentes dans la vue Problems située en bas de votre écran. Cette vue regroupe les différents avertissements et erreurs produits par la compilation de notre code. Il est important de souligner qu’à la différence d’une erreur (error), un avertissement (warning) ne bloque pas l’exécution de l’application, mais il est tout de même souhaitable de le corriger. Nous constatons donc dans la figure 17-2 la présence de l’avertissement suivant :
Figure 17-2
Affichage des avertissements
qui nous indique que Flex est incapable de déterminer si calculerIMC() est une procédure ou une fonction. Il convient donc de corriger cet avertissement en ajoutant la mention :void : public function calculerIMC():void Procédure et fonction Une procédure permet d’effectuer un traitement mais ne retourne pas de valeur. Nous spécifions qu’il s’agit d’une procédure via la mention :void. Public function maProcedure():void{ } Dans le cas d’une fonction, nous devons préciser le type de la valeur renvoyée par celle-ci : Public function maFonction():int{ var entier:int = 1; return entier }
La vue Problems est l’outil principal permettant de déboguer une application. En effet, grâce à celle-ci, la majeure partie des erreurs peuvent être résolues sans qu’il soit nécessaire de réaliser un débogage avancé.
Le débogage avancé Pour illustrer ce point, nous allons mettre en défaut notre application en provoquant une erreur d’exécution. Pour ce faire, exécutons l’application et saisissons les valeurs 0 pour
=Flex3 FM.book Page 322 Mardi, 2. décembre 2008 3:32 15
322
Comprendre Flex 3 PARTIE I
Taille et 69 pour Poids. Cliquons ensuite sur le bouton Calculer afin d’observer le résultat obtenu dans la zone de texte prévue à cet effet. Nous constatons alors qu’au lieu de nous présenter l’indice de masse corporel attendu, la zone de réponse indique infinity. Que s’est-il passé ? Il n’est pas évident de déterminer avec précision le moment où l’erreur s’est produite. Nous allons donc stopper l’exécution de l’application lors de la phase de calcul afin d’y voir plus clair.
Utilisation des points d’arrêt Pour stopper l’exécution d’une application, il suffit de placer un point d’arrêt dans son code. Vous pourrez ainsi exécuter l’application pas à pas et afin de détecter les éventuelles erreurs présentes. Dans notre exemple, nous savons que le problème vient de la procédure calculerIMC(). Il serait donc judicieux de stopper l’application à cet endroit afin d’analyser le fonctionnement de cette procédure. Pour ce faire, il convient de se placer dans le fichier MXML et, au regard de la ligne décrivant le bouton, d’effectuer un clic droit dans la marge et de sélectionner Toogle breakpoint (figure 17-3).
Figure 17-3
Positionnement d’un point d’arrêt
Notre point d’arrêt est maintenant correctement positionné. Pour l’exploiter, nous devons exécuter l’application en mode Debug en sélectionnant le menu Run>Debug (vous pouvez également appuyer sur la touche F11). À présent, ressaisissons les mêmes valeurs que précédemment (0 pour la taille et 69 pour le poids) et cliquons sur le bouton Valider. Une fenêtre s’ouvre alors dans Flex Builder nous demandant de confirmer l’ouverture de la perspective de débogage. Exécution pas à pas
La meilleure façon de déboguer l’application consiste à vérifier le bon déroulement de chaque procédure et fonction. Pour cela, la perspective de débogage met à notre disposition deux icônes : • L’icône Step into permet d’entrer dans la procédure afin d’observer le déroulement de chaque traitement.
=Flex3 FM.book Page 323 Mardi, 2. décembre 2008 3:32 15
Déboguer une application CHAPITRE 17
• L’icône Step over
323
permet de poursuivre le traitement sans entrer dans la procédure.
Pour illustrer les actions provoquées par l’utilisation de ces icônes, nous vous invitons à exécuter les opérations suivantes : 1. Vérifiez que vous avez bien exécuté l’application en mode Debug et accepté l’ouverture de la perspective de débogage. Appuyez ensuite sur touche F5 (raccourci clavier de Step into) pour entrer dans la procédure. La procédure calculerIMC() s’affiche alors au milieu de l’écran (figure 17-4).
Figure 17-4
Entrée dans la procédure calculerIMC()
2. Réitérez cette opération. Le curseur de débogage pointe à présent sur la variable taille. 3. Si vous appuyez à nouveau sur la touche F5, vous entrez cette fois dans le détail de la classe TextInput et pouvez visualiser le code de la méthode get Text() du composant taille_txt. 4. Appuyez ensuite trois fois sur la touche F5 afin de placer le curseur de débogage sur la variable poids. 5. À présent, appuyez sur la touche F6 (raccourci clavier de Step over). Vous constatez alors que vous n’êtes pas entré dans le détail de la méthode Text() du composant poids_txt et que vous êtes directement passé à la variable imc. 6. Pour stopper le débogage, cliquez sur l’icône représentant un petit carré rouge à côté des icônes Step into et Step over. 7. Enfin, pour revenir à la perspective de développement, sélectionnez le menu Windows>Perspective de Flex Builder et choisissez Flex Developpement. Au fur et à mesure que vous naviguez dans le code, observez la vue Variables de la perspective de débogage (figure 17-5). Grâce à cette vue, nous pouvons visualiser les valeurs prises par l’ensemble de nos variables. Après avoir calculé l’indice de masse corporelle, la valeur de la variable imc est Infinity.
=Flex3 FM.book Page 324 Mardi, 2. décembre 2008 3:32 15
324
Comprendre Flex 3 PARTIE I
Figure 17-5
La vue Variables
Étant donné que les variables taille et poids possèdent toutes deux une valeur, le problème ne peut donc provenir que de l’affectation de la variable imc. D’après les valeurs saisies pour la taille (0) et le poids (69), le calcul de l’IMC équivaut à : IMC = 69 / 0 × 0. La division par zéro étant impossible, la valeur Infinity est renvoyée. Le problème est donc identifié. Pour le résoudre, il convient d’ajouter un test de vérification de la saisie utilisateur comme suit : var taille:int = int(taille_txt.text); var poids:Number = Number(poids_txt.text); if (taille != 0) { var imc:Number = (poids)/(taille * taille) imc_txt.text = String(imc); } else { var msg_erreur:String = "Ne peut être calculé"; imc_txt.text = msg_erreur; }
Gérer les points d’arrêt
La gestion des points d’arrêt s’effectue dans la vue Breakpoints, située à droite de la vue Variables. En effectuant un clic droit sur un ou plusieurs points d’arrêt affichés dans cette vue, il est possible : • d’activer/de désactiver les points d’arrêt (Enable/Disable) ; • de supprimer les points d’arrêt (Remove/Remove All) ; • de se positionner dans le fichier où se trouve les points d’arrêt (Go to file) ; • de passer outre les points d’arrêt (Skip All Breakpoints). Notre application est à présent déboguée et fonctionnelle. Néanmoins, nous sommes loin d’avoir exploité toutes les fonctionnalités du débogueur de Flex Builder.
=Flex3 FM.book Page 325 Mardi, 2. décembre 2008 3:32 15
Déboguer une application CHAPITRE 17
325
Modifier la valeur des variables En phase de test, il peut s’avérer intéressant de modifier la valeur des variables afin de vérifier le comportement de la procédure en fonction de ces valeurs. Pour cela, il convient de se placer dans la vue Variables et de double-cliquer sur la valeur de la variable à modifier. Il suffit alors de saisir la valeur souhaitée, à condition que celle-ci soit initialisée.
Tracer un parcours Placer un point d’arrêt n’est réellement nécessaire que si un problème survient dans un traitement et qu’une analyse détaillée de ce traitement s’impose. Pour les cas plus simples (vérification de passage dans un test ou une boucle, etc.), la solution consistant à tracer le parcours du traitement peut être envisagée par l’emploi de la méthode trace() : public function calculerIMC():void { var taille:int = int(taille_txt.text); trace ('Taille : ' + taille); var poids:Number = Number(poids_txt.text); trace ('Poids : '+poids); trace ('Debut de test'); if (taille != 0) { trace ('Cas : Taille !=0'); var imc:Number = (poids)/(taille * taille) imc_txt.text = String(imc); } else { trace ('Cas : Taille =0 ->> ERREUR'); var msg_erreur:String = "Ne peut être calculé"; imc_txt.text = msg_erreur; } }
Pour bien comprendre l’utilité de cette méthode, nous allons exécuter l’application en mode Debug et visualiser le résultat obtenu dans la vue Console. Nous y trouvons les lignes suivantes : Taille : 0 Poids : 69 Debut de test Cas : Taille =0 ->> ERREUR
Nous pouvons alors en déduire que le traitement s’est déroulé correctement, car l’ensemble des traces correspondantes découlent des valeurs saisies. En effet, comme nous avons
=Flex3 FM.book Page 326 Mardi, 2. décembre 2008 3:32 15
326
Comprendre Flex 3 PARTIE I
saisi la valeur 0 pour la taille, le test if (taille != 0) est faux. Ceci entraîne alors l’affichage de la trace ‘Cas : Taille = 0 ->>Erreur’. Avec cette manipulation, nous vérifions donc que, lorsque la taille est égale à zéro, le traitement de gestion d’erreur s’exécute convenablement.
Sélectionner les variables à surveiller Pour sélectionner certaines variables, il suffit de cliquer dessus avec le bouton droit et de choisir Watch nom de la variable. La variable sélectionnée s’affiche alors dans la vue Expressions (figure 17-6) de la perspective de débogage, nous permettant ainsi d’étudier son comportement, tout comme nous pourrions le faire dans la vue Variables. Mais nous allons voir que cette vue offre une fonctionnalité supplémentaire permettant de manipuler les données en modifiant leur expression.
Figure 17-6
Sélection de la variable taille dans la vue Expressions
La vue Expressions permet de manipuler la valeur des variables en modifiant leur opération. Prenons un exemple : nous souhaitons modifier la valeur de la variable taille afin qu’elle soit égale à deux fois sa valeur (taille = taille ¥ 2). Pour arriver à ce résultat, il suffit de cliquer avec le bouton droit sur la variable taille affichée dans la vue Expressions et de sélectionner Edit Watch Expression. Une nouvelle fenêtre s’ouvre alors, dans laquelle nous pouvons saisir le traitement souhaité (figure 17-7).
Figure 17-7
Définition d’une expression pour une variable donnée
=Flex3 FM.book Page 327 Mardi, 2. décembre 2008 3:32 15
Déboguer une application CHAPITRE 17
327
À présent, si nous exécutons l’application en mode Debug et que nous observons la variable taille dans la vue Expressions, nous remarquons que sa valeur a été révaluée en fonction de l’opération précédemment saisie (figure 17-8).
Figure 17-8
Révaluation de la valeur saisie en fonction de l’expression
En résumé Dans ce chapitre, nous avons présenté le fonctionnement du débogueur de Flex Builder, application permettant d’analyser votre code de plusieurs façons différentes. Vous pourrez ainsi observer le comportement de vos fonctions et de vos procédures tout en ayant la possibilité d’interagir avec les données stockées dans les variables. Le débogueur de Flex constitue un outil très performant qui vous sera certainement d’une aide non négligeable si vous rencontrez des difficultés ou si votre code présente des erreurs. Dans le chapitre suivant, nous allons nous pencher sur une autre nouveauté de Flex Builder 3 : le profiling d’application. Ceci consiste à analyser l’ensemble de ses processus afin de détecter les procédures gourmandes en mémoire ou en temps d’exécution. Nous verrons également les bonnes pratiques permettant d’optimiser l’exécution d’une application Flex.
=Flex3 FM.book Page 328 Mardi, 2. décembre 2008 3:32 15
=Flex3 FM.book Page 329 Mardi, 2. décembre 2008 3:32 15
18 Analyser les performances et optimiser l’application Autre grande nouveauté de Flex Builder 3, la fonction d’analyse des performances était attendue avec impatience par les développeurs. Réservé aux utilisateurs de la version professionnelle de Flex Builder 3, cet outil permet d’analyser les moindres détails de vos applications afin d’en améliorer les performances lors de l’exécution. Nous verrons également quelques bonnes pratiques à observer afin d’optimiser l’exécution de vos applications Flex avant de les déployer.
Présentation de l’analyseur La version professionnelle de Flex Builder 3 met à notre disposition un outil d’analyse avancé concernant l’exécution des applications, le Profiler. Il nous permettra en effet d’analyser les performances applicatives (taux de mémoire occupée, temps processeur…) et de contrôler les ressources mémoire utilisées en spécifiant le nombre et la taille des objets instanciés, le nombre de procédures exécutées ainsi que leur temps d’exécution. Procéder à l’analyse d’une application permet d’identifier et de comprendre les éléments suivants : • La redondance d’appel des procédures – L’analyseur permet de déterminer combien de fois la procédure est appelée, information qui vous permettra d’optimiser les traitements. • Le temps d’exécution d’une procédure – Si le temps d’exécution d’une procédure est important, nous pourrons nous en rendre compte et procéder à son optimisation.
=Flex3 FM.book Page 330 Mardi, 2. décembre 2008 3:32 15
330
Comprendre Flex 3 PARTIE I
• Le nombre d’objets instanciés – Grâce à cette fonctionnalité, vous découvrirez qu’un objet est parfois instancié plusieurs fois alors que cela n’est pas nécessaire. Vous pourrez ainsi modifier le code afin de corriger cela. • La taille des objets – En complément de la fonctionnalité précédente, vous pourrez également identifier la taille des objets instanciés afin de visualiser leur occupation mémoire. • Le ramasse-miettes (garbage collector) – Il peut arriver que certains objets devenus obsolètes, ou qui ne sont plus utilisés, soient toujours présents en mémoire. Grâce au Profiler, vous pourrez les identifier et ainsi implémenter les méthodes de destruction d’objet adéquates. Le fonctionnement du Profiler repose sur l’utilisation d’un port de communication permettant d’établir une connexion avec le Flash Player et l’application en cours d’exécution. Une fois la connexion établie, son travail consiste à réaliser à intervalles réguliers des captures des actions réalisées par l’application.
L’analyseur en action Étudions à présent son utilisation à travers un exemple concret. Pour cela, nous vous invitons à créer un nouveau projet Flex que vous nommerez Profiler et à y insérer les lignes de code suivantes :
Comme vous pouvez le constater, il s’agit d’une petite application, contenant un bouton qui déclenche l’exécution de la procédure afficherMessage(), affichant un message d’alerte, lorsqu’on clique dessus.
=Flex3 FM.book Page 331 Mardi, 2. décembre 2008 3:32 15
Analyser les performances et optimiser l’application CHAPITRE 18
331
Pare-feu Dans la mesure où la communication s’effectue via un port spécifique du Flash Player, il se peut qu’elle soit bloquée par votre pare-feu. Nous vous conseillons donc de le désactiver temporairement ou d’autoriser l’accès au port 9999.
Pour lancer l’analyse de notre application, sélectionnez le menu Run>Profile. Une nouvelle fenêtre apparaît alors, nous demandant l’autorisation d’ouvrir la perspective d’analyse. Vous n’avez alors qu’à confirmer, ce qui déclenche l’exécution de l’application et l’ouverture de la perspective d’analyse. Avant de pouvoir utiliser cette perspective, vous devez indiquer quel type d’analyse vous souhaitez effectuer. Pour une analyse complète, conservez les options cochées par défaut : • analyse de la mémoire (Enable memory profiling) ; • analyse du temps d’exécution des processus (Enable performance profiling).
Analyse des performances Nous allons à présent analyser la performance de la procédure afficherMessage(). Pour cela, placez-vous sur l’interface de l’application et cliquez sur le bouton qu’elle contient. Le message d’alerte s’affiche correctement à l’écran. Ne le fermez pas encore et ouvrez la perspective d’analyse de Flex Builder 3. Nous allons procéder à une capture des événements. Pour cela, placez-vous dans la vue Profile située en haut à gauche de l’écran et positionnez-vous sur la ligne commençant par la mention [Running]. Dans la barre d’outils, cliquez ensuite sur l’icône Capture Performance Profile représentée par une paire de lunettes et une horloge . La vue Performance Profile s’ouvre alors, affichant un tableau de données concernant l’ensemble des méthodes et des procédures exécutées (figure 18-1). Nous remarquons que l’une des lignes du tableau concerne l’appel à la procédure profiler .afficherMessage. Le tableau 18-1 présente les informations obtenues en analysant l’exécution de cette procédure, celles-ci pouvant être différentes en fonction des performances de votre ordinateur. Pour entrer dans le détail de son exécution, il suffit de double-cliquer sur la ligne du tableau affichée dans la vue Method Statistic (figure 18-2), afin de voir les statistiques complètes concernant cette procédure. La vue Performance Profile vous permettra donc d’identifier les méthodes pouvant éventuellement poser problème lors de l’exécution de l’application grâce à une analyse attentive de leur temps d’exécution.
=Flex3 FM.book Page 332 Mardi, 2. décembre 2008 3:32 15
332
Comprendre Flex 3 PARTIE I
Figure 18-1
La vue Performance Profile
Tableau 18-1
Tableau d’analyse d’exécution de la procédure profiler.afficherMessage
Information
Valeur
Analyse
Method
Profiler.afficherMessage
--
--
Notre procédure n’appartient à aucun package.
1
La procédure n’a été exécutée qu’une seule fois.
12 (0.78%)
Temps d’exécution total : 12 millisecondes.
0
La procédure avait déjà été exécutée lors de la capture.
12
--
0
--
Nom des méthodes et des procédures
Package Nom du package d’appartenance
Calls Nombre d’appels d’exécution de la procédure
Cumulative time Somme des temps d’exécution de la procédure et des sous-procédures associées
Self time Temps d’exécution de la procédure au moment de la capture
Avg. Cumulative time Moyenne des temps d’exécution
Avg Self Time Moyenne des temps d’exécution au moment de la capture
=Flex3 FM.book Page 333 Mardi, 2. décembre 2008 3:32 15
Analyser les performances et optimiser l’application CHAPITRE 18
333
Figure 18-2
Analyse des statistiques
Analyse de l’occupation mémoire Attardons nous à présent sur l’analyse de l’occupation de la mémoire de notre application. Pour cela, comme précédemment, nous devons procéder à une capture d’événement en cliquant cette fois-ci sur l’icône Take Memory Snapshot après nous être positionnés sur la ligne commençant par la mention [Running]. La vue Memory Snapshot s’ouvre alors, nous permettant d’analyser la part d’occupation de la mémoire de chaque processus. Pour ce faire, retournons dans notre application, en cours d’exécution dans le navigateur, et appelons la procédure afficherMessage() en cliquant sur le bouton Afficher, puis retournons dans la perspective d’analyse.
Figure 18-3
Analyse de la mémoire
Si nous analysons les résultats obtenus (figure 18-3), nous remarquons que l’élément le plus gourmand en ressources mémoire est l’application elle-même (1 572 octets). En double-cliquant sur la ligne profiler, nous visualisons le rapport détaillé le concernant. Nous pouvons alors voir l’ensemble des objets instanciés et leur taux d’occupation de la mémoire, qui expliquent la part importante d’occupation de la mémoire par l’application : nous avons 32 objets instanciés (figure 18-4).
=Flex3 FM.book Page 334 Mardi, 2. décembre 2008 3:32 15
334
Comprendre Flex 3 PARTIE I
Figure 18-4
Analyse des objets instanciés
Méthodes d’analyse Dans cette section, nous allons voir les méthodes d’analyse les plus fréquemment utilisées. Chacune est détaillée en un certain nombre d’étapes que nous vous invitons à suivre.
Détecter les allocations mémoire inutiles Pour commencer, nous allons vous présenter la méthode permettant de détecter les allocations de mémoire inutiles. Cela est souvent dû à la présence d’objets toujours instanciés malgré le travail réalisé par le ramasse-miette : 1. Démarrez une session d’analyse en sélectionnant l’option Memory Profiling (voir la section « L’analyseur en action »). 2. Créez deux captures de mémoire à deux moments différents. En cliquant une première fois sur l’icône et en réitérant cette action quelques secondes à quelques minutes plus tard, selon l’analyse souhaitée.
=Flex3 FM.book Page 335 Mardi, 2. décembre 2008 3:32 15
Analyser les performances et optimiser l’application CHAPITRE 18
335
3. Sélectionnez les deux captures effectuées et cliquez sur l’icône d’analyse permettant de détecter les objets chargés en mémoire . 4. Une nouvelle fenêtre s’ouvre alors dans laquelle vous pouvez visualiser l’ensemble des méthodes et des objets toujours instanciés malgré la présence du ramasse-miettes. La solution consistera donc à implémenter les méthodes de destruction d’objet pour les objets concernés via la méthode delete : package com.composants { public class ClMaClasse { public function ClMaClasse() { } //Méthode de destruction public function detruitre():void{ delete this; } } }
//Exemple d'utilisation dans un fichier ActionScript : import com.composants.ClMaClasse //Intanciation de la classe public var monObjet:ClMaClasse = new ClMaClasse(); //Destruction de l'objet monObjet.detruitre();
Analyser le temps d’exécution des méthodes « Pourquoi le temps d’exécution de mon application est-il si important ? » Cette question, nous nous la sommes tous posée un jour. Bien souvent, il s’agit d’une procédure demandant un temps de traitement important, mais il nous est parfois difficile de savoir de laquelle il s’agit. Nous allons voir comment, à l’aide d’une méthode simple, il nous est possible de la repérer. 1. Démarrez une session d’analyse en sélectionnant l’option Performance Profiling (voir la section « L’analyseur en action »). 2. Réalisez une capture de performance comme expliqué à la section « Analyse des performances ».
=Flex3 FM.book Page 336 Mardi, 2. décembre 2008 3:32 15
336
Comprendre Flex 3 PARTIE I
3. Dans la vue Performance Profile, vous pouvez organiser les résultats par ordre croissant/ décroissant en cliquant sur les titres des colonnes du tableau de résultat. Ainsi, il sera possible de visualiser rapidement (notamment via la colonne Safe time indiquant le temps d’exécution de la procédure) la méthode ayant un temps d’exécution important pouvant cacher un problème (attente de réponse d’un service web, par exemple).
Déterminer le nombre d’instances d’une classe Cette méthode va permettre de connaître le nombre d’objets instanciés pour une classe donnée. Chaque instanciation de classe donnant naissance à un objet occupant de la mémoire, il convient de détecter le nombre d’instanciations de classes afin de vérifier qu’il correspond à la quantité d’objets utiles à l’application. 1. Démarrez une session d’analyse en sélectionnant l’option Memory Profiling. 2. Réalisez une capture de mémoire comme expliqué à la section « Analyse de l’occupation mémoire ». 3. Dans la vue Memory Snapshot, classez les noms des classes par ordre alphabétique (en cliquant sur le titre de la colonne Class) afin de repérer facilement la classe souhaitée. 4. Le nombre d’instances de la classe recherchée est indiqué par la valeur de la colonne Instances. Si vous remarquez que ce nombre est supérieur à la quantité d’instanciations réalisées par le code de l’application, il se peut qu’il y reste des instanciations inutiles (parfois réalisées lors de phases de test).
Visualiser les allocations d’objets La méthode précédente nous permet de compter le nombre d’objets instanciés. Voyons à présent comment connaître l’occupation mémoire de ceux-ci. 1. Démarrez une session d’analyse en sélectionnant l’option Memory Profiling et en cochant cette fois l’option de visualisation d’allocations d’objets (Generate object allocation stack trace). 2. Réalisez deux captures de mémoire à intervalles séparés, comme nous avons procédé pour la détection d’allocation mémoire. 3. Sélectionnez-les et cliquez sur l’icône View Allocation Trace
.
4. La vue Allocation Trace qui s’ouvre alors présente l’ensemble des allocations. (Vous pouvez les classer par ordre croissant/décroissant en cliquant sur les en-têtes des colonnes). Il existe bien entendu beaucoup d’autres méthodes que vous découvrirez à mesure que vous vous familiariserez avec l’outil d’analyse. À vous ensuite de créer vos propres procédures d’analyse en fonction de vos besoins.
=Flex3 FM.book Page 337 Mardi, 2. décembre 2008 3:32 15
Analyser les performances et optimiser l’application CHAPITRE 18
337
Bonnes pratiques d’optimisation L’optimisation d’une application Flex consiste essentiellement à améliorer son exécution et à réduire son temps d’initialisation sur le poste client. Nous allons voir comment, à partir de quelques bonnes pratiques, il est possible d’optimiser nos applications.
Calculer les performances applicatives Comme nous l’avons vu, le Profiler de la version professionnelle Flex Builder 3 permet de vérifier les performances d’une application. Cependant, ce dernier n’est présent que dans la version professionnelle ; si vous utilisez Flex SDK pour développer vos application ou Flex Builder dans sa version standard, vous ne pourrez donc pas vous en servir. Nous allons toutefois présenter quelques petites astuces qui vous permettront toutefois d’apprécier les performances de vos applications. Calculer le temps d’initialisation
Grâce à la combinaison des méthodes getTimer() et callLater() du package flash.utils, il est possible de calculer le temps d’initialisation d’une application : • getTimer() permet de calculer le temps écoulé en millisecondes depuis l’exécution du Flash Player. • callLater() permet de reporter l’exécution d’une procédure au prochain rafraîchissement de l’écran. Ainsi, en calculant le temps écoulé entre l’exécution de l’application et l’affichage de l’écran principal, nous pouvons déterminer le temps nécessaire à l’initialisation de l’application :
=Flex3 FM.book Page 338 Mardi, 2. décembre 2008 3:32 15
338
Comprendre Flex 3 PARTIE I
L’analyse du résultat de cette méthode peut être riche d’enseignements. Si le temps d’initialisation est trop élevé, cela peut être dû à un chargement trop important d’images ou à une procédure lourde en traitement. Calculer l’occupation de la mémoire
Pour déterminer la taille de la mémoire occupée par le Flash Player, nous disposons de la propriété totalMemory de la classe System. La portion de code suivante permet de déterminer l’occupation de la mémoire après l’initialisation de l’application :
Là encore, l’analyse du résultat permet de tirer une conclusion importante : si le taux d’occupation mémoire est élevé, cela peut allonger le temps d’exécution sur le poste client car la limite mémoire de son environnement peut facilement être atteinte. C’est donc à vous de fixer un taux d’occupation mémoire que l’application ne doit pas dépasser. Pour réussir cela, il convient de respecter quelques règles d’optimisation que nous allons aborder dans la section suivante.
Améliorer l’exécution sur les postes clients Comme nous le savons, une application Flex est exécutée sur le poste client. Pour une meilleure performance d’exécution, il faut que notre application soit correctement configurée et respecte quelques règles de base. Prévenir le dépassement du temps d’initialisation (time out)
Si l’application est téléchargée sur un poste client à faible capacité de traitement, il se peut qu’un message d’erreur apparaisse, avertissant l’utilisateur que le temps d’initialisation
=Flex3 FM.book Page 339 Mardi, 2. décembre 2008 3:32 15
Analyser les performances et optimiser l’application CHAPITRE 18
339
de l’application a été dépassé (60 secondes par défaut). Pour pallier ce problème, il suffit d’augmenter la valeur de la propriété scriptTimeLimit de l’application comme suit :
À cause de la performance croissante des ordinateurs, le temps d’initialisation est rarement dépassé et cette fonction peut ne pas être employée. Cependant, vous pouvez tout de même en faire usage si votre application est susceptible d’être utilisée sur des machines intégrées au sein d’un parc informatique ayant déjà quelques années (nous pensons, par exemple, au parc informatique de certains hôpitaux). Attention au cache du navigateur
Toute application Flex est téléchargée dans le répertoire des fichiers temporaires d’Internet du poste client. Ce répertoire représente le cache du navigateur permettant de diminuer le nombre de requêtes web effectuées. Ainsi, si vous venez de mettre en ligne une nouvelle version de votre application Flex, il est fort probable que les utilisateurs ne puissent en bénéficier et voir les modifications effectuées. En effet, le cache de leur navigateur va détecter que la page contenant l’application a déjà été visitée et va donc afficher celle enregistrée dans le répertoire de stockage au lieu de la recharger. Pour résoudre ce problème, deux solutions s’offrent à nous. La première consiste à vider le cache de chaque poste client (uniquement pour un déploiement sur site local), la seconde à paramétrer la page web contenant l’application Flex. Attention, cette modification est à apporter après compilation. http-equiv=”pragma” content=”no-cache”> Forcer la date d’expiration pour recharger la page --> http-equiv=”EXPIRES” content=” Mon, 22 Jul 2000 11:12:01 GMT”>
Dans cet exemple de code, nous avons spécifié une date antérieure à la date du jour. Le navigateur web va donc en déduire que le fichier présent dans le cache est obsolète et va par conséquent procéder au téléchargement de la dernière version de l’application.
Réduire la taille des fichiers SWF Un fichier SWF de petite taille permet de réduire le temps de téléchargement et d’initialisation de l’application. Cette réduction de taille peut être effectuée en ne prenant que les éléments vitaux à l’exécution de l’application. Désactiver l’option de débogage
Lorsque l’option de débogage est sélectionnée lors de la compilation du projet, les numéros de lignes et les fonctionnalités de débogage sont inclus dans le fichier SWF, ce qui
=Flex3 FM.book Page 340 Mardi, 2. décembre 2008 3:32 15
340
Comprendre Flex 3 PARTIE I
augmente sa taille. Cette option étant sélectionnée par défaut, il nous est possible de la désactiver en modifiant les paramètres de compilation comme suit : mxmlc -debug=false Application.mxml
Soulignons qu’il est impossible de paramétrer cette option dans Flex Builder 3, dans la mesure où l’application contenant toutes les options de débogage est compilée dans le répertoire bin-debug. La version de déploiement destinée aux clients, située quant à elle dans le répertoire bin-release, est ainsi épurée de cette fonctionnalité Compiler en mode Strict
Le fait d’utiliser le mode Strict de compilation implique la vérification de l’utilisation effective de tous les packages et classes importés, ainsi que la vérification de la qualité de votre code. Si vous utilisez Flex Builder 3 pour créer et compiler vos applications, ce mode est automatiquement activé. Pour les autres versions de Flex, voici le code permettant d’activer cette option lors de la compilation : mxmlc -strict=true Application.mxml
Multiplier les fichiers SWF Une dernière méthode pour réduire la taille d’une application consiste à la décomposer en plusieurs petites applications pouvant alors être chargées à l’aide du composant SWFLoader. Cette méthode présente l’avantage de ne charger que la partie applicative nécessaire, ce qui réduit ainsi la taille du fichier applicatif principal. Nous aborderons cette notion plus en détail dans la seconde partie de cet ouvrage consacrée à la mise en pratique.
Améliorer les méthodes de codage Nous allons ici nous pencher sur les éléments auxquels il faudra faire attention lors de la phase de développement de vos applications pour optimiser leur exécution. Instancier les objets
ActionScript est un langage orienté objet. Néanmoins, chaque création d’objet entraîne le stockage de données, ce qui provoque une diminution des performances de l’application. Comme en Java, nous disposons cependant dans Flex d’un ramasse-miettes dont le rôle est de supprimer les objets instanciés non utilisés. Par ailleurs, nous vous invitons à suivre la règle de base suivante : instanciez un objet uniquement si vous en avez besoin. Vous augmenterez ainsi les performances applicatives, car un objet instancié non employé occupe inutilement de la mémoire. « Tracer » avec parcimonie
Comme nous l’avons vu au chapitre 17 consacré au débogage, « tracer » le parcours d’une application à l’aide de la méthode trace() permet de vérifier le bon fonctionnement d’un
=Flex3 FM.book Page 341 Mardi, 2. décembre 2008 3:32 15
Analyser les performances et optimiser l’application CHAPITRE 18
341
processus. Cependant, chaque trace sera écrite sur le disque dur de l’utilisateur, provoquant alors un ralentissement de l’application et une diminution de l’espace disque du client. Pour pallier ce problème, il convient de désactiver les options de débogage lors de la compilation (voir section précédente « Désactiver l’option de débogage ») ou d’intervenir sur chaque poste client lorsque cela est possible (application intranet) et d’ajouter la ligne de code suivante dans le fichier mm.cfg, situé dans le répertoire Documents and Settings/ nom_utilisateur : TraceOutputFileEnable = 0
Vous désactiverez ainsi l’écriture des traces sur le poste de l’utilisateur et augmenterez la performance de votre application. Concevoir des interfaces graphiques
Nous vous conseillons de ne pas abuser des conteneurs (HBox, Panel…) sous peine de réduire considérablement le temps d’initialisation de l’application. En effet, chaque conteneur doit être positionné en fonction de son conteneur parent, ce qui demande des ressources pour le calcul des positions de chacun. En ce qui concerne le positionnement et le dimensionnement des composants, préférez la spécification dans le code des propriétés adéquates (x, y, height et width) à l’utilisation des positionnements et dimensionnements relatifs. De même, utilisez les effets avec parcimonie, car ils nécessitent également un certain nombre de ressources de la part de la machine cliente, ce qui provoque un ralentissement de l’exécution de l’application.
Déployer une application Flex Déployer une application peut se résumer à copier les sources situées sur l’environnement de développement vers l’environnement de déploiement accessible aux utilisateurs. Certaines phases sont cependant indispensables et ne peuvent être omises.
L’incontournable liste de contrôle Un peu à la manière d’un commandant de bord, nous devons vérifier certains prérequis nécessaires au bon déploiement applicatif (tableau 18-1). Tableau 18-1
Prérequis pour déployer une application
Élément à vérifier
Description
Compilation
Assurez-vous d’avoir bien compilé l’ensemble des éléments de votre application à l’aide des compilateurs adéquats : mxmlc et compc.
Conteneur applicatif
Assurez-vous que vous disposer bien d’une page web contenant le fichier SWF de votre application.
=Flex3 FM.book Page 342 Mardi, 2. décembre 2008 3:32 15
342
Comprendre Flex 3 PARTIE I Tableau 18-1
Prérequis pour déployer une application (suite)
Élément à vérifier
Description
Détecteur de la version de Flash Player
Pour que la détection du Flash Player soit effective, vous devez disposer du fichier AC_OETags.js.
Installation du Flash Player s’il n’est pas détecté sur le poste client
Si vous souhaitez que le Flash Player soit installé automatiquement s’il n’est pas présent sur le poste client, assurez-vous que vous disposez bien des fichiers AC_OETags.js et playerProductInstall.swf.
Visualisation des sources
Déterminez s’il sera possible ou non de consulter les sources de l’application.
Images/fichiers externes
Assurez-vous de bien déployer les images et fichiers externes nécessaires au bon fonctionnement de votre application
Réseau
Vérifiez que l’ensemble des serveurs sont accessibles par votre application (couche métier) et que celle-ci est accessible depuis l’extérieur (paramétrage des firewalls)
Services web
Vérifiez la disponibilité des services web que vous utilisez dans votre application.
Tests applicatifs
Assurez-vous d’avoir effectué tous les tests applicatifs nécessaires.
Si tous les éléments du tableau 18-1 sont vérifiés et fonctionnels, vous pouvez procéder au déploiement de votre application.
Mise en ligne de l’application La mise en ligne (ou déploiement) d’une application Flex se réalise tout simplement en copiant les fichiers issus de la compilation sur le serveur que vous avez dédié à l’hébergement de l’application. Si vous décidez de déployer votre application à l’aide de Flex Builder 3, vous devrez néanmoins procéder à une opération supplémentaire consistant à créer une version de déploiement. Voici la marche à suivre pour cela : 1. Effectuez un clic droit sur le nom du projet et choisissez Export. 2. Une nouvelle fenêtre s’ouvre alors, vous demandant de préciser le type d’exportation souhaité, sélectionnez Release Build et cliquez sur le bouton Next. 3. Dans l’interface qui s’affiche, indiquez si vous souhaitez ou non permettre la visualisation des sources de l’application en sélectionnant ou désélectionnant l’option Enable source file. 4. Cliquez sur le bouton Finish pour terminer. Si vous observez à présent l’arborescence de votre projet, vous constatez la présence d’un répertoire nommé bin-release contenant les fichiers prêts à être copiés sur l’environnement de déploiement.
=Flex3 FM.book Page 343 Mardi, 2. décembre 2008 3:32 15
Analyser les performances et optimiser l’application CHAPITRE 18
343
Page d’accueil La page HTML contenant le fichier SWF porte le nom du projet. Il est tout à fait possible de la renommer en index.html afin qu’elle soit considérée comme page d’accueil par le serveur web.
La figure 18-5 illustre le déploiement et l’utilisation d’une application Flex nous permettant de mesurer l’importance de la phase de validation de chaque élément majeur de l’environnement applicatif.
Figure 18-5
Schéma de déploiement et d’utilisation d’une application
=Flex3 FM.book Page 344 Mardi, 2. décembre 2008 3:32 15
344
Comprendre Flex 3 PARTIE I
Étape 1 : le contenu du répertoire bin-release est copié dans le répertoire racine www du serveur web. Étapes 2 et 3 : l’utilisateur se connecte au serveur web qui lui délivre l’application Flex. À ce stade, le travail du serveur web est terminé (si l’application ne comporte pas de modules devant être téléchargés ultérieurement). Étape 4 : l’application étant entièrement copiée sur le poste client, c’est à partir de celuici qu’elle va pouvoir se connecter au serveur de la couche métier, d’où l’importance du paramétrage des adresses IP dans l’application et la configuration des firewalls permettant l’accès à ces services. Étape 5 : phase de communication entre le serveur contenant les services applicatifs et celui contenant la base de données. Là encore, il convient de vérifier que tous les services sont fonctionnels et que la communication n’est pas entravée.
En résumé Au cours de ce chapitre, nous avons présenté les bases de l’utilisation de l’outil d’analyse de Flex Builder Professionnel. Elles vous permettront de détecter les éventuelles erreurs d’exécution ou d’allocation de mémoire de vos applications. Nous vous recommandons d’utiliser le Profiler avant toute phase de déploiement afin d’obtenir une application de qualité, car, ne l’oublions pas, celle-ci sera exécutée sur le poste client qui n’est peut-être pas de la dernière génération. Une saturation de la mémoire peut, en effet, parfois avoir des conséquences désastreuses sur l’utilisation de vos applications. Pour compléter cette notion de qualité applicative, nous avons également consacré une partie de ce chapitre à l’étude de l’optimisation et du processus de déploiement d’une application. Les informations données dans ce chapitre ne sont pas exhaustives, il existe de nombreux points d’optimisation et schémas de déploiement possibles en fonction de l’architecture choisie. Cependant, vous disposez désormais des éléments indispensables au bon déploiement de vos applications, que vous enrichirez par votre expérience. Nous allons à présent sortir du cadre des applications exécutables à l’aide du navigateur pour aborder le développement d’applications s’exécutant sur le poste client à l’aide du runtime Adobe AIR.
=Flex3 FM.book Page 345 Mardi, 2. décembre 2008 3:32 15
19 Adobe AIR Pour terminer la première partie de cet ouvrage, penchons-nous sur la machine virtuelle Adobe AIR (Adobe Integrated Runtime). Grâce à elle, vous pourrez utiliser les méthodes de développement d’applications web s’exécutant sans navigateur web, comme le ferait une application développée en Java, Delphi ou C++. Adobe AIR étant basé sur la technologie Flash, il est donc naturel que le framework Flex donne la possibilité de développer ce nouveau type d’applications portant le nom de RDA (Rich Desktop Application).
Le projet Adobe AIR Adobe AIR (anciennement appelé Apollo) est une machine virtuelle, un peu à la manière de la machine virtuelle de Java, permettant l’exécution d’applications web écrites en Flash, HTML, JavaScript ou tout autre langage web. Il convient de souligner qu’une application AIR s’exécutera de la même façon sur l’ensemble des systèmes d’exploitation supportés par la machine virtuelle (Windows, Mac, Linux…), ce qui n’est pas le cas pour d’autres langages.
Fonctionnement d’une application AIR Le développement d’une application web AIR s’effectue à l’aide des outils proposés par Adobe (Flash, Flex…) ou ses partenaires. Une fois le développement terminé, l’application est exportée au format AIR puis proposée en téléchargement aux utilisateurs. Une fois téléchargée, il suffit de l’installer. Cependant, la machine virtuelle d’Adobe doit être présente sur le poste de l’utilisateur. Après l’installation, une icône apparaîtra sur le Bureau du poste de l’utilisateur, lui permettant d’exécuter l’application téléchargée. Ceci témoigne de la volonté des développeurs d’Abode AIR d’accorder autant d’importance à une
=Flex3 FM.book Page 346 Mardi, 2. décembre 2008 3:32 15
346
Comprendre Flex 3 PARTIE I
application web qu’à une application standard en ne la cantonnant plus à son exécution dans un navigateur web. Pour vous convaincre de la puissance de ces applications « nouvelle génération », nous vous invitons à visiter le site d’Adobe à l’adresse suivante : http://www.adobe.com/ products/air/showcase/. Vous y trouverez de nombreux exemples d’applications web AIR. Cette technologie est aujourd’hui utilisée par de grandes entreprises telles que eBay, Yahoo! ou encore AOL, ce qui atteste de sa fiabilité et de son intérêt commercial non négligeable.
Nouveaux composants Comme nous venons de le voir, Adobe AIR exporte le monde des RIA (Rich Internet Application) directement sur le poste de l’utilisateur (RDA – Rich Desktop Application). Cette innovation va également donner naissance à une nouvelle fonctionnalité fort intéressante : l’accès aux données du disque dur de l’utilisateur à l’aide de composants spécifiques. Le tableau 19-1 présente l’ensemble des composants Adobe AIR et leur implémentation, illustrés page 348 (figures 19-1-a à 19-1-e). Tableau 19-1
Les composants spécifique à Adobe AIR
Composant
Implémentation
FileSystemComboBox
FileSystemDataGrid Permet d’afficher les répertoires et leur contenu dans un tableau.
FileSystemList Permet d’afficher les répertoires et leur contenu dans une liste.
=Flex3 FM.book Page 347 Mardi, 2. décembre 2008 3:32 15
Adobe AIR CHAPITRE 19 Tableau 19-1
Les composants spécifique à Adobe AIR (suite)
Composant
Implémentation
FileSystemTree
Permet d’afficher les répertoires et leur contenu sous forme d’arborescence.
FileSystemHistoryButton Permet de conserver un historique des répertoires visités.
Cet exemple met en relation le composant FileSystemList et deux composants FileSystemHistoryButton chargés d’enregistrer la navigation effectuée dans le premier composant. Cet enregistrement permet à l’utilisateur de revenir rapidement à un répertoire déjà visité. Les commentaires ne sont insérés qu’a titre indicatif. Il convient de ne pas les mentionner dans votre code à l’intérieur du composant FileSystemHistoryButon comme nous l’avons fait, sous peine d’être confronté à un problème d’exécution de votre projet.
enabled="{listeFichiers.canNavigateBack}"
click="listeFichiers.navigateBack();"
itemClick="listeFichiers.navigateBack(event.index)"/>
347
=Flex3 FM.book Page 348 Mardi, 2. décembre 2008 3:32 15
348
Comprendre Flex 3 PARTIE I
Figure 19-1-a
Le nouveau composant FileSystemComboBox
Figure 19-1-b
Le nouveau composant FileSystemDataGrid
Figure 19-1-c
Le nouveau composant FileSystemList
Figure 19-1-d
Le nouveau composant FileSystemTree
Figure 19-1-e
Le nouveau composant FileSystemHistoryButton
=Flex3 FM.book Page 349 Mardi, 2. décembre 2008 3:32 15
Adobe AIR CHAPITRE 19
349
Soulignons également la présence du composant HTML qui permet d’implémenter la visualisation de pages HTML. La portion de code suivante illustre cette fonctionnalité en offrant la possibilité à l’utilisateur d’effectuer des recherches à l’aide de Google :
