Voici un composant qui est assez difficile à expliquer car assez original dans sa réalisation. Ce composant se présente comme un composant Flex Accordion sauf qu'au lieu que les différentes parties soient empilées de manière horizontale, les uns au dessus des autres, les headers sont présentés avec une rotation de 90°. Alors comment le contenu est-il affiché?
Et bien une fois que vous sélectionnez votre partie de l'accordéon, celle-ci va pivoter (l'ensemble des autres headers pivotent aussi) pour arriver à une position classique. Un bouton sous forme de flèche est ensuite disponible pour remettre l'Accordion comme il l'était au départ.
Ce composant est intéressant car il permet d'avoir un look assez original tout en gardant de la place lorsque l'Accordion est refermé. Les transitions entre les états ouverts et fermés sont aussi bien réalisés et donneront du style à votre application.
Mais je vais vous laissez vous faire une idée sur ce composant Flex …
Voir un exemple d'application utilisant le CollapsibleAccordion
Voir la page officielle sur le blog de l'auteur
Télécharger le code source du CollapsibleAccordion
De nombreux composants Flex ont une propriété "icon" qui permet justement d'assigner un icon à un composant Flex. Par exemple, les composants Button et Accordion ont cette propriété icon qui leur permet d'afficher une image à gauche (format png, jpg, …). La plupart du temps, les icônes sont embedded (embarqués) dans l'application pour que l'interface utilisateur soit complète et que l'utilisateur n'aie pas à attendre pour voir apparaître les icônes. Le poids souvent léger des icônes fait qu'il est souvent possible de mettre ces éléments graphiques icônes dans le SWF sans que sa taille n'augmente trop.
Pour ajouter un icône à un bouton par exemple, on utilise le code suivant:
<mx:Button icon="@Embed('/assets/icons/icon.png')"/>
L'icône qui se trouve dans le répertoire assets/icons/ de notre projet Flex sera compilé avec le SWF, aucun problème donc.
Mais imaginons que vous avez besoin d'un icône en particulier à un moment dans votre application, suivant une action utilisateur par exemple. Vous pouvez ajouter cet icône à la compilation en Embed dans une variable de type Class et l'assigner au bon moment à votre composant en faisant:
myComp.setStyle("icon", iconClass);
Mais si vous voulez charger un icône qui se trouve à une certaine URL à l'exécution, vous ne pourrez pas l'inclure à la compilation avec un Embed. Alors comment faire pour charger dynamiquement un icône dans un composant Flex.
Quand une application contient des éléments graphiques (icônes, images...), il peut être utile de donner une description textuelle de ces éléments. C'est encore plus pratique quand l'élément graphique n'a pas un sens évident. Plutôt que de charger l'écran avec des descriptions textuelles fixes, vos applications Flex peuvent comporter des ToolTips. Ce sont des blocs de texte qui apparaissent quand l'utilisateur bouge la souris au dessus d'un élément graphique.
Ajouter des ToolTips avec Flex
Tous les composants qui héritent de UIComponent (ce qui inclut tous les composants visuels et les conteneurs) implémentent une propriété toolTip (getter/setter) qui va vous permettre d'assigner une String à l'objet sur lequel vous voulez afficher un tooltip. Vous pouvez fixer cette propriété simplement en utilisant du MXML comme dans cet exemple:
<mx:Button id="button" label="Exemple" toolTip="Exemple de ToolTip"/>
Flex Source Code Download: Télécharger le code source complet de l'application
This movie requires Flash Player 11
Ces composants de type view stack (ViewStack et TabNavigator) permettent de grouper un ensemble de conteneurs et d'en afficher qu'un seul à la fois. C'est utile si vous voulez faire une interface une page/un écran. La manière la plus simple d'utiliser un composant de ce type est d'utiliser le composant TabNavigator qui fonctionne un peu comme le composant Accordion. Il va ainsi vous permettre de créer une interface Flex avec onglets.
Voici un exemple d'utilisation de TabNavigator qui reprend le même contenu que l'exemple d'Accordion Flex:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
<mx:TabNavigator width="400" height="240">
<mx:Form label="Nom" icon="@Embed(source='./application_form.png')">
<mx:FormItem label="Prénom">
<mx:TextInput id="first"/>
</mx:FormItem>
<mx:FormItem label="Middle Name">
<mx:TextInput id="middle"/>
</mx:FormItem>
<mx:FormItem label="Last Name">
<mx:TextInput id="last"/>
</mx:FormItem>
</mx:Form>
<mx:Form label="Commentaires" width="100%" height="100%">
<mx:FormItem label="Commentaires">
<mx:TextArea width="200" height="100" id="comments"/>
</mx:FormItem>
</mx:Form>
</mx:TabNavigator>
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
This movie requires Flash Player 11
Le composant Accordion (accordéon) se compose de deux (ou plus) conteneurs qui ont la capacité de se réduire. Seulement un élément d'un Accordion peut être visible à la fois. Les autres éléments de l'accordéon sont réduits pour que l'on ne voit que leur titre. Les Accordion sont pertinents pour des processus par étapes où l'utilisateur peut revenir en arrière.
Par exemple, pour un formulaire contenant plusieurs sections. Plutôt que des présenter toutes les sections à la fois, un accordéon permet à l'utilisateur de voir une seule section à la fois.
La création d'Accordion, comme la plupart des composants Flex est assez simple. Les Accordion se comportent comme des conteneurs classiques dans lesquels vous pouvez mettre d'autres éléments (directement en MXML ou en utilisant la méthode addChild ActionScript). Dans le cas d'un Accordion, tous les éléments enfant devraient être des conteneurs eux-mêmes, et vous devrez ajouter une propriété label à tous les enfants direct de l'Accordion Flex. Les Accordions utilisent la propriété label des éléments enfant pour la barre de titre, et peuvent aussi afficher un icône quand la propriété icon est fixée.
Voici un exemple simple d'utilisation du composant Flex Accordion en MXML:
