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

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