Adobe Flex 3. Training from the Source. Jeff Tapper Michael Labriola Matthew Boles avec James Talbot

Transcription

1 Adobe Flex 3 Training from the Source Jeff Tapper Michael Labriola Matthew Boles avec James Talbot Avant-propos de Matt Chotin, responsable produit Flex

2 x Adobe Flex 3 Les auteurs Jeff Tapper est ingénieur en chef pour le Digital Primates IT Consulting Group. Il développe des applications Internet depuis 1995 pour une foule de clients dont Morgan Stanley, Condé Nast, Toys R Us, IBM, Dow Jones, American Express, M&T Bank, Verizon et bien d autres. Il a commencé à développer des applications Flex dès les premiers jours de Flex 1. Jeff est professeur certifié pour l ensemble des cours d Adobe concernant le développement Flex, ColdFusion et Flash. Il est aussi souvent invité à s exprimer lors des Adobe Development Conferences et dans le cadre de groupes d utilisateur. Digital Primates IT Consulting Group propose une assistance d experts pour le développement d applications Internet riches et assure l autonomisation de ses clients par un système de coaching. Michael Labriola est l un des fondateurs du Digital Primates IT Consulting Group dont il est aujourd hui consultant en chef. Il développe des applications Internet depuis 1995 et travaille avec Flex depuis la version bêta 1.0 du programme. Michael a reçu les titres de professeur Adobe certifié, d expert de la communauté et de champion en développement Flex. Il est invité comme conférencier dans le monde afin de parler de Flex et d AIR. Il a été consultant pour trois des dix marques les plus connues au monde. Dans le cadre de ses fonctions de consultant, il coache des équipes de développement logiciel sur les technologies émergeantes et conçoit des applications professionnelles à fort impact commercial. Il consacre son temps libre, loin des technologies, à déguster du vin et de bons plats. Matthew Boles est le responsable technique de l Adobe Customer Training Group. Il a enseigné et développé des cours sur Flex dès la version 1.0. Matthew possède un bagage diversifié dans le développement Web, les réseaux et l enseignement, aussi bien dans des classes d informatique professionnelles que dans l école publique. En plus de ce livre, il est le co-auteur d une version du Certified ColdFusion Developer Study Guide. Il a également développé des programmes d enseignement officiels pour Allaire/Macromedia/Adobe sur le développement ColdFusion et Flash.

3 Avant-propos xi Avant-propos C est au début de cette décennie que Macromedia a forgé l expression d application Internet riche ou RIA (rich Internet application) pour décrire les applications du futur. Les RIA sont des applications web attrayantes, interactives, légères et flexibles qui combinent la flexibilité et la facilité d utilisation des applications de bureau intelligentes à la puissance de rayonnement des applications web traditionnelles. Flex d Abode s est imposé comme la principale plate-forme pour créer ce type d application. Quel meilleur moment rêver pour devenir un développeur Flex? En juin 2006, Adobe sortait Flex 2, un ensemble d outils, de bibliothèques et de services à l exécution qui permettent aux développeurs de tous bords de créer et de déployer des RIA exploitant le moteur d'exécution du lecteur Flash. Flex 2 a connu un succès considérable si l on en juge par ses premiers faits d arme : des dizaines de milliers de nouveaux développeurs, une communauté extrêmement vivante qui partage des astuces, du code, des dizaines de composants et de compléments payants et open source et, bien sûr, des centaines d applications et de nouvelles qui apparaissent en ligne chaque jour. Lors de la courte durée de vie de Flex 2, le Flash Player 9 a atteint le taux de pénétration classique des précédents lecteurs avec 90 % du marché en juin Flex s est vu décerner cette année son second Jolt Award, cette fois dans la catégorie Développement web. Les LiveCycle Data Services ont aussi connu un grand succès, qui permettent aux développeurs de créer des applications que l on peut qualifier de riches non seulement en termes d interface utilisateur, mais également pour ce qui concerne le flux des données entre les tiers et les services innovants que ces applications peuvent offrir. Avec des fonctionnalités comme l intégration d applications LiveCycle ES, la génération de documents PDF et l intégration avec des frameworks comme Hibernate et Spring, LiveCycle Data Services ES offre la solution ultime pour connecter des RIA à l infrastructure J2EE. Avec Flex 3, nous avons fait le choix de passer à un modèle open source pour le SDK Flex. Le fait de rendre Flex open source doit aider la plate-forme à atteindre un public plus vaste et permettre à la communauté de participer à tous les aspects de son développement. La communauté Flex est formidable et ses contributions au produit profitent à tous les utilisateurs. Ce sont sans doute toutes ces raisons qui ont amené ce livre entre vos mains. Il est temps pour vous d apprendre à utiliser Flex pour créer de grandes choses. La bonne nouvelle, c est qu il est très facile de s initier à Flex! Grâce à son langage de balisage déclaratif MXML qui aide à structurer vos applications et au langage ActionScript 3.0 (une implémentation d ECMAScript 4), vous aurez à disposition tous les outils nécessaires. Votre IU peut même

4 xii Adobe Flex 3 être personnalisée avec des CSS. Si tout peut être programmé manuellement avec votre éditeur de texte favori, Adobe Flex Builder 3 propose cependant aussi un formidable EDI qui peut vous aider à créer de nombreuses fonctionnalités très rapidement. En plus de vous initier aux langages utilisés par Flex (et de savoir quand les utiliser), vous pourrez en apprendre plus sur la puissante bibliothèque de composants et découvrir le meilleur moyen de l exploiter dans vos applications. Flex propose des conteneurs de disposition, des contrôles de formulaire, des formateurs et des validateurs, une bibliothèque d animations et bien d autres ressources pour vous aider à créer rapidement une interface utilisateur sophistiquée. Et, lorsque Flex ne propose pas des composants prêts à l emploi, il est très facile de les créer vous-même en étendant des composants existants. Il ne suffit pas d avoir une jolie interface ; votre application doit aussi être fonctionnelle, ce qui implique souvent de manipuler des données. Vous verrez que Flex propose une multitude de moyens pour vous connecter à vos sources de données dorsales, du XML sur HTTP aux services web SOAP en passant par un robuste protocole d accès aux objets distants appelé AMF. Flex propose également une intégration étroite avec les LiveCycle Data Services, un produit puissant qui facilite la gestion des ensembles de données de grande taille, notamment lorsque les données sont partagées entre de nombreux utilisateurs. Flex 3 introduit également la prise en charge d AIR (Adobe Integrated Runtime). AIR permet d exploiter la puissance des applications web et de l amener sur le bureau. Avec un support HTML puissant et une excellente intégration au bureau qui porte notamment sur le glisserdéposer, l accès au système de fichiers local et la disponibilité d une base de données SQL incorporée, vous pourrez créer des RIA comme vous ne l avez jamais fait auparavant. Enfin, il ne suffit pas de connaître les éléments qui composent une application Flex. Vous devez aussi savoir comment les utiliser. L ouvrage Adobe Flex 3 tire parti de l expertise de ses auteurs et propose des leçons qui présentent les concepts de Flex et vous aident à adopter les meilleures pratiques en la matière. Les différents sujets s étendent du niveau débutant à celui de l utilisateur expérimenté, mais avec une aide progressive et des instructions au pas à pas et des explications complètes. Je vous souhaite avant tout la bienvenue dans le monde passionnant du développement Flex. Vous verrez : très vite, vous créerez des applications plus belles et plus efficaces que toutes celles que vous avez pu créer auparavant. Pour y parvenir, vous aurez cependant besoin d un guide et vous ne pouviez faire de meilleur choix que celui d Adobe Flex 3. Chez Adobe, nous sommes impatients de voir ce que vous allez créer! Matt Chotin Responsable Produit Adobe Systems, Inc.

