Conteneurs de navigation

Demander un devis
Je souhaite télécharger le programme ou imprimer le programme
  • Imprimer
tutoriel_vers_formation_Flex

Nous avons vu dans les chapitres précédents qu'il existe des conteneurs d'agencement prévus pour gérer automatiquement le positionnement des éléments enfants.

Il existe un autre type de conteneurs, appelés conteneurs de navigation : ils gèrent la navigation entre les composants ou conteneurs enfants, qui doivent être des conteneurs de navigation ou d'agencement. Un tel conteneur possède donc plusieurs enfants et n'en affiche qu'un seul à la fois, en fonction des actions de l'utilisateur.

 

MX fournit trois conteneurs de navigation différents : Accordion, TabNavigator, ViewStack

Il est important de noter qu'un conteneur MX ne peut contenir que des conteneurs MX ou des NavigatorContent. Si vous voulez intégrer un composant Spark dans un conteneur MX, il faut donc d'abord l'encapsuler dans un NavigatorContent.

Notons également qu'un conteneur de navigation contient des conteneurs, qui peuvent être d'agencement ou de navigation. Une application Flex peut donc présenter un conteneur de navigation TabNavigator dont l'un des enfants est un ViewStack, par exemple.

 

Accordion et TabNavigator

 

Le conteneur Accordion définit une séquence de panneaux, alors que TabNavigator définit des onglets. En cliquant sur les titres des panneaux de l'Accordion ou sur les onglets du TabNavigator, l'utilisateur peut naviguer entre les conteneurs fils et afficher l'un ou l'autre des conteneurs enfants :

conteneurs_navigation

 

Pour créer de tels conteneurs, il faut définir le conteneur et insérer à l'intérieur les composants enfants. L'illustration ci-dessus a été générée à l'aide du code MXML suivant :

<?xml version="1.0" encoding="utf-8"?>
<s:Application
      xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      width="550" height="550"
      >
 
      <mx:Accordion width="200" height="230" left="30" top="30">
            <mx:Canvas label="Conteneur enfant 1" width="100%" height="100%">
                  <mx:Label text="Contenu 1"/>
            </mx:Canvas>
            <mx:Canvas label="Conteneur enfant 2" width="100%" height="100%">
                  <mx:Label text="Contenu 2"/>
            </mx:Canvas>
            <mx:Canvas label="Conteneur enfant 3" width="100%" height="100%">
                  <mx:Label text="Contenu 3"/>
            </mx:Canvas>
      </mx:Accordion>
 
      <mx:TabNavigator height="220" left="250" top="30" width="150">
            <mx:Canvas label="Tab 1" width="100%" height="100%">
                  <mx:Label text="Contenu 1"/>
            </mx:Canvas>
            <mx:Canvas label="Tab 2" width="100%" height="100%">
                  <mx:Label text="Contenu 2"/>
            </mx:Canvas>
            <mx:Canvas label="Tab 3" width="100%" height="100%">
                  <mx:Label text="Contenu 3"/>
            </mx:Canvas>
      </mx:TabNavigator>
</s:Application>

 

ViewStack

 

Un conteneur ViewStack est composé d'une superposition de conteneurs enfants, dont un seul est actif et visible à la fois. Chaque enfant est identifié par un index, qui commence à zéro : 

conteneurs_navigation_2

 

Contrairement aux deux conteneurs de navigation précédents, le ViewStack ne possède pas de mécanisme de navigation intégré pour faire varier l'enfant actif.

Les composants LinkBar, TabBar, ButtonBar et ToggleButtonBar permettent d'implémenter ce mécanisme :

<?xml version="1.0" encoding="utf-8"?>
<s:Application
      xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      width="450" height="450"
      >
 
      <!-- Définition du ViewStack et de ses conteneurs enfants -->
      <mx:ViewStack id="ViewStackExemple" borderStyle="solid"
             height="200" width="250" left="10" top="200" >
            <mx:Canvas label="Conteneur enfant 1" width="100%" height="100%">
                  <mx:Label text="Contenu 1"/>
            </mx:Canvas>
            <mx:Canvas label="Conteneur enfant 2" width="100%" height="100%">
                  <mx:Label text="Contenu 2"/>
            </mx:Canvas>
            <mx:Canvas label="Conteneur enfant 3" width="100%" height="100%">
                  <mx:Label text="Contenu 3"/>
            </mx:Canvas>
      </mx:ViewStack>
 
      <!-- Les quatre contrôles prennent en paramètre le même DataProvider
             Un clic sur l'un des contrôles affectera donc automatiquement
             les autres contrôles -->
      <mx:LinkBar       dataProvider="{ViewStackExemple}"        left="10" top="30"/>
      <mx:ButtonBar     dataProvider="{ViewStackExemple}"        left="10" top="70" />
      <mx:TabBar        dataProvider="{ViewStackExemple}"        left="10" top="110"/>
      <mx:ToggleButtonBar dataProvider="{ViewStackExemple}"     left="10" top="150"/>
</s:Application>

 

L'exécution d'une telle application donne l'affichage suivant :

conteneurs_navigation_3

 

La navigation entre les éléments d'un ViewStack peut également être géré par programmation en ActionScript et gestion d'évènements, que nous étudierons quelques chapitres plus loin.

 

Nous connaissons à présent un certain nombre de composants et de conteneurs. Voyons maintenant comment créer notre propre composant MXML, dérivé d'un composant de base.

 

tutoriel_precedent

tutoriel_suivant

.
X
 
 
 
 
 

You havecharacters left.