DataGrid, méthodes d'affichage

  • warning: array_map(): Argument #2 should be an array in /var/www/titouille.ch/www/modules/system/system.module on line 1050.
  • warning: array_keys() expects parameter 1 to be array, null given in /var/www/titouille.ch/www/includes/theme.inc on line 1845.
  • warning: Invalid argument supplied for foreach() in /var/www/titouille.ch/www/includes/theme.inc on line 1845.
Portrait de titouille

Quelques temps que je n'ai plus rien écris, alors je vous dévoile ma méthode de remplissage d'une grille de données avec affichage spécial Smile

Tout d'abord, les possibilités :

On lie un tableau de type "dataProvider" (tableau d'objets) à un dataSet, qui est lui même lié à une dataGrid, ou encore on lie directement le tableau à la dataGrid.

Personnellement, j'utilise beaucoup les dataSets car ils permettent de faire des liaisons sur de multiples composants pour agir simultanément entre eux. Pour prendre un exemple concrèt :

Je charge un tableau de données contenant des profils étudiants. Je remplis un dataSet avec les données récupérées. Le dataSet sera lié à une liste via sa liaison "dataProvider" (inspecteur d'objet, onglet liaisons).
Puis ensuite, je vais lier chaque "colonne" à un textInput particulier, toujours via l'onglet liaisons. Il ne me reste plus qu'a faire la liaison manuelle sur le "selectedIndex" de la dataGrid et du dataSet (la liaison via l'inspecteur d'objet sur la propriété "selectedIndex" est innopérante, malheureusement...) et à chaque changement d'un élément de la liste, les différents textInputs seront rafraichis pour afficher les infos correspondantes à l'élément sélectionné.

Donc, reprenons : le but est d'avoir un dataSet, qui va contenir le schéma des données reçues. Pour ce faire, pour chaque colonne de la requête sql récupérée, il faut créer un élément dans le schéma, qui va avoir exactement le même nom que le nom de colonne.

Premièrement, nous allons créer un tableau fictif d'éléments du genre :

myArray = [
{ id:1, name:'one', key:'test 1' },
{ id:2, name:'two', key:'test 2' },
{ id:3, name:'three', key:'test 3' }
];

Ajoutons un dataSet sur la scène, nommons le 'ds' et ajoutons son schéma via l'inspecteur d'objet, onglet schéma. (nous aurons donc 3 champs, id, name et key)
Ajoutons ensuite une grille (dataGrid) sur la scène, et nommons la dg.
Reprenons le dataSet, inspecteur d'objet, onglet liaisons. Ajoutons une liaison sur le "dataProvider". Puis dans la partie du bas, clickons sur la partie "To" pour faire la liaison avec le dataProvider de la grille.

Enfin, alimentons le dataSet avec le tableau :

ds.dataProvider = myArray;

ce qui aura pour conséquence de remplir le dataSet, et par là même la grille de données, qui va afficher les 3 colonnes id, name et key.

Passons maintenant à l'initialisation de la grille.
Encore une fois, que pouvons nous faire ??

Nous allons utiliser la classe DataGridColumn pour récupérer les colonnes de la grille et les éditer de la manière dont nous le désirons.

Pour récupérer une colonne, il faut déclarer une variable qui va l'accueillir :

var c:mx.controls.gridclasses.DataGridColumn;

puis utiliser la méthode "getColumnAt( index )" pour l'affecter et "removeColumnAt( index )" pour la supprimer:

c = dg.getColumnAt( 0 );	
dg.removeColumnAt( 0 );

ATTENTION : si on supprime une colonne, ça n'est que dans la grille. Elle existe toujours dans le dataSet, et ses valeurs existent toujours dans les items de la grille. Supprimer une colonne la fait disparaitre de l'affichage, pas du tableau de données. Attention également : si on supprime une colonne, l'ordre des indexs est refait à l'intérieur de la grille. Donc, selon notre schéma :

dg.removeColumnAt( 0 ) // supprime la colonne id 
c = dg.getColumnAt( 0 ) // récupère la colonne name, hé oui, à l'index 0, pas 1...
c = dg.getColumnAt( 1 ) // récupère la colone key

une fois la variable affectée, nous avons accès aux propriétés suivantes :

c.editable:Boolean : colonne éditable
c.sortable:Boolean : colonne triable
c.resizable:Boolean : colonne redimensionnable
c.sortOnHeaderRelease:Boolean : colonne permettant le tri par colonne si on clique sur l'entête
c.headerText:String : texte d'entête
c.width:Number : largeur de la colonne
c.cellRenderer:String : nom de classe à utiliser pour le rendu
c ["iconFunction"]:Function : nom de fonction à utiliser pour le choix de rendu
c.labelFunction:Function : nom de fonction à utiliser pour le choix de rendu

il semble encore exister une méthode
c.headerFunction:Funtion

mais je ne l'ai jamais testée

Pour donner quelques astuces sans rentrer trop dans le détail :

la largeur (width) est à utiliser avec précision. Si on applique la largeur sur 1 colonne, alors on doit l'appliquer sur toutes les colonnes, et la somme de ces largeurs doivent atteindre la largeur de la grille moins 20 pixels (scrollbar)

le rendu de colonne (cellRenderer) est à utiliser avec une classe de rendu. vous en trouverez plusieurs sur le site de PhilFlash. Le cellRenderer est à utiliser en liaison avec 'iconFunction'. Il faut faire bien attention, car appeler c.iconFunction ne fonctionne pas... il faut faire c['iconFunction'].

iconFunction et labelFunction (et surement headerFunction) ont le format de fonction suivant : (exemple appliqué sur la colonne key)

function myLabelFunction( item ):String
{
if( item == undefined ) return;
 
// ça ne sert à rien, je retourne la même valeur...
// mais on peut imaginer tous les tests possibles
return item.key;
}

Dans le cas d'une fonction "label", on peut par exemple remplacer un identifiant par une valeur en faisant un test. Dans le cas d'une fonction "icon", on passera l'identifiant ActionScript d'une icone de la bibliothèque, par exemple.

Encore une astuce de taille : Pour tous les composants héritant de List (List, ComboBox), il est intéressant de faire une requête qui retourne une colonne "data" pour l'identifiant ainsi qu'une colonne "label" pour la valeur affichable. Cela permet de faire une liaison directe sur le dataProvider et l'affichage est correct. Dans le cas contraire, il faut passer par les méthodes de la classe DataGlue pour faire la liaison correctement, ce qui est assez astreignant...

En général, je travaille de la manière suivante :

après le remplissage du dataSet, je teste une variable _initGrid:Boolean qui a été initialisée au départ à "faux". Si elle est toujours à "faux", je la passe à "vrai" et j'appelle une fonction de formattage de ma grille, qui va récupérer chaque colonne et la supprimer ou la formatter correctement, avec entête, contenu, labelFunction, etc...

Aux remplissages suivants, la dataGrid n'aura plus besoin d'être formattée. Si on repasse dans la méthode de formattage, on va se retrouver avec le double de colonnes, c'est pour cette raison que je teste une valeur booléenne.

Voilà. il ne vous reste plus qu'a faire des tests pour essayer ces liaisons et commencer à créer des applications avec dataSet et dataGrid Wink




C'est juste ce qui me manquait !
en plus enfrancais Wink
Merci a toi.
@+
Tops