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:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
<mx:Accordion 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:Accordion>
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
This movie requires Flash Player 11
11 novembre 2008
Bonjour,
Comment lier cela avec une base de données mysql ?
11 novembre 2008
Salut,
Je suppose que vous voulez envoyer les données du formulaire vers une base MYSQL (pas forcement depuis un composant Accordion). Pour cela, il faut faire communiquer votre application Flex avec un script (PHP par exemple) situé sur un serveur vous permettant d'enregistrer les données passées au script PHP dans la base MYSQL.
Pour tout ce qui est du traitement php/mysql, il y a de très nombreuses ressources disponibles sur internet, je vous laisse le soin de trouver.
Pour ce qui est d'envoyer des données depuis une appli Flex vers un script PHP, vous pouvez consulter cette page http://www.flex-tutorial.fr/flex-client-serveur/ et plus particulièrement la partie "Communication par Requête/Réponse HTTP".
Il y aura bientôt plus de ressources sur la communication flex/php sur flex-tutorial
fabien
14 décembre 2008
Bonjour ,
J'ai un problème d'affichage du texte dans les "boutons" de ce composant.Le texte est coupé.
Cet Accordion est placé dans un State qui arrive avec un effet et je n'arrive pas à accéder au labels contenus dans les "boutons" de mon Accordion pour leur mettre "truncateToFit = false".
Pour info les conteneurs de mon Accordion sont des Canvas.
Merci d'avance
P.S : Génial ce site! j'en apprends beaucoup ici
14 décembre 2008
Salut,
ton problème est assez difficile à cerner ^^. Si tu cherches à modifier les propriétés d'un composant qui est dans un state, il te suffit de lui donner un id et de faire un
Pour plus d'informations sur cette manipulation:
http://www.flex-tutorial.fr/2008/01/27/flex-states-modifier-la-propriete-dun-composant/
Sinon, si tu fixes une width à ton bouton, il devrait prendre la taille que tu lui a imposé et afficher le texte complet en toolTip. Si tu utilises un conteneur type Box, tu auras des scrollbar mais ton texte sera complet.
Fabien
8 mai 2011
Pour revenir à la question de webzone, est-ce qu'il est possible que l'accordion soit complété avec les données de la bdd, comme avec les datagrids lorsque l'on fait "Lier aux données" ? (cette option n'est pas disponible quand on fait clic droit sur l'accordion)
8 mai 2011
Salut Romain,
Un accordéon peut difficilement être lié directement à une BDD (que représente un accordéon dans ce cas-là?) donc je pense qu'il n'est pas possible de le faire comme cela.
Mais c'est une exercice intéressant pour démarrer. Tu peux t'inspirer du code généré pour une DataGrid et l'adapter pour un accordéon
Fabien