FLEX 3 - SORT e FILTER: ordinare e filtrare gli elementi di un arrayCollection
L’arrayCollection e’ una delle classi piu’ utilizzate per il popolamento di componenti Flex come le Liste, le TileList o i DataGrid.
In questo articolo vedremo come filtrare e ordinare gli elementi di una List senza pero’ modificare l’arrayCollection originale, utilizzando rispettivamente la proprieta’ filterFunction e le classi Sort e SortField.
Innanzitutto creiamo un file MXML per la visualizzazione di una lista formata da
Anno di Nascita , Nome
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ private function labelFunc(item:Object):String { return item.data + ", " + item.label; } ]]> </mx:Script> <mx:ArrayCollection id="dp"> <mx:Array> <mx:Object label="Giorgio" data="1975"/> <mx:Object label="Fabio" data="1977"/> <mx:Object label="Francesca" data="1983"/> <mx:Object label="Thomas" data="1976"/> <mx:Object label="Mirko" data="1980"/> </mx:Array> </mx:ArrayCollection> <mx:List dataProvider="{dp}" width="200" labelFunction="labelFunc" /> </mx:Application> |
ORDINAMENTO ARRAY COLLECTION
Creiamo i pulsanti utili per l’ordinamento.
1 2 3 4 5 | <mx:HBox> <mx:Button label="Ordina x ANNO ASC" click="ordina('data', true, false, true)" /> <mx:Button label="Ordina x LABEL ASC" click="ordina('label', true, false, false)" /> <mx:Button label="Ordina x LABEL DESC" click="ordina('label', true, true, false)" /> </mx:HBox> |
Importiamo le classi necessarie :
1 2 | import mx.collections.SortField; import mx.collections.Sort; |
e definiamo la funzione per l’ordinamento:
1 2 3 4 5 6 7 8 9 10 | private function ordina(fieldValue:String, caseInsensitive:Boolean, descendingOrder:Boolean, numeric:Boolean):void { var sort:Sort = new Sort(); sort.fields = [new SortField(fieldValue, caseInsensitive, descendingOrder, numeric)]; dp.sort = sort; dp.refresh(); } |
Per effettuare l’ordinamento abbiamo instanziato la classe Sort e successivamente definito la variabile fields, che accetta come valore un array costituito da nuove istanze della classe SortField. Questa classe, a sua volta accetta quattro parametri:
fieldValue: rappresenta il campo da utilizzare per l’ordinamento
caseInsentive: specifica se l’ordinamento e’ case sensitive o meno
descentingOrder: specifica se l’ordinamento dovra’ essere ascendente o discendente
numeric : true indica che il valore da comparare e’ di tipo numerico. Se non lo specifichiamo o i valori sarebbero considerati stringhe e ad esempio, un anno con valore 864 sarebbe visto erroneamente maggiore di 1988, perche’ la prima cifra (8) risulterebbe maggiore di 1.
Al contrario, se usiamo false (ad esempio per l’ordinamento dei nomi) i valori sono considerati stringhe.
FILTRO ARRAY COLLECTION
La proprieta’ filterFunction permette invece di filtrare l’arrayCollection eliminando gli elementi che non corrispondono alla condizione definita.
E’ importante ricordare che gli elementi non vengono cancellati fisicamente dall’arrayCollection ma risultano solo non visibili e quindi cancellati logicamente.
Definiamo un pulsante per richiamare la funzione filtra(), dentro la quale utilizziamo la proprieta’ filterFunction dell’arrayCollection per richiamare il metodo che definisce la condizione del filtro.
1 | <mx:Button label="Filtra Anni (> 1980)" click="filtra()" /> |
1 2 3 4 5 6 7 8 9 10 11 | private function filtra():void { dp.filterFunction = filtraFunc; dp.refresh(); } private function filtraFunc(item:Object):Boolean { return item.data >= 1980 ; } |
In questo esempio risulteranno quindi validi i valori acquisiti nel campo data (ovvero gli anni) maggiori o uguali a 1980. E’ possibile definire anche condizioni composte utilizzando operatori logici. Ad esempio la seguente sintassi restituirebbe gli anni compresi tra il 1976 e il 1980
return item.data >= 1976 && item.data <= 1980;
RESET: ripristino dei dati originali
Ripristiniamo l’arrayCollection originale eliminando eventuali funzionalita’ di sort e filter impostando a null le relative proprieta’.
1 | <mx:Button label="Reset" click="reset()" /> |
1 2 3 4 5 6 | private function reset():void { dp.filterFunction = null; dp.sort = null; dp.refresh(); } |
Il codice completo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import mx.collections.SortField; import mx.collections.Sort; private function labelFunc(item:Object):String { return item.data + ", " + item.label; } private function ordina(fieldValue:String, caseInsensitive:Boolean, descendingOrder:Boolean, numeric:Boolean):void { var sort:Sort = new Sort(); sort.fields = [new SortField(fieldValue, caseInsensitive, descendingOrder, numeric)]; dp.sort = sort; dp.refresh(); } private function filtra():void { dp.filterFunction = filtraFunc; dp.refresh(); } private function filtraFunc(item:Object):Boolean { return item.data >= 1980 ; } private function reset():void { dp.filterFunction = null; dp.sort = null; dp.refresh(); } ]]> </mx:Script> <mx:ArrayCollection id="dp"> <mx:Array> <mx:Object label="Giorgio" data="1975"/> <mx:Object label="Fabio" data="1977"/> <mx:Object label="Francesca" data="1983"/> <mx:Object label="Thomas" data="1976"/> <mx:Object label="Mirko" data="1980"/> </mx:Array> </mx:ArrayCollection> <mx:List dataProvider="{dp}" width="200" labelFunction="labelFunc" /> <mx:HBox> <mx:Button label="Ordina x ANNO ASC" click="ordina('data', true, false, true)" /> <mx:Button label="Ordina x LABEL ASC" click="ordina('label', true, false, false)" /> <mx:Button label="Ordina x LABEL DESC" click="ordina('label', true, true, false)" /> </mx:HBox> <mx:HBox> <mx:Button label="Filtra Anni (> 1980)" click="filtra()" /> <mx:Button label="Reset" click="reset()" /> </mx:HBox> </mx:Application> |
Leave your response!