Home arrow XML arrow Flex Array Collection Sort and Filtering

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:
  1. Flex Array Collection Sort and Filtering
  2. Implementing the Filter
  3. Making it Case Insensitive
  4. Adding the Sort Button
By: Keith Lee
Rating: starstarstarstarstar / 16
September 03, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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.



 
 
>>> More XML Articles          >>> More By Keith Lee
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

XML ARTICLES

- Google Docs and Xpath Data Functions
- Flex Array Collection Sort and Filtering
- The Flex Tree Control
- Flex List Controls
- Working with Flex and Datagrids
- How to Set Up Podcasting and Vodcasting
- Creating an RSS Reader Application
- Building an RSS File
- An Introduction to XUL Part 6
- An Introduction to XUL Part 5
- An Introduction to XUL Part 4
- An Introduction to XUL Part 3
- An Introduction to XUL Part 2
- An Introduction to XUL Part 1
- XML Matters: Practical XML Data Design and M...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: