Adobe Flex 3 Training from the Source Jeff Tapper Michael Labriola Matthew Boles avec James Talbot Avant-propos de Matt Chotin, responsable produit Flex
LEÇON 2 Ce que vous allez apprendre Dans cette leçon, vous allez : créer un nouveau projet et trois principaux fichiers d application ; comprendre les différentes parties du workbench Flex Builder : éditeurs, vues et perspectives ; programmer, enregistrer et exécuter des fichiers d application ; utiliser certaines des fonctionnalités de Flex Builder 3 qui facilitent et accélèrent le développement des applications, comme les indications de code et l historique local ; travailler en mode Source et en mode Design ; utiliser différentes vues, comme la vue Navigator, la vue Composants et la vue Propriétés de Flex. Temps approximatif Cette leçon prend environ 1 heure 30 minutes. Fichiers de leçon Fichiers multimédias : Aucun Fichiers de départ : Aucun Fichiers terminés : Lesson02/complete/DataEntry.mxml Lesson02/complete/Dashboard.mxml Lesson02/complete/EComm.mxml
LEÇON 2 Prise en main Vous voilà prêt à vous lancer dans l apprentissage de Flex, et la première chose avec laquelle vous devez vous familiariser est l environnement dans lequel vous allez développer vos applications. Cet environnement baptisé Adobe Flex Builder 3 s appuie sur la plate-forme Eclipse, un EDI (environnement de développement intégré) open source extensible. Flex Builder 3 a étendu et personnalisé Eclipse pour la conception d applications Flex. Dans cette leçon, vous allez vous familiariser avec Adobe Flex Builder 3 en créant les trois fichiers d application principaux de l application FlexGrocer que vous allez construire dans ce livre. Vous découvrirez l interface de Flex Builder 3 et apprendrez à créer, à exécuter et à enregistrer des fichiers d application. Vous découvrirez également quelques-unes des nombreuses fonctionnalités que Flex Builder 3 propose pour faciliter le développement des applications. Création d un nouveau projet dans Flex Builder 3. 15
16 Adobe Flex 3 Débuter le développement d une application Flex Avant de pouvoir construire un immeuble, il faut en disposer les fondations. C est ce que propose cette leçon pour le développement ultérieur d une application Flex. Lorsque vous l aurez terminée, vous saurez manipuler le workbench Flex Builder 3 de manière à rendre le processus de développement Flex plus facile et plus rapide. En passant, vous créerez les trois fichiers d application principaux qui définissent les plus importantes sections de l application FlexGrocer. L étude d un nouveau domaine de connaissance implique toujours d en apprendre le vocabulaire de base. Dans cette leçon, vous allez apprendre le vocabulaire de base du développement Flex et de Flex Builder. Vous apprendrez ce que sont les vues, la perspective et l éditeur pour le workbench Flex Builder. Vous comprendrez aussi les termes décrivant les processus (et les processus eux-mêmes) qui transforment le texte entré dans Flex Builder de manière à obtenir le type de fichier que vous pouvez visualiser avec votre navigateur et le lecteur Flash. Créer un projet et une application MXML Dans ce premier exercice, vous allez créer une application Flex. Pour cela, vous devez d abord créer un projet dans Flex Builder. Le projet est une simple collection de fichiers et de dossiers qui vous aident à organiser votre travail. Tous les fichiers qui seront créés pour l application FlexGrocer viendront se placer dans ce projet. Vous verrez également que vous avez deux choix lorsque vous travaillez avec un fichier d application : vous pouvez travailler en mode Source ou en mode Design. Dans la plupart des cas, le mode choisi est affaire de préférence personnelle, mais il peut arriver que certaines fonctionnalités ne soient disponibles que dans un mode particulier. Au cours de cet exercice, vous allez aussi exécuter l application Flex. Vous verrez comment le code MXML que vous aurez écrit se transformera en un fichier SWF qui s affichera dans un navigateur. 1 Lancez Flex Builder 3 en choisissant Démarrer > Tous les programmes > Adobe > Adobe Flex Builder 3. C est très certainement ainsi que vous démarrerez Flex Builder. Il est possible qu Eclipse soit déjà installé sur votre ordinateur et que vous ayez précédemment ajouté la fonctionnalité Flex en utilisant la configuration de plug-in. Dans ce cas, vous devez ouvrir Eclipse comme vous l avez fait auparavant.
LEÇON 2 : Prise en main 17 2 Choisissez File > New > Flex Project. Pour le nom du projet (Project name), tapez FlexGrocer. Décochez la case Use default location (utiliser l emplacement par défaut) et, dans le champ Folder, tapez racinelecteur:\flex3tfs\flexgrocer. Assurez-vous que le bouton radio Web Application est sélectionné et que l option None est sélectionnée dans la liste déroulante Application server. Cliquez sur Next. NOTE : racinelecteur est une formule de remplacement désignant le disque racine de votre système d exploitation, qu il s agisse de Windows ou de Mac. Remplacez racinelecteur par le chemin approprié. En outre, notez que le nom du répertoire tient compte de la casse des caractères. Le nom du projet doit évoquer les fichiers contenus dans le projet. À mesure que vous travaillerez avec Flex Builder, vous aurez bientôt de nombreux projets et les noms de ces projets vous aideront à vous rappeler quels fichiers se trouvent dans chaque projet. N acceptez pas l emplacement par défaut. Il utilise votre répertoire Mes documents et place les fichiers en profondeur dans la structure des répertoires. Par souci de simplicité, placez vos fichiers de travail directement à la racine du lecteur.
18 Adobe Flex 3 Flex Builder 3 vous permet de choisir si vous souhaitez utiliser le compilateur le plus récent (par défaut) ou une version antérieure. Pour cette application, utilisez le compilateur le plus récent. 3 Conservez bin-debug comme dossier de sortie pour l application Flex compilée. Cliquez sur Next. Pour le moment, il n est pas utile de modifier ce réglage par défaut. 4 Pour le fichier d application principal (Main application file), tapez DataEntry.mxml. Par défaut, Flex Builder donne au fichier d application principal le même nom que votre projet. Ce n est pas ce que nous voulons dans le cas présent. Flex Builder crée automatiquement le fichier d application principal et inclut la structure de base d un fichier d application Flex.
LEÇON 2 : Prise en main 19 NOTE : Le MXML est un langage qui prend en compte la casse des caractères. Assurez-vous donc de respecter la casse des noms de fichier dans les balises présentées dans ce livre. À la fin de la leçon, nous verrons rapidement comment la programmation orientée objet affecte certains des usages en matière de casse des caractères dans les noms de fichiers, les balises et les propriétés. 5 Cliquez sur Finish et observez le projet et le fichier d application créés. Vous avez sous les yeux votre première application Flex. Elle s affiche pour le moment en mode Source. Dans la suite de cette leçon, vous l observerez aussi en mode Design. Bouton Run Boutons modes Source et Design Bouton Open Perspective Vue Navigator Vue Problems Éditeur Le fichier d application par défaut contient certains éléments que vous devez comprendre. La première ligne de code (<?xml version="1.0" encoding="utf-8"?>) est une déclaration de type de document XML. Le MXML étant un langage XML standard, il est impératif que la déclaration de document soit incluse.
20 Adobe Flex 3 La seconde ligne de code (<mx:application xmlns:mx="http://www.adobe.com/2006/ mxml"layout="absolute">) définit une page d application Flex principale. La balise <mx:application> représente le conteneur externe dans lequel s insère tout le contenu de l application Flex. Vous ne pouvez avoir qu une seule balise <mx:application> par application Flex. Dans la balise <mx:application>, la paire attribut /variable qui contient l URL xmlns:mx="http://www.adobe.com/2006/mxml" définit un espace de noms pour vos balises Flex. Ce code définit le préfixe mx à associer avec un ensemble de balises. Selon la terminologie XML, la valeur de l attribut qui ressemble à une URL est en fait un URI (Universal Resource Identifier ou identifiant universel de ressource). Dans un fichier de configuration comme flex-config.xml, une association est opérée entre cet URI et ce que l on appelle un fichier de manifeste. Le fichier de manifeste contient toutes les balises légales qui peuvent être utilisées avec le préfixe mx. Avec une configuration Flex Builder standard sur PC, le fichier se trouve à l emplacement suivant : dossierinstallation/adobe/ Flex Builder 3/sdks/3.0.0/frameworks/mxml-manifest.xml. Sur Mac, il se trouve à l emplacement suivant : dossierinstallation/adobe Flex Builder 3/sdks/3.0.0/frameworks/ mxml-manifest.xml. La figure suivante présente une partie de ce fichier. Pour finir, layout="absolute" définit de quelle manière cette application dispose ses enfants ou ce qui se trouve dans la page. Avec la disposition absolute, vous spécifiez
LEÇON 2 : Prise en main 21 des coordonnées x et y afin de positionner tous les enfants de l application. Les autres valeurs possibles pour la disposition sont vertical et horizontal. Le mode vertical signifie que tous les enfants de l application s enchaînent verticalement vers le bas de la page de l application. Le mode horizontal signifie qu ils s étendent dans la largeur de la page de l application. Au cours de votre développement dans Flex, vous utiliserez une variété de dispositions afin d obtenir l effet désiré. Comprendre le workbench de Flex Builder 3 Avant de poursuivre votre travail sur votre fichier d application, vous devez commencer par vous familiariser avec le workbench Flex Builder, qui n est autre que l interface de Flex Builder. Vous devez vous familiariser avec plusieurs termes concernant cette interface. Par exemple, vous allez apprendre dans cet exercice ce que signifient les vues, les éditeurs et les perspectives dans le workbench. 1 Fermez l éditeur actuel en cliquant sur le x à l extrémité droite de l onglet d éditeur DataEntry.mxml. Tous les éditeurs ont un onglet en haut à gauche de leur zone. À chaque fois qu un fichier est ouvert, il s ouvre dans le workbench à l intérieur de ce que l on appelle un éditeur. Vous venez ainsi de fermer l éditeur contenant le fichier DataEntry.mxml. Dans le workbench, vous pouvez ouvrir autant d éditeurs que vous le souhaitez à la fois. Chacun contient un fichier avec du code. 2 Ouvrez l éditeur contenant le fichier DataEntry.mxml depuis la vue Navigator en double-cliquant sur le nom du fichier. Vous pouvez également ouvrir le fichier en cliquant du bouton droit sur son nom et en choisissant Open. 3 Étirez l éditeur en largeur et en hauteur en double-cliquant sur son onglet. Dans certains cas, vous aurez besoin de voir autant de code que possible à l écran, notamment parce que Flex Builder ne renvoie pas le texte à la ligne. Double-cliquez simplement sur l onglet de l éditeur pour l étendre en largeur et en hauteur afin d afficher le maximum de code possible. 4 Ramenez l éditeur à sa taille précédente en double-cliquant sur son onglet de nouveau. Comme vous pouvez le voir, il est très facile de basculer d un affichage à l autre. 5 Cliquez sur le bouton Design dans l éditeur afin d afficher l application en mode Design.
22 Adobe Flex 3 Le workbench prend une apparence radicalement différente en mode Design et vous permet de faire glisser des contrôles d interface utilisateur dans l application. Vous pourrez aussi définir les valeurs de propriété en mode Design. Le mode Design permet de voir votre application sous une forme plus conforme à celle qu elle possédera pour l utilisateur final. 6 Retournez au mode Source en cliquant sur le bouton Source dans l éditeur. Dans ce livre, vous passerez le plus souvent votre temps en mode Source, mais le mode Design convient mieux pour certaines tâches. 7 Fermez la vue Navigator en cliquant sur le x de l onglet Navigator. Comme les éditeurs, toutes les vues possèdent des onglets en haut à gauche. Dans Flex Builder 3, les différentes sections qui affichent du contenu sont appelées des vues. 8 Rouvrez la vue Navigator en choisissant Window > Project Navigator. Quand vous fermez une vue, vous pouvez la rouvrir à partir de ce menu. Il existe quantité de vues. Choisissez Window > Other Views pour en faire apparaître un grand nombre. 9 Cliquez sur le bouton Open Perspective juste au-dessus du coin supérieur droit de l éditeur et choisissez la perspective Flex Debugging.
LEÇON 2 : Prise en main 23 Une perspective désigne une disposition de vues que vous pouvez utiliser de manière répétitive. Flex Builder inclut deux perspectives prédéfinies : Flex Development et Flex Debugging. Vous pouvez créer un assemblage avec votre propre ensemble de vues et l enregistrer sous la forme d une perspective que vous pourrez réactiver à tout moment. 10 Retournez à la perspective Flex Development. Comme vous pouvez le voir, il est très aisé de basculer d une perspective à l autre. Dans la suite du livre, vous utiliserez la perspective Debugging (débogage) et découvrirez plusieurs de ses options utiles. 11 S ils ne sont pas déjà affichés, activez les numéros de ligne de code en choisissant Window > Preferences. Dans la boîte de dialogue, cliquez sur les signes plus ou les triangles (sous Windows Vista) devant General puis Editors. Pour finir, cliquez sur Text Editors et cochez l option Show Line Numbers (afficher les numéros de ligne). Les numéros de ligne sont utiles car Flex Builder les mentionne lors du signalement des erreurs. ASTUCE : Vous pouvez également activer les numéros de ligne en cliquant du bouton droit dans la barre des marqueurs de l éditeur et en choisissant Show Line Numbers. La barre des marqueurs désigne la zone située juste à gauche du code dans l éditeur.
24 Adobe Flex 3 Exécuter votre application Lors du premier exercice, vous avez créé votre projet et une page d application. Sans même vous laisser le temps d exécuter cette application, le deuxième exercice vous a entraîné pour une visite guidée du workbench de Flex Builder. Vous allez maintenant revenir à votre application, l exécuter, y ajouter du code et vous familiariser avec la manipulation des fichiers. 1 Ouvrez le menu Project. Assurez-vous que l option Build Automatically ( compilation automatique) est précédée d une marque de coche. Lorsque l option Build Automatically est sélectionnée, Flex vérifie continuellement vos fichiers enregistrés, les compile au moment de la sauvegarde et les prépare à l exécution. Les erreurs de syntaxe sont marquées avant même que l application ne s exécute, ce qui ne se produit pas lorsque l option est décochée. ASTUCE : Avec des applications plus complexes, il est possible que vous constatiez que ce réglage ralentit votre travail. Vous pourrez dans ce cas désélectionner l option pour n effectuer la compilation qu au moment de l exécution de l application. 2 Exécutez votre application en cliquant sur le bouton Run. La fenêtre du navigateur s affiche mais rien n y apparaît. Vous venez d exécuter votre première application Flex, mais il ne s est pas passé grandchose. Ici, l application squelette ne contenait pas la moindre balise qui lui permette
LEÇON 2 : Prise en main 25 d afficher quelque chose dans le navigateur. Vous avez cependant vu l application s exécuter et le navigateur par défaut s ouvrir et afficher le résultat, si maigre qu il ait été. NOTE : Que s est-il exactement passé lorsque vous avez cliqué sur le bouton Run? En fait, un certain nombre de processus entrent en jeu. Tout d abord, les balises XML dans le fichier d application sont traduites en ActionScript. Le code ActionScript est ensuite utilisé pour générer un fichier SWF, le format que comprend le lecteur Flash. Le fichier SWF est à son tour envoyé au lecteur Flash dans le navigateur. htpp://www.flexgrocer.com/dataentry.mxml MXML Client équipé du lecteur Flash ActionScript DataEntry.swf SWF 3 Fermez le navigateur et revenez à Flex Builder. 4 Ajoutez une balise <mx:label> en plaçant le pointeur entre les balises <mx:application>. Entrez le signe inférieur à (<) puis tapez mx, suivi par un signe deux-points (:). Une longue liste de balises s affiche. Appuyez sur L (majuscule ou minuscule) et sélectionnez Label en la passant en surbrillance et en appuyant sur Entrée ou en double-cliquant dessus.
26 Adobe Flex 3 Il s agit d un exemple d indication de code, une fonctionnalité très utile de Flex Builder qu il est judicieux de mettre à profit. 5 Appuyez sur la barre d espace. Une liste d options s affiche, dont des propriétés et des méthodes, que vous pouvez utiliser avec la balise <mx:label>. Appuyez sur la lettre t puis sur la lettre e. Ensuite, sélectionnez la propriété text. La fonctionnalité d indication de code permet non seulement de sélectionner des balises, mais également de choisir les attributs qui leur appartiennent. NOTE : Dans ces deux exemples d indication de code, les deux options apparaissent en haut de la liste. Si les options ne se trouvent pas en haut, sélectionnez-les en maintenant la touche fléchée du bas enfoncée et en cliquant sur Entrée ou en double-cliquant sur la sélection. 6 Tapez My first Flex application pour la valeur de la propriété text. Assurez-vous que le texte se trouve placé entre les guillemets insérés par l indicateur de code. Pour respecter les règles de formatage XML, la valeur de l attribut doit être placée entre guillemets. 7 Terminez la balise avec une barre oblique (/) et un signe supérieur à (>). Vérifiez que votre code ressemble à ceci : <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:label text="my first Flex application"/> </mx:application>
LEÇON 2 : Prise en main 27 NOTE : Le code de cet exemple place la paire attribut/valeur layout="absolute" de la balise Application sur une ligne séparée et en retrait. La balise </mx:application> entière aurait pu se trouver sur une ligne. L ajout de sauts de ligne au code est affaire de préférence personnelle. Certains développeurs aiment placer chaque paire attribut/valeur sur une ligne séparée en retrait. La syntaxe XML permet de terminer une balise par deux moyens. Vous venez d utiliser le premier, qui consiste à placer une barre oblique à la fin de la balise. L autre option consiste à utiliser la barre oblique devant le nom de la balise tapé entièrement une seconde fois, comme ceci : <mx:label text="my first Flex application"> </mx:label> En général, on utilise la barre oblique à la fin de la balise à moins qu il n y ait une raison de placer quelque chose dans un bloc de balise. Par exemple, si vous souhaitez placer la balise </mx:label> à l intérieur du bloc de balises <mx:application>, vous devez terminer la balise </mx:application> sur une ligne séparée. 8 Enregistrez le fichier et exécutez-le. Le texte My first Flex application apparaît dans votre navigateur. Quelque chose apparaît enfin dans votre nouvelle application Flex. La balise <mx:application> possède une apparence par défaut dont le tableau suivant livre la synthèse : Style backgroundimage fillalphas fillcolors backgroundsize 100 % paddingtop paddingleft paddingbottom paddingright horizontalalign Styles d application par défaut Par défaut Dégradé contrôlé par les fillalphas et les fillcolors [1.0,1.0], un arrière-plan entier opaque [0x9CB0BA,0x68808C], un arrière-plan gris légèrement plus sombre en bas 24 pixels 24 pixels 24 pixels 24 pixels Centré
28 Adobe Flex 3 Si vous n aimez pas ces valeurs par défaut et souhaitez commencer avec l apparence la plus simple possible, attribuez la valeur plain à la propriété stylename, comme ceci : <mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" stylename="plain"/> Dans ce cas, vous obtenez l apparence dont le tableau suivant livre la synthèse : Style backgroundimage backgroundcolor paddingtop paddingleft paddingbottom paddingright horizontalalign Styles d application simples (plain) Description Aucun Blanc 0 pixels 0 pixels 0 pixels 0 pixels Gauche 9 Changez la valeur de la propriété text en remplaçant My first Flex application par un nouveau texte. Enregistrez le fichier et exécutez-le. L étape suivante présente une autre fonctionnalité utile de Flex Builder mais, pour la découvrir, vous devez avoir au moins deux versions enregistrées du fichier. Voilà pourquoi vous devez changer le texte et enregistrer une autre version du fichier. 10 Cliquez du bouton droit dans l éditeur et, dans le menu contextuel, choisissez Replace With > Local History. Une grande boîte de dialogue apparaît. 11 Comparez la version courante de votre fichier, qui se trouve du côté gauche de la boîte de dialogue, avec l ancienne version à droite. Un historique des cinquante dernières versions du fichier est conservé en haut de la boîte de dialogue. Cliquez sur Replace (remplacer) pour ramener votre texte d origine, My first Flex application. Cette fonctionnalité peut se révéler très utile lorsque vous souhaitez revenir à une version précédente du code.
LEÇON 2 : Prise en main 29 ASTUCE : Vous pouvez modifier les réglages de l historique local en choisissant Window > Preferences. Dans la boîte de dialogue, choisissez General > Workspace, puis Local History. 12 Introduisez volontairement une erreur dans la page en remplaçant la balise <mx:label> par <mx:labe>, enregistrez le fichier, puis voyez où l erreur est signalée. Dès que le fichier est enregistré, la fonctionnalité de compilation automatique vérifie votre code. L erreur est trouvée et signalée de deux manières. Tout d abord, un petit x blanc dans un cercle rouge apparaît à côté de la ligne de code dans laquelle l erreur se trouve. Ensuite, une liste des erreurs apparaît dans la vue Problems.
30 Adobe Flex 3 ASTUCE : Conservez le pointeur au-dessus de la description de l erreur pour en afficher la description. Vous pouvez aussi double-cliquer sur l erreur listée dans la vue Problems afin de positionner le curseur dans la ligne appropriée de code de l éditeur. 13 Exécutez l application. Vous verrez l avertissement suivant, qui indique que le projet contient des erreurs et vous demande de confirmer avant de poursuivre le lancement. Dans le cas présent, cliquez sur No pour interrompre le lancement. Si vous cliquez sur Yes dans cette boîte de dialogue, Flex Builder exécute la dernière version correctement compilée de votre application. 14 Corrigez l erreur, enregistrez le fichier et exécutez-le pour vous assurer que tout fonctionne de nouveau correctement. Fermez le fichier une fois qu il s est correctement exécuté. Vous êtes maintenant prêt à passer au prochain exercice. Créer une seconde page d application et travailler en mode Design Jusqu à ce point, vous avez travaillé avec le fichier en mode Source. Vous préférerez peutêtre n examiner que le code, mais certaines tâches sont bien plus simples à réaliser en mode Design. C est le cas par exemple des opérations de mise en page. 1 Choisissez File > New > MXML Application. Dans la boîte de dialogue qui apparaît, entrez le nom de fichier (Filename) Dashboard. Dans la liste déroulante Layout, sélectionnez horizontal. Cliquez sur Finish. Flex Builder mémorise votre choix de mise en page précédent la prochaine fois que vous créez une application. Rappelez-vous que la mise en page horizontal dispose tous les contrôles ajoutés à l application en les répartissant horizontalement. NOTE : Vous n êtes pas obligé d entrer l extension.mxml. Flex Builder l ajoute automatiquement.
LEÇON 2 : Prise en main 31 2 Cliquez sur le bouton mode Design dans l éditeur pour ouvrir le nouveau fichier en mode Design. Vous remarquerez qu un certain nombre de nouvelles vues s ouvrent lorsque vous passez en mode Design. Examinez la figure suivante pour découvrir quelques vues clés avec lesquelles vous travaillerez en mode Design. Boutons des modes Source et Design Vue States Vue Flex Properties Vue Components
32 Adobe Flex 3 3 Dans la vue Components, localisez le dossier Controls. Faites glisser un contrôle Text et positionnez-le dans la portion supérieure de l éditeur. Le contrôle Text se centre car vous avez choisi la disposition horizontale. La vue Components contient les composants que vous allez utiliser dans vos applications Flex. Cette vue, qui n est disponible qu en mode Design, permet de faire glisser des composants dans votre application. Vous verrez dans une prochaine leçon que vous pouvez aussi positionner les contrôles en utilisant une mise en page contrainte. 4 Localisez la vue States en haut à droite de l éditeur. Cliquez sur l icône Minimize pour réduire la vue States. Ensuite, concentrez-vous sur la vue Flex Properties. 5 Cliquez n importe où dans l éditeur afin de désélectionner le contrôle Text et de sélectionner l application. Le nom de l objet actuellement sélectionné apparaît en haut de la vue Flex Properties. Assurez-vous qu il s agit de mx:application. Localisez la section Layout de la vue Flex Properties. Dans la liste déroulante Layout, choisissez absolute.
LEÇON 2 : Prise en main 33 Lorsque la disposition est horizontale, vous ne pouvez pas spécifier la position du contrôle Text en utilisant des coordonnées x et y, ce que vous souhaitez faire ici. La disposition absolue le permet.
34 Adobe Flex 3 6 Sélectionnez le contrôle Text et tapez 160 pour la valeur x et 180 pour y. Vous venez de positionner le contrôle Text en définissant ses valeurs dans la vue Flex Properties. 7 Cliquez sur le contrôle Text et déplacez-le en haut à gauche de l écran. Notez que les coordonnées x et y ont changé. Vous venez de positionner le contrôle Text en le faisant glisser en mode Design. 8 En haut de la vue Flex Properties, localisez la section Common. Pour la valeur de la propriété text, entrez la chaîne I am using the Flex Properties view. Appuyez sur Entrée. Le contrôle Text contenant la chaîne entrée apparaît. Vous venez de découvrir deux moyens d entrer des valeurs pour des propriétés. En mode Source, ces valeurs se saisissent entre guillemets après le nom de la propriété et un signe égal. En mode Design, sélectionnez le contrôle auquel les valeurs de propriétés doivent être fournies, puis utilisez la vue Flex Properties pour taper les valeurs des propriétés. Un troisième moyen pour changer la valeur du texte affiché consiste à doublecliquer sur le contrôle en mode Design et à taper ou à modifier le texte. NOTE : L une des différences entre le contrôle Label et le contrôle Text tient à ce que ce dernier peut contenir plusieurs lignes de texte. Ce n est pas le cas du contrôle Label que vous avez utilisé en mode Source. Celui-ci ne peut en contenir qu une seule.
LEÇON 2 : Prise en main 35 9 Repassez en mode Source. Vous pouvez voir à présent le code qui représente vos actions en mode Design. Vous avez un contrôle Text avec des propriétés text, x et y associées aux valeurs que vous avez attribuées dans la vue Flex Properties. Vous en viendrez très certainement à développer une préférence pour l un ou l autre mode (Source ou Design). Un grand nombre d actions peuvent être réalisées dans les deux vues. 10 Exécutez l application en choisissant Dashboard.mxml dans la liste déroulante qui apparaît lorsque vous cliquez sur la flèche du bas à côté du bouton Run. Le texte du contrôle Text apparaît dans le navigateur. Lorsque vous exécutez l application, le texte apparaît dans le navigateur comme vous l avez positionné en mode Design. Félicitations! Vous venez d exécuter votre deuxième application Flex. NOTE : Il ne peut y avoir qu une seule balise <mx:application> pour application Flex. À ce stade, DataEntry.mxml et Dashboard.mxml contiennent tous deux une balise <mx:application>. En utilisant plusieurs balises <mx:application>, vous avez créé deux applications Flex distinctes. 11 De retour dans Flex Builder, supprimez le contrôle Text dans l application Dashboard. Changez aussi la disposition en sélectionnant de nouveau l option horizontal. Vous devez changer ce fichier afin de le préparer pour travailler avec dans les leçons ultérieures. Préparation à la leçon suivante L application FlexGrocer complète sera constituée de trois fichiers d application Flex. Vous en avez créé deux : DataEntry.mxml et Dashboard.mxml. Nous allons créer dans cet exercice la dernière application, EComm.mxml. 1 Choisissez File > New > MXML application. Dans la boîte de dialogue qui apparaît, tapez le nom de fichier EComm. Choisissez absolute dans la liste déroulante Layout. Cliquez sur Finish.
36 Adobe Flex 3 Cette application permet aux clients de commander des articles d épicerie sur FlexGrocer. DataEntry.mxml définit l endroit où les articles sont ajoutés à l inventaire et où les quantités sont mises à jour dans l application. Dashboard.mxml définit l endroit où les ventes de produits peuvent être analysées. 2 Assurez-vous que les trois fichiers ne contiennent rien d autre que le code de squelette inséré lors de la génération automatique du fichier. Pour cela, vous devez supprimer un contrôle Label de DataEntry.mxml. La propriété layout de DataEntry.mxml et EComm. mxml doit se voir attribuer la valeur absolute, tandis que la propriété layout de Dashboard.mxml doit valoir horizontal. La seule ligne de code dans les trois fichiers doit être celle qui apparaît ici, avec la valeur de disposition ( layout) appropriée : <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> </mx:application> 3 Enregistrez chaque fichier, exécutez-le, puis fermez-le afin de vous préparer à la leçon suivante. Vous avez créé les trois fichiers d application principaux avec lesquels vous allez travailler pour le reste du livre. NOTE : La programmation orientée objet n est pas le sujet de ce livre mais, pour être un développeur Flex efficace, vous devez au moins avoir quelques connaissances des principes et de la terminologie de la programmation orientée objet. Par exemple, les balises que vous avez vues (comme <mx:application>, <mx:label> et <mx:text>) font en fait référence à des classes. L aide Adobe Flex 3 MXML et ActionScript Language Reference (parfois appelée ASDoc) est le document qui liste ces classes, leurs propriétés, leurs méthodes, et d autres informations également. NOTE : Les standards de la programmation orientée objet ont influencé le choix des noms de fichiers dans cette leçon. De manière traditionnelle, les noms de classes commencent toujours par une lettre majuscule et chaque classe doit être stockée dans un fichier séparé dans Flex. Les trois fichiers que vous avez créés dans cette leçon sont des classes respectivement nommées DataEntry, Dashboard et EComm. Chacune de ces classes est une sous-classe, ou un enfant, de la classe Application, et commence donc par une lettre majuscule.
LEÇON 2 : Prise en main 37 Dans cette leçon, vous avez : créé un projet pour organiser les fichiers de votre application ; effectué une visite guidée des composants du workbench de Flex Builder 3 (les vues, les éditeurs et les perspectives) utilisés pour créer des fichiers d application ; créé et exécuté des fichiers d application en utilisant des indications de code et l historique local pour produire le code de ces fichiers ; travaillé en mode Source et en mode Design dans un éditeur.