Adobe Flex 3 Training from the Source Jeff Tapper Michael Labriola Matthew Boles avec James Talbot Avant-propos de Matt Chotin, responsable produit Flex
Pearson Education France a apporté le plus grand soin à la réalisation de ce livre afin de vous fournir une information complète et fiable. Cependant, Pearson Education France n assume de responsabilités, ni pour son utilisation, ni pour les contrefaçons de brevets ou atteintes aux droits de tierces personnes qui pourraient résulter de cette utilisation. Les exemples ou les programmes présents dans cet ouvrage sont fournis pour illustrer les descrip tions théoriques. Ils ne sont en aucun cas destinés à une utilisation commerciale ou professionnelle. Pearson Education France ne pourra en aucun cas être tenu pour responsable des préjudices ou dommages de quelque nature que ce soit pouvant résulter de l utilisation de ces exemples ou programmes. Tous les noms de produits ou marques cités dans ce livre sont des marques déposées par leurs pro priétaires respectifs. Publié par Pearson Education France 47 bis, rue des Vinaigriers 75010 PARIS Tél. : 01 72 74 90 00 www.pearson.fr Réalisation PAO : Patrick Fabre. ISBN : 978-2-7440-2288-3 Copyright 2008 Pearson Education France Tous droits réservés Titre original : Adobe Flex 3: Training from the Source Traduit de l américain par Patrick Fabre. ISBN original : 978-0-321-52918-3 Copyright 2008 by Matthew Boles, Michael Labriola, and Tapper, Nimer and Associates, Inc. All rights Reserved. Edition originale publiée par PeachPit 1249 Eighth Street Berkeley, CA 94710 www.peachpit.com www.adobepress.com Aucune représentation ou reproduction, même partielle, autre que celles prévues à l article L. 122-5 2 et 3 a) du code de la propriété intellectuelle ne peut être faite sans l autorisation expresse de Pearson Education France ou, le cas échéant, sans le respect des modalités prévues à l article L. 122-10 dudit code. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education, Inc.
Table des matières Avant-propos........................................ xi Introduction.........................................xiii Leçon 1 L ère des applications Internet riches........................... 3 Comprendre l évolution des applications informatiques................. 4 Se départir de l architecture à pages............................. 6 Identifier les avantages des RIA................................. 8 Responsables commerciaux................................. 8 Organisations informatiques................................ 8 Utilisateurs finaux....................................... 8 Technologies RIA.......................................... 9 AJAX................................................ 9 Flash............................................... 10 Flex............................................... 11 WPF, XAML, Silverlight et Expression.......................... 12 Leçon 2 Prise en main........................................ 15 Débuter le développement d une application Flex................... 16 Créer un projet et une application MXML......................... 16 Comprendre le workbench de Flex Builder 3....................... 21 Exécuter votre application................................... 24 Créer une seconde page d application et travailler en mode Design........ 30 Préparation à la leçon suivante................................ 35 Leçon 3 Concevoir l interface.................................... 39 Découvrir les conteneurs.................................... 40 Mise en page d une application de commerce en mode Design........... 41 Travailler avec des dispositions contraintes........................ 47 Utiliser des contraintes avec le conteneur parent.................. 47 Utiliser des contraintes améliorées........................... 53 Travailler avec des états de vue................................ 55 Contrôler les états de vue................................. 57 Mise en page d une application en mode Source.................... 60 Ajouter et contrôler des états de vue avec le code MXML............. 63 Leçon 4 Utiliser des contrôles simples............................... 69 Introduction aux contrôles simples............................. 70 Afficher des images....................................... 71
iv Adobe Flex 3 Créer une vue pour les informations de détail...................... 75 Lier une structure de données à un contrôle simple.................. 79 Utiliser un conteneur Form pour organiser des contrôles simples.......... 81 Ajouter des boutons radio et des champs de date au Dashboard.......... 86 Leçon 5 Gérer des événements et des structures de données................. 91 Comprendre la gestion des événements.......................... 92 Comprendre un exemple simple............................. 92 Gérer l événement avec une fonction ActionScript................. 94 Passer des données à la fonction de gestionnaire d événements........ 95 Créer une structure de données lors du déclenchement de l événement creationcomplete........................................ 96 Utiliser des données de l objet Event........................... 100 Créer une classe ActionScript personnalisée...................... 105 Créer un objet valeur................................... 106 Créer une méthode pour créer un objet......................... 111 Créer des classes de panier d achats............................ 114 Leçon 6 Utiliser des données XML distantes avec des contrôles.............. 121 Récupérer des données XML avec HTTPService.................... 122 Créer un objet HTTPService............................... 123 Invoquer la méthode send()............................... 123 Utiliser les données renvoyées............................. 123 Comprendre les problèmes de sécurité....................... 125 Récupérer des données XML via HTTPService...................... 126 Remplir un ArrayCollection avec des données HTTPService............. 128 Utiliser des ArrayCollections............................... 128 Utiliser des collections comme fournisseurs de données............ 129 Remplir un contrôle ComboBox et ajouter une option de manière dynamique 132 Utiliser des données XML avec un contrôle Tree.................... 136 Comprendre les opérateurs E4X............................ 136 Remplir un contrôle Tree avec des données XML................. 142 Récupérer des données XML et les transformer en un ArrayCollection d objets personnalisés.......................................... 149 Utiliser la liaison de données avec des structures complexes............ 154 Manipuler des données de panier d achats....................... 156 Ajouter des articles au panier.............................. 156 Trier des éléments dans un ArrayCollection..................... 158 Ajouter un article ou mettre à jour la quantité................... 160 Utiliser un curseur pour localiser un ShoppingCartItem............. 162 Ajouter un bouton de suppression............................. 171
Table des matières v Leçon 7 Créer des composants avec MXML........................... 175 Introduction aux composants MXML........................... 176 Comprendre les bases de la création d'un composant personnalisé..... 177 Créer un composant personnalisé au pas à pas.................. 178 Utiliser des composants personnalisés dans l'architecture de l'application. 179 Créer un composant de mise à jour/suppression et l'instancier.......... 181 Faire apparaître des informations de produit en cliquant sur les boutons Update et Delete........................................ 186 Créer un autre objet valeur................................. 192 Créer un composant de gestionnaire de données pour les trois applications.. 194 Utiliser le nouveau composant de gestionnaire de données............ 202 Implémenter la fonctionnalité d'ajout de produit................... 206 Créer et utiliser un composant pour l application Dashboard............ 207 Leçon 8 Utiliser des contrôles et des Repeater avec des jeux de données........ 211 Utiliser des jeux de données................................. 212 Comprendre les composants HorizontalList et TileList.............. 213 Implémenter un labelfunction............................. 214 Implémenter un itemrenderer............................. 215 Afficher les catégories en utilisant un HorizontalList et un itemrenderer.... 217 Afficher des produits d épicerie en fonction d une sélection de catégories... 222 Utiliser un Repeater pour parcourir un Dataset................... 222 Récupérer les données des composants répétés.................. 223 Adressage des composants créés par un Repeater................ 225 Comprendre les différences de performances entre TileList et Repeater... 226 Afficher des articles d épicerie en fonction d une catégorie........... 227 Programmer des états pour afficher les informations détaillées sur les produits 235 Placer des produits dans le panier d achats....................... 237 Leçon 9 Utiliser des événements personnalisés........................ 244 Comprendre les avantages de l architecture à couplage lâche........... 245 Répartir des événements................................... 245 Déclarer des événements pour un composant..................... 247 Identifier les besoins en matière de classes d événements personnalisées... 249 Créer et utiliser le CategoryEvent.............................. 250 Créer et utiliser la classe ProductEvent.......................... 254 Utiliser ProductEvent pour supprimer un produit du panier d achats.... 259 Utiliser ProductEvent pour ajouter un produit au panier............. 261 Comprendre le flux et le bouillonnement des événements............. 264
vi Adobe Flex 3 Leçon 10 Créer des composants personnalisés avec ActionScript 3.0............ 271 Introduction à la création de composants avec ActionScript 3.0.......... 272 Créer la structure de la classe................................ 272 Redéfinir la méthode createchildren().......................... 276 Créer un bouton en ActionScript............................ 277 Utiliser la méthode addchild() pour ajouter le bouton à votre composant. 277 Comprendre le chrome et rawchildren........................ 278 Utiliser addchild() sur rawchildren pour ajouter des éléments au chrome. 279 Redimensionnement et positionnement dans Flex.................. 283 Comprendre la méthode measure()............................ 285 Redéfinir la méthode updatedisplaylist()........................ 286 Leçon 11 Utiliser des DataGrid et des ItemRenderer...................... 296 Introduction aux DataGrid et aux ItemRenderer.................... 297 Ajouter un DataGrid générique au ChartPod...................... 297 Ajouter des appels HTTPService à Dashboard...................... 299 Afficher le panier d achats avec un DataGrid...................... 303 Ajouter un contrôle d édition incorporé pour le DataGridColumn....... 305 Créer un ItemRenderer MXML pour l affichage du produit........... 307 Créer un ItemRenderer MXML incorporé pour afficher le bouton Remove. 309 Mettre à jour le ShoppingCartItem avec des fonctions set et get....... 315 Utiliser l AdvancedDataGrid................................. 317 Trier l AdvancedDataGrid................................. 317 Trier en mode Expert................................... 319 Mettre en forme l AdvancedDataGrid......................... 320 Regrouper des données................................. 325 Afficher des données de synthèse............................331 Leçon 12 Utiliser le glisser-déposer................................ 343 Introduction au Gestionnaire de glisser-déposer.................... 344 Glisser-déposer entre deux DataGrid........................... 345 Glisser-déposer entre un DataGrid et un List...................... 349 Utiliser un composant sans fonctionnalité améliorée dans une opération de glisser-déposer......................................... 354 Faire glisser un article d épicerie dans le panier d achats............... 361 Leçon 13 Implémenter la navigation............................... 369 Introduction à la navigation................................. 370 Utiliser un TabNavigator dans l application DataEntry................ 373
Table des matières vii Ajouter une page d accueil et une page de règlement dans l application de commerce électronique................................... 376 Créer la première étape du processus de règlement affiché par un ViewStack. 380 Compléter le processus de règlement en utilisant le ViewStack.......... 388 Leçon 14 Utiliser des formateurs et des validateurs...................... 395 Introduction aux formateurs et aux validateurs..................... 396 Utiliser une classe Formatter pour afficher des informations monétaires dans l application de commerce électronique......................... 397 Utiliser les classes Validator................................. 400 Utiliser des expressions régulières pour valider des données (partie 1)..... 404 Utiliser des expressions régulières pour valider des données (partie 2)..... 407 Créer une classe Validator personnalisée......................... 409 Leçon 15 Implémenter la gestion d historique et les liens profonds............ 417 Introduction à la gestion de l historique......................... 418 Implémenter la gestion de l historique dans un conteneur navigateur...... 421 Créer un gestionnaire d historique personnalisé.................... 422 Introduction aux liens profonds.............................. 428 Implémenter les liens profonds de Flex 3...................... 429 Ajouter les liens profonds à votre application.................... 429 Leçon 16 Personnaliser l apparence d une application Flex.................. 438 Appliquer un style graphique avec des styles et des habillages.......... 439 Appliquer des styles...................................... 439 Définir des styles incorporés avec des attributs de balise............ 440 Comprendre l héritage des styles........................... 442 Définir des styles avec la balise <mx:style>..................... 443 Utiliser les outils Flex Builder pour travailler avec des CSS............ 446 Définir des styles avec des fichiers CSS........................ 447 Changer des CSS à l exécution............................... 459 Avantages des CSS à l exécution............................ 459 Créer un SWF à partir d un fichier CSS........................ 460 Charger un SWF CSS avec StyleManager....................... 461 Redéfinir des styles avec un fichier CSS chargé................... 461 Habiller des composants................................... 461 Habillages graphiques.................................. 462 Importer des habillages créés dans CS3....................... 462 Habillages programmatiques.............................. 465
viii Adobe Flex 3 Leçon 17 Travailler avec des services web............................ 474 Introduction à la communication avec le serveur................... 475 Utiliser les appels serveur distants du modèle événementiel............ 476 Configurer une application pour travailler localement................ 476 Utiliser un service web dans le Dashboard........................ 479 Gérer les résultats du service web........................... 482 Appeler des méthodes de service web........................ 485 Utiliser un service web dans l application DataEntry................. 487 Utiliser l assistant d introspection de service web................... 494 Utiliser le code généré dans votre application..................... 496 Réusinage avec Flex Builder................................. 499 Compléter l intégration du code généré......................... 500 Mettre à jour et supprimer des produits......................... 501 Leçon 18 Accéder à des objets côté serveur........................... 506 Placer des fichiers sur le serveur.............................. 507 Intégrer le composant FileUpload à DataEntry................... 511 Utiliser RemoteObject pour enregistrer une commande............... 514 Mettre à jour la commande Flex Compiler...................... 515 Répartir un événement de confirmation de commande dans le processus de règlement.......................................... 517 Créer et appeler des RemoteObjects......................... 518 Passer le panier d achats dans le composant Checkout............. 522 Changer l état de l application pour revenir à l écran de bienvenue...... 522 Mapper des objets ActionScript sur des objets serveur................ 523 Les assistants de données Flex Builder.......................... 526 Créer un projet serveur.................................. 527 Leçon 19 Visualiser des données.................................. 533 Explorer les composants graphiques de Flex...................... 534 Types de graphiques................................... 534 Packaging des graphiques................................ 534 Parties des graphiques.................................. 535 Disposition des graphiques initiaux............................ 536 Remplir des graphiques................................... 538 Spécifier les séries des graphiques........................... 539 Ajouter des axes aux graphiques à lignes et à colonnes............. 545 Ajouter des légendes aux graphiques........................... 552 Limiter les étiquettes affichées sur un axe........................ 553
Table des matières ix Interagir avec des graphiques................................ 555 Événements de survol.................................. 555 Événements de clic.................................... 555 Événements de sélection................................. 555 Ajouter des événements de graphique.......................... 556 Ajouter des animations aux graphiques..........................561 Personnaliser l apparence des graphiques avec des styles.............. 562 Leçon 20 Créer des applications modulaires........................... 567 Introduction aux applications modulaires Flex 3.................... 568 Utiliser des modules Flex................................... 569 Utiliser la classe Module..................................571 Remplacer le code de règlement par une balise ModuleLoader........ 572 Comprendre les bibliothèques RSL............................ 573 Comprendre le lieur.................................... 576 Utiliser la mise en cache des RSL du framework Flex................. 577 Comprendre le but du cache de framework..................... 578 RSL signées et non signées............................... 578 Examiner la taille actuelle des applications..................... 579 Configurer votre application de manière à utiliser la RSL du framework... 579 Observer la différence avec la RSL du framework..................581 Créer un projet de bibliothèque...............................581 Ajouter des classes et des éléments à la bibliothèque.............. 582 Utiliser la bibliothèque FlexGrocer dans l application FlexGrocer....... 584 Leçon 21 Déployer des applications Flex............................. 587 Compiler une version de déploiement de votre application............ 588 S échapper du navigateur avec AIR............................ 588 Introduction à AIR..................................... 589 Installer le moteur d exécution AIR.......................... 590 Installer une première application........................... 590 Créer une application AIR...................................591 Créer un nouveau projet AIR...............................591 Transformer l application Dashboard en une application AIR.......... 594 Personnaliser l application avec le fichier Application.xml............ 595 Exporter le fichier AIR................................... 598 Index............................................ 604