5 Introduction xiii Introduction C est en mars 2002 que Macromedia a forgé l appellation d application Internet riche. L idée avait alors encore comme un parfum futuriste. Tout a bien changé depuis. Les RIA (rich Internet applications) sont une réalité d aujourd hui. Macromedia sortit Flex en 2004 pour permettre aux développeurs d écrire des applications pour la plate-forme Flash, devenue presque omniprésente. Ces applications pouvaient tirer profit d une conception améliorée, de l utilisabilité, de la portabilité et changer considérablement l expérience utilisateur pour les applications web. Il s agissait d une pierre angulaire du concept de Web 2.0, une nouvelle génération d applications Internet focalisées sur la créativité et la collaboration. Depuis lors, Macromedia (aujourd hui Adobe) a sorti les versions 1.5, 2 et 3 de Flex. Avec chaque nouvelle version, la création d applications riches, attrayantes et intuitives n a cessé de se simplifier et la barre s est sans cesse élevée en ce qui concerne les attentes des utilisateurs d applications web. Des organisations sans nombre ont découvert les avantages de Flex et ont créé et déployé avec succès des applications qui s exécutent avec la plate-forme Flash. Malgré les débuts réussis de Flex, Flex 1 et 1.5 n ont pas été un produit du marché grand public. Le prix, l absence d EDI, les options de déploiement limitées et divers autres facteurs ont destiné les anciennes versions de Flex à des applications volumineuses et plus complexes ainsi qu à des développeurs plus spécialisés. Avec les nouvelles sorties de la ligne de produits Flex, tout ceci a changé. Flex 2 est sorti en 2006 et a rendu le développement Flex accessible à un nombre bien plus grand de développeurs, en incluant un SDK (Software Development Kit) libre. Avec le passage à l open source de Flex 3 et l annonce de versions gratuites de Flex Builder pour les étudiants, le développement Flex doit être à portée de n importe quel développeur qui le souhaite. Il est très facile de débuter avec Flex. Celui-ci se compose de deux langages différents : le MXML, un langage de balisage XML, et ActionScript, le langage du lecteur Flash. Les balises MXML sont faciles à apprendre (notamment parce que Flex Builder en écrit un grand nombre pour vous). Le langage ActionScript est un peu plus difficile à apprendre, mais les développeurs qui ont une expérience des langages de programmation et de script se familiarisent très rapidement avec. Le développement Flex ne se limite pourtant pas au MXML et à ActionScript.

6 xiv Adobe Flex 3 Bien d autres notions doivent être comprises pour devenir un développeur Flex chevronné. Il convient notamment de comprendre les points suivants : comment les applications Flex doivent être construites (et comment elles ne doivent pas l être) ; le rapport entre le MXML et ActionScript et quand utiliser l un ou l autre ; les différents moyens d interagir avec des données dorsales et les différences entre chaque méthode ; comment utiliser les composants Flex et comment écrire ses propres composants ; l impact en termes de performances du code que vous écrivez et la manière de l optimiser ; les meilleures pratiques pour écrire du code facile à étendre, à gérer et à réutiliser. Ce livre s attache précisément à développer ces compétences. Les auteurs ont distillé leur solide expertise avec Flex dans une série de leçons qui vous serviront de cours accéléré pour le développement Flex. En commençant par les bases et en introduisant progressivement de nouvelles fonctionnalités et différents paliers de savoir-faire, les auteurs vous guident dans l univers passionnant des RIA en vous sécurisant à chaque étape. Flex est redoutablement efficace et puissant, amusant et passionnant, et Adobe Flex 3 est le guide idéal pour votre premier périple de développement de la nouvelle génération d applications. Adobe Flex 3 est une mise à jour de l édition à succès Adobe Flex 2: Training from the Source. Nous avons bien évidemment fait plus qu ajuster quelques lignes de code pour nous assurer que les mêmes leçons fonctionnent dans la nouvelle version. Nous avons supprimé des champs qui n avaient plus la même pertinence et en avons ajouté de nouveaux portant sur des fonctionnalités comme les modules, AIR et l AdvancedDataGrid. Nous souhaitons de tout notre cœur que les lecteurs de la précédente édition et ceux qui découvrent ce livre en tireront une égale satisfaction. Depuis la sortie du livre précédent, plusieurs annonces ont été faites par Adobe concernant Flex et notamment : La sortie du SDK Flex sous licence open source. L introduction de BlazeDS, qui contient un grand nombre des fonctionnalités les plus fréquemment utilisées des LiveCycle Data Services (auparavant appelés Flex Data Services). BlazeDS sera aussi disponible sous licence open source. L introduction d AIR, qui permet aux développeurs de déployer des applications Flex et HTML/JavaScript sous forme d applications de bureau.

