7.1 Introduction à la navigation Manipuler une ViewStack Les contrôles TabNavigator et Accordion Mise en pratique :

Transcription

1 7 7.1 Introduction à la navigation Manipuler une ViewStack Les contrôles TabNavigator et Accordion Mise en pratique : mon CV en ligne Check-list

2 Naviguer dans son application C e chapitre est dédié à la navigation au sein d une application riche. Les conteneurs de navigations fournis par le framework Flex permettent d enrichir vos interfaces et de mettre en œuvre des scénarios en fonction des choix de l utilisateur.

3 7 Naviguer dans son application 7.1 Introduction à la navigation Vous devriez maintenant avoir un bon aperçu des composants et conteneurs du framework Flex. Cependant, nous n avons pas encore abordé le problème de la navigation au sein d une application. En effet, contrairement à un site web standard, une application Flex n est pas divisée en pages dynamiques distinctes. Le principe se rapproche nettement plus d une application de bureau classique où tous les composants sont associés à une fenêtre. En MXML, c est la balise <mx:application> qui représente le conteneur parent et nous y avons jusqu à présent ajouté des composants toujours affichés. Nous allons aborder dans ce chapitre les composants permettant de fournir un système de navigation afin de guider les utilisateurs dans nos applications. Ce type de composants est très souvent utilisé pour réaliser des processus de validation multi-étapes (panier d achat ou remplissage de plusieurs formulaires) et permettent d alléger un écran trop chargé en le décomposant en plusieurs sous-catégories. De manière générale, les conteneurs de navigation permettent de contrôler les actions de l utilisateur en affichant ou en masquant certains composants de manière à ce qu un seul et unique conteneur enfant ne soit visible. Vous pouvez d ores et déjà avoir un aperçu des huit composants de navigation que nous détaillerons dans ce chapitre. Les composants sont accessibles dans Flex Builder 3 dans la catégorie Navigator. c Fig. 7.1 : Composants de navigation du framework Flex 7.2 Manipuler une ViewStack Nous allons utiliser notre premier composant de navigation : le conteneur ViewStack est l élément le plus simple et le plus générique. Introduction au composant ViewStack Le composant ViewStack est au cœur du système de navigation dans Flex puisque tous les autres conteneurs de la catégorie en dérivent ou implémentent des méthodes ou propriétés similaires. Comme nous l avons mentionné plus haut, une ViewStack est un 204

4 Manipuler une ViewStack 7 conteneur : elle peut donc contenir d autres objets avec comme particularité de devoir obligatoirement être aussi des conteneurs. Dans le cas contraire, une erreur se produirait à l exécution du programme. Le diagramme suivant va vous permettre de mieux comprendre le lien entre ces différents contrôles de navigation : c Fig. 7.2 : Diagramme de classe des contrôles de navigation En fait, une ViewStack fonctionne de la manière suivante. Le composant stocke en interne une collection de conteneurs enfants qui sont empilés les uns sur les autres (stacked en anglais). La particularité de ce composant est qu un seul et unique conteneur enfant ne peut être visible à la fois. Il faut ensuite utiliser du code ActionScript (en utilisant les 205

5 7 Naviguer dans son application méthodes et propriétés du composant) ou d autres composants afin de choisir quel conteneur devra être affiché par la ViewStack. L image suivante schématise des conteneurs encapsulés dans une ViewStack : c Fig. 7.3 : Schéma du fonctionnement d une ViewStack Notez également que ce composant adopte certaines propriétés par défaut : j Taille par défaut : une ViewStack adopte la largeur et la hauteur du conteneur affiché par défaut. j Redimensionnement : une ViewStack ne change pas de taille lorsque le conteneur actif change, il faut pour cela utiliser la propriété resizetocontent. j Positionnement des conteneurs enfants : les conteneurs enfants sont positionnés par défaut dans le coin supérieur gauche de la ViewStack. Si l un des conteneurs enfants est plus grand que la ViewStack, alors il sera tronqué. Ajouter une ViewStack dans une application Nous allons maintenant utiliser un composant ViewStack pour stocker plusieurs autres conteneurs de type HBox par exemple. Comme vous vous en doutez, la balise <mx:viewstack> est utilisée pour déclarer ce type de composant : nous la nommerons "myvs". Nous allons placer trois HBox que nous remplirons avec un Label permettant de reconnaître le composant visible. Nous allons également fixer une largeur et une hauteur 206

