7.1 introduction à la navigation 204 7.2 manipuler une

77.1 Introduction à la navigation ........................... 2047.2 Manipuler une ViewStack .............................. 2047.3 Les contrôles TabNavigator et Accordion ............ 2157.4 Mise en pratique : mon CV en ligne ................. 2187.5 Check-list ................................................. 225

Naviguerdans sonapplication

Ce chapitre est dédié à la navigation au sein d’uneapplication riche. Les conteneurs de navigations

fournis par le framework Flex permettent d’enrichir vosinterfaces et de mettre en œuvre des scénarios en fonctiondes choix de l’utilisateur.

7.1 Introduction à la navigationVous devriez maintenant avoir un bon aperçu des composants et conteneurs du frameworkFlex. Cependant, nous n’avons pas encore abordé le problème de la navigation au seind’une application. En effet, contrairement à un site web standard, une application Flexn’est pas divisée en pages dynamiques distinctes. Le principe se rapproche nettement plusd’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 nousy avons jusqu’à présent ajouté des composants toujours affichés.

Nous allons aborder dans ce chapitre les composants permettant de fournir un système denavigation afin de guider les utilisateurs dans nos applications. Ce type de composants esttrès souvent utilisé pour réaliser des processus de validation multi-étapes (panier d’achatou remplissage de plusieurs formulaires) et permettent d’alléger un écran trop chargé enle décomposant en plusieurs sous-catégories.

De manière générale, les conteneurs de navigation permettent de contrôler les actions del’utilisateur en affichant ou en masquant certains composants de manière à ce qu’un seulet unique conteneur enfant ne soit visible.

Vous pouvez d’ores et déjà avoir un aperçu des huit composants de navigation que nousdétaillerons dans ce chapitre. Les composants sont accessibles dans Flex Builder 3 dansla catégorie Navigator.

7.2 Manipuler une ViewStackNous allons utiliser notre premier composant de navigation : le conteneur ViewStack estl’élément le plus simple et le plus générique.

Introduction au composant ViewStackLe composant ViewStack est au cœur du système de navigation dans Flex puisque tousles autres conteneurs de la catégorie en dérivent ou implémentent des méthodes oupropriétés similaires. Comme nous l’avons mentionné plus haut, une ViewStack est un

c Fig. 7.1 :Composants de navigation du frameworkFlex

7 Naviguer dans son application

204

conteneur : elle peut donc contenir d’autres objets avec comme particularité de devoirobligatoirement être aussi des conteneurs. Dans le cas contraire, une erreur se produiraità l’exécution du programme. Le diagramme suivant va vous permettre de mieuxcomprendre le lien entre ces différents contrôles de navigation :

En fait, une ViewStack fonctionne de la manière suivante. Le composant stocke en interneune collection de conteneurs enfants qui sont empilés les uns sur les autres (stacked enanglais). La particularité de ce composant est qu’un seul et unique conteneur enfant nepeut être visible à la fois. Il faut ensuite utiliser du code ActionScript (en utilisant les

c Fig. 7.2 : Diagramme de classe des contrôles de navigation

7Manipuler une ViewStack

205

méthodes et propriétés du composant) ou d’autres composants afin de choisir quelconteneur devra être affiché par la ViewStack. L’image suivante schématise desconteneurs encapsulés dans 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 conteneuraffiché par défaut.

j Redimensionnement : une ViewStack ne change pas de taille lorsque le conteneuractif change, il faut pour cela utiliser la propriété resizeToContent.

j Positionnement des conteneurs enfants : les conteneurs enfants sont positionnéspar défaut dans le coin supérieur gauche de la ViewStack. Si l’un des conteneursenfants est plus grand que la ViewStack, alors il sera tronqué.

Ajouter une ViewStack dans une applicationNous allons maintenant utiliser un composant ViewStack pour stocker plusieurs autresconteneurs 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 dereconnaître le composant visible. Nous allons également fixer une largeur et une hauteur

c Fig. 7.3 :Schéma dufonctionnement d’uneViewStack


206

communes à l’exception du dernier élément qui sera plus large de 200 pixels. Nousajouterons enfin un Spacer puis un second Label pour bien montrer le comportement pardé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="http://www.adobe.com/2006/mxml"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 simpleLabel 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> enconteneur.

c Fig. 7.4 :Une ViewStackn’accepte que desconteneurs commecomposant enfant.


207

Normalement, votre ViewStack devrait ressembler à ceci :

Nous vous l’accordons, pour l’instant, cela n’est guère pratique car nous ne pouvons paschoisir le composant de type HBox à afficher puisque le conteneur ViewStackn’implémente pas de mécanisme de navigation par défaut.