7 Introduction xv Un flux de travail considérablement amélioré entre les graphistes-concepteurs et des développeurs. Et plus encore... Le moment est parfaitement choisi pour devenir un développeur d application Internet riche, et nous espérons sincèrement que ce livre vous apportera tous les outils requis pour vos premiers pas en tant que développeur Flex. Connaissances préalables requises Pour tirer le meilleur parti de ce livre, vous devez au moins comprendre la terminologie web. Ce livre a pour unique but de vous apprendre à maîtriser Flex ; aussi, plus vous en saurez sur le Web, mieux vous serez armé pour sa lecture. Ce livre a été écrit en partant du principe que vous avez l habitude de travailler avec des langages de programmation et sans doute avec des langages côté serveur comme le Java,.Net, le PHP, ColdFusion ou des technologies similaires. Si la connaissance des technologies côté serveur n est pas obligatoire pour ce livre, un grand nombre de comparaisons et d analogies sont cependant faites avec la programmation côté serveur. Ce livre n est pas destiné à servir d introduction à la programmation ou à la programmation orientée objet (POO). Aucune expérience en POO n est requise mais, si vous n avez pas la moindre expérience en programmation, il est possible que certaines explications puissent paraître trop avancées. Vue d ensemble Comme vous allez rapidement le voir, ce livre s efforce de coller à la réalité en s appuyant sur des exemples concrets. Si certaines sections du livre sont légèrement plus théoriques, c est à chaque fois dans l optique de vous livrer les informations les plus utiles possible. Les exercices sont destinés à vous amener à utiliser les outils et l interface rapidement afin que vous puissiez commencer à travailler sur des projets personnels aussi facilement que possible. Ce cours complet prend environ 34 à 36 heures et inclut les leçons suivantes : Leçon 1 : L'ère des applications Internet riches Leçon 2 : Prise en main Leçon 3 : Concevoir l interface Leçon 4 : Utiliser des contrôles simples Leçon 5 : Gérer des événements et des structures de données Leçon 6 : Utiliser des données XML distantes avec des contrôles Leçon 7 : Créer des composants avec MXML Leçon 8 : Utiliser des contrôles et des Repeaters avec des jeux de données

8 xvi Adobe Flex 3 Leçon 9 : Utiliser des événements personnalisés Leçon 10 : Créer des composants personnalisés avec ActionScript 3.0 Leçon 11 : Utiliser des DataGrid et des ItemRenderer Leçon 12 : Utiliser le glisser-déposer Leçon 13 : Implémenter la navigation Leçon 14 : Utiliser des formateurs et des validateurs Leçon 15 : Implémenter la gestion d historique et les liens profonds Leçon 16 : Personnaliser l apparence d une application Flex Leçon 17 : Travailler avec des services web Leçon 18 : Accéder à des objets côté serveur Leçon 19 : Visualiser des données Leçon 20 : Créer des applications modulaires Leçon 21 : Déployer des applications Flex Notes techniques Une grande partie des données pour les exercices pratiques peuvent être téléchargées sur le site Vous devez évidemment disposer d une connexion Internet pour accéder à ce site. Sinon vous pouvez démarrer une instance du serveur ColdFusion (voir les instructions à la Leçon 17 ou dans le fichier LisezMoi sur le CD-ROM d accompagnement) et remplacer l URL par puis accéder aux données localement. Par exemple, à la Leçon 6, Utiliser des données XML distantes avec des contrôles, remplacez simplement par pour accéder aux mêmes données XML sans connexion Internet. Dans ce livre, nous utilisons des expressions du type donnez à la fonction le type void ou attribuez le type String à la fonction. Ces expressions ont pour but de simplifier les instructions même si, à strictement parler, les fonctions n ont pas de type, celui-ci s appliquant en réalité à la variable que renvoie la fonction. À qui ce livre est-il destiné? Le contenu de ce livre est destiné à tous les utilisateurs de Flex Builder 3 sous Windows, Macintosh ou Linux. L application du projet Adobe Flex 3 inclut de nombreux didacticiels complets dont le but est de vous montrer comment créer une application complète pour Flex 3. Cette application est une boutique d épicerie