6 Manipuler une ViewStack 7 communes à l exception du dernier élément qui sera plus large de 200 pixels. Nous ajouterons enfin un Spacer puis un second Label pour bien montrer le comportement par défaut d une ViewStack lorsque le conteneur enfant nécessite une taille supérieure. <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx=" layout="vertical"> <mx:viewstack id="myvs" borderstyle="solid" backgroundcolor="white"> <mx:hbox id="hb1" label="conteneur 1" width="600" height="600" > <mx:label text="le conteneur 1 est affiché" fontsize="26"/> </mx:hbox> <mx:hbox id="hb2" label="conteneur 2" width="600" height="600"> <mx:label text="le conteneur 2 est affiché" fontsize="26"/> </mx:hbox> <mx:hbox id="hb3" label="conteneur 3" width="800" height="600"> <mx:label text="le conteneur 3 est affiché" fontsize="26"/> <mx:spacer width="200"/> <mx:label text="tronqué" fontsize="26" /> </mx:hbox> </mx:viewstack> </mx:application> Essayez à présent d ajouter un composant classique dans la ViewStack comme un simple Label par exemple. L application compile correctement, mais une erreur se produit à l exécution car le Player ne peut pas forcer un composant de type <mx:label> en conteneur. c Fig. 7.4 : Une ViewStack n accepte que des conteneurs comme composant enfant. 207

7 7 Naviguer dans son application Normalement, votre ViewStack devrait ressembler à ceci : c Fig. 7.5 : Premier exemple du composant ViewStack Nous vous l accordons, pour l instant, cela n est guère pratique car nous ne pouvons pas choisir le composant de type HBox à afficher puisque le conteneur ViewStack n implémente pas de mécanisme de navigation par défaut. Nous allons arranger tout cela en créant une fonction ActionScript qui changera le composant à afficher. Cette fonction utilisera les propriétés des ViewStack. Les plus importantes pour manipuler ce type de composant sont les suivantes : Tableau 7.1 : Propriétés essentielles de ViewStack Propriété SelectedIndex Utilisation Cette propriété donne l indice du composant actuellement actif (c est-à-dire visible) s il y a des conteneurs enfants dans la ViewStack. Les indices des conteneurs commencent à 0 comme tous les tableaux en Flex, et s il n y a pas de composant, alors cette propriété a comme valeur -1. Il est également possible d utiliser cette propriété dans la balise MXML de la ViewStack pour choisir le composant qui sera affiché par défaut de la manière suivante : <mx:viewstack id="myvs" selectedindex="1">. SelectedChild Cette propriété a un fonctionnement similaire à SelectedIndex ; cependant, c est ici l ensemble du composant enfant qui est utilisé au lieu de son indice. numchildren Correspond au nombre de composants enfants contenu dans une ViewStack. Nous allons maintenant ajouter une HBox au-dessus de notre composant ViewStack auquel nous ajouterons un label qui affichera les détails du composant grâce au binding (liaison avec les données) de Flex et une ComboBox que nous nommerons cb_switch et qui sera initialisé avec un tableau de chaînes allant de 1 à 3. Enfin, la méthode ActionScript 208

