Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

DataFilterLib – Filtrage simple d'une liste

Voici le premier tutorial sur la DataFilterLib. Celui-ci présente un exemple très simple d'application de cette librairie. On pourrait bien sûr créer le même exemple avec une simple filterFunction mais le but est simplement d'expliquer le fonctionnement des composants de filtrage.

La donnée

La donnée est un ArrayCollection remplit d'objets ayant la forme:

{ companies: 162, employees: 4875, payroll: 219348, sales: 562931, state: "Alabama", population: 4486508 }

On a 51 objets de ce type représentant chacun un état US avec des indicateurs associés. On va associer cet ArrayCollection comme dataProvider d'une DataGrid pour afficher son contenu. Cet ArrayCollection porte le nom "statesData"

Le filtre utilisé issu de la DataFilterLib (StartsWith)

On va maintenant permettre à l'utilisateur final de filtrer la donnée. Pour cela, on ajoute un champ texte dans lequel l'utilisateur va entrer les premières lettres de l'état qu'il recherche. Ne seront affichés dans la DataGrid que les résultats correspondant à ce filtre. Dans cette application, le champ texte (TextInput) est nommé "stateInput". La propriété qui nous intéresse ici est "stateInput.text" (la valeur entrée).

On va maintenant ajouter un filtre issu de la DataFilterLib. Tout d'abord, téléchargez le dernier SWC de la DataFilterLib et pensez bien à référencer le SWC dans votre projet.

Télécharger la DataFilterLib (SWC)

Il existe à ce jour 2 types de filtres dans la DataFilterLib, présents dans la classe DataFilterType:

• SingleValue: Filtrage sur des valeurs simples, le plus souvent des String par recherche de chaîne.
• IntervalValue: Filtrage sur un intervalle avec valeurs minimum / maximum, est cohérent avec des valeurs numériques (typiquement avec un Slider)

On va ici utiliser un filtre de type SingleValue. Afin de déterminer le type de filtrage, la librairie propose, de base, plusieurs opérateurs (3 à ce jour), présents dans la classe DataFilterSingleValueOperator:

• StartsWith: La valeur à filter commence par la valeur d'entrée (comme un LIKE %VAL en SQL)
• EqualsTo: La valeur à filter est strictement égale à la valeur d'entrée
• Like: La valeur à filtrer contient la valeur d'entrée (comme un LIKE %VAL% en SQL)

Vous l'avez compris, on va utiliser ici un opérateur StartsWith.

Il ne nous reste plus qu'un paramètre à donner au filtre, le champ sur lequel effectuer le filtrage. Ici, on va prendre le champ "state" (voir partie data).

Voici donc à quoi ressemble notre filtre MXML issu de la DataFilterLib:

<filter:DataFilterParameters id="simpleParam"
				filterType="{DataFilterType.SINGLE_VALUE}"
				filterKeys="state"
				filterOperator="{DataFilterSingleValueOperator.STARTS_WITH}"
				filterValues="{stateInput.text}"/>

Même s'il n'y aura qu'un seul filtre dans cet exemple, il doit faire partie d'un ensemble de filtres, un "DataFilterSet". C'est à ce DataFilterSet que l'on va associer notre ArrayCollection à filtrer.  Voici donc à quoi ressemble le filtre complet MXML:

  <filter:DataFilterSet id="filterSet" data="{statesData}">
    <filter:dataFilterParameters>
      <filter:DataFilterParameters id="simpleParam"
               filterType="{DataFilterType.SINGLE_VALUE}"
               filterKeys="state"
               filterOperator="{DataFilterSingleValueOperator.STARTS_WITH}"
               filterValues="{stateInput.text}"/>
    </filter:dataFilterParameters>
  </filter:DataFilterSet>

Et voila, notre filtre est terminé, il ne vous reste plus qu'à l'intégrer dans l'application (la data se trouve dans un fichier AS séparé pour plus de clarté):

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" paddingLeft="20" paddingRight="20" xmlns:filter="com.fnicollet.datafilter.filter.*">
  <mx:Script>
    <![CDATA[
      import com.fnicollet.datafilter.filter.DataFilterType;
      import com.fnicollet.datafilter.filter.DataFilterSingleValueOperator;
    ]]>
  </mx:Script>

  <mx:Script source="../data/StateData.as"/>

  <filter:DataFilterSet id="filterSet" data="{statesData}">
    <filter:dataFilterParameters>
      <filter:DataFilterParameters id="simpleParam"
               filterType="{DataFilterType.SINGLE_VALUE}"
               filterKeys="state"
               filterOperator="{DataFilterSingleValueOperator.STARTS_WITH}"
               filterValues="{stateInput.text}"/>
    </filter:dataFilterParameters>
  </filter:DataFilterSet>

  <mx:Label text="Filter By State Name (Starts With)" fontSize="14" fontWeight="bold"/>
  <mx:TextInput id="stateInput"/>

  <mx:Label text="Filtered Data" fontSize="14" fontWeight="bold"/>
  <mx:DataGrid rowCount="8" dataProvider="{statesData}" width="100%">
    <mx:columns>
      <mx:DataGridColumn dataField="state" headerText="State Name"/>
      <mx:DataGridColumn dataField="sales" headerText="Sales"/>
      <mx:DataGridColumn dataField="employees" headerText="Number of Employees"/>
      <mx:DataGridColumn dataField="population" headerText="Population"/>
    </mx:columns>
  </mx:DataGrid>

  <mx:Label text="Unfiltered Data" fontSize="14" fontWeight="bold"/>
  <mx:DataGrid rowCount="8" dataProvider="{statesData.source}" width="100%">
    <mx:columns>
      <mx:DataGridColumn dataField="state" headerText="State Name"/>
      <mx:DataGridColumn dataField="sales" headerText="Sales"/>
      <mx:DataGridColumn dataField="employees" headerText="Number of Employees"/>
      <mx:DataGridColumn dataField="population" headerText="Population"/>
    </mx:columns>
  </mx:DataGrid>
</mx:VBox>

Démonstration en ligne

En savoir plus sur la DataFilterLib

Si cet exemple vous a mis l'eau à la bouche, visitez la page de Flex Tutorial consacrée à la DataFilterLib:

DataFilterLib - Filtrez votre donnée de manière simple et dynamique