9 Introduction xvii en ligne qui affiche des données et des images et transmet des commandes au serveur. Elle inclut un tableau de bord d administration pour permettre aux responsables du magasin de visualiser des graphiques en temps réel des ventes, ainsi qu une application de saisie de données pour l ajout et la modification des produits vendus en ligne. À la fin du livre, vous aurez créé un site web complet avec Flex. Vous commencerez par apprendre les rudiments de Flex et par comprendre comment Flex Builder peut être utilisé pour vous aider à développer des applications. Au cours des premières leçons, vous utiliserez le mode Design pour commencer à disposer l interface de l application mais, à mesure que vous avancerez dans le livre et serez familiarisé avec les langages utilisés par Flex, vous passerez de plus en plus de temps à travailler avec le mode Source, qui vous offre une liberté complète et un maximum de flexibilité pour travailler directement avec le code. D ici la fin du livre, vous devriez être suffisamment à l aise avec les langages de Flex et pourrez sans doute travailler sans Flex Builder en utilisant le SDK Flex open source et son compilateur en ligne de commande. Conventions utilisées dans ce livre Chaque leçon de ce livre commence par présenter les principales étapes de la leçon et introduit de nouvelles fonctionnalités. Les objectifs d apprentissage et le temps approximatif requis pour réaliser les exercices sont également listés au début de chaque leçon. Les projets sont divisés en exercices qui expliquent l importance de chaque compétence que vous allez acquérir. Chaque leçon s appuie sur les concepts et les techniques utilisés lors des précédentes leçons. ASTUCE : Les astuces signalent d autres moyens de réaliser les mêmes tâches et des suggestions à prendre en compte pour la mise en application des notions apprises. NOTE : Les notes proposent des informations générales supplémentaires qui complètent vos connaissances et signalent des techniques avancées que vous pouvez explorer pour étendre vos compétences. ATTENTION! Ces encarts vous avertissent lorsque vous risquez de rencontrer des erreurs, des problèmes ou des résultats inattendus. Texte en gras : les mots qui apparaissent en gras correspondent aux termes que vous devez taper lorsque vous suivez les étapes des leçons. Code en gras : les lignes qui apparaissent en gras dans les blocs de code vous aident à identifier aisément les modifications dans le bloc qui correspondent à une étape spécifique d un exercice.

10 xviii Adobe Flex 3 <mx:horizontallist dataprovider="{dp}" labelfunction="multidisplay" columnwidth="130" width="850"/> Code dans le texte : le code ou les mots-clés sont affichés avec une autre police que le reste du texte afin que vous puissiez plus aisément les identifier. Bloc de code : pour vous aider à identifier aisément le code ActionScript, XML et HTML dans le livre, le code a été mis en forme avec une police spéciale différente du reste du texte. Les lignes isolées de code qui dépassent les marges de la page sont renvoyées à la ligne suivante. Elles sont signalées par une flèche au début de la continuation de la ligne rompue et en retrait par rapport à la ligne prolongée. Par exemple : public function Product (_catid:number, _prodname:string, _unitid:number, _cost:number, _listprice:number, _description:string,_isorganic:boolean, _islowfat:boolean, _imagename:string) Texte en italique : les mots qui apparaissent en italique correspondent à du vocabulaire nouveau ou à du texte mis en valeur. Les italiques sont également utilisées pour le texte de remplacement, lorsque l entrée exacte peut changer selon votre contexte. Par exemple racinelecteur:/flex3tfs/flexgrocer, où racinelecteur dépend de votre système d'exploitation. Commandes de menus et raccourcis clavier : il existe souvent plusieurs moyens de réaliser la même tâche dans Flex Builder. Les différentes options seront pointées dans chaque leçon. Les commandes de menu sont affichées avec des chevrons entre les noms de menus et les commandes : Menu > Commande > Sous-commande. Les raccourcis clavier sont affichés avec un signe plus entre les noms de touches pour indiquer que vous devez appuyer simultanément sur les touches. Par exemple, Maj+Tab signifie que vous devez appuyer sur les touches Maj et Tab en même temps. CD-ROM : le CD-ROM qui accompagne ce livre inclut tous les fichiers multimédias, fichiers de départ et projets complets pour chaque leçon du livre. Ces fichiers sont respectivement situés dans les dossiers assets, start et complete. La Leçon 1, L ère des applications Internet riches, ne contient pas d exercice. Le CD-ROM inclut cependant des éléments dans le répertoire Lesson01. Ces fichiers fournissent le répertoire flexgrocer pour votre projet. À tout moment, si vous devez revenir aux fichiers source d origine, vous pouvez restaurer le projet FlexGrocer. Certaines leçons incluent même un répertoire intermediate qui contient des fichiers correspondant à différentes étapes du développement dans la leçon. Vous pouvez à tout moment consulter ces fichiers pour vérifier si les vôtres correspondent et que vous avez correctement suivi les exercices. Les fichiers sont organisés sur le CD-ROM dans des

