Flex Array Collection Sort and Filtering (
Page 1 of 4 )
It's not unusual to need to write an application that can filter and sort a list of items based on user input. Maybe your e-commerce shop offers a variety of notebooks from different companies, and you want visitors to be able to sort or filter your selection. Combining Flex with ActionScript allows you to create such an application with a minimum amount of hassle (and code), as you'll see in this article.If you're already familiar with Flex and ActionScript, you will know how useful the listBase controls are to fast RIA development. When working with the List, Tree, DataGrids and other controls, you may first be looking to get over the hump of populating your control with the correct data. Understanding the breadth and depth of dataProviders is an article in itself (not discussed here).
Once you do have an understanding of them, you may be in a situation where you will need to do further manipulations, like sorting or filtering. The ActionScript library has a few nifty classes that work in conjunction with the ArrayCollection (used as a dataProvider for list-based controls) that help with this type of functionality. In this article I will build a basic application which uses an ArrayCollection as a dataProvider and apply sorting and filtering to it.
Building Our Application
To start with, let's talk about what we want to build. We really need a list of items that lend themselves to being sorted and filtered. For our data, we will use modern desktop and laptop computers. Because the DataGrid already has some built-in sorting, we will just use a plain List control to demonstrate sorting and filtering. I've purposely used the word Laptop, Netbook and Desktop for easy filtering.
Example Data:
Dell Mini 9 Netbook
Dell Inspiron 546 Desktop
Dell Inspiron 14 Laptop
Alienware Aurora Desktop
Alienware M17 Laptop
HP Pavillon p6100 Desktop
Compaq Presario CQ60Z Laptop
Toshiba Teca M10 Laptop
For the UI, we will want to allow the user to enter text which will filter the list. So, we will use a listControl and a TextInput Control. As the user types text in the TextInput, the list will remove items that don't match. Here is what our app looks like:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
width="100%" height="100%">
<mx:HBox width="100%" height="25" verticalAlign="middle">
<mx:Label text="Filter"/>
<mx:TextInput id="search" width="100%"/>
</mx:HBox>
<mx:List id="computers" width="100%" height="100%">
<mx:ArrayCollection id="computersCollection">
<mx:Object label="Dell Mini 9 Netbook"/>
<mx:Object label="Dell Inspiron 546 Desktop"/>
<mx:Object label="Dell Inspiron 14 Laptop"/>
<mx:Object label="Alienware Aurora Desktop"/>
<mx:Object label="Alienware M17 Laptop"/>
<mx:Object label="HP Pavillon p6100 Desktop"/>
<mx:Object label="Compaq Presario CQ60Z Laptop"/>
<mx:Object label="Toshiba Teca M10 Laptop"/>
</mx:ArrayCollection>
</mx:List>
</mx:Application>
You'll notice that we used the "default property" to set the dataProvider of the List. The List control could have also been written more explicitly as follows, where we specify the dataProvider.
<mx:List id="computers" width="100%" height="100%">
<mx:dataProvider>
<mx:ArrayCollection id="computersCollection">
<mx:Object label="Dell Mini 9 Netbook"/>
<mx:Object label="Dell Inspiron 546 Desktop"/>
<mx:Object label="Dell Inspiron 14 Laptop"/>
<mx:Object label="Alienware Aurora Desktop"/>
<mx:Object label="Alienware M17 Laptop"/>
<mx:Object label="HP Pavillon p6100 Desktop"/>
<mx:Object label="Compaq Presario CQ60Z Laptop"/>
<mx:Object label="Toshiba Teca M10 Laptop"/>
</mx:ArrayCollection>
</mx:dataProvider>
</mx:List>
The TextInput will be used by the user to filter the list of computers in the List. Now that we have a working application, let's start the process of filtering the data based on the user input.
/ 4 
