Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

30oct/083

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.

Les TileList sont des listes avec défilement dans lesquelles le contenu est arrangé en grille.

Les DataGrid sont des listes à défilement vertical, à plusieurs colonnes. Les DataGrid sont idéales pour afficher de la donnée qui consiste en une liste comportant plusieurs valeurs que l'utilisateur a besoin de voir. Par exemple, une DataGrid serait le bon choix pour afficher un historique téléphonique dans laquelle chaque ligne affiche le temps, la durée, et le numéro de destination, chacun dans une colonne différente. Le DataGrid fait lui même le tri lorsque l'utilisateur clique sur une en-tête de colonne.

Les Tree sont des listes hiérarchiques. Elles sont similaires aux listes de base car elle défilent verticalement. Cependant, ici chaque élément peut être étendu et regroupé pour montrer/cacher ses éléments.

Lorsque vous travaillez avec des listes, vous aurez toujours besoin d'un dataProvider. Un data provider est un modèle de données dont la liste est la vue. Tous les composants de type liste ont une propriété dataProvider que vous pouvez utiliser pour assigner le data model ou récupérer une référence au data model actuel.

Les composants visuels ont une propriété data ainsi qu'une propriété dataProvider. Bien qu'il soit facile de confondre les deux, ils ont des utilités différentes. La propriété dataProvider permet d'indiquer le data model du composant. La propriété data est utilisée seulement quand on utilise un composant comme un item renderer pour un composant liste.

Articles similaires

Commentaires (3) Trackbacks (2)
  1. Bonjour,

    J'utilise un AdvancedDataGrid qui permet de faire des tris de plusieurs colonnes, seulement mon problème est quand je souhaites désactiver les tris, il me garde forcément une colonne triée. Serait-il possible de désactiver tous les tris pour revenir à l'affichage initial?

    Cordialement,

    Damien.D

  2. Salut,
    je n'ai jamais essayé, mais apparement, tu peux envoyer des event (DataGridEvent on dirait) à ta DataGrid comme si tu avais cliqué pour faire un tri:
    http://www.bealearts.co.uk/blog/2007/06/15/default-sorting-for-a-flex-datagrid/
    Donc voila, en modifiant les quelques paramètres de cet event, tu peux peut etre arriver à tes fins

    Fabien

  3. J'ai utilisé cette méthode qui est effectivement très interessante, cependant, je n'arrive pas à "reset" mes filtres afin qu'aucune colonne ne soit triée.

    Vois-tu d'où ça pourrait venir? Voici la fonction de reset qui est activé par un simple bouton

    MXML:
    1. // Reset Filters
    2.         private function resetFilters():void{
    3.             var columnUnSorted:Array = [];
    4.             for(var j:Number=0; j<datagridColumns.length; j++){
    5.             var curADGColumn:AdvancedDataGridColumn = datagridColumns[j];
    6.            
    7.                 if(curADGColumn.sortable && curADGColumn.){
    8.                     columnUnSorted.push(curADGColumn.headerText);
    9.                     adg1.dispatchEvent(
    10.                         new AdvancedDataGridEvent
    11.                         (
    12.                             AdvancedDataGridEvent.HEADER_RELEASE,
    13.                             false, // bubbles
    14.                             true, // cancelable
    15.                             j,  // Column Index - Important
    16.                             null, // datafield
    17.                             0, // rowindex
    18.                             null, // reason
    19.                             null, // itemRenderer
    20.                             0, // LocalX
    21.                             false, // columSort
    22.                             true, // removeColumSort - Important
    23.                             null, // item
    24.                             null, // trigger Event
    25.                             null // header Part
    26.                         )
    27.                     )
    28.                 }
    29.             }
    30.             Alert.show("Reset Done: " + columnUnSorted.toString());
    31.         }


Leave a comment

(required)