Adobe Flex Tutorial - Adobe Flex Tutorial

28sept/0914

DataFilterLib – Utilisation de multiple filtres sur une même collection

Dans les exemples sur la DataFilterLib précédent, on a vu comment faire des filtrages simple, que ce soit par valeur ou par intervalle. Ces fonctionnalités étaient "assez" facilement reproduisibles avec des filterFunctions mais on va maintenant voir une des principales fonctionnalités de la DataFilterLib, le filtrage de données selon plusieurs filtres.

Le filtrage avec plusieurs DataFilterParameters est très simple puisqu'il suffit d'ajouter des DataFilterParameters au DataFilterSet principal. Les filtres seront ainsi combinés entre eux. N'importe quelle combinaison de filtres est possible, y compris un mélange de filtres type SingleValue et d'Interval.

Voici par exemple le DataFilterSet utilisé dans l'exemple suivant:

  <filter:DataFilterSet id="filterSet"
                        data="{productData}">
    <filter:dataFilterParameters>
      <filter:DataFilterParameters id="tstIntervalParameters"
                                   filterType="{DataFilterType.INTERVAL}"
                                   filterKeys="{'productPrice'}"
                                   filterOperator="{DataFilterIntervalOperator.INTERVAL_CLOSED}"
                                   filterValues="{hsProductPrice.values}"
                                   active="{activeIntervalCB.selected}"
                                   invert="{invertIntervalCB.selected}"/>
      <filter:DataFilterParameters id="tstMultiValueParameter"
                                   filterType="{DataFilterType.SINGLE_VALUE}"
                                   filterKeys="productType"
                                   filterOperator="{DataFilterSingleValueOperator.EQUALS_TO}"
                                   filterValues="{singleValuesList.selectedItems}"
                                   invert="{invertListCB.selected}"
                                   active="{activeListCB.selected}"/>
      <filter:DataFilterParameters id="tstSingleValueParameter"
                                   filterType="{DataFilterType.SINGLE_VALUE}"
                                   filterKeys="{textFieldCB.selectedItem}"
                                   filterOperator="{textOperatorCB.selectedItem}"
                                   filterValues="{stringFilter.text}"
                                   active="{activeTextCB.selected}"
                                   invert="{invertTextCB.selected}"/>
    </filter:dataFilterParameters>
  </filter:DataFilterSet>

On a ici 3 filtres, 2 de type Singlevalue et un de type Interval. Le nombre de filtre n'est pas limité au sein d'un DataFilterSet.

Démonstration en ligne (onglet "Multiple Filters")

L'exemple suivant montre comment mettre en place de multiples filtres sur un même ArrayCollection. On peut ainsi facilement trouver les produits de type Home et Electro entre 80 et 250 euros. Toutes les combinaisons sont possibles. Pour intégrer ce genre de filtres dans votre application Flex, il vous suffit de lier les filtres aux bon champs de votre donnée et le tour est joué

This movie requires Flash Player 11

Remplis sous: DataFilterLib, Exemple, MXML || Taggé comme: ArrayCollection, filterFunction, MXML Laisser un commentaire

Articles similaires

Commentaires (14) Trackbacks (0) (Souscrire aux commentaires de cet article)

Stef
13 octobre 2009

Salut,

Je suis vraiment fan de ce site que je consulte toujours lorsque je veux faire quelque chose de nouveau.

Et quand j'ai vu la lib "DataFilterLib", je me suis dit qu'il fallait impérativement que je l'essaie.

En l'intégrant dans mon programme, j'ai un message d'erreur : "VerifyError: Error #1053: Remplacement illégal de FocusManager dans mx.managers.FocusManager.". Déjà vu dans un commentaire (mais sans la soluce).

J'ai donc récupérer l'exemple et générer l'application.
Mais au lancement, j'ai un message d'erreur : "ArgumentError: Error #1063: Non-correspondance du nombre d'arguments sur mx.core::CrossDomainRSLItem(). 5 prévu(s), 6 détecté(s).".

C'est vraiment dommage.
Est-ce qu'une âme charitable pourrait m'éclairer un peu ?
fnicollet
13 octobre 2009

Salut Stef,
tout d'abord, merci pour ton commentaire, ça fait toujours plaisir .
Pour ton problème, cela vient du fait que j'ai compilé le SWC que tu as téléchargé avec une version 3.2 du framework Flex (oui je ne suis pas vraiment à jour). Si toi tu utilises un framework plus vieux ou plus récent, cela peut créer ce conflit au niveau des RSLs.
Ce que tu peux faire, si tu as un plugin SVN sur ton Eclipse / Flex Builder, tu peux récupérer les sources du projet (l'url d'accès se trouve sur la page google code). Tu vas récupérer un nouveau projet de type Flex Library et tu pourras créer le SWC toi-même. Au moins on est sur de ne pas avoir de conflits .
Si tu ne t'ai jamais servi de SVN & Co, envoie moi un mail, je t'enverrais une archive du projet.

Bonne chance
Fabien
Nico
2 novembre 2009

Salut,

Merci pour cette Lib qui correspond tout à fait à ce que je souhaite faire.

Toutefois je me heurte toutefois à un premier problème :
je peuple le datagrid que je souhaite filtrer avec un XMLList de la façon suivante :

COPIER-COLLER
Actionscript:
private function initHisto():void{

var http_histo:HTTPService = new HTTPService;

http_histo.url = url

http_histo.addEventListener(ResultEvent.RESULT, successHisto);

http_histo.addEventListener(FaultEvent.FAULT, faultHttp);

http_histo.method = "POST";

http_histo.useProxy = false;

http_histo.resultFormat ="e4x";

http_histo.send();

}

