AS3 Array Collection Filter

In my last article we looked Arrays & Array Collections. In this article I would like to look at how we can filter data from that Array Collection. In my last article we talked about how Array Collections can be created and how they are automatically created for us when we return a query from ColdFusion. Now its time to actually do something with that data.

The Array Collection class in AS3 is a part of the Collections package. One of the great features of a collection is If the data provider is a collection, the components are updated immediately after the collection change occurs. If we think about this in the web world we usually have to query the database with a new query that includes our filter. In Flex all we need to do is assign the filter function to our collection and refresh it. This will walk through a quick example of how to do that.

The following code may seem like a a lot at first but just follow with me. The first thing we do is create our employees Array Collection. We want to make that bindable, this means that we will be able to use that object in our data grid component. <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()" backgroundColor="#EEEEEE"> <mx:Script> <![CDATA[ [Bindable] private var _employees:ArrayCollection; private function init():void { _employees = new ArrayCollection([ {name:"John Smith",isManager:false,age:34,sex:"M"}, {name:"Jenny Zurich",isManager:true,age:45,sex:"F"}, {name:"Jason Ruins",isManager:false,age:22,sex:"M"}, {name:"Tim Johnson",isManager:false,age:21,sex:"M"}, {name:"Mary Winn",isManager:false,age:20,sex:"F"}, {name:"Joe Rock",isManager:true,age:31,sex:"M"} ]); } ]]> </mx:Script> </mx:Application>

Next we will set up a data grid and toggle button bar. In the data grid we set the data provider to the employees variable that we created above and filled in our init method. The toggle button bar will call the method filterData every time an item on the bar is clicked. <mx:ToggleButtonBar id="tbb" dataProvider="{['All','Managers Only']}" itemClick="filterData(event)"/> <mx:DataGrid id="EmployeesGrid" width="400" dataProvider="{_employees}"/>

When the filterData method is called we are checking to see what the label of the button is. If the user clicks Managers Only we are saying assign the filter function filterManagers to our array collection and refresh the data. A filter function is a function that the view will use to eliminate items that do not match the function's criteria. All we are saying is return anyone where isManager is true. <mx:Script> <![CDATA[ import mx.events.ItemClickEvent; import mx.collections.ArrayCollection; [Bindable] private var _employees:ArrayCollection; private function init():void { _employees = new ArrayCollection([ {name:"John Smith",isManager:false,age:34,sex:"M"}, {name:"Jenny Zurich",isManager:true,age:45,sex:"F"}, {name:"Jason Ruins",isManager:false,age:22,sex:"M"}, {name:"Tim Johnson",isManager:false,age:21,sex:"M"}, {name:"Mary Winn",isManager:false,age:20,sex:"F"}, {name:"Joe Rock",isManager:true,age:31,sex:"M"} ]); } private function filterData(event:ItemClickEvent):void { if(event.label == "Managers Only"){ _employees.filterFunction = filterManagers; } else { _employees.filterFunction = null; } // refresh the data _employees.refresh(); } private function filterManagers(item:Object):Boolean { return item.isManager; } ]]> </mx:Script>

When you use an Array Collection (or any collection for that matter) you can do some really cool stuff with it. In the next example I will show you another cool trick I learned. You can click on the image below to view a live example of this demo. The full source code is also below.