Archives pour la catégorie TileList

DataFilterLib – Filtrer plusieurs vues en utilisant le DataBinding

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

Flex 4 – Différences entre Flex 3 et Flex 4 (5-Layout et Effects)

Traduction de l’article Differences between Flex 3 and Flex 4 beta de Joan Lafferty.

Modifications apportées sur les Effect en Flex 4

De nombreuses améliorations ont été faites sur l’architecture des Effect dans Flex 4. Les effets Halo (Flex 3) ne fonctionnaient que sur les composants basés sur UIComponent. Les effets Spark (Flex 4) peuvent agir sur n’importe quelle cible, même les primitives graphiques du framework. Tous ces effets se trouvent dans le package spark.effects.*.

Puisque ces effets fonctionnent sur les composants Halo, les composants Spark et les primitives graphiques, Adobe recommande l’utilisation des effets Spark pour toutes vos futures applications.

Voir l’article de Chet Hasse sur Effects in Adobe Flex 4 SDK beta

Modifications apportées sur le Layout (mise en page)

Dans les versions précédentes de Flex, la mise en page des composants et des conteneurs était définie dans chaque composant. C’est pourquoi on avait des composants tels que List, TileList et HorizontalList, qui apportaient tous les mêmes fonctionnalités sauf que leur mise en page était différente.

Dans Flex 4, la mise en page a été découplée des composants. Maintenant, les composants Spark tels que Application, List, ButtonBar et Panel peuvent définir leur mise en page de manière déclarative. Dans tous les composants, cela est géré par la classe Group et la mise en page des enfants de Group est laissé à un objet « layout » associé. Cette mise en page supporte à la fois les composants Spark et Halo en plus des primitives graphiques FXG. La mise en page peut même être changée à l’exécution.

En tant que développeur, vous pourrez facilement écrire des « layout » personnalisées et basculer de layout directement dans votre composant. Voici un exemple qui définit une liste verticale, une liste horizontale et une tiled list (en grille):

Vertical List (layout par défaut)

<s:List />

Horizontal List

<s:List>
    <s:layout>
        <s:HorizontalLayout />
    </s:layout>
</s:List>

Tiled List

<s:List>
    <s:layout>
        <s:TileLayout />
    </s:layout>
</s:List>

Lire la suite

Flex Item Renderer – Communication entre un itemRenderer et l’application

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):
Lire la suite

Flex DefaultListEffect et DefaultTileListEffect – Appliquer un effet à une List/TileList à chaque modification de son dataProvider

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.

Lire la suite

Flex UIComponent – Les Composants de type Liste (List, ComboBox, DataGrid, HorizontalList, TileList, Tree)

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.

Lire la suite