Flex理解ArrayCollection类及其绑定，筛选、排序、游标的用法

理解ArrayCollection类

上一节，我们介绍了集合类提供了丰富的数据操纵能力，本节，我们将 通过ArrayCollection类来具体了解如何应用集合类。

13.5.1  创建ArrayCollection类实例

mx.collection.ArrayCollection 类是 将Array公开为集合的封装类，可使用ICollectionView或IList接口的方法和属性实现访问和处理ArrayCollection实 例。对ArrayCollection实例进行操作会修改数据源，例如，如果对ArrayCollection使用removeItemAt()方法，就 会删除基础Array中的项目。

ArrayCollection的MXML语法如下：

<mx:ArrayCollection id=””   source="null"/>

下面两段代码分别使用MXML标签和ActionScript 代码声明并创建了ArrayCollection实例。

使用MXML代码创建ArrayCollection实例。

<mx:ArrayCollection id="arrColl">

        <mx:source>

            <mx:Array>

                <mx:Object label=" ActionScript基础" data=" A-1" />

                <mx:Object label="追风筝的人" data="B-1" />

                <mx:Object label="神秘河" data="C-1" />

            </mx:Array>

        </mx:source>

</mx:ArrayCollection>

使用ActionScript代码创建 ArrayCollection实例。

private var books:Array = new Array({label:"ActionScript基础",

data:"A- 1"},{label:"追风筝的人", data:"B-1"},{label:"神秘河", data:"C-1"});

private var acBooks1:ArrayCollection=new ArrayCollection(books);

Flex应用的数据通常来自外部文件。或者是SWF应用所在服务器 的本地资源文件，或者通过HTTP、Web服务等其他方式获取的远端服务器数据。

代码13-13是一个典型的初始化ArrayCollection 实例的XML数据源。数据呈现规则的结构，每一个子节点都具有相同的属性，代表了数据集合中的实例。

代码13-13：xml文件样例——book.xml（位于assets目录下）

<?xml version="1.0" encoding="utf-8"?>

<books>

    <book>

        <ISBN>9787806239421</ISBN>   

        <name>大秦帝国</name>

        <price>369.00</price>

        <author>孙皓晖</author>

        <publication>河南文艺出版社</publication>

    </book>

    ……

    <book>

        <ISBN>9787115145543</ISBN>   

        <name>C++ Primer中文版</name>

        <price>99.00</price>

        <author>Stanley</author>

        <publication>人民邮电出版社</publication>

    </book>

</books>

有 很多种方法可以从服务器端获取数据，包括 HTTPService、Web服务、远程对象等，我们将在第18章“访问Web和HTTP服务”（见第421页）做具体介绍。下面的例子中，通过简单的 HTTP服务（id为service）读取了服务器本地的XML数据文件。数据读取完毕后，会调度result事件，触发handleData事件侦听方 法，把读取的数据置入ArrayCollection实例acBooks中（如代码13-14所示）。由于该变量被绑定在数据表grid上，因此即时更新 了grid的显示。

代码13-14：从本地xml文件初始化ArrayCollection实例

<?xml version="1.0" encoding="utf-8"?>

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

        verticalAlign="middle"

        backgroundColor="white" creationComplete="init()">

    <mx:Script>

        <![CDATA[

            import mx.rpc.events.ResultEvent;

            import mx.collections.ArrayCollection;

 

            [Bindable]

            private var acBooks:ArrayCollection=new ArrayCollection();

 

            //初始化数据           

            private function init():void{

                service.send();

            }

 

            //从本地XML数据文件中读取数据到acBooks:ArrayCollection中

            private function handleData(evt:ResultEvent):void{

                acBooks=evt.result.books.book;

            }

        ]]>

    </mx:Script>

    <mx:HTTPService id="service" url="assets/book.xml" result="handleData(event)"/>

    <!--绑定acBooks数据源到表格组件-->

    <mx:DataGrid id="grid" dataProvider="{acBooks}"/>

</mx:Application>

上述代码最终把XML数据文件转换为 ArrayCollection实例。在调试模式下运行上述应用，并监控acBooks变量，可以更加清楚地看到XML数据文件如何存储在 ArrayCollection实例中，如图13-9所示。

图13-9  Debug模式下监控ArrayCollection实例acBooks

XML数据文件的每个节点被作为独立的对象实例 （mx.utils.ObjectProxy对象）依次存储在数据集合中。

13.5.2  筛选数据

ArrayCollection类自 ListCollectionView继承了filterFunction属性。

filterFunction:Function []

通过设置filterFunction属性，为 ArrayCollection实例指定筛选数据的方法。该方法必须具有如下形式签名：

f(item:Object):Boolean

在设置filterFunction属性后，必须调用 refresh()方法，将筛选函数应用到数据集合上，更新集合视图。

以上一节应用为基础。我们在数据列表grid上增加滑动条组件，用 户通过该组件设置价格范围达到筛选图书的目的，如代码13-15所示。应用完成后结果如图13-10所示：

图13-10  ArrayCollection筛选数据示例

代码13-15：筛选数据示例

<?xml version="1.0" encoding="utf-8"?>

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

        verticalAlign="middle"

        backgroundColor="white" creationComplete="init()">

    <mx:Script>

        <![CDATA[

            import mx.events.SliderEvent;

            import mx.controls.Alert;

            import mx.rpc.events.ResultEvent;

            import mx.collections.ArrayCollection;

 

            [Bindable]

            private var acBooks:ArrayCollection=new ArrayCollection();

 

            //初始化数据           

            private function init():void{

                service.send();

            }

 

            //从本地XML数据文件中读取数据到acBooks:ArrayCollection中

            private function handleData(evt:ResultEvent):void{

                acBooks=evt.result.books.book;

                   //设置acBooks的过滤函数

                acBooks.filterFunction=priceFilter;

            }

 

            //acBooks的价格过滤器

            private function priceFilter(item:Object):Boolean{

               var isMatch:Boolean = false;

               if(item.price>=priceSlider.values[0] && item.price<=

             priceSlider.values[1]){

                   isMatch = true;

               }             

               return isMatch;

           }           

 

            //价格滑动条变化后触发，应用过滤方法，更新列表

            private function dispatchPriceFilter():void

            {

                    acBooks.refresh();

            }

 

        ]]>

    </mx:Script>

    <mx:HTTPService id="service" url="assets/book.xml" result="handleData(event)"/>

    <!--控制价格筛选-->

<mx:HSlider id="priceSlider" minimum="0" maximum="500" tickInterval="5"

snapInterval="5"

        width="{grid.width}" thumbCount="2" values="[0,500]" labels="[$0,$500]"

        liveDragging="true" change="dispatchPriceFilter()"/>

 

    <!--绑定acBooks数据源到表格组件-->

    <mx:DataGrid id="grid" dataProvider="{acBooks}"/>

</mx:Application>

HSlider组件说明

mx.controls.HSlider类实现了水平滑动条控件。 用户可通过在滑块轨道的终点之间移动滑块来选择值。

maximum 和minimum属性分别指定了滑块控件允许的最大 和最小值。thumCount指定了Slider 控件所允许的滑块数量。在我们的例子中，使用两个滑块来设定价格范围。此时，每个滑块的值在一起构成了数组，通过属性values可以访问和设定该数组 值。默认设置values="[0,500]"，使得应用初始化时滑块位于轨道的两端。属性liveDragging设置为true，为滑块启动了实时拖 动，此时当用户移动滑块时连续调度change事件。可以看到，我们为change事件的侦听器方法定义为dispatchPriceFilter()。

设置ArrayCollection实例acBooks的过滤器属性

在handleData()方法 中，acBooks.filterFunction=priceFilter设定了过滤器属性为priceFilter方法。

过滤器方法：priceFilter(item:Object)说明

过滤器方法通过参数item:Object访问 ArrayCollection的每个元素。如果价格范围在滑动条设置值范围内，则返回true，该元素会保留在集合视图中。

dispatchPriceFilter()方法说明

每一次滑动滚动条，都会由于触发change事件，而调用 dispatchPriceFilter()方法。在该方法中，调用refresh方法以应用过滤。由于acBooks被绑定在grid数据表上，因此过 滤结果会即时反应在应用界面上。

13.5.3  数据排序

