Une navigation dans une application mobile est contrôlée par une pile d’objets View. L’objet View supérieur sur la pile définit la vue actuellement visible. Le conteneur ViewNavigator conserve la pile. Pour modifier les vues, transférez un nouvel objet View dans la pile, ou extrayez l’objet View actuel de la pile. L’extraction de l’objet View actuellement visible de la pile a pour effet de supprimer l’objet View et renvoie l’utilisateur à la vue précédente sur la pile.

Lorsqu’une vue est transférée en haut de la pile, la propriété data de la vue précédente est automatiquement conservée. Elle est restaurée lorsque la vue est réactivée à la suite de l’extraction de la vue actuelle de la pile. Lorsqu’une nouvelle vue devient active en étant transférée dans la pile, l’occurrence de la vue précédente est supprimée.

Le composant ViewNavigator affiche un contrôle ActionBar facultatif qui affiche des informations contextuelles définies par la vue active. Lorsque la vue active change, la barre d’action est automatiquement mise à jour.

• Icône sur le côté gauche définie par la propriété iconField ou iconFunction.
• Etiquette de texte d’une seule ligne en regard de l’icône définie par la propriété labelField ou labelFunction.
• Message multiligne sous l’étiquette de texte défini par la propriété messageField ou messageFunction.
• Icône de décorateur sur le côté droit définie par la propriété decorator.

Pour appliquer des styles CSS à l’étiquette de texte sur une seule ligne, tels qu’une taille de police et une couleur, définissez les styles sur la classe IconItemRenderer. Pour définir des styles sur le message multiligne, utilisez la propriété de style messageStyleNameM. L’exemple suivant définit les styles de texte à la fois pour l’étiquette de texte et le message :

     <fx:Style>
         .myFontStyle { 
             fontSize: 15;
             color: #9933FF;
         }
  
     </fx:Style>
     
     <s:List id="myList"
         width="100%" height="100%"
         labelField="firstName">
         <s:itemRenderer>
             <fx:Component>
                 <s:IconItemRenderer messageStyleName="myFontStyle" fontSize="25"
                     labelField="firstName"
                     messageField="lastName" 
                     decorator="@Embed(source='assets/logo_small.jpg')"/>
             </fx:Component>
         </s:itemRenderer>
         <s:ArrayCollection>
             <fx:Object firstName="Dave" lastName="Duncam" company="Adobe" phone="413-555-1212"/>
             <fx:Object firstName="Sally" lastName="Smith" company="Acme" phone="617-555-1491"/>
             <fx:Object firstName="Jim" lastName="Jackson" company="Beta" phone="413-555-2345"/>
             <fx:Object firstName="Mary" lastName="Moore" company="Gamma" phone="617-555-1899"/>
         </s:ArrayCollection>
     </s:List>
  

Le contrôle CalloutButton utilise la classe spark.components.supportClasses.DropDownController pour gérer le conteneur Callout. Vous pouvez accéder à DropDownController à l’aide de la propriété protégée CalloutButton.dropDownController.

Lorsque la légende est ouverte :

• le fait de cliquer sur le bouton ferme la légende ;
• un clic à l’extérieur de la légende provoque sa fermeture.

Le composant CalloutButton possède les caractéristiques par défaut suivantes :

Le contrôle ToggleSwitch utilise les valeurs par défaut suivantes pour les étiquettes non sélectionnées et sélectionnées : Désactivé (non sélectionné) et Activé (sélectionné). Définissez un habillage personnalisé pour modifier les étiquettes ou d’autres caractéristiques visuelles du contrôle.

  package skins
  // components\mobile\skins\MyToggleSwitchSkin.as
  {
      import spark.skins.mobile.ToggleSwitchSkin;
      
      public class MyToggleSwitchSkin extends ToggleSwitchSkin
      {
          public function MyToggleSwitchSkin()
          {
              super();
              // Set properties to define the labels 
              // for the selected and unselected positions.
              selectedLabel="Yes";
              unselectedLabel="No"; 
          }
      }
  }
  

Le contrôle DateSpinner peut afficher la date, l’heure ou la date et l’heure, selon la valeur de la propriété displayMode.

L’interface utilisateur pour le contrôle est composée d’une série de contrôles SpinnerList, enveloppés dans un conteneur SpinnerListContainer qui affiche la date actuellement sélectionnée. Les utilisateurs peuvent ajuster la date sélectionnée par interaction tactile ou à l’aide de la souris.

L’habillage DateSpinnerSkin définit uniquement certaines propriétés de dimensionnement. Pour modifier l’aspect du contrôle DateSpinner, en règle générale, vous modifiez les habillages SpinnerListSkin ou SpinnerListContainerSkin sous-jacents.