8 Manipuler une ViewStack 7 permettant de changer le conteneur sera appelée sur l événement change de la ComboBox. Voici donc le code à ajouter au-dessus de notre ViewStack : <mx:script> <![CDATA[ public function switchconteneur(event:event) : void { myvs.selectedindex = parseint(cb_switch.selectedlabel) - 1; } ]]> </mx:script> <mx:hbox> <mx:combobox id="cb_switch" change="switchconteneur(event)"> <mx:dataprovider> <mx:array> <mx:string>1</mx:string> <mx:string>2</mx:string> <mx:string>3</mx:string> </mx:array> </mx:dataprovider> </mx:combobox> <mx:label text="le conteneur actif est le numéro {myvs.selectedindex + 1} / {myvs.numchildren} : {myvs.selectedchild.name} "/> </mx:hbox> Relancez l application puis sélectionnez le conteneur 3 grâce à la liste déroulante. Un ascenseur s affiche en bas du conteneur car nous lui avons assigné une taille plus large que le composant par défaut (indice 0) qui est le conteneur hb1. c Fig. 7.6 : Le conteneur 3 est tronqué. Pour changer ce comportement et redimensionner la ViewStack à chaque changement de conteneur, il suffit d activer la propriété resizetocontent de la manière suivante : 209

9 7 Naviguer dans son application <mx:viewstack id="myvs" borderstyle="solid" backgroundcolor="white"resizetocontent="true"> Vous devriez maintenant avoir le conteneur 3 affiché en entier : c Fig. 7.7 : Le conteneur 3 est affiché en entier. Manipuler une ViewStack avec les contrôles de type navigation bar Comme vous venez de le constater, une ViewStack seule n est pas très pratique à utiliser pour une navigation aisée au sein d une application. En effet, des composants dérivant de cette classe ou implémentant les mêmes propriétés et méthodes lui sont souvent préférés tels que les composants TabNavigator et Accordion que nous aborderons prochainement. Si vous regardez plus attentivement la liste des composant classés dans la catégorie Navigator ou encore le diagramme de classe au début de ce chapitre, vous remarquerez plusieurs composants héritant de la classe NavBar. Nous allons voir les quatre composants suivants en détail : j ButtonBar ; j ToggleButtonBar ; j LinkBar ; j TabBar. Si ces composants sont classés dans la catégorie Navigator, c est parce qu ils permettent tous d implémenter directement un système de navigation pour le composant ViewStack en spécifiant simplement le dataprovider adéquat (ici le nom de la ViewStack). Les contrôles ButtonBar et ToggleButtonBar Les contrôles ButtonBar et ToggleButtonBar représentent des groupes de boutons ordonnancés de manière horizontale ou verticale et ayant une apparence commune. La 210

10 Manipuler une ViewStack 7 principale différence entre ces deux composants vient de leur comportement lorsque l utilisateur clique sur un bouton du contrôle. Sur un composant ButtonBar, le bouton change d apparence lors d un clic puis il reprend son état normal. Le composant ToggleButtonBar, quant à lui, ne revient pas à son apparence initiale et garde l apparence d un bouton enfoncé même si l utilisateur relâche le bouton. Cela permet d informer l utilisateur de manière visuelle quel conteneur est actif, lorsque la ToggleButtonBar est utilisée avec un composant ViewStack. Voici à quoi ressemblent visuellement ces deux composants : c Fig. 7.8 : Une ButtonBar Et voici le code associé : <mx:buttonbar dataprovider="myvs" /> c Fig. 7.9 : Une ToggleButtonBar Le code à nouveau est le suivant : <mx:togglebuttonbar dataprovider="myvs" /> Comme vous pouvez le voir sur l image précédente, la seule différence notable vient du fait que le composant ToggleButtonBar garde le bouton sélectionné sur l état enfoncé. Si vous cliquez de nouveau dessus, le bouton reste toujours sélectionné. Pour l éviter, vous devez modifier la propriété toggleonclick qui est à false par défaut. Dans ces deux exemples, une valeur a été affectée à la propriété dataprovider ; nous avons passé en paramètre le nom du composant ViewStack que nous avions précédemment déclaré. Les deux composants ont alors créé un bouton pour chaque sous-conteneur de la ViewStack, et leur propriété label a servi pour le texte de chaque bouton. Vous pouvez maintenant utiliser les barres de contrôle pour naviguer très simplement dans votre application. Cependant, les dataprovider des composants ButtonBar ne sont pas limités à la ViewStack ; il est ainsi possible de déclarer ses propres dataprovider en utilisant des tableaux de chaînes ou des tableaux d objet. Dans ce dernier cas, le composant recherche trois propriétés pour définir les boutons : j label : le nom qui sera affiché sur le bouton ; j icon : une image à éventuellement inclure avant le label ; 211

