Composants de type liste

Demander un devis
Je souhaite télécharger le programme ou imprimer le programme
  • Imprimer
tutoriel_vers_formation_Flex

Les composants de type liste constituent un deuxième ensemble de composants avancés. Ils permettent à l'utilisateur de sélectionner un ou plusieurs éléments (items), parmi une liste d'options. Comme illustré ci-dessous, ces composants permettent des représentations très variées :

  • listes verticales : s:List,
  • listes déroulantes : s:ComboBox,
  • listes horizontales : mx:HorizontalList,
  • listes disposées en grille : mx:TileList,
  • listes verticales à plusieurs colonnes : mx:DataGrid.

 

listes

 

Nous étudierons les quatres premiers types de liste dans ce chapitre. Les grilles de données, ou DataGrid, présentent des propriétés plus avancées et font l'objet d'un chapitre à part entière.

 

Listes verticales

 

La liste verticale, s:List, est sans doute la plus classique. Elle fait défiler les éléments verticalement, sur une unique colonne, et affiche au besoin une barre de défilement.

 

Les données affichées dans la liste sont spécifiées à l'aide de la propriété dataProvider, que nous avons déjà utilisée pour les composants de type diagramme. La variable utilisée comme fournisseur de données doit avoir été définie comme Bindable.

 

Par défaut, un seul élément peut être sélectionné à la fois. Pour autoriser l'utilisateur à sélectionner plusieurs éléments en même temps, il faut utiliser la propriété allowMultipleSelection, qui prend comme valeur un booléen "true" ou "false". Pour sélectionner plusieurs éléments, l'utilisateur doit cliquer sur les éléments désirés en maintenant la touche Ctrl ou Shift enfoncée.

 

Vous pouvez également spécifier l'élément sélectionné par défaut, en indiquant son index ou l'élément en lui-même, à l'aide des propriétés selectedIndex et selectedItem. Notez que les index sont numérotés en commençant à zéro et non à un. Pour sélectionner par défaut plusieurs éléments, utilisez les propriétés selectedIndices et selectedItems et assignez-leur une valeur de type Array :

      <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var chiffres:ArrayCollection = new ArrayCollection
                  ([1, 2, 3, 4, 5, 6, 7, 8, 9]);
      ]]>
 
 
<s:List id="maListeVerticale" dataProvider="{chiffres}"
    
            allowMultipleSelection="true"
    
            selectedIndex="3" />

 

Pour récupérer l'élément sélectionné, nous utilisons les propriétés selectedIndex ou selectedItem de la liste. Le code suivant illustre l'affichage de l'élément sélectionné dans un label :

    

 

Listes déroulantes

 

Le composant ComboBox permet de lister les éléments verticalement en affichant uniquement l'élément sélectionné. L'ensemble des éléments est visible dans une liste déroulante, affichée en cliquant sur le bouton à droite de la liste. 

 

Comme pour les List, le fournisseur de données est spécifié dans la propriété dataProvider et l'élément sélectionné par défaut dans la propriété selectedItem ou selectedIndex. Dans le cas d'une ComboBox, il n'est toutefois pas possible de sélectionner plusieurs éléments en même temps.

 

Par défaut, la liste déroulante intègre une barre de défilement lorsque la collection d'éléments contient plus de cinq éléments. Cette limite de cinq éléments est paramétrable à l'aide de la propriété rowCount.

    
      <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var chiffres:ArrayCollection = new ArrayCollection
                  ([1, 2, 3, 4, 5, 6, 7, 8, 9]);
      ]]>
 
 
 
                   dataProvider="{chiffres}"
                   selectedIndex="0"
                   rowCount="9" />

 

Listes horizontales

 

Les listes horizontales, ou HorizontalList, ont un fonctionnement très similaire aux listes verticales et utilisent les mêmes propriétés dataProvider, selectedItem, selectedIndex et allowMultipleSelection.

 

Si la collection d'éléments à afficher contient plus de quatre éléments, la liste sera automatiquement pourvue d'une barre de défilement horizontal. Cette limite peut être paramétrée à l'aide de la propriété columnCount, qui spécifie le nombre d'éléments à afficher :

                   allowMultipleSelection="true"
                   columnCount="5"/>

 

Listes disposées en grille

 

La disposition en grille est assurée par le composant TileList, qui présentent les éléments dans une grille de quatre colonnes sur quatre lignes, par défaut.

 

Là encore, comme pour les autres composants, les propriétés dataProvider, allowMultipleSelection, selectedItem et selectedIndex sont valables, la seule obligatoire étant dataProvider.

 

Pour modifier la taille de la grille, nous utiliserons les propriétés columnCount et rowCount :

             selectedIndex="1"
             columnCount="3" rowCount="3" />

 

 

Ces quatres composants permettent d'assurer la présentation de la plupart des listes contenant une unique série de données. Pour les données se présentant en plusieurs colonnes, un autre composant s'y prête parfaitement : le DataGrid.

 

tutoriel_precedent

tutoriel_suivant

.
X
 
 
 
 
 

You havecharacters left.