Vous pouvez également utiliser le contrôle CalloutButton pour ouvrir un conteneur de légende. Le contrôle CalloutButton encapsule dans un contrôle unique le conteneur de légende et l’ensemble de la logique nécessaire pour ouvrir et fermer la légende. Le contrôle CalloutButton est alors considéré comme la propriétaire, ou l’hôte, de la légende.

Le composant Callout utilise les propriétés horizontalPosition et verticalPosition pour déterminer sa position par rapport au propriétaire spécifié par la méthode open(). Les deux propriétés peuvent être définies sur CalloutPosition.AUTO, ce qui sélectionne une position basée sur les proportions de l’écran, pour adapter la taille du conteneur Callout avec un chevauchement minimal avec le propriétaire et des ajustements minimum sur les limites de l’écran.

Une fois positionné, le conteneur Callout positionne la flèche sur le côté adjacent à son propriétaire, centrée aussi près que possible sur le centre horizontal ou vertical du propriétaire, selon le cas. La flèche est masquée dans les cas où la position du conteneur Callout n’est adjacente à aucun bord.

Vous ne pouvez pas créer un conteneur Callout en tant que partie intégrante de la présentation de son conteneur parent. Au lieu de cela, il s’affiche comme un conteneur contextuel au-dessus de l’objet parent. Par conséquent, vous ne créez pas directement dans le code MXML de votre application.

Au lieu de cela, vous créez est en tant que composant MXML, souvent dans un autre fichier MXML. Pour afficher le composant créer une instance du composant MXML, puis appelez la open() méthode. Vous pouvez également définir la taille et la position du composant lors de l'ouverture de ce document.

Pour fermer le composant, appelez la méthode close(). Si la fenêtre contextuelle doit renvoyer des données à un gestionnaire, vous pouvez ajouter un écouteur pour l’événement PopUp.CLOSE et spécifier les données renvoyées dans la méthode close().

Le composant Callout est initialement dans son état d’habillage closed. Lorsqu'il s'ouvre, il ajoute lui-même comme une fenêtre contextuelle à l'occurrence PopUpManager, et la transition vers la normal état d'habillage. Pour définir des animations d’ouverture et de fermeture, utilisez un habillage personnalisé avec des transitions entre les états d’habillage closed et normal.

Le conteneur Callout change le comportement d’héritage par défaut observé pour les composants Flex et hérite des styles à partir de l’application de plus haut niveau. Cela permet d’éviter que le contenu du conteneur Callout hérite accidentellement de styles à partir d’un propriétaire (de type Button ou TextInput) lorsque l’aspect par défaut est souhaité et prévu.

Le conteneur Callout présente les caractéristiques par défaut suivantes :

La classe ViewMenuLayout définit la présentation du menu. Alternativement, vous pouvez créer votre propre classe de présentation personnalisée.

Définissez les éléments de menu à l’aide de la propriété View.viewMenuItems, comme l’illustre l’exemple suivant :

  <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      title="Home"> 
 
    ...
 
    <s:viewMenuItems> 
        <s:ViewMenuItem label="Add" click="itemClickInfo(event);"/> 
        <s:ViewMenuItem label="Cancel" click="itemClickInfo(event);"/> 
        <s:ViewMenuItem label="Delete" click="itemClickInfo(event);"/> 
        <s:ViewMenuItem label="Edit" click="itemClickInfo(event);"/> 
        <s:ViewMenuItem label="Search" click="itemClickInfo(event);"/> 
    </s:viewMenuItems>
 
  </s:View>
  

Remarquez que vous ne définissez pas explicitement le conteneur ViewMenu dans MXML. Le conteneur ViewMenu est créé automatiquement pour contenir les contrôles ViewMenuItem.

Le conteneur TabbedViewNavigatorApplication crée automatiquement un seul conteneur TabbedViewNavigator pour l’intégralité de l’application. Vous pouvez référencer l’objet TabbedViewNavigator à l’aide de la propriété navigator du conteneur TabbedViewNavigatorApplication.

Le navigateur actif ou sélectionné peut être modifié en cliquant sur l’onglet correspondant dans le conteneur TabBar ou en modifiant la propriété selectedIndex du composant.

Le contenu d’un navigateur de vue enfant est supprimé lorsqu’il est désactivé et créé dynamiquement lorsqu’il est activé.

Dans une application mobile, la zone de contenu de l’application affiche les différents écrans, ou les vues, qui constituent l’application. Les utilisateurs accèdent aux vues de l’application à l’aide de l’écran tactile, des composants intégrés dans l’application et des contrôles de saisie du périphérique mobile.

