Dans notre quète éternelle de dissociation du modèle de données de l’affichage. Nous allons voir ensemble aujourd’hui un outils très pratique destiné à l’affichage de données : Les labelFunction

NdlA : Cette article est une reprise de celui présent à cette adresse : http://blog.jacksay.com/index.php?post/2008/09/16/Flex-les-labelFunction-dans-les-DataGrid. L’article initiale porté sur l’utilisation des labelFunction dans les DataGridColumns, cette nouvelle version aborde également leurs utilisation dans les ComboBox en fin d’article

Introduction

Tout d’abord soyons précis ! L’attribut labelFunction est rattaché, non pas à la DataGrid mais à une DataGridColumn ou à la ComboBox.

L’objectif de cet attribut est simple, spécifier l’objet (de type Function) qui va mettre en forme la données dans la colonne. Le but n’est donc pas de filtrer mais de mettre en forme l’affichage (la donnée ne sera pas modifiée).

Avant de commencer à taper frénétiquement du code, nous allons nous pencher sur ce que nous raconte la documentation de Flex sur cet attribut.

>>> DataGridColumn.labelFunction

La doc nous décrit la fonction (ce que j’ai raconté quelques lignes plus haut), mais surtout nous donne plusieurs informations utiles dont une essentielle pour faire fonctionner tous ça : La signature de la fonction, à savoir :

1

labelFunction(item:Object, column:DataGridColumn):String

Pour les néophytes qui n’ont pas encore lu un des multiples articles consacrés à l’analyse des signature de fonction, voilà ce que ça nous dit :

La fonction a 2 paramètres :

• item:Object : Correspond à la donnée transmise à la ligne en cours d’affichage dans la datagrid
• column:DataGridColumn : Référence à la colonne qui contiend la donnée qui nous interesse

La fonction renvoie une chaine.

Avec tous ça en tête on peut faire ce que les tigres font le mieux… taper du code.

Mise en pratique

Nous allons partir d’un exemple simple pour répondre à quelques cas courant d’utilisation.

Commencez par créer un fichier avec une dataGrid contenant des données :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
 
    <mx:Script source="dt_createurs.as" />  
 
    <mx:ApplicationControlBar y="0" left="0" right="0" dock="true">  
        <mx:Label text="DataGrid" fontWeight="normal"/>  
        <mx:Label text="labelFunction" fontWeight="bold"/>  
    </mx:ApplicationControlBar>  
    <mx:DataGrid left="10" top="10" right="10" bottom="10" id="dg" dataProvider="{createurs}">  
        <mx:columns>  
            <mx:DataGridColumn headerText="Nom" dataField="nom"/>  
            <mx:DataGridColumn headerText="Prénom" dataField="prenom"/>  
            <mx:DataGridColumn headerText="Activités" dataField="mainAct"/>  
            <mx:DataGridColumn headerText="Nationalités" dataField="nationalites"/>  
            <mx:DataGridColumn headerText="Naissance" dataField="anneeNaiss"/>  
            <mx:DataGridColumn headerText="Mort" dataField="anneeMort"/>  
        </mx:columns>  
    </mx:DataGrid>  
</mx:Application>

Pour la souce de donnée je suis parti là dessus :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// dt_createurs.as
import mx.collections.ArrayCollection;
 
[Bindable] 
public var createurs:ArrayCollection = new ArrayCollection([
	{nom:"Cézanne", prenom:"Paul", surnom:null, anneeNaiss:1839, anneeMort:1906, mainAct:"Peinture", nationalites:"fr"},
	{nom:"Picasso", prenom:"Pablo", surnom:null, anneeNaiss:1881, anneeMort:1973, mainAct:"Peinture", nationalites:"fr"},
	{nom:"Duchamp", prenom:"Marcel", surnom:null, anneeNaiss:1887, anneeMort:1968, mainAct:"Artiste", nationalites:"fr"},
	{nom:"Breton", prenom:"André", surnom:null, anneeNaiss:1896, anneeMort:1966, mainAct:"Poéte", nationalites:"fr"},
	{nom:"Calaferte", prenom:"Louis", surnom:null, anneeNaiss:1928, anneeMort:1994, mainAct:"Ecrivain", nationalites:"fr"},
	{nom:"Selby", prenom:"Hubert", surnom:null, anneeNaiss:1928, anneeMort:2004, mainAct:"Ecrivain", nationalites:"us"},
	{nom:"Easton Ellis", prenom:"Bret", surnom:null, anneeNaiss:1964, anneeMort:null, mainAct:"Ecrivain", nationalites:"us"},
	{nom:"Beckett", prenom:"Samuel", surnom:null, anneeNaiss:1906, anneeMort:1989, mainAct:"Dramaturge", nationalites:"ir"},
	{nom:"Joyce", prenom:"James", surnom:null, anneeNaiss:1882, anneeMort:1941, mainAct:"Romancier", nationalites:"ir"}
]);

Voilà pour la base de départ. L’objectif va être d’afficher la nationalités de l’artiste en toute lettre, a savoir fr = France, us = États-unis, ir=Irlande. Pour cela nous allons utiliser une labelFunction.

Commençons par écrire la fonction :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// Fonction getNationalite
public function getNationalites( item:Object, col:DataGridColumn=null) :String {
	switch( item.nationalites ){
		case "fr" :
			return "France";
 
		case "us" :
			return "Etats-Unis";
 
		case "ir" :
			return "Irlande";
 
		default :
			return "Inconnu";
	}
}

Ensuite dans la DataGridColumn de la nationalité, ajoutez un attribut labelFunction avec en paramètre le nom de la fonction.

1
2
3
4
5

<mx:DataGridColumn 
	headerText="Nationalités" 
	dataField="nationalites" 
	labelFunction="getNationalites"
/>

Voilà, c’est assez simple à mettre en place et les labelFunction ont pour interet principal de dissocier le model(la source de données) que vous n’avez pas à transformer en fonction de l’affichage et la mise en forme.

ComboBox.labelFunction

La même fonction est également disponible dans les composants de type ComboBox, elle adopte le même fonctionnement mais ne prend qu’un seul paramètre.

myLabelFunction(item:Object):String

Attention, vous pourriez être tenté d’utilisé la même fonction pour vos ComboBox et vos DataGrid, dans ce cas pensez à modifier la signature de votre labelFunction ce cette manière :

1

function getNationalites( item:Object, col:DataGridColumn=null) :String

Exemple a télécharger : studio.jacksay.com – labelFunction