Grilles de données

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

Les grilles de données, ou DataGrid, permettent d'afficher des listes de données comportant plusieurs champs par ligne et de trier automatiquement les données lorsque l'utilisateur clique sur l'en-tête d'une colonne. 

Pour illustrer l'utilisation des DataGrid, nous utiliserons les données suivantes :

datagrid_donnees

 

En ActionScript, nous créons un ArrayCollection à l'aide du code suivant :

[Bindable]
public var users:ArrayCollection = new ArrayCollection();
 
users.addItem({name:"Nom 1", firstname:"Prénom 1", age:25, logged:true});
users.addItem({name:"Nom 2", firstname:"Prénom 2", age:30, logged:true});
users.addItem({name:"Nom 3", firstname:"Prénom 3", age:35, logged:false});
users.addItem({name:"Nom 4", firstname:"Prénom 4", age:40, logged:false});
users.addItem({name:"Nom 5", firstname:"Prénom 5", age:45, logged:true});

Cette variable users servira de fournisseur de données à notre DataGrid. Il faut donc spécifier qu'elle est [Bindable].

 

Création d'un DataGrid

 

La définition d'un DataGrid se fait en spécifiant deux informations : le founisseur de données (dataProvider) et les informations à insérer dans les colonnes à l'aide de composants DataGridColumn.

 

Pour créer un DataGrid basé sur les données de l'ArrayCollection users créé ci-dessus, nous écrirons donc les lignes suivantes :

 
 
 
 
 
 

A l'exécution, nous obtenons une grille de données semblable à celle-ci :

datagrid

 

Les données du dataProvider spécifié sont bien affichées colonne par colonne. Par défaut, les en-têtes des colonnes sont titrées avec les valeurs des dataField donnés. Notez également que l'utilisateur peut redimensionner, déplacer et trier les colonnes en manipuler leur en-tête.

 

Sélection des données

 

Lorsque l'utilisateur sélectionne une ligne, l'index de cette ligne est stocké dans la propriété selectedIndex du DataGrid, et l'objet en lui-même est accessible à travers la propriété selectedItem. Ainsi, nous pouvons afficher les informations sélectionnées comme illustré ci-dessous : 

datagrid_selection

Le code MXML correspondant à cette image est le suivant : 

 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

 

Nous savons maintenant comment insérer des données dans un DataGrid et récupérer les données sélectionnées par l'utilisateur. Voyons tout de suite comment personnaliser le rendu graphique de ces données.

 

Personnalisation du rendu

 

Nombre de lignes affichées

 

Un DataGrid comporte six lignes par défaut, en plus de la ligne d'en-tête. Si les données à afficher constituent plus de six lignes, une barre de défilement verticale sera automatiquement ajoutée.

 

La propriété rowCount permet de modifier cette valeur 6 à votre convenance. Ainsi le code suivant donnera l'affichage ci-dessous : 

 
 
 
 
 
 

datagrid_2

 

Le nombre de lignes affichées peut également être fixé en fonction des données :

 

Le résultat affiche bien une grille de données possédant 5 lignes seulement, soit le nombre exact de lignes à afficher : 

datagrid_3

 

 

Allons plus loin : nous pourrions spécifier que s'il y a plus de dix lignes à afficher, le DataGrid en comportera dix et insèrera une barre de défilement. S'il y en a moins, le DataGrid comportera exactement le nombre de lignes à afficher.

Pour ce faire, nous utiliserons la syntaxe de condition suivante : condition ? valeur si condition validée : valeur sinon

             rowCount="{users.length > 10 ? 10 : users.length}" >
 
 
 
 
 
 

 

Autre propriétés du DataGrid

 

Le DataGrid possède d'autres propriétés pour personnaliser le composant, dont :

  • editable : booléen indiquant si l'utilisateur peut modifier ou non les valeurs contenues dans le DataGrid en double-cliquant sur une cellule,
  • allowMultipleSelection : booléen, faux par défaut, indiquant si l'utilisateur peut sélectionner plusieurs lignes en même temps,
  • draggableColumns: booléen, vrai par défaut, indiquant si l'utilisateur peut déplacer les colonnes dans le tableau,
  • resizableColumns : booléen, vrai par défaut, indiquant si l'utilisateur peut redimensionner les colonnes à l'aide de la souris,
  • sortableColumns : booléen, vrai par défaut, indiquant si l'utilisateur peut trier les lignes en double-cliquant sur la colonne à prendre en compte pour le tri,
  • minColumnWidth : nombre indiquant la taille minimale des colonnes, que l'utilisateur ne peut dépasser en redimenssionnant

 

Propriétés des DataGridColumn

 

Le composant DataGridColumn possède des propriétés permettant de personnaliser l'affichage des données de chaque colonne et leur en-tête.

La propriété headerText indique le texte à afficher en en-tête, la propriété textAlign spéficie l'alignement du texte (droite, gauche ou centré).

Les propriétés editable, resizable et sortable contiennent des booléens redéfinissant le droit à l'utilisateur d'éditer, de redimensionner et de trier la colonne, indépendamment de ce qui a été défini sur l'ensemble du DataGrid.

 

Ainsi, notre DataGrid initial peut être amélioré en celui-ci : 

datagrid_4

 

Le code correspondant à cette capture d'écran est le suivant :

              rowCount="{users.length > 10 ? 10 : users.length}"
              allowMultipleSelection="true" >
 
 
 
 
 
 

Notez que dans la capture d'écran, l'utilisateur a sélectionné les lignes 1 et 3 du DataGrid. Cela a été possible grâce à la propriété allowMultipleSelection dont la valeur est à "true" (ligne 3 du code ci-dessus).

 

Le composant ItemRenderer

 

Une dernière amélioration notable de notre DataGrid consisterait à transformer les valeurs true et false du champ "Connecté" en des CheckBox cochées ou non selon la valeur.

Pour ce faire, nous allons redéfinir l'affichage des données dans cette colonne, à l'aide de la propriété ItemRenderer. Par défaut, le rendu des éléments est en mode texte, d'où les valeurs true et false affichées.

 

Dans un premier temps, nous nous contenterons d'utiliser, pour le rendu de l'élément, un composant déjà existant : mx.controls.CheckBox. Nous verrons plus tard comment définir un composant personnalisé.

 

                   rowCount="{users.length > 10 ? 10 : users.length}" >
 
 
 
 
 
                               itemRenderer="mx.controls.CheckBox"/>
 

Dans le code ci-dessus, nous précisons à la ligne 8 que la colonne affichant les valeurs du champ "logged" doivent utiliser un itemRenderer de type CheckBox, et non celui par défaut :

 

L'exécution du programme affiche désormais des checkBox, cochées lorsque le champ logged a pour valeur true et décochées sinon : 

datagrid_5

 

tutoriel_precedent

.
X
 
 
 
 
 

You havecharacters left.