ArrayCollection自 ListCollectionView继承了sort属性。

sort:Sort []

sort 属性用于对 ICollectionView视图进行排序。同数据筛选一样，设置排序不会自动刷新视图，因此必须在设置此属性后调用refresh()方法。开发者须 要创建mx.collection.Sort类实例赋予ArrayCollection的sort属性。

mx.collection.Sort类

Sort类提供了在现有视图上建立排序所需的排序信息，其实例通常 被赋予ICollectionView视图的sort属性（例如ArrayCollection的sort属性），实现对集合数据视图的排序。

Sort类的常用属性包括：

fields : Array   //指定要比较的字段的 SortField 对象，数组类型。

以及

compareFunction : Function //用于在排序时比较项目的方法。

mx.collection..SortField

SortField提供对现有视图中的字段或属性建立排序所需的排 序信息。mx.collection.Sort类中，数组类型的fields属性中的数组项目即为SortField类实例。

我们为上一节ArrayCollection数据筛选的例子加入排 序功能。

1.      在主应用上加入新的按钮，用户点击该按钮则触发“SortData()”方法，进行排序。

<mx:Button label="排序" id="buttonSort" click="sortData()"/>

2.      引入mx.collection.Sort和SortField类。

在<mx:Script>标签中，加入

import mx.collections.Sort;

import mx.collections.SortField;

3.      实现SortData()方法。

在<mx:Script>标签中，加入新的方法：

private function sortData():void{

var sortBooks:Sort = new Sort();

sortBooks.fields=[new SortField("price"),

                               new SortField("ISBN")];

acBooks.sort=sortBooks;

acBooks.refresh();

}

在 上述代码中，首先创建了Sort类实例。然后分别创建了两个 SortField实例（对应集合对象元素的price和ISBN属性），并赋予了Sort实例的fileds属性。在将Sort类实例赋予集合对象 acBooks的sort属性之后，通过调用refresh方法刷新了视图，并即时更新了数据表。

按下按钮后的数据表显示如图13-11所示。

图13-11  数据集合ArrayCollection的排序结果

13.5.4  使用游标

ArrayCollection 有些类似数据表。数据集合中的 每一个元素（通常为复杂对象，也可以是String、int等基本类型）就好比数据表中的一条记录。数据库技术中，通过游标可以在数据表的记录中游历。有 的时候，在数据集合中也须要实现类似功能。ListCollectionView提供了createCursor()方法，可以创建能够在数据集合中游历 的游标。ArrayCollection继承了该方法。

createCursor()方法

createCursor方法签名：

public function createCursor():IViewCursor

该方法创建了基于此视图的新 IViewCursor实现。IViewCursor是定义双向枚举集合视图的接口。此游标提供查找、搜索和标记为书签等功能，还提供修改方法用于插入和 删除。

IViewCursor接口的方法和属性，见表13-4、表13-5。

表13-4  mx.collection.IViewCursor接口的公共方法（引自ActionScript3.0 Language Reference）

方法签名	描述
findAny (values:Object ):Boolean	查找集合中具有指定属性的项目并将光标定位到该项目
findFirst (values:Object ):Boolean	查找集合中具有指定属性的第一个项目，并将光标定位到该项目
findLast (values:Object ):Boolean	查找集合中具有指定属性的最后一个项目，并将光标定位到该项目
insert (item:Object ):void	在光标的当前位置之前插入指定的项目
moveNext ():Boolean	将光标移动到集合中的下一个项目
movePrevious ():Boolean	将光标移动到集合中的上一个项目
remove ():Object	删除当前项目并返回该项目
seek (bookmark:CursorBookmark , offset:int = 0, prefetch:int = 0):void	将光标移动到与指定书签位置存在一定偏移量的某个位置

表13-5  mx.collection.IViewCursor接口的属性（引自ActionScript3.0 Language Reference）

方法签名	描述
afterLast : Boolean	如果将光标定位于视图中最后一个项目之后，则此属性为 true
beforeFirst : Boolean	如果将光标定位于视图中第一个项目之前，此属性为 true
bookmark : CursorBookmark	可以访问与当前属性返回的项目相对应的书签
current : Object	可以访问位于此光标引用的源集合中的位置的对象
view : ICollectionView	对与此光标关联的 ICollectionView 的引用