Nous allons arranger tout cela en créant une fonction ActionScript qui changera lecomposant à afficher. Cette fonction utilisera les propriétés des ViewStack. Les plusimportantes pour manipuler ce type de composant sont les suivantes :

Tableau 7.1 : Propriétés essentielles de ViewStack

Propriété Utilisation

SelectedIndex Cette propriété donne l’indice du composant actuellement actif (c’est-à-direvisible) s’il y a des conteneurs enfants dans la ViewStack. Les indices desconteneurs commencent à 0 comme tous les tableaux en Flex, et s’il n’y apas de composant, alors cette propriété a comme valeur -1.Il est également possible d’utiliser cette propriété dans la balise MXML dela ViewStack pour choisir le composant qui sera affiché par défaut de lamaniè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 lieude son indice.

numChildren Correspond au nombre de composants enfants contenu dans uneViewStack.

Nous allons maintenant ajouter une HBox au-dessus de notre composant ViewStack auquelnous ajouterons un label qui affichera les détails du composant grâce au binding (liaisonavec les données) de Flex et une ComboBox que nous nommerons cb_switch et qui serainitialisé avec un tableau de chaînes allant de 1 à 3. Enfin, la méthode ActionScript

c Fig. 7.5 : Premier exemple du composant ViewStack


208

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. Unascenseur s’affiche en bas du conteneur car nous lui avons assigné une taille plus largeque le composant par défaut (indice 0) qui est le conteneur hb1.

Pour changer ce comportement et redimensionner la ViewStack à chaque changement deconteneur, il suffit d’activer la propriété resizeToContent de la manière suivante :

c Fig. 7.6 : Le conteneur 3 est tronqué.


209

<mx:ViewStack id="myVs" borderStyle="solid"backgroundColor="white"resizeToContent="true">

Vous devriez maintenant avoir le conteneur 3 affiché en entier :

Manipuler une ViewStack avec les contrôles de type navigation barComme vous venez de le constater, une ViewStack seule n’est pas très pratique à utiliserpour une navigation aisée au sein d’une application. En effet, des composants dérivant decette classe ou implémentant les mêmes propriétés et méthodes lui sont souvent préféréstels que les composants TabNavigator et Accordion que nous aborderons prochainement.

Si vous regardez plus attentivement la liste des composant classés dans la catégorieNavigator ou encore le diagramme de classe au début de ce chapitre, vous remarquerezplusieurs 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 permettenttous d’implémenter directement un système de navigation pour le composant ViewStacken 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 boutonsordonnancés de manière horizontale ou verticale et ayant une apparence commune. La

c Fig. 7.7 : Le conteneur 3 est affiché en entier.


210

principale différence entre ces deux composants vient de leur comportement lorsquel’utilisateur clique sur un bouton du contrôle. Sur un composant ButtonBar, le boutonchange d’apparence lors d’un clic puis il reprend son état normal. Le composantToggleButtonBar, quant à lui, ne revient pas à son apparence initiale et garde l’apparenced’un bouton enfoncé même si l’utilisateur relâche le bouton. Cela permet d’informerl’utilisateur de manière visuelle quel conteneur est actif, lorsque la ToggleButtonBar estutilisée avec un composant ViewStack. Voici à quoi ressemblent visuellement ces deuxcomposants :

Et voici le code associé :

<mx:ButtonBar dataProvider="myVs" />

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 dufait que le composant ToggleButtonBar garde le bouton sélectionné sur l’état enfoncé. Sivous cliquez de nouveau dessus, le bouton reste toujours sélectionné. Pour l’éviter, vousdevez 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 ; nousavons passé en paramètre le nom du composant ViewStack que nous avionsprécédemment déclaré. Les deux composants ont alors créé un bouton pour chaquesous-conteneur de la ViewStack, et leur propriété label a servi pour le texte de chaquebouton. Vous pouvez maintenant utiliser les barres de contrôle pour naviguer trèssimplement dans votre application.

Cependant, les dataProvider des composants ButtonBar ne sont pas limités à laViewStack ; il est ainsi possible de déclarer ses propres dataProvider en utilisant destableaux de chaînes ou des tableaux d’objet. Dans ce dernier cas, le composant recherchetrois 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 ;

c Fig. 7.8 :Une ButtonBar

c Fig. 7.9 :Une ToggleButtonBar


211

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:ButtonBar>

Le résultat visuel est le suivant :

Bien sûr, il ne se passe plus rien quand l’utilisateur clique sur le bouton puisque ledataProvider 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 typeItemClickEvent, 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 venonsde 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 quiont l’apparence de liens HTML classiques. Là encore, il est possible de spécifier undataProvider de type ViewStack ou d’en déclarer un via un tableau de chaîne de

c Fig. 7.10 :ButtonBar associé à untableau d’objets


212

