Voici un nouvel exemple de la DataFilterLib qui montre simplement comment on peut mettre à jour plusieurs vues avec un seul filtre. Dans cet exemple, j'ai 4 composants qui ont tous comme dataProvider, la même ArrayCollection. J'ai ainsi une DataGrid, une TileList, une List et un Chart qui affichent ma donnée (donnée d'exemples avec des appareils photo).
Pour effectuer mon filtrage, j'utilise un filtre de type INTERVAL, que vous pouvez configurer à votre guise. Cet article explique le fonctionnement des DataFilterInterval en détail. Grâce au mécanisme de Data Binding entre mes vues et mon model, toutes les vues vont se mettre à jour pendant la modification du filtrage.
Démonstration en ligne (onglet "Filter multiple views")
This movie requires Flash Player 11
Voici la suite des articles de Peter Ent sur les item renderers. Cette fois-ci, il nous parle de la communication entre un itemRenderer et une application. Dans certains des exemples précédents, il a utilisé un Button qui propage un évènement personnalisé (BuyBookEvent) pour que l'application réagisse au clic sur le bouton. Cet article couvre quant à lui les différentes options pour communiquer entre votre itemRenderer et votre application MXML plus en détail.
Quelques règles et stratégies
La première règle à respecter est qu'il ne faut pas garder de référence à une instance d'itemRenderer et la modifier (en modifiant ses propriétés public) ou appeler ses méthodes public. Les itemRenderer sont difficiles d'accès depuis l'extérieur pour une raison assez simple: les item Renderer sont recyclés et réutilisés. En récupérer une instance un pourrait troubler le comportement du Framework Flex.
Une fois que vous avez cette règle primordiale en tête, voici les différentes stratégies de communication que vous pouvez utiliser avec un itemRenderer:
- Un itemRenderer peut propager (dispatch) des évènements via son "list owner" (le composant qui utilise l'itemRenderer en question).
- Un itemRenderer peut utiliser des variable membre de classe static. Cela peut inclure par exemple Application.application. Si vous avez stocké des valeurs de manière globale dans votre objet application, vous pouvez les atteindre de cette manière. Cette méthode fonctionne mais n'est pas conseillée car elle limite l'encapsulation).
- Un itemRenderer peut utiliser des variables public de la liste qui le contient (exemple plus loin)
- Un itemRenderer peut utiliser n'importe quelle data de votre enregistrement. Par exemple, vous pouvez avoir un item dans l'enregistrement qui ne sert pas à l'affichage direct mais qui influence le comportement de l'itemRenderer
Modifier les itemRenderer de manière dynamique
Voici l'itemRenderer MXML utilisé pour une <mx:TileList> dans les articles précédents. On va le rendre plus dynamique en le faisant réagier aux changements d'une source externe. (Ce composant est appelé BookItemRenderer.mxml):
J'ai découvert hier un nouveau composant du framework Flex qui je ne connaissais pas (comme quoi ^^). Attention, il est uniquement disponible à partir de Flex 3, vous ne le trouverez pas dans le SDK Flex 2.
Ce composant permet d'appliquer un effet de votre choix à un composant mx:List ou mx:TileList à chaque changement de son dataProvider. Par exemple, vous pouvez faire disparaitre progressivement un éléments que vous venez de supprimer du dataProvider. Il serait plutôt complexe de le réaliser et vous allez voir qu'avec le mx:DefaultListEffect, cela se fait très simplement.
Les composants List et TileList prennent en entrée un dataProvider, c'est-à-dire, un objet qui contient la donnée à affichée par le composant. Pour assigner cette data, vous assignez une collection, qui est habituellement un objet ArrayCollection ou XMLListCollection, à la propriété dataProvider du composant. Chaque item est ensuite affiché en utilisant un itemRenderer.
Grâce aux Data Effects, il est possible d'appliquer des effets aux itemRenderer des composants List et TileList, quand le dataProvider est modifié. Par exemple,quand un item est supprimé du dataProvider d'une List, l'itemRenderer de cet item peut disparaître et se rétrécir.
Par défaut, les composants List et TileList n'utilisent pas de Data Effect. Pour spécifier un effet à appliquer au composant, il faut utiliser la propriété style itemsChangeEffect. Pour le composant List, utilisez la classe DefaultListEffect pour configurer cet effet. Pour un composant TileList, utilisez la classe DefaultTileListEffect.
Les composants de type liste sont ceux des plus sophistiqués du framework Flex. Ce sont des composants qui permettent à l'utilisateur de choisir un ou plusieurs item depuis une liste d'options. Dans sa forme la plus simple, ce peut être une liste verticale, de labels que l'utilisateur peut sélectionner. Cependant, ces composants peuvent être bien plus complexes, par colonnes, par grille, avec une hiérarchie, avec des icônes, des images et bien plus.
This movie requires Flash Player 11
La plus fondamentale de ces listes est le composant mx:List. Ces listes sont verticales, sur une colonne et avec une barre de défilement si besoin est.
Les HorizontalList sont identiques aux List, sauf qu'elle défilent de manière horizontale au lieu de verticale. Les HorizontalList sont typiquement utiles pour parcourir des icônes et/ou des images (miniatures), bien que l'on puisse l'utiliser seulement pour du texte.
Les ComboBox sont des listes qui se rassemblent en une seule ligne quand elle ne sont pas activées. On appelle aussi ce composant un drop-down menu, et il permet de sélectionner parmi une liste d'options quand son état est étendu. Une fois la valeur sélectionnée, le composant revient dans sa forme réduite.