Chaque vue d’une application correspond à un conteneur View défini dans un fichier ActionScript ou MXML. Chaque vue contient une propriété data qui spécifie les données associées à cette vue. Les vues peuvent utiliser la propriété data pour se transmettre des informations entre elles lorsque l’utilisateur parcourt l’application.

La vitesse de rotation de ce composant est contrôlée par le style rotationInterval. Le style rotationInterval définit le délai en millisecondes entre les rotations. Diminuez la valeur rotationInterval pour augmenter la vitesse de rotation.

L’indicateur BusyIndicator présente les caractéristiques par défaut suivantes :

Le diamètre de rotation de l’indicateur d’activité est égal au minimum de la largeur et à la hauteur du composant. Le diamètre doit être un nombre pair, car il est réduit de un s’il est défini sur un nombre impair.

Le contrôle ActionBar définit trois zones distinctes :

• Zone de navigation

  Contient des composants qui permettent à l’utilisateur de parcourir la section. Vous pouvez par exemple définir un bouton d’accueil dans la zone de navigation. Utilisez la propriété navigationContent pour définir les composants à afficher dans la zone de navigation. Utilisez la propriété navigationLayout pour définir la mise en forme de la zone de navigation.

• Zone de titre

  Contient soit une chaîne renfermant le texte du titre, soit des composants. Si vous spécifiez des composants, vous ne pouvez pas spécifier de chaîne de titre. Utilisez la propriété title pour spécifier la chaîne qui doit apparaître dans la zone de titre. Utilisez la propriété titleContent pour définir les composants à afficher dans la zone de titre. Utilisez la propriété titleLayout pour définir la mise en forme de la zone de titre. Si vous attribuez une valeur à la propriété titleContent, l’habillage du contrôle ActionBar ignore la propriété title.

• Zone d’action

  Contient des composants qui définissent les actions que l’utilisateur peut réaliser dans une vue. Vous pouvez par exemple définir un bouton de recherche ou d’actualisation dans le cadre de la zone action. Utilisez la propriété actionContent pour définir les composants à afficher dans la zone d’action. Utilisez la propriété actionLayout pour définir la mise en forme de la zone d’action.

Pour une application mobile comportant une seule section, c’est-à-dire un seul conteneur ViewNavigator, toutes les vues partagent la même barre d’action. Pour une application mobile comportant plusieurs sections, c’est-à-dire avec plusieurs conteneurs ViewNavigator, chaque section définit sa propre barre d’action.

Le seul enfant autorisé du conteneur TabbedViewNavigatorApplication est ViewNavigator. Définissez un composant ViewNavigator pour chaque section de l’application.

Le conteneur TabbedViewNavigatorApplication présente les caractéristiques par défaut suivantes :

Le rendu d’élément crée un contrôle StyleableTextField unique pour afficher une chaîne. Le nom du contrôle StyleableTextField dans le rendu d’élément est labelDisplay. Utilisez la propriété labelField du contrôle basé sur une liste pour spécifier un champ de l’élément de données à afficher dans le contrôle StyleableTextField.

Pour créer un rendu d’élément personnalisé à utiliser sur les périphériques mobiles, Adobe vous recommande de créer un nouveau rendu d’élément ActionScript qui étend cette classe.

Un modèle de navigation basé sur les vues est caractérisé par une interface utilisateur dans laquelle l’utilisateur final navigue entre une série de vues plein écran en réponse à l’interaction de l’utilisateur. Il s’agit d’un paradigme fréquemment utilisé par les applications mobiles, qui est accompli par le biais de l’utilisation d’un conteneur ViewNavigator intégré.

Utilisez la propriété firstView pour spécifier la vue affichée en premier lors de l’initialisation de l’application.

Contrairement à l’application, la classe ViewNavigatorApplication n’est pas censée accepter les objets UIComponent en tant qu’enfants. En revanche, tous les composants visuels doivent être des enfants des diverses vues gérées par l’application.

Le conteneur ViewNavigatorApplication présente les caractéristiques par défaut suivantes :

SpinnerList Constructeur. Constructeur. commitProperties partAdded partNameinstance partRemoved partNameinstance caretIndex wrapElements true dataProvider SplitViewNavigator 3.0 Flex 4.6 3.0 Flex 4.6 3.0 Flex 4.6 The popUp used to display a navigator when showFirstViewNavigatorInPopUp() is called.The <s:SplitViewNavigator> tag inherits all of the tag attributes of its superclass and adds the following tag attributes:

  <s:SplitViewNavigator
    Properties
    autoHideFirstViewNavigator="false"
  />