Composant Flex – CollapsibleAccordion, l'Accordion vertical et rotatif avec transitions
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
Flex Effect: Déclencher un effet en utilisant la méthode play() en ActionScript
Déclencher les effets manuellement
Vous pouvez utiliser la méthode play() d'un effet pour le déclencher manuellement. Pour qu'un effet soit joué, vous devez avoir une cible, à laquelle sont appliqués les paramètres. Par exemple, si vous avez crée un effet Move, qui est supposé déplacer le composant de -100 par rapport à sa position actuelle, vous devez dire quel composant utilisent en tant que cible. Vous pouvez le faire en utilisant la propriété target.
moveEffect.target = textInput;
Vous pouvez ensuite utiliser la méthode play() pour démarrer la lecture de l'effet:
moveEffect.play();
L'exemple suivant utilise un effet de déplacement et l'applique à 4 champs de saisie à leur création.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
verticalAlign="middle"
viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
private function applyEffect(event:Event):void {
moveEffect.target = event.currentTarget;
moveEffect.play();
}
]]>
</mx:Script>
<mx:Move id="moveEffect" xFrom="-100"/>
<mx:VBox>
<mx:TextInput id="textInput1" creationComplete="applyEffect(event)"/>
<mx:TextInput id="textInput2" creationComplete="applyEffect(event)"/>
<mx:TextInput id="textInput3" creationComplete="applyEffect(event)"/>
<mx:TextInput id="textInput4" creationComplete="applyEffect(event)"/>
</mx:VBox>
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
Dans cet exemple, chaque champ de saisie semble glisser depuis la gauche.
Mes projets (Open Source)
Autres
