Home arrow XML arrow Page 4 - Flex Array Collection Sort and Filtering

Adding the Sort Button - XML

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

Our sort code above successfully connects the Sort object to our ArrayCollection. This code needs to be executed once before we can make greater use of it. To make this possible, we will create a new function that runs after the application has been created.  We will take advantage of the creationComplete event that is triggered once the application is created. We will modify the Application Tag in the following way: 

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

                layout="vertical" 

                width="100%" 

                height="100%" 

                creationComplete="init()">


Notice the newly-added creationComplete="init()". This will cause the init function to be called when the application is created. Here is the init function along with some Sort Object declaration (in public scope):

   import mx.collections.Sort;

   import mx.collections.SortField;


   // create our sort object    

   public var sort:Sort = new Sort();

   

   // connect the sort object to the ArrayCollection

   public function init():void{

       sort.fields = [new SortField("label", true)];

       computersCollection.sort=sort;

   }


This code will not sort the list immediately because the creationComplete event is triggered after the controls on the screen have been displayed. What you will see is the natural order as listed in our dataProvider. To cause the list to be sorted we will add a sort Button to our UI. We'll add this code to our MXML after the <mx:List> tag: 

<mx:HBox>

    <mx:Button label="Toggle Sort Order" click="toggleOrder(event)"/>

</mx:HBox>


Our button has a click event which refers to the following function: 

public function toggleOrder(event:MouseEvent):void{  

   sort.reverse();

   computersCollection.refresh();

}

 


The toggleOrder function calls the sort object's reverse property. Next, we refresh the ArrayCollection so that it will re-apply the sorting algorithm. That is all that is needed to switch the sort order from ascending to descending order.

So there you have it. We've successfully created a Flex application which can filter a list of items based on user input as well as sort them when the user initiates it. Flex/ActionScript provides easy to use methods that allow this type of processing to be performed with a minimum amount of code. Our Flex application was a mere 73 lines of code, which included the list items (they would normally be pulled from an external source).

You can see the full Flex app running at: http://www.reefkeysoftware.com/blog/sort_filter

Resources

http://livedocs.adobe.com/flex/3/langref/mx/collections/ArrayCollection.html

http://livedocs.adobe.com/flex/3/langref/mx/collections/Sort.html

http://livedocs.adobe.com/flex/3/langref/mx/collections/SortField.html

http://livedocs.adobe.com/flex/3/html/help.html?content=mxmlSyntax_3.html

http://livedocs.adobe.com/flex/3/langref/String.html

http://livedocs.adobe.com/flex/3/langref/mx/core/Application.html#eventSummary
 



 
 
>>> 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: