FLEX 3. Applications Internet riches avec Flash ActionScript 3, MXML et Flex Builder. Aurélien Vannieuwenhuyze

Transcription

1 Programmation FLEX 3 Applications Internet riches avec Flash ActionScript 3, MXML et Flex Builder Aurélien Vannieuwenhuyze Avec la contribution de Romain Pouclet Groupe Eyrolles, 2009, ISBN :

2 Table des matières Avant-propos Structure de l ouvrage À qui s adresse cet ouvrage? Remerciements XIX XIX XXI XXI PARTIE I Comprendre Flex CHAPITRE 1 Pourquoi Flex? Les enjeux du développement d applications web Flex en questions 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? Quelles différences avec Ajax? Flex et ses concurrents Les limites de Flex Pourquoi choisir Flex?

3 VI Programmation Flex 3 CHAPITRE 2 À la découverte du framework Flex 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é CHAPITRE 3 Développer avec le kit Flex SDK 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é

4 Table des matières VII CHAPITRE 4 Développer des applications à l aide de Flex Builder Présentation de Flex Builder Les différentes versions de Flex Builder Les différents modes de distribution de Flex Builder Installation de Flex Builder Le mode Autonome Le mode Plug-in Les perspectives de Flex Builder La perspective de développement La perspective de design La perspective de débogage La perspective de profiling Créer un projet Arborescence d un projet Flex Builder Exécution et tests Travail collaboratif Exporter/importer un projet Exportation Importation En résumé CHAPITRE 5 Les composants de contrôle Les boutons et interrupteurs Button ToogleButton Permettre le choix Les zones de texte Les libellés : Label et Text Les zones de saisie Les zones de texte «riches» Les tableaux DataGrid AdvancedDataGrid

5 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 Insérer des images, des animations et vidéos Flash Intégrer des animations Flash Insérer des images Lecteur vidéo Flash Choisir une couleur dans une palette avec ColorPicker Contrôler le format de date avec DateChooser et DateField Ajouter un curseur avec HSlider et VSlider L incrémentation avec NumericStepper Présentation de données avec HorizontalList et TileList Réaliser des hyperliens grâce à LinkButton Afficher des données sous forme d arborescence Implémentation et alimentation en données Interaction avec l utilisateur En résumé CHAPITRE 6 Les composants conteneurs Créer une barre de menus avec ApplicationControlBar Le composant Canvas Aligner verticalement ou horizontalement les composants Les composants HBox et VBox Les composants HDividedBox et VDividedBox Créer des formulaires avec Form, FormHeading et FormItem Créer une grille grâce à Grid Les panneaux : Panel Créer des fenêtres pop-ups avec TitleWindow Création du pop-up Appel du pop-up Communiquer avec le pop-up En résumé

6 Table des matières IX CHAPITRE 7 Les composants de navigation et de reporting 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é CHAPITRE 8 Réaliser le design des interfaces 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é 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é

7 X Programmation Flex 3 CHAPITRE 10 Créer des composants personnalisés Penser composant Qu est ce qu un composant? MXML ou ActionScript? Le compilateur compc Créer un composant Description du composant Méthodologie de création Réemploi du composant En résumé CHAPITRE 11 Gérer les données Lier des données Utilisation de la balise <mx:binding> Le DataBinding en ActionScript Stocker des données grâce au modèle Implémenter le modèle à l aide de la balise <mx:model> Les modèles et ActionScript 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 Formater des données En résumé CHAPITRE 12 Accéder aux services de la couche métier Employer les requêtes HTTP avec HTTPService ou REST-Style webservice Le composant WebService Le service web en détail

8 Table des matières XI Création de l interface graphique Appel du service web Analyse du fonctionnement de l application Accéder aux classes distinctes grâce à RemoteObject Comprendre RemoteObject Implémentation de RemoteObject En résumé CHAPITRE 13 Flex et PHP Accès aux services PHP Installation et fonctionnement de la passerelle AMFPHP Cas pratique : gestion d un magasin informatique Préparation Implémentation du composant HTTPService en ActionScript RemoteObject en pratique Le générateur d application de Flex Builder En résumé 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 Interaction avec les méthodes J2EE Processus d exécution Exemple d application Échanger des données en temps réel Création du projet Configuration du serveur <mx:producer> et <mx:consumer> : les composants émetteurs et récepteurs

9 XII Programmation Flex 3 Les procédures de communication Test de l application En résumé CHAPITRE 15 Créer des applications modulaires La notion de module Créer un module Intégrer un module dans une application Charger les modules à l aide du composant ModuleLoader Gestion des modules avec ActionScript En résumé CHAPITRE 16 Interagir avec le conteneur web La notion de deep linking Principe de fonctionnement Mise en pratique du deep linking Déploiement du projet Communiquer avec le conteneur web De l application Flex vers le conteneur web Du conteneur web vers l application Flex La bibliothèque Flex-Ajax Bridge Ajout de la bibliothèque à un projet Utilisation de la bibliothèque Déploiement et test En résumé CHAPITRE 17 Déboguer une application Création de l application d étude Identifier et corriger les erreurs grâce à la vue Problems Le débogage avancé Utilisation des points d arrêt Modifier la valeur des variables

10 Table des matières XIII Tracer un parcours Sélectionner les variables à surveiller En résumé CHAPITRE 18 Analyser les performances et optimiser l application Présentation de l analyseur L analyseur en action Analyse des performances Analyse de l occupation mémoire Méthodes d analyse 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 Bonnes pratiques d optimisation 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 Déployer une application Flex L incontournable liste de contrôle Mise en ligne de l application En résumé CHAPITRE 19 Adobe AIR Le projet Adobe AIR Fonctionnement d une application AIR Nouveaux composants Première application AIR Création du projet Déploiement de l application

11 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 En résumé PARTIE II Cas pratiques CHAPITRE 20 Création d un projet de site e-commerce Définition des besoins Conception UML Architecture du projet Création du projet Le squelette Accès à l espace d administration Préparation du serveur Faisons le point CHAPITRE 21 Module d administration du site e-commerce Création du module Phase préparatoire Design de l interface 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

12 Table des matières XV À 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é CHAPITRE 22 Module de vente en ligne : le panier d achat Création du module Design de l interface Les états Les transitions Affichage du détail d un produit Gestion du panier d achat Design du panier avec ItemRenderer Ajouter un produit au panier Vider le panier À vos claviers : création de l interface graphique Ce qu il faut réaliser Solution En résumé CHAPITRE 23 Module de vente en ligne : commande et facturation 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 : <mx:repeater> Solution

13 XVI Programmation Flex 3 Déploiement du module Optimisation et déploiement Optimiser le temps de chargement Faire patienter l utilisateur Déploiement de l application Fin du site E-Reflex? CHAPITRE 24 Créer un lecteur MP3 avec Adobe AIR Rechercher des MP3 à l aide de <mx :FileSystemTree> Implémentation Interaction avec l utilisateur Lire un fichier MP3 avec ActionScript Principales fonctions de lecture d un fichier audio Stopper et mettre en pause Connaître la progression de la lecture Exemple complet Définition des fonctionnalités de notre application Gestion de la liste de lecture Interface de lecture À vos claviers : création d un lecteur MP Fichier de styles CSS Code de la classe ClassesLecteurMp Fichier LecteurMP3AS3.as Fichier principal Déploiement du projet En résumé CHAPITRE 25 Flex 4 Gumbo Les nouveautés de Flex Installer le Flash Player FXG 1.0, nouveau format graphique

14 Table des matières XVII MXML Un nouvel espace de noms La balise <private> Le couple de balises <library> et <description> Le DataBinding bi-directionnel Amélioration de certains composants de Flex Remplacement du composant <mx:label> Le composant <TextInput> Le composant <TextArea> Installation de l environnement de développement Première application 3D avec Flex Création et configuration du projet Création de l interface Codage de l application En conclusion Index