11 Introduction xix dossiers correspondant à chaque leçon. Par exemple, les fichiers pour la Leçon 4 se trouvent sur le CD-ROM dans le dossier Lesson04. La structure des répertoires des leçons avec lesquels vous allez travailler est la suivante : La collection Training from the Source d'adobe Les collections Training from the Source et Advanced Training from the Source d Adobe sont développées en association avec Adobe et validées par les équipes de support produit. Idéals pour les personnes motivées qui ont soif d apprendre, les livres de la collection Training from the Source proposent des instructions pratiques conçues pour vous apporter des bases solides concernant les aspects fondamentaux du programme. Si vous aimez apprendre par la pratique, cette collection est faite pour vous. Chaque livre Training from the Source contient des heures d enseignement sur les produits logiciels Adobe. Les livres sont conçus pour enseigner les techniques requises pour créer des projets sophistiqués de niveau professionnel. Chaque livre inclut un CD-ROM qui contient tous les fichiers utilisés dans les leçons, des projets complets pour la comparaison et plus encore.

12 xx Adobe Flex 3 Certification et formation Adobe Ce livre est destiné à vous permettre d étudier à votre propre rythme avec du contenu en provenance directe de la source. D autres options de formation sont cependant aussi possibles grâce au programme de partenaires de formation autorisés d Adobe. Mettez-vous à la page en quelques jours avec les cours pratiques guidés par des exercices enseignés par les instructeurs certifiés Adobe. Sinon, apprenez par vous-même avec la formation interactive en ligne de l Université Adobe. Toutes ces sources de formation vous prépareront à devenir un développeur certifié Adobe. Pour plus d informations sur la formation autorisée et la certification, consultez le site www. adobe.com/training/. Ce que vous allez apprendre Vous allez développer les compétences requises pour créer et gérer vos propres applications Flex en travaillant avec ces leçons. À la fin de ce cours, vous pourrez : utiliser Flex Builder pour créer des applications Flex ; comprendre le MXML, ActionScript 3.0 et leurs interactions communes ; travailler avec des ensembles de données complexes ; charger des données d un serveur en utilisant du code XML, des services web et des objets distants ; gérer des événements pour contrôler l interactivité de votre application ; créer vos propres événements personnalisés ; créer vos propres composants, en MXML ou en ActionScript 3.0 ; appliquer des styles et des habillages afin de personnaliser l apparence d une application ; ajouter des graphiques à une application ; déployer vos applications sur le Web ou le bureau ; et plus encore

13 Introduction xxi Configuration minimale requise Windows Processeur Intel Pentium 4. 1 Go de RAM recommandé. Microsoft Windows XP (avec le Service Pack 2) ou Microsoft Vista Familial Premium ou supérieur. 500 Mo (autonome) d espace libre sur le disque dur pour l installation. La machine virtuelle Java : JRE de Sun, JRE 1.5 de Sun (incluse), JRE 1.5 d IBM, JRE 1.6 de Sun ou une version ultérieure. Flash Player 9 (9.0.30) ou ultérieur. Macintosh Macintosh G4 1,25 GHz PowerPC ou Intel. OS X ou ultérieur. 1 Go de RAM recommandé. 500 Mo d espace libre sur le disque dur pour l installation. La machine virtuelle Java : JRE 1.5 ou JRE 1.6 d Apple. Flash Player 9 (9.0.30) ou ultérieur. La ligne de produits Flex est extrêmement excitante et nous sommes impatients de voir ce que vous allez produire avec. Avec une formation solide en Flex, vous pouvez étendre rapidement vos compétences. Flex n est pas difficile à utiliser pour ceux qui ont un peu d expérience en programmation. Avec un peu de motivation et moyennant quelques efforts, vous survolerez les leçons qui suivent et créerez vos propres applications et sites personnalisés en un rien de temps. Flex Builder 3 Pro et Flex Builder 3 Standard Les fonctionnalités traitées dans ce livre sont disponibles à la fois dans Flex Builder 3 Pro et dans Flex Builder 3 Standard.