Flex Array Collection Sort and Filtering

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.

TABLE OF CONTENTS:

By: Keith Lee

Poor Best

Rating:

/ 16

September 03, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

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.