7

7.1 Introduction à la navigation ........................... 204

7.2 Manipuler une ViewStack .............................. 204
7.3 Les contrôles TabNavigator et Accordion ............ 215
7.4 Mise en pratique : mon CV en ligne ................. 218
7.5 Check-list ................................................. 225
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.
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
 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
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
 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="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 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 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é Utilisation

SelectedIndex 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
 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
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
 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
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. 7.10 :
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
 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. 7.11 :
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(’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:Array>
</mx:dataProvider>
</mx:LinkBar>
</mx:Application>

213
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. 7.12 :
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
 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. 7.13 :
Rendu visuel du
composant

215
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
 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. 7.14 :
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 Fonctionnalité

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

217
7 Naviguer dans son application

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 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
 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="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 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. 7.15 :
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
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="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: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="+33 1 42 37 ** **"
fontFamily="Verdana" fontSize="11"/>
<mx:Label text="stan.smith@gmail.com"
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
 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">
</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 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
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="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
 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="+33 1 42 37 ** **" fontFamily="Verdana"
fontSize="11"/>
<mx:Label text="stan.smith@gmail.com" 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
7 Naviguer dans son application

</mx:Text>
</mx:VBox>
<mx:VBox label="Expérience">
<mx:Text>
<mx:htmlText>
<![CDATA[
PARTIE HTML
]]>
</mx:htmlText>
</mx:Text>
</mx:VBox>
<mx:VBox label="Compétences">
<mx:Text>
<mx:htmlText>
<![CDATA[
PARTIE HTML
]]>
</mx:htmlText>
</mx:Text>

</mx:VBox>
<mx:VBox label="Langues">
<mx:Text>
<mx:htmlText>
<![CDATA[
PARTIE HTML
]]>
</mx:htmlText>
</mx:Text>
</mx:VBox>
<mx:VBox label="Divers">
<mx:Text>
<mx:htmlText>
<![CDATA[
PARTIE HTML
]]>
</mx:htmlText>
</mx:Text>
</mx:VBox>
</mx:Accordion>
</mx:VBox>

</mx:Application>

Nous vous donnons le résultat en image :

224
 Check-list 7

c Fig. 7.16 : 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