游标查找的局限性

IViewCursor实现提供了查找方法（findAny、 findFirst和findAny）。通过游标查找数据集合中的元素对象非常方便，但由于这些方法依赖于Sort类（使用了其 compareFunction属性），由此带来了许多限制：

1.      只能对排序后的视图调用查找方法；如果视图未排序，则会引发 CursorError。

2.      指定的查询值必须配置为名称-值对。这些名称值必须与排序中指定的属性相匹配。这意味着，一方面查询使用的名称-值对必须包含在排序使用的名称值对 （Sort类的fields属性制定）范围内；另一方面，查询指定的集合元素属性顺序必须与排序指定的属性顺序相同。
例如：如果mySort.fields属性指定的排序属性次序分别为price、bookName和ISBN，那么游标查询指定的名称值对需为 {price:value,bookName:value;ISBN:value}。查询指定的数组集合元素对象的属性不一定覆盖所有的排序属性，但必须 保证顺序一致。例如{price:value，bookName:value}是可以接受的查询方法参数。但是{price:value, ISBN:value}则会导致游标查询方法抛出CursorError异常。

我们通过为上一个应用加入查找功能，了解如何实际应用游标进行查 找，如代码13-16、图13-12所示。

代码13-16：游标查找的样例

<?xml version="1.0" encoding="utf-8"?>

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

        verticalAlign="middle"

        backgroundColor="white" creationComplete="init()">

    <mx:Script>

        <![CDATA[

            import mx.collections.SortField;

            import mx.events.SliderEvent;

            import mx.controls.Alert;

            import mx.rpc.events.ResultEvent;

            import mx.collections.ArrayCollection;

            import mx.collections.Sort;

            import mx.collections.SortField;

            import mx.collections.IViewCursor;

 

            [Bindable]

            private var acBooks:ArrayCollection=new ArrayCollection();

 

            private var cursor:IViewCursor;

 

            //初始化数据           

            private function init():void{

                service.send();

            }

 

            //从本地XML数据文件中读取数据到acBooks:ArrayCollection中

            private function handleData(evt:ResultEvent):void{

                acBooks=evt.result.books.book;

                //创建游标

                cursor = acBooks.createCursor();

            }

 

 

            //价格滑动条变化后触发，设置acBooks的过滤函数，并更新列表

            private function dispatchPriceFilter():void

            {

                    acBooks.refresh();

            }

           //查询方法

           private function searchItem(event:Event):void{

                   //查询之前进行排序

                var sortBooks:Sort = new Sort();

                //排序使用的属性和其顺序，将决定查询时的查询属性及顺序

                sortBooks.fields=[new SortField("price"),new

              SortField("bookName"),new SortField("ISBN")];

                acBooks.sort=sortBooks;

                acBooks.refresh();

                //创建查询属性对象

                var searchObj:Object = new Object();

                //查询属性对象必须在排序使用的属性对象范围内，并保持一致顺序

                   searchObj = {price:priceKey.text,bookName:nameKey.text};

                   //游标查询

                var result:Boolean = cursor.findAny(searchObj);

                if (result) {

                    //定位数据表中记录

                    grid.selectedItem=cursor.current;

                } else {

                    grid.selectedItem = null;

                    mx.controls.Alert.show("抱歉，没有找到！");

                }

           }

 

        ]]>

    </mx:Script>

<mx:HTTPService id="service" url="assets/book.xml" result=

"handleData(event)"/>

    <!--通过ApplicationControlBar组织工具条-->

    <mx:ApplicationControlBar width="{grid.width}">

        <mx:Spacer width="100%"/>

        <!--图书名称查询输入框-->

        <mx:TextInput id="nameKey" toolTip="图书名称" />

        <!--图书价格查询输入框-->

        <mx:TextInput id="priceKey" toolTip="价格" />

        <mx:Button id="buttonSearch" label="查找" click="searchItem(event);" />

    </mx:ApplicationControlBar>

    <!--绑定acBooks数据源到表格组件-->

    <mx:DataGrid id="grid" dataProvider="{acBooks}"/>

</mx:Application>