11 7 Naviguer dans son application j tooltip : affiche une description au passage de la souris. Voici donc un petit exemple MXML avec un tableau d objets décrit de manière statique : <mx:buttonbar> <mx:dataprovider> <mx:array> <mx:object label="conteneur 1" tooltip="afficher le premier conteneur" icon="@embed(source= soleil.gif /> <mx:object label="conteneur 2" tooltip="afficher le deuxième conteneur"/> <mx:object label="conteneur 3" tooltip="afficher le dernier conteneur"/> </mx:array> </mx:dataprovider> </mx:buttonbar> Le résultat visuel est le suivant : c Fig : ButtonBar associé à un tableau d objets Bien sûr, il ne se passe plus rien quand l utilisateur clique sur le bouton puisque le dataprovider n est plus une ViewStack. C est que nous allons examiner. Les deux composants ButtonBar et ToggleControlBar fournissent un seul et unique événement pour la gestion des boutons. Il s agit de l événement ItemClick, de type ItemClickEvent, qui contient des informations relatives au bouton cliqué : j label : titre du bouton cliqué ; j index : indice du bouton (de 0 jusqu à n-1 où n est le nombre d éléments du dataprovider). Le composant LinkBar Le composant LinkBar est relativement similaire aux deux composants que nous venons de voir, la différence la plus notable se situant à nouveau dans le design. Cette fois, les éléments ne sont plus représentés par des contrôles Button mais par des LinkButton qui ont l apparence de liens HTML classiques. Là encore, il est possible de spécifier un dataprovider de type ViewStack ou d en déclarer un via un tableau de chaîne de 212

12 Manipuler une ViewStack 7 caractères. Nous allons donc ajouter un élément LinkBar et un bout de code ActionScript qui se déclenchera sur l événement itemclick que nous venons de voir. Commençons par la définition de l élément avec son dataprovider : <mx:linkbar id="lbar"> <mx:dataprovider> <mx:array> <mx:string>adobe</mx:string> <mx:string>google</mx:string> <mx:string>sun</mx:string> </mx:array> </mx:dataprovider> </mx:linkbar> Ce qui devrait donner ceci : c Fig : Le composant LinkBar Ajoutons maintenant une méthode pour ouvrir une nouvelle page web lorsque l utilisateur clique sur un élément de la barre en utilisant les propriétés d un objet ItemClickEvent. Nous allons à cet effet utiliser la méthode NavigateToUrl qui prend en paramètre un objet de type URLRequest et une chaîne indiquant le mode d ouverture. Voici le résultat final : <mx:script> <![CDATA[ public function openwindow(event:itemclickevent) : void{ navigatetourl(new URLRequest( + String(event.item).toLowerCase() +.com ), _blank ); } ]]> </mx:script> <mx:linkbar id="lbar" itemclick="openwindow(event)"> <mx:dataprovider> <mx:array> <mx:string>adobe</mx:string> <mx:string>google</mx:string> <mx:string>sun</mx:string> </mx:array> </mx:dataprovider> </mx:linkbar> </mx:application> 213

