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 Item Renderer – Utiliser des States dans un itemRenderer
Cette fois-ci, l'article de Peter Ent porte sur la manière par laquelle vous pouvez changer l'apparence d'un itemRenderer facilement en utilisant des States. Si vous n'avez jamais utilisé les States en Flex, je vous conseille de lire les articles de cette page:
Si vous avez déjà manipulé les states et les transitions Flex, vous savez que cela peut facilement rendre votre application plus agréable. Vous le savez, les itemRenderer servent à afficher une donnée de manière non-classique afin de la présenter de la meilleure manière à votre utilisateur. Parfois, cette communication avec l'utilisateur est assez simple car elle consiste simplement à présenter un nom, mais elle peut parfois utiliser des couleurs ou même être interactive.
Les itemEditors sont de vrais composants interactifs (permettant de modifier la donnée) mais ce n'est pas la portée de cet article. On va ici voir comment un itemRenderer peut changer son apparence suivant la donnée ou une action de l'utilisateur.
Utiliser les States (mx:States)
Le tag <mx:State> est une très bonne manière de changer l'apparence d'un itemRenderer. Les States sont faciles à utiliser et quand ils sont combinés avec des transitions, peuvent donner une réelle expérience utilisateur.
Dans cet exemple, on va créer un nouveau itemRenderer MXML (que vous pouvez bien sûr faire en ActionScript) pour une List. Cet itemRenderer affiche une image, un titre, un auteur, une prix et un Button pour acheter le livre.
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:
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>
Flex Transition: Programmer des Transitions en ActionScript (Move, Resize…), avec exemple AS3
Les transitions fonctionnent de la même manière en MXML qu'un ActionScript (AS3) car vous devez fixer les mêmes propriétés et ces propriétés auront le même effet que vous utilisiez du MXML ou de l'ActionScript.
Vous pouvez construire une nouvelle instance de mx.states.Transition en utilisant le constructeur:
var transition:Transition = new Transition();
Vous pouvez ensuite fixer les propriétés fromState et toState:
transition.toState = "*"; transition.fromState = "*";
Vous pouvez maintenant assigner un effet en utilisant la propriété effect:
var move:Move = new Move(); move.targets = [textInput1, textInput2]; transition.effect = move;
Enfin, il vous suffira d'ajouter simplement cette transition à la propriété transitions de l'application ou du composant:
transitions = [transition];
Il n'y a pas de vrais avantage à utiliser une transition en AS3 plutôt qu'en MXML. Le choix que vous devrez faire sera basé sur le type de document sur lequel vous voulez définir les états. Si vous ajoutez des transitions à un document MXML, vous devriez utiliser le MXML pour définir ces transitions et inversement.
L'exemple suivant montre comment reproduire l'exemple de création de transitions en MXML mais cette fois, les transitions sont écrites en Action Script.
Mes projets (Open Source)
Autres
