Tuesday, July 5, 2011

ArrayCollection in Flex: Part 4 - Filtering the elements

Today we will learn about filtering data in an ArrayCollection object.

In one of the previous tutorials about ArrayCollection we've learned how to sort items in the collection - the elements change their positions as we tell them to. In reality, however, the items in the Array that is the source for our ArrayCollection remain untouched. This is because ArrayCollection is the wrapper that receives requests from us and after that decides what to show us. In that case, even though the items in the Array have initial positions, the ArrayCollection, without making any changes to the Array, sends us information on how the Array would look if it would be sorted.

Filtering elements in the collection is pretty much similar. The items in the Array itself are untouched, but the ArrayCollection object first receives our criteria, then goes through the elements of the Array, and only tells us the items that match the criteria, without mentioning the rest of the elements.

Here's an example of filtering. The button, when pressed, will execute a function that will perform filtering on the ArrayCollection and only display people that are 30 years old.


To filter items in an ArrayCollection object, we need to set the filterFunction property of the collection object to a function that will handle the filtering, and then refresh the collection.

myAC.filterFunction = filterAge30;
myAC.refresh();

The function filterAge30 needs to return either true or false, after analyzing the data of each object. It is passed the elements of the Array separately. In our case, each item of the array is an Object, so we can read the object's age property and compare it to 30. Here's what the filterAge30 function would look like:

private function filterAge30(item:Object):Boolean{
var age30:Boolean = false;

if (item.age == 30) {
age30 = true
}

return age30;
}

As you can see, if the age is 30, the function returns true. If it is not - returns false. If the function returns true, then the object will be displayed after filtering, if it returns false - it will be not. Simple as that.

In my example, the ArrayCollection looks like this:

<fx:Declarations>
<mx:ArrayCollection id="myAC">
<fx:Object firstname="John" lastname="Jackson" age="25" />
<fx:Object firstname="Bob" lastname="Thompson" age="30" />
<fx:Object firstname="Andy" lastname="Doyle" age="30" />
</mx:ArrayCollection>
</fx:Declarations>

A DataGrid is created to display the data as well as a button, which calls a doFilter() function on click.

<s:VGroup>
<mx:DataGrid dataProvider="{myAC}" sortableColumns="false" />
<s:Button label="Filter people who are 30 years old" click="doFilter();" />
</s:VGroup>

The part where we refresh the collection and set its filterFunction property now should be called on click, so we put it in the doFilter() function. In the end, our AS3 code will look like this:

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

private function filterAge30(item:Object):Boolean{
var age30:Boolean = false;

if (item.age == 30) {
age30 = true
}

return age30;
}

private function doFilter():void{
myAC.filterFunction = filterAge30;
myAC.refresh();
}
]]>
</fx:Script>

And now the full code for that example:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
   width="320" height="260">
   
<fx:Declarations>
<mx:ArrayCollection id="myAC">
<fx:Object firstname="John" lastname="Jackson" age="25" />
<fx:Object firstname="Bob" lastname="Thompson" age="30" />
<fx:Object firstname="Andy" lastname="Doyle" age="30" />
</mx:ArrayCollection>
</fx:Declarations>


<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

private function filterAge30(item:Object):Boolean{
var age30:Boolean = false;

if (item.age == 30) {
age30 = true
}

return age30;
}

private function doFilter():void{
myAC.filterFunction = filterAge30;
myAC.refresh();
}
]]>
</fx:Script>

<s:VGroup>
<mx:DataGrid dataProvider="{myAC}" sortableColumns="false" />
<s:Button label="Filter people who are 30 years old" click="doFilter();" />
</s:VGroup>

</s:Application>

Thanks for reading!

Related:

ArrayCollection in Flex: Part 1 - Declaration
ArrayCollection in Flex: Part 2 - Sorting
ArrayCollection in Flex: Part 3 - Listening to updates
ArrayCollection in Flex: Part 5 - Searching using a Cursor

No comments:

Post a Comment