Composant Flex – Panel à 2 états (ouvert-fermé, Collapsible Panel)
Le dernier composant Flex que j'avais présenté sur flex-tutorial.fr était le composant PeekPanel, un composant plutôt cool permettant de révéler de nouveaux éléments sans sortir de son Container:
Composant Flex – PeekPanel: Reproduire l'effet de l'application Google Maps sur iPhone
En voici un autre dans le même genre, nommé le Collapsible Panel. Ce composant permet d'avoir un Panel ayant 2 états: ouvert et fermé. Dans l'état fermé, on voit simplement la barre de titre, dans l'état ouvert, le Panel se comporte de manière classique.
Collapsible Panel Component for Flex
Entre les deux états, une petite animation d'ouverture est appliquée automatiquement. Et pour finir, une petite flèche dans la barre de titre pour indiquer dans quel état se trouver le Panel.
Je suis en train de réaliser (pas pour le blog, mais pour une application pro), une interface de type Flex Builder (Design View) avec un récapitulatif de propriétés arrangées en catégories. Vous pourrez voir que c'est ce genre de composant qui est utilisé dans la Design View de FB.
Bref, j'utilise ce composant et il marche comme un charme ^^
Application de démonstration en ligne
Flex Item Renderer – Modifier la taille d'un item avec des Transition
Dans l'article précédent, j'ai montré comment utiliser des States dans un itemRenderer pour modifier son apparence. Comme pour tous les composants qui héritent UIComponent, vous pouvez utiliser des Transition entre vos State. On va ici s'intéresser à la manière par laquelle on pourrait avoir des item qui s'étendent (dont la hauteur est modifiée).
La question de l'expansion d'un item devient intéressante quand on sait que la liste doit être scrollée. Imaginez cette situation: vous avez une liste d'items ayant la même hauteur. Maintenant, vous étendez l'item 2. Jusque là tout va bien, l'item 2 est plus grand que les autres items visibles. Et c'est là le problème: les items visibles. Maintenant vous faîtes un scroll dans la liste. Souvenez-vous que les itemRenderers sont recyclés. Donc quand l'item 2 est hors de vue, son itemRenderer sera bougé en bas de la liste. Vous devez donc mettre à zéro sa taille. OK, jusque là cela fonctionne. Maintenant faire un scroll vers le haut pour ré-afficher l'item 2. Vous voudriez qu'il soit dans l'état étendu. Comme l'itemRenderer pourrait-il le savoir? Si vous avez lu les articles précédents, vous savez que cette information vient soit de la data, soit d'une source externe.
Créer un itemRenderer resizable pour cela est assez complexe et pas forcement utile. Il y a une meilleure manière de faire cela en utilisant une VBox et un Repeater. Seulement, le problème avec le Repeater est que chaque child sera crée. Si vous avez 1000 enregistrement et que vous utilisez un Repeater, vous aurez 1000 instances de votre itemRenderer.
Pour cet exemple, on va écrire un itemRenderer, que l'on va utiliser en tant qu'enfant d'une VBox. Les éléments de cette liste sont simples: le nom et l'auteur du livre. Mais cliquer sur l'itemRenderer va le faire s'étendre. Ceci se fait en 2 étapes:
- L'itemRenderer a une état qui inclut les informations supplémentaires
- L'itemRenderer utiliser une transition Resize pour donner une fluidité dans la contraction/expand de l'itemRenderer
Flex 4 – Les nouveaux effets Flex de Gumbo
Je n'ai jamais vraiment parlé de Flex 4 (alias Gumbo) sur ce blog car je n'ai pas encore eu le temps de le tester. Il existe déjà des versions du Flex SDK 4 disponible au téléchargement, si vous voulez tester.
Ce ne sont pas encore des versions Release mais elles fonctionnent correctement. Il y aura beaucoup de choses qui vont changer dans la prochaine version de Flex. Parmi les points importants, on trouve le préfixe Fx qui va précéder les nouvelles classes (qui a fait débat au sein de la communauté) mais aussi le format FXG qui permet d'importer des éléments graphiques à partir d'applications comme Adobe Photoshop ou Illustrator (en passant par Flash Catalyst qui sortira bientôt d'ailleurs). Évidemment, il y a beaucoup d'autres nouveautés avec Flex 4 et beaucoup de changements d'architecture.
Il y a aussi un nouveau système d'effets et de transition par rapport à Flex 3. Cheet Haase en parle sur son blog et sur Adobe TV:
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 Transition: Utilisation d'un Transition Effect Filter
Lorsque vous appliquez une transition, les effets sont appliqués à toutes les cibles en même temps. Parfois, ce comportement est le comportement souhaité. Cependant, parfois, vous voudrez que certains effets soient conditionnels, dépendant de quels changements se passent pour les cibles.
Par exemple, s'il on utilise cette transition:
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Sequence targets="{[windowA, windowB, windowC, windowD]}">
<mx:Blur blurYFrom="0" blurYTo="10" duration="100"/>
<mx:Parallel >
<mx:Move/>
<mx:Resize/>
</mx:Parallel>
<mx:Blur blurYFrom="10" blurYTo="0" duration="100"/>
</mx:Sequence>
</mx:Transition>
</mx:transitions>
Mes projets (Open Source)
Autres