13 7 Naviguer dans son application Le composant TabBar Le comportement de ce composant est très similaire aux trois autres contrôles. Encore une fois, la différence la plus notable se situe au niveau du design. Nous allons donc en profiter pour vous parler d une dernière propriété de ce type d élément. Dans l exemple du composant ButtonBar, le nom du bouton était indiqué par la propriété label de l objet car c est celle-ci que Flex recherche par défaut. C est d ailleurs exactement comme cela que les boutons sont nommés : lorsque le dataprovider est une ViewStack (collection de conteneur), c est la propriété label des sous-conteneurs qui est alors utilisée. Il est cependant possible d en spécifier une autre grâce à la propriété labelfield de la manière suivante : <mx:tabbar labelfield="autrenom"> <mx:dataprovider> <mx:object autrenom="menu 1"/> <mx:object autrenom="menu 2"/> <mx:object autrenom="menu 3"/> </mx:dataprovider> </mx:tabbar> c Fig : Aspect visuel d une TabBar Dimension des conteneurs enfants Comme nous vous l avons indiqué en début de chapitre, une ViewStack et ses composants dérivés ne se redimensionnent pas automatiquement lors du changement du conteneur actif. Bien sûr, vous pouvez choisir de changer ce comportement grâce à la propriété resizetocontent mais il vaut mieux éviter qu un conteneur de navigation ne change de taille à chaque modification, car cela déplacerait les composants voisins par la même occasion. Le plus simple serait donc que la ViewStack adopte la taille du plus grand de ses éléments, et comme vous avez pu le constater ce n est pas le cas puisque c est la taille du premier composant affiché qui est utilisée. Vous avez donc plusieurs solutions pour dimensionner une ViewStack : j Imposer une taille au conteneur ViewStack (en valeur absolue ou en utilisant le pourcentage) avec les propriétés width et height. j Mettre tous les composants à la même taille de manière explicite (encore la propriété width et height mais cette fois sur chaque sous-conteneur). 214

14 Les contrôles TabNavigator et Accordion 7 j Mettre le composant le plus grand en premier (ce qui n est cependant pas très pratique). 7.3 Les contrôles TabNavigator et Accordion Il est relativement facile d associer une ViewStack à une barre de navigation, mais il serait cependant bien plus pratique de réunir les deux en un seul et unique composant. C est le rôle du TabNavigator et de l Accordion. Le composant TabNavigator Un TabNavigator pourrait être comparé au niveau visuel et fonctionnel à une ViewStack associée à un composant TabBar puisqu il propose d afficher un ensemble de conteneurs sous la forme d onglets navigables. Il se déclare également de façon identique : <mx:tabnavigator id="mytn" borderstyle="solid" backgroundcolor="white" width="400" height="250"> <mx:hbox id="hb12" label="conteneur 1" icon="@embed(source= soleil.gif )" > <mx:label text="le conteneur 1 est affiché" fontsize="26"/> </mx:hbox> <mx:hbox id="hb23" label="conteneur 2" > <mx:label text="le conteneur 2 est affiché" fontsize="26"/> </mx:hbox> <mx:hbox id="hb34" label="conteneur 3" > <mx:label text="le conteneur 3 est affiché" fontsize="26"/> </mx:hbox> </mx:tabnavigator> c Fig : Rendu visuel du composant 215

15 7 Naviguer dans son application Le nommage des onglets se base encore sur la propriété label des conteneurs enfants. Il est aussi possible d ajouter une icône grâce à la propriété icon de chaque élément comme dans l exemple précédent. Les éléments sont rangés de gauche à droite dans l ordre où ils ont été déclarés et ils sont visibles par défaut, à moins de cacher un conteneur en mettant la propriété enabled à false. Dans ce cas, l onglet est toujours présent mais il n est plus cliquable. Enfin, ce composant, comme la ViewStack, rend accessible un événement change qui est déclenché à chaque changement de conteneur actif. Le composant Accordion Le composant Accordion est un peu différent : c est une variation intéressante du composant ViewStack. Les conteneurs enfants ne sont ici plus affichés les uns par-dessus les autres, mais ils sont simplement réduits verticalement de manière à ne laisser apparaître qu une barre de titre cliquable. Un clic entraîne la réduction du conteneur actif et, évidemment, une restauration de l élément sélectionné. Ce composant peut se révéler très utile dans le cadre de formulaires assez longs et qui ne tiendraient pas sur une page. Il est plus adapté qu une navigation en forme d onglet pour ainsi rentrer des coordonnées, une adresse de livraison et un numéro de carte de crédit qui sont souvent séparés en trois pages distinctes sur les sites web classiques. Nous allons donc illustrer ce composant en se basant sur cet exemple. Il va falloir déclarer un Accordion qui contiendra les trois formulaires (seul le premier formulaire sera réalisé pour cet exemple) : <mx:accordion id="exempleaccordion"> <mx:form label="1. Informations personnelles" width="400"> <mx:formheading label="informations personnelles"/> <mx:formitem label="nom"> <mx:textinput/> </mx:formitem> <mx:formitem label="prénom"> <mx:textinput/> </mx:formitem> <mx:formitem label="adresse"> <mx:textinput/> <mx:textinput/> </mx:formitem> <mx:formitem label="code postal" > <mx:textinput maxchars="5"/> </mx:formitem> 216

