Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

AIR Mobile – Comprendre les composants ViewNavigator et View

Dans cet article, on va découvrir le fonctionnement des composants ViewNavigator et View du dernier SDK Flex 4.5. Ces composants sont la base d'une application mobile et vont vous aider à développer facilement une application utilisant le "paradigme mobile", c'est à dire un enchaînement de vues avec une seule vue visible à la fois.

Si vous aviez lu l'article Flex et composants mobile (AIR pour Android – iOS) – L'approche Hero publié il y a quelques mois, oubliez les points que je souligne sur la fin. Il suffit seulement de se mettre à utiliser ces composants mobiles pour se rendre compte de la puissance de développement qu'il apporte. Mon "bricolage" sur Flex 3 doit rapidement être oublié, il est temps de suivre la voie ouverte par Adobe .

Spécifications des composants ViewNavigator et View

Grâce à la magie de l'Open Source, Adobe vous partage aussi les spécifications rédigées par les personnes en charge du SDK Flex. Vous trouverez de nombreuses informations qui sont toujours d'actualité:

http://opensource.adobe.com/wiki/display/flexsdk/View+and+ViewNavigator

Le paradigme des applications Mobiles

Les composants ViewNavigator et View vont représenter la base de votre application car ils vous permettent de l'organiser comme le font les autres applications natives en utilisant un système à base d'écrans. Ce système vous permet de répondre à l'un des plus gros problèmes auquel on est confronté lors de développement pour mobiles, la taille de l'écran. Dans une application Desktop, on a assez de place pour afficher de nombreuses informations à l'utilisateurs, et cela sur le même écran.

Prenons par exemple l'application TweetDeck Desktop:

Vous avez une grosse dose d'informations sur le même écran et c'est ce qui est recherché. Imaginez maintenant la même application mais sur un écran de portable. L'image ci-dessus faisait 630px de large, cela vous donne à peu près l'idée du rendu. Le contenu est illisible et ne peut être manipulé car il n'y a pas assez de place pour tant d'informations.

Prenons maintenant la version native de TweetDeck:

Au lieu d'avoir une 15aine de tweet affichés, on en a que 3 ce qui permet une meilleure lisibilité à l'écran. Chaque colonne se trouve en fait dans un écran différent. L'écriture d'un tweet se fait aussi dans un nouvel écran nous permettant d'afficher uniquement la zone de texte et quelques options.

Ce paradigme par écran/vues vous permet de séparer votre interface utilisateur.

Si par exemple, vous avez une liste de contacts pour lesquels vous pouvez accéder à plus de détails. Vous aurez dans ce cas 2 vues, une pour la liste et une pour le détail d'un des contacts et la navigation dans votre application va se faire de cette manière, en changeant d'écran.

Les composants ViewNavigator et View vous permettent de mettre en place facilement ces mécanismes sans effort et s'occupe de plusieurs points:

• Gestion de la "pile" de vue grâce à ViewNavigator
• Gestion de l'utilisation de la RAM grâce aux mécanisme de construction / destruction de View
• Transitions entre les vues
• Passage de données entre les vues
• Intégration avec les boutons hardware comme le bouton BACK Android (qui revient automatiquement à la vue précédente) ou le bouton MENU qui fait apparaître un menu par le bas de l'écran.

Le composant ViewNavigator

Le composant ViewNavigator est embarqué de base dans les applications de type ViewNavigatorApplication (anciennement MobileApplication) ou TabbedViewNavigatorApplication. Il est disponible par la propriété nommée "navigator" sur l'application.

C'est lui qui s'occupe d'ajouter / supprimer les vues, d'effectuer les transitions entre ces vues et de gérer la persistance interne des données.

Si vous avez choisi un modèle d'application "blank", vous devrez ajouter vous-même votre ViewNavigator à l'application.

ViewNavigator est un objet graphique contenant de base 2 éléments: une ActionBar et le reste qui sera rempli par vos View:

On verra par la suite que l'ActionBar peut être définie de manière globale ou dans chaque vue (ou un mix des deux, les View ayant toujours la priorité).

Le composant View

Le composant View représente, lui, un écran de votre application. C'est dans cette vue que vous allez ajouter vos composants d'interface. Celui-ci contient en permanence, une référence vers le ViewNavigator qui le gère. Comme dit plus haut, chaque View peut définir le contenu de son ActionBar, qui aura la priorité sur les éléments définis de manière globale sur l'application.

Le composant ActionBar

Le composant ActionBar est composé de trois grandes parties: navigationContent, titleContent et actionContent. Voici un schéma qui récapitule la position de ces éléments:

navigationContent et actionContent sont des Group, dans lesquels vous pourrez mettre tous les composants que vous souhaitez. Le plus souvent, on mettra simplement des boutons mais on pourrait aussi mettre un indicateur de chargement par exemple. Notez que si vous déclarez des boutons dans ces groups, il auront automatiquement une Skin spéciale. Mieux vaut d'ailleurs uniquement déclarer un Button avec un icône, le rendu est le meilleur.

La dernière partie est le titleContent. Dans celle-ci, vous pouvez aussi mettre n'importe quels composants, un champ de recherche par exemple. Si vous ne précisez aucun enfant, un texte sera automatiquement affiché, ayant comme valeur la propriété "title" de la vue.

Vous pouvez aussi choisir de masquer l'ActionBar en modifiant la propriété "actionBarVisible" de la vue / du ViewNavigator.

Voici plusieurs exemples que vous pouvez réaliser avec le composant ActionBar, suivant ce que vous lui donnez comme composants: