Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Filtrer les données d'un ArrayCollection avec la DataFilterLib

Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Compatible Flex 3. Cliquer pour en savoir plus sur les compatibilités.Par nico_d (Nico.), le 16 août 2010

Il est parfois utile dans des applications Flex de mettre en place un ou plusieurs filtres pour améliorer l'expérience utilisateur.

Par exemple dans un datagrid de permettre à l’utilisateur d’afficher uniquement les données d’une certaine couleur, d'une certaine marque…

Ce filtrage peut se faire en utilisant la fonction filterFunction d’un ArrayCollection. Toutefois cette fonction montrera vite ses limites si vous souhaitez mettre en place plusieurs filtres par exemple.
Pour cela une librairie nommée DataFilterLib permet de mettre en place ce filtrage d’une manière simple et efficace.

Elle permet, entre autre, de filtrer des chaines, des dates, selon des intervalles et bien plus encore.

Téléchargement et Intégration de la librairie

La première étape comme souvent nécessite le téléchargement de cette librairie. Vous pourrez la trouvez à cette adresse :

La version utilisée dans ce tutoriel est la dernière version disponible a cette date, la version 1.3.

Cette librairie est constituée d’un unique fichier SWC. Il est alors nécessaire de l'ajouter à votre projet Flex. Pour cela :

  • Ouvrez les propriétés de votre projet
  • Cliquez sur Flex Build Path” puis sur l’onglet “Library Path”.
  • Cliquez ensuite sur “Add SWC…” et sélectionnez le fichier SWC précédemment téléchargé.

Puis dans votre application flex n'oubliez pas d'indiquer le namespace suivant :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:filter="com.fnicollet.datafilter.filter.*">



Préparer et afficher les données

Tout d’abord, pour filtrer des données il faut : des données.
Ces données sont sous la forme d’un ArrayCollection que voici :

[Bindable]
private var voituresData:ArrayCollection = new ArrayCollection([
	{ name: "206", couleurs: "rouge", puissance: 4},
	{ name: "206", couleurs: "rouge", puissance: 4},
	{ name: "clio", couleurs: "bleu", puissance: 5},
	{ name: "clio", couleurs: "noir", puissance: 6},
	{ name: "golf", couleurs: "rouge", puissance: 4},
	{ name: "206", couleurs: "bleu", puissance: 4},
	{ name: "golf", couleurs: "rouge", puissance: 4},
	{ name: "206", couleurs: "vert", puissance: 4} ]);

Nous affichons ensuite ces données dans un simple datagrid de la façon suivante :

<mx:VBox>
  <mx:DataGrid  dataProvider="{voituresData}">
	<mx:columns>
		<mx:DataGridColumn headerText="Nom" dataField="name"/>
		<mx:DataGridColumn headerText="Couleurs" dataField="couleurs"/>
		<mx:DataGridColumn headerText="Puissance" dataField="puissance"/>
	</mx:columns>
  </mx:DataGrid>
</mx:VBox>

Ces données sont correctement affichées, mais si le datagrid permet de les trier, rien n'est proposé pour les filtrer.



Filtrer les données - Filtre simple, selon un champ

Dans un premier temps nous voudrions que l’utilisateur filtre ce datagrid sur le champ Nom en tapant simplement les premières lettres. Pour cela ajoutons un contrôle TextInput :

<mx:VBox>
	<mx:TextInput id="choix_nom" />
 
	<mx:DataGrid  dataProvider="{voituresData}">
		<mx:columns>
			<mx:DataGridColumn headerText="Nom" dataField="name"/>
			<mx:DataGridColumn headerText="Couleurs" dataField="couleurs"/>
			<mx:DataGridColumn headerText="Puissance" dataField="puissance"/>
		</mx:columns>
	</mx:DataGrid>
</mx:VBox>

Puis associons à ce textinput le filtre en utilisant la librairie. Cela est possible avec quelques lignes de codes :

<filter:DataFilterSet id="filtres" data="{voituresData}">
	<filter:DataFilterParameters id="param_nom"
		filterType="{DataFilterType.SINGLE_VALUE}"
		filterKeys="name"
		filterOperator="{DataFilterSingleValueOperator.STARTS_WITH}"
		filterValues="{choix_nom.text}"/>
</filter:DataFilterSet>

Petites explications :

DataFilterSet

<filter:DataFilterSet id="filtres" data="{voituresData}">

Nous indiquons que nous allons filtrer la collection “voituresData”

filterType

filterType="{DataFilterType.SINGLE_VALUE}"

Nous choisissons l'option SingleValue car nous voulons filtrer par rapport à une données simple et non sur un intervalle.

filterKeys

filterKeys="name"

Nous souhaitons filtrer sur le champ “name” de la collection voituresData

filterOperator

filterOperator="{DataFilterSingleValueOperator.STARTS_WITH}"

Nous choisissons l'option “Commence Par” afin de filtrer les données commencant par la saisie de l'utilisateur. Exemple si l'utilisateur saisit “cli” le datagrid ne contiendra que les données dont le nom commence par cli.

filterValues

filterValues="{choix_nom.text}"

Nous indiquons que le filtre sera fonction du texte présent dans le controle choix_nom.

Résultat

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.



Plusieurs filtres - Filtre multiple, selon plusieurs critéres

Ajoutons un petit comboBox :

<mx:ComboBox id="choix_couleur" prompt="Choisir une couleur" dataProvider="{array_couleur}">

Puis modifions notre filtre de la façon suivante :

<filter:DataFilterSet id="filtres" data="{voituresData}">
	<filter:DataFilterParameters id="param_nom"
		filterType="{DataFilterType.SINGLE_VALUE}"
		filterKeys="name"
		filterOperator="{DataFilterSingleValueOperator.STARTS_WITH}"
		filterValues="{choix_nom.text}"/>
 
	<filter:DataFilterParameters id="param_couleur"
		filterType="{DataFilterType.SINGLE_VALUE}"
		filterKeys="couleurs"
		filterOperator="{DataFilterSingleValueOperator.EQUALS_TO}"
		filterValues="{choix_couleur.text}"/>
</filter:DataFilterSet>
Noter ici que pour le deuxième filtre nous utilisons l'option EQUALS_TO

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Conclusion

Nous venons de voir comment en quelques lignes de code cette librairie permet d'effectuer des filtres simples, voire complexes, sur une collection. Il est également possible de filtrer sur des intervalles, sur des dates, de filtrer l'affichage des graphiques….

En savoir plus

Retrouver cette librairie ainsi que d'autres exemple sur le blog de son auteur : Flex Tutorial