16 Les contrôles TabNavigator et Accordion 7 <mx:formitem label="ville"> <mx:textinput/> </mx:formitem> <mx:formitem label="numéro de téléphone"> <mx:textinput/> </mx:formitem> </mx:form> <mx:form label="2. Coordonnées bancaires"> <!-- Formulaire à remplir. --> </mx:form> <mx:form label="3. Passer la commande"> <!-- Formulaire à remplir. --> </mx:form> </mx:accordion> Voici le résultat visuel d un conteneur de type Accordion : c Fig : Simulation d un formulaire d achat avec le composant Accordion Navigation au clavier Lorsqu un composant de type Accordion ou TabNavigator est sélectionné, les touches du clavier peuvent être utilisées pour remplacer la navigation à la souris. Flex définit une action spécifique par défaut aux touches suivantes : Tableau 7.2 : La navigation au clavier Touche [Ä] et [Barre}d'espace] Fonctionnalité Ouvre l onglet sélectionné 217

17 7 Naviguer dans son application Tableau 7.2 : La navigation au clavier [Ö] Fin Ouvre le premier onglet Ouvre le dernier onglet [ ] / [ ] Ouvre l onglet suivant/précédent [ÿ] et [ï] [Ÿ] et [î] Sélectionne (sans l ouvrir) l onglet précédent Sélectionne (sans l ouvrir) l onglet suivant Ajouter des boutons pour faciliter la navigation Au début de ce chapitre, nous avons implémenté une navigation manuelle dans le composant ViewStack en utilisant une ComboBox. Pour les composants Accordion ou un TabNavigator, une méthode de navigation est fournie par défaut. Cependant il peut être envisageable de rajouter des boutons pour avoir un second mode d accès aux conteneurs. Il suffirait ainsi dans notre exemple précédent de rajouter des boutons Suivant et Précédent à chaque formulaire en utilisant ActionScript pour changer l affichage : <mx:button id="prec" label="précédent" click="exempleaccordion.selectedindex =(( ExempleAccordion.selectedIndex - 1) % ExempleAccordion.numChildren);"/> <mx:button id="suiv" label="suivant" click="exempleaccordion.selectedindex =(( ExempleAccordion.selectedIndex + 1) % ExempleAccordion.numChildren);"/> Le principe est très simple. L onglet sélectionné est modifié en incrémentant ou en décrémentant la propriété selectedindex du composant, et un modulo utilisant la propriété numchildren (nombre total d onglets) permet de rendre la navigation circulaire. On peut donc passer du dernier onglet au premier et vice versa. 7.4 Mise en pratique : mon CV en ligne Nous allons mettre en pratique la navigation dans une application Flex en réalisant un exemple de CV en ligne. Nous utiliserons plusieurs conteneurs pour mettre en forme les éléments, le composant HtmlText pour structurer les informations et également un Accordion pour séparer les différentes catégories. 218

18 Mise en pratique : mon CV en ligne 7 Création du projet Commencez par créer un nouveau projet que vous appellerez MyResume. Nous allons tout de suite changer l apparence du fond ainsi que la disposition de l application. Mettez le layout de l application à vertical et changez la couleur de fond par un dégradé de couleurs, par exemple de la manière suivante : <mx:application xmlns:mx=" layout="vertical" backgroundgradientcolors="[#007ab7,#ffffff]" pagetitle="myresume"> </mx:application> Ajoutez une VBox qui représentera la page du CV. Le conteneur aura une taille fixe ( par exemple). Nous allons également ajouter un contour et mettre un fond blanc. Le mieux est d utiliser les outils du mode Design de Flex Builder 3. Ensuite, ajoutez une ombre portée. Il vous faut utiliser la balise <mx:filter> qui permet d appliquer les effets de Flash à n importe quel composant Flex. Nous utiliserons ici le DropShadowFilter comme ceci : <mx:filters> <flash.filters:dropshadowfilter xmlns:flash.filters="flash.filters.*" angle="60" blurx="5" blury="5" distance="4" alpha="0.6" color="0x000000" /> </mx:filters> Ce qui donnera le rendu visuel suivant : c Fig : Utilisation du filtre DropDownShadow Vous devez maintenant rajouter dans la partie supérieure de votre CV les informations suivantes : j nom et prénom ; j coordonnées ; j photographie. 219

19 7 Naviguer dans son application Nous allons utiliser un conteneur de type HBox qui ne concernera que la partie supérieure de la page. La HBox contiendra elle-même deux VBox et un Label pour afficher le titre du CV. Nous séparerons les composants grâce à des Spacer. Les informations personnelles seront placées dans le conteneur de gauche et la photo dans celui de droite. Voici le code MXML pour l instant : <mx:application xmlns:mx=" layout="vertical" backgroundgradientcolors="[#007ab7,#ffffff]" pagetitle="myresume"> <mx:vbox width="600" height="700" borderstyle="outset" bordercolor="black" backgroundcolor="#ffffff" > <mx:filters> <flash.filters:dropshadowfilter xmlns:flash.filters="flash.filters.*" angle="60" blurx="5" blury="5" distance="4" alpha="0.6" color="0x000000" /> </mx:filters> <mx:hbox width="100%" verticalalign="middle" color="#0e4084" backgroundcolor="#8cbbfa" backgroundalpha="0.2"> <mx:vbox height="100%" paddingleft="10" paddingtop="5"> <mx:label text="mr Stan Smith" fontfamily="verdana" fontsize="13" fontweight="bold" <mx:label text="22, rue des Petits-Hôtels" fontfamily="verdana" fontsize="11"/> <mx:label text="75010 Paris" fontfamily="verdana" fontsize="11"/> <mx:label text=" ** **" fontfamily="verdana" fontsize="11"/> <mx:label text="stan.smith@gmail.com" fontfamily="verdana" fontsize="11"/> <mx:spacer width="50%"/> <mx:label text="ingénieur en Informatique" fontfamily="verdana" fontsize="20" enabled="true"/> <mx:spacer width="50%"/> <mx:vbox height="100%" verticalalign="bottom"> <mx:image source="photo.jpg"/> </mx:hbox> </mx:application> 220

20 Mise en pratique : mon CV en ligne 7 Ajout d un composant de navigation Nous allons maintenant ajouter le composant Accordion qui représentera les différentes catégories de votre CV, à savoir : j formation ; j expérience ; j compétences ; j langues ; j divers. Chaque catégorie sera évidemment classée dans un conteneur puisque l Accordion n accepte que ce type de composants : <mx:accordion width="100%"> <mx:vbox label="formation"> <VBox label="expérience"> <mx:vbox label="compétences"> <mx:vbox label="langues"> <mx:vbox label="divers"> </mx:accordion> Ajout des informations Il faut maintenant ajouter des informations pour chaque catégorie. Le plus simple pour formater le texte est d utiliser la propriété htmltext qui, comme son nom l indique, permet d afficher correctement du code HTML dans un composant Text standard : <mx:text> <mx:htmltext> <![CDATA[ ]]> </mx:htmltext> </mx:text> 221

21 7 Naviguer dans son application Le code HTML des sous-catégories ne sera pas affiché pour des raisons de place. Nous vous laissons donc le soin d y mettre vos propres informations. Mise en forme et design Vous allez à présent modifier légèrement l apparence des boutons de votre composant Accordion. Pour le design des composants, nous vous conseillons d utiliser le Flex Style Explorer que vous pouvez lancer à partir de l écran d accueil de Flex Builder 3. Vous pourrez ainsi modifier les paramètres de chaque composant et avoir un aperçu direct du résultat. Au final, il ne restera plus qu à copier le CSS généré, comme celui-ci par exemple : Accordion { borderstyle: none; headerheight: 25; textindent: 3; fillalphas: 0.21, 0.19, 0.3, 0.3; fillcolors: #ffffff, #8cbbfa, #8cbbfa, #8cbbfa; selectedfillcolors: #8cbbfa, #8cbbfa; themecolor: #8cbbfa; headerstylename: "myaccordionheader"; }.myaccordionheader { letterspacing: 1; } Résultat final Voici le code final (sans la partie HTML) de cet exemple de CV en ligne : <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx=" layout="vertical" backgroundgradientcolors="[#007ab7,#ffffff]" pagetitle="myresume"> <mx:style> Accordion { borderstyle: none; headerheight: 25; textindent: 3; fillalphas: 0.21, 0.19, 0.3, 0.3; fillcolors: #ffffff, #8cbbfa, #8cbbfa, #8cbbfa; selectedfillcolors: #8cbbfa, #8cbbfa; themecolor: #8cbbfa; 222

22 Mise en pratique : mon CV en ligne 7 headerstylename: "myaccordionheader"; }.myaccordionheader { letterspacing: 1; } </mx:style> <mx:vbox width="600" height="700" borderstyle="outset" bordercolor="black" backgroundcolor="#ffffff" > <mx:filters> <flash.filters:dropshadowfilter xmlns:flash.filters="flash.filters.*" angle="60" blurx="5" blury="5" distance="4" alpha="0.6" color="0x000000" /> </mx:filters> <mx:hbox width="100%" verticalalign="middle" color="#0e4084" backgroundcolor="#8cbbfa" backgroundalpha="0.2"> <mx:vbox height="100%" paddingleft="10" paddingtop="5" borderstyle="none" backgroundalpha="0.11"> <mx:label text="mr Stan Smith" fontfamily="verdana" fontsize="13" fontweight="bold"/> <mx:label text="22, rue des Petits-Hôtels" fontfamily="verdana" fontsize="11"/> <mx:label text="75010 Paris" fontfamily="verdana" fontsize="11"/> <mx:label text=" ** **" fontfamily="verdana" fontsize="11"/> <mx:label text="stan.smith@gmail.com" fontfamily="verdana" fontsize="11"/> <mx:spacer width="50%"/> <mx:label text="ingénieur en Informatique" fontfamily="verdana" fontsize="20" enabled="true" color="#0e4084"/> <mx:spacer width="50%"/> <mx:vbox height="100%" verticalalign="bottom"> <mx:image source="photo.jpg"/> </mx:hbox> <mx:accordion width="100%" height="100%"> <mx:vbox label="formation"> <mx:text> <mx:htmltext> <![CDATA[ PARTIE HTML ]]> </mx:htmltext> 223

23 7 Naviguer dans son application </mx:text> <mx:vbox label="expérience"> <mx:text> <mx:htmltext> <![CDATA[ PARTIE HTML ]]> </mx:htmltext> </mx:text> <mx:vbox label="compétences"> <mx:text> <mx:htmltext> <![CDATA[ PARTIE HTML ]]> </mx:htmltext> </mx:text> <mx:vbox label="langues"> <mx:text> <mx:htmltext> <![CDATA[ PARTIE HTML ]]> </mx:htmltext> </mx:text> <mx:vbox label="divers"> <mx:text> <mx:htmltext> <![CDATA[ PARTIE HTML ]]> </mx:htmltext> </mx:text> </mx:accordion> </mx:application> Nous vous donnons le résultat en image : 224

24 Check-list 7 c Fig : Exemple de CV utilisant la navigation Flex 7.5 Check-list Dans ce chapitre, nous avons vu : a comment manipuler le composant ViewStack et ajouter des conteneurs enfants ; a comment gérer la navigation de manière manuelle ; a comment manipuler les barres de navigation ; a comment automatiser la navigation avec le concept de dataprovider a comment utiliser les composants de navigation intégrés (TabNavigator et Accordion); a comment naviguer au clavier. 225