private function successHisto(ev:ResultEvent):void{

xmlList_DG_histo = ev.result.histo; //dataprovider de mon datagrid

}
J'essai d'implémenter le filtre de cette façon (après import du swc) :

COPIER-COLLER
MXML:
<filter:DataFilterSet id="filterSet"

data="{xmlListDG_histo}">
Mais apparemment il faut un ArrayCollection.

J'ai essayer de convertir mon XMLLIst en arrayCollection avec

COPIER-COLLER
Actionscript:
var arrCollection:ArrayCollection = xmlList_DG_histo as ArrayCollection
mais cela ne semble pas fonctionner (mon ArrayCollection ne contient aucune données)

Peut-être que je m'y prends mal pour obtenir mes données (requete ASP sur une base Access que je retourne sous forme de fichier XML).
Je réussi à filtrer en utilisant la syntaxe e4x suite au choix d'un comboBox mais cela risque de se compliquer car je souhaite faire un multiFilters et ta lib semble prometteuse.

Merci pour ton aide.

Nico
fnicollet
2 novembre 2009

Salut,
alors pour convertir une XMLList en un ArrayCollection, c'est un peu tordu mais ça marche. Admettons que ton xml s'appelle "employees" avec des enfants. Il faut déjà convertir ton XML en XMLListCollection, que tu vas ensuite transformer en Array pour le faire manger à ton ArrayCollection:

COPIER-COLLER
Actionscript:
var xmlListCollection:XMLListCollection=new XMLListCollection(employees.children());

var resultArray:Array=xmlListCollection.toArray();

var ac:ArrayCollection=new ArrayCollection(resultArray);
Cela marche plutôt bien mais si tu as une structure complexe de XML, tu auras peut-être du mal à retrouver facilement tes valeurs. La meilleure méthode consiste à parcourir ton XML avec e4x et à créer des objets typés (par exemple, un objet Employee avec ses propriétés). Et après tu va remplir ton ArrayCollection avec ces objets typés. Comme cela, tu auras un code propre et tu n'aura aucun mal à créer les colonnes de ta DataGrid.

Bonne chance

Fabien
Nico
4 novembre 2009

Merci pour ta réponse !

Effectivement j'arrive bien a convertir mon XMLList en ArrayCollection mais la structure de cet ArrayCollection va être inutilisable.

Par contre je ne sais pas si j'ai bien compris car je n'arrive pas au résultat souhaité :
ce que je fait :

COPIER-COLLER
Actionscript:
for each(item:* in xmllist){

monobjet.id = item.id

monobjet.nom = item.nom

monarrayColl.additem(monObjet)

}
j'ai également essayer le addItemAt mais mon datagrid se remplit avec les mêmes résultats (le nombre de résultat semble toutefois correct).

Est-ce la bonne méthode ?

Merci.

Nico.
Nico
4 novembre 2009

Je me réponds à moi même (pour une fois )
voilà ce qui marche

COPIER-COLLER
Actionscript:
monaarayColl.additem({id:item.id,nom:item.nom};
Et j'alimente correctement mon datagrid que je peux filtrer.

Merci encore !!
fnicollet
4 novembre 2009

Ok, cool
Sinon quand tu parcours ton objet xmllist, tu pourrais typer ton objet "item" (en XML je suppose), ce serait plus propre

Fabien
Nico
4 novembre 2009

C'est fait
Merci pour l'info !
à ++
Alex
1 mai 2010

Hello,

Great job, j'ai juste une petite question :
Est-il possible de coupler la DataFilterLib et un tileList avec un itemsChangeEffect ?

Actuellement dans mes test l'ArrayCollection est bien rafraichi mais l'effet ne se joue pas.

Merci par avance pour tes explications !
fnicollet
1 mai 2010

Salut Alex,
normalement, la DataFilerLib ne fait qu'appliquer une "filterFunction" complexe à une ArrayCollection. L'ArrayCollection devrait donc se comporter normalement. Pour l'effet, il faut tester, tu peux donner un peu de code ou envoyer ton projet (par mail, voir en bas)?

Merci,
Fabien
Iris
20 mai 2010

Merci pour ce composant très efficace.
A l'utilisation dans le contexte de mon projet, j'ai une question :
Comment puis-je faire fonctionner ce composant en passant mes "filterValues" non pas par des objets de formulaires mais par des variables mise à jour en cliquant sur les niveaux d'une arborescence ?
Pour l'instant, je change la valeur de mes InputText par une fonction appellée en cliquant sur les niveaux de mon arbo, mais du coup il n'y a aucun intérêt à afficher ces InputTexts.

Merci d'avance pour votre aide et n'hésitez pas si il y a besoin d'autres explications ou de code.
Iris
fnicollet
21 mai 2010

Salut,
je ne suis pas sur mais je crois que j'ai compris. En fait au lieu de faire un Binding entre ton artborescence et "filterValues", tu bind cette valeur sur un champ texte qui lui est bindé sur "filterValues". Pourquoi ne pas binder directement les valeurs ou setter directement filterValues au changement de ton arborescence?

Fabien
Iris
26 mai 2010

Finalement, j'ai mis à jour la "filterValues" dans ma fonction as. J'avais testé directement la variable dans le composant mais ça ne se mettait pas à jour. Maintenant ça fonctionne très bien, merci !
fnicollet
26 mai 2010

Salut Iris,
excellent . Si tu as un exemple intéressant d'utilisation de la lib DataFilterLib et que tu peux le partager, on peut en parler (faire un petit article ?). Mon email est en bas de page

Merci
Fabien