caractères. Nous allons donc ajouter un élément LinkBar et un bout de code ActionScriptqui 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:LinkBar>

Ce qui devrait donner ceci :

Ajoutons maintenant une méthode pour ouvrir une nouvelle page web lorsque l’utilisateurclique 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 objetde 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(’http://www.’ +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:LinkBar></mx:Application>

c Fig. 7.11 :Le composant LinkBar


213

Le composant TabBar

Le comportement de ce composant est très similaire aux trois autres contrôles. Encore unefois, la différence la plus notable se situe au niveau du design. Nous allons donc enprofiter pour vous parler d’une dernière propriété de ce type d’élément. Dans l’exempledu composant ButtonBar, le nom du bouton était indiqué par la propriété label de l’objetcar c’est celle-ci que Flex recherche par défaut.

C’est d’ailleurs exactement comme cela que les boutons sont nommés : lorsque ledataProvider est une ViewStack (collection de conteneur), c’est la propriété label dessous-conteneurs qui est alors utilisée. Il est cependant possible d’en spécifier une autregrâ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>

Dimension des conteneurs enfantsComme nous vous l’avons indiqué en début de chapitre, une ViewStack et ses composantsdérivés ne se redimensionnent pas automatiquement lors du changement du conteneuractif. 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 detaille à chaque modification, car cela déplacerait les composants voisins par la mêmeoccasion.

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 tailledu premier composant affiché qui est utilisée. Vous avez donc plusieurs solutions pourdimensionner une ViewStack :

j Imposer une taille au conteneur ViewStack (en valeur absolue ou en utilisant lepourcentage) 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).

c Fig. 7.12 :Aspect visuel d’une TabBar


214

j Mettre le composant le plus grand en premier (ce qui n’est cependant pas trèspratique).

7.3 Les contrôles TabNavigator et AccordionIl est relativement facile d’associer une ViewStack à une barre de navigation, mais il seraitcependant bien plus pratique de réunir les deux en un seul et unique composant. C’est lerôle du TabNavigator et de l’Accordion.

Le composant TabNavigatorUn TabNavigator pourrait être comparé au niveau visuel et fonctionnel à une ViewStackassociée à un composant TabBar puisqu’il propose d’afficher un ensemble de conteneurssous 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. 7.13 :Rendu visuel ducomposant

7Les contrôles TabNavigator et Accordion

215

Le nommage des onglets se base encore sur la propriété label des conteneurs enfants. Ilest aussi possible d’ajouter une icône grâce à la propriété icon de chaque élément commedans 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 sontvisibles 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 estdéclenché à chaque changement de conteneur actif.

Le composant AccordionLe composant Accordion est un peu différent : c’est une variation intéressante ducomposant ViewStack. Les conteneurs enfants ne sont ici plus affichés les uns par-dessusles autres, mais ils sont simplement réduits verticalement de manière à ne laisserapparaître qu’une barre de titre cliquable. Un clic entraîne la réduction du conteneur actifet, é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 netiendraient pas sur une page. Il est plus adapté qu’une navigation en forme d’onglet pourainsi rentrer des coordonnées, une adresse de livraison et un numéro de carte de crédit quisont 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éclarerun 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

<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">

</mx:Form><mx:Form label="3. Passer la commande">

</mx:Form>

</mx:Accordion>

Voici le résultat visuel d’un conteneur de type Accordion :

Navigation au clavierLorsqu’un composant de type Accordion ou TabNavigator est sélectionné, les touches duclavier peuvent être utilisées pour remplacer la navigation à la souris. Flex définit uneaction spécifique par défaut aux touches suivantes :

Tableau 7.2 : La navigation au clavier

Touche Fonctionnalité

[Ä] et [Barre}d'espace] Ouvre l’onglet sélectionné

c Fig. 7.14 :Simulation d’unformulaire d’achat avecle composant Accordion

7Les contrôles TabNavigator et Accordion

217

Tableau 7.2 : La navigation au clavier

[Ö] Ouvre le premier onglet

Fin Ouvre le dernier onglet

[’] / [‘] Ouvre l’onglet suivant/précédent

[ÿ] et [ï] Sélectionne (sans l’ouvrir) l’onglet précédent

[Ÿ] et [î] Sélectionne (sans l’ouvrir) l’onglet suivant

Ajouter des boutons pour faciliter la navigationAu début de ce chapitre, nous avons implémenté une navigation manuelle dans lecomposant ViewStack en utilisant une ComboBox. Pour les composants Accordion ou unTabNavigator, une méthode de navigation est fournie par défaut. Cependant il peut êtreenvisageable 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 etPré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 endécrémentant la propriété selectedIndex du composant, et un modulo utilisant laproprié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 ligneNous allons mettre en pratique la navigation dans une application Flex en réalisant unexemple de CV en ligne. Nous utiliserons plusieurs conteneurs pour mettre en forme leséléments, le composant HtmlText pour structurer les informations et également unAccordion pour séparer les différentes catégories.


