Using ICollectionView interface methods and properties -- Flex 2

The ICollectionView interface represents a view of the underlying data source as a collection of items. It has the following major features:

You can use the ICollectionView interface methods and properties directly on any of the following classes or properties:

The following sections describe the basic ICollectionView operations using a list-based collection, but can also apply to similar operations on a hierarchical collection.

Subtopics

Sorting and filtering data for viewing

The ICollectionView interface lets you sort and filter the data in the data provider so that the view represented by the collection is a reordered subset of the underlying data. These operations have no effect on the data provider contents, only on the subset that the collection view represents, and therefore what any control that uses the collection displays.

Sorting

The Sort class lets you sort data in the collection. You can specify multiple fields to use in sorting the data, require that the resulting entries be unique, and specify a custom comparison function to use for ordering the sorted output. You can also use the Sort class to find items in a collection. When you create a Sort class, or change its properties, you must call the refresh() method on the collection to show the results.

You use the SortField class to specify the fields to use in the sort. You create the SortField objects and put them in the Sort class object's fields array.

The following shows a function to sort a collection. In this example, myAC is a collection view of an Array of objects containing label and name fields. The primary sort is a descending, case-insensitive sort on the area field and the secondary sort is an ascending case-sensitive sort on the label field. You might call it as the initialize event handler for a control that must display a specific sorted view of a collection.

//Sort the ICollectionView in descending order.
public function sortAC():void {
    //Create a Sort object.
    var sortA:Sort = new Sort();
    // Sort first on the area field, then the label field.
    // The second parameter specifies that the sort is case-insensitive.
    // A true third parameter specifies a descending sort.
    sortA.fields=[new SortField("area", true, true), 
                        new SortField("label")];
    myAC.sort=sortA;
    //Refresh the collection view to show the sort.
    myAC.refresh();
}

Filtering

You use a filter function limit the ICollection view to a subset of the data provider source. The function must take a single Object parameter, which corresponds to a collection item, and must return a Boolean value specifying whether to include the item in the collection view. As with sorting, when you specify or change the filter function, you must call the refresh() method on the collection to show the filtered results. To limit a collection view of an array of strings to contain only strings starting with M, for example, use the following filter function:

public function stateFilterFunc(item:Object):Boolean
{
    return item >= "M" && item < "N";
}

Example: Sorting and filtering an ArrayCollection

The following example shows the use of the filter function and a sort together. You can use the buttons to sort, or filter the collection, or you can do both. Use the Reset button to restore the collection view to its original state.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="600">
    <mx:Script>
        <![CDATA[
            import mx.collections.*;
    
            // Function to sort the ICollectionView in ascending order.
            public function sortAC():void {
                var sortA:Sort = new Sort();
                sortA.fields=[new SortField("label")];
                myAC.sort=sortA;
                //Refresh the collection view to show the sort.
                myAC.refresh();
            }

            // Function to filter out all items with labels that are not in the
            // range of M-N.
            public function stateFilterFunc(item:Object):Boolean {
                return item.label >= "M" && item.label < "O";
            }
            
            // Function to apply the filter function the ICollectionView.
            public function filterAC():void {
                myAC.filterFunction=stateFilterFunc;
                //Refresh the collection view to apply the filter.
                myAC.refresh();
            }

            // Function to Reset the view to its original state.
            public function resetAC():void {
                myAC.filterFunction=null;
                myAC.sort=null;
                //Refresh the collection view.
                myAC.refresh();
            }

        ]]>
    </mx:Script>

    <!-- An ArrayCollection with an array of objects. -->
    <mx:ArrayCollection id="myAC">
        <mx:Array id="myArray">
            <mx:Object label="LA" data="Baton Rouge"/>
            <mx:Object label="NH" data="Concord"/>
            <mx:Object label="TX" data="Austin"/>
            <mx:Object label="MA" data="Boston"/>
            <mx:Object label="AZ" data="Phoenix"/>
            <mx:Object label="OR" data="Salem"/>
            <mx:Object label="FL" data="Tallahassee"/>
            <mx:Object label="MN" data="Saint Paul"/>
            <mx:Object label="NY" data="Albany"/>
        </mx:Array>    
    </mx:ArrayCollection>

    <!-- Buttons to filter, sort, or reset the view in the second ComboBox
            control. -->
    <mx:HBox width="100%">
        <mx:Button id="sortButton" label="Sort" click="sortAC();"/>
        <mx:Button id="filterButton" label="Filter" click="filterAC();"/>
        <mx:Button id="resetButton" label="Reset" click="resetAC();"/>
    </mx:HBox>
    <mx:HBox width="100%">
        <!-- A ComboBox populated by the underlying Array object.
            This control shows that Array retains its original order. -->
        <mx:ComboBox id="cb2" rowCount="10" dataProvider="{myArray}"/>
        <!-- A ComboBox populated by the collection view of the Array. -->
        <mx:ComboBox id="cb1" rowCount="10" dataProvider="{myAC}"/>
    </mx:HBox>

</mx:Application>

For a more complex example of sorting a DataGrid control, which both does an initial sort of the data and does a custom sort when you click a column heading, see Example: Sorting a DataGrid on multiple columns