Flex 2 Developer's Guide > Building User Interfaces for Flex Applications > Using Data Providers and Collections > Using ICollectionView interface methods and properties

Using ICollectionView interface methods and properties

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

• You can modify the view to show the data in sorted order or to show a subset of the items in the data provider without changing the underlying data. For more information, see Sorting and filtering data for viewing
• You can access the collection data using a cursor, which lets you move through the collection, use bookmarks to save specific locations in the collection, and insert and delete items in the collection (and therefore in the underlying data source). For more information, see Using the IViewCursor interface
• You can use ICollectionView objects to represent remote data that might not initially be available, or where parts of the data set might become available at different times. For more information, see Using collection change notifications and Using remote data providers

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

• ArrayCollection class
• XMLListCollection class
• dataProvider property of all standard Flex controls except those that are subclasses of the NavBar class (ButtonBar, LinkBar, TabBar, ToggleButtonBar)

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"?>
<!-- dpcontrols\SortFilterArrayCollection.mxml -->
<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

Flex 2.01

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/201/html/about_dataproviders_057_07.html

Add Comment