218

Création du projetCommencez par créer un nouveau projet que vous appellerez MyResume. Nous allonstout 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 undégradé de couleurs, par exemple de la manière suivante :

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"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(600 × 700 par exemple). Nous allons également ajouter un contour et mettre un fondblanc. 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 permetd’appliquer les effets de Flash à n’importe quel composant Flex. Nous utiliserons ici leDropShadowFilter 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 :

Vous devez maintenant rajouter dans la partie supérieure de votre CV les informationssuivantes :

j nom et prénom ;j coordonnées ;j photographie.

c Fig. 7.15 :Utilisation du filtre DropDownShadow

7Mise en pratique : mon CV en ligne

219

Nous allons utiliser un conteneur de type HBox qui ne concernera que la partie supérieurede la page. La HBox contiendra elle-même deux VBox et un Label pour afficher le titre duCV. Nous séparerons les composants grâce à des Spacer. Les informations personnellesseront placées dans le conteneur de gauche et la photo dans celui de droite. Voici le codeMXML pour l’instant :

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical" backgroundGradientColors="[#007ab7,#FFFFFF]"

pageTitle="MyResume"><mx:VBox width="600" height="700" borderStyle="outset"

borderColor="Black" backgroundColor="#FFFFFF" ><mx:filters>

<flash.filters:DropShadowFilterxmlns: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="+33 1 42 37 ** **"fontFamily="Verdana" fontSize="11"/>

<mx:Label text="[email protected]"fontFamily="Verdana" fontSize="11"/>

</mx:VBox><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:VBox></mx:HBox>

</mx:VBox>

</mx:Application>


220

Ajout d’un composant de navigationNous allons maintenant ajouter le composant Accordion qui représentera les différentescaté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’Accordionn’accepte que ce type de composants :

<mx:Accordion width="100%"><mx:VBox label="Formation"></mx:VBox>

<VBox label="Expérience"></mx:VBox>

<mx:VBox label="Compétences"></mx:VBox>

<mx:VBox label="Langues"></mx:VBox>

<mx:VBox label="Divers"></mx:VBox>

</mx:Accordion>

Ajout des informationsIl faut maintenant ajouter des informations pour chaque catégorie. Le plus simple pourformater 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

Le code HTML des sous-catégories ne sera pas affiché pour des raisons de place. Nousvous laissons donc le soin d’y mettre vos propres informations.

Mise en forme et designVous allez à présent modifier légèrement l’apparence des boutons de votre composantAccordion.

Pour le design des composants, nous vous conseillons d’utiliser le Flex Style Explorerque vous pouvez lancer à partir de l’écran d’accueil de Flex Builder 3. Vous pourrez ainsimodifier les paramètres de chaque composant et avoir un aperçu direct du résultat. Aufinal, 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 finalVoici 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="http://www.adobe.com/2006/mxml"

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

headerStyleName: "myaccordionHeader";}

.myaccordionHeader {letterSpacing: 1;

}</mx:Style><mx:VBox width="600" height="700" borderStyle="outset"

borderColor="Black"backgroundColor="#FFFFFF" >

<mx:filters><flash.filters:DropShadowFilterxmlns: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="+33 1 42 37 ** **" fontFamily="Verdana"fontSize="11"/><mx:Label text="[email protected]" fontFamily="Verdana"fontSize="11"/>

</mx:VBox><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:VBox></mx:HBox><mx:Accordion width="100%" height="100%">

<mx:VBox label="Formation"><mx:Text>

<mx:htmlText><![CDATA[

PARTIE HTML]]>

</mx:htmlText>


223

</mx:Text></mx:VBox><mx:VBox label="Expérience"><mx:Text>


PARTIE HTML]]>

</mx:htmlText></mx:Text></mx:VBox><mx:VBox label="Compétences"><mx:Text>


PARTIE HTML]]>

</mx:htmlText></mx:Text>

</mx:VBox><mx:VBox label="Langues"><mx:Text>


PARTIE HTML]]>

</mx:htmlText></mx:Text></mx:VBox><mx:VBox label="Divers"><mx:Text>


PARTIE HTML]]>

</mx:htmlText></mx:Text></mx:VBox>

</mx:Accordion></mx:VBox>

</mx:Application>

Nous vous donnons le résultat en image :


224

7.5 Check-listDans 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 dataProvidera comment utiliser les composants de navigation intégrés (TabNavigator et

Accordion) ;a comment naviguer au clavier.

c Fig. 7.16 : Exemple de CV utilisant la navigation Flex

7Check-list

225

7.1 introduction à la navigation 204 7.2 manipuler une

Documents