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）
| 方法签名 |
描述 |
| 查找集合中具有指定属性的项目并将光标定位到该项目 |
|
| 查找集合中具有指定属性的第一个项目，并将光标定位到该项目 |
|
| 查找集合中具有指定属性的最后一个项目，并将光标定位到该项目 |
|
| 在光标的当前位置之前插入指定的项目 |
|
| 将光标移动到集合中的下一个项目 |
|
| 将光标移动到集合中的上一个项目 |
|
| 删除当前项目并返回该项目 |
|
| seek (bookmark:CursorBookmark , |
将光标移动到与指定书签位置存在一定偏移量的某个位置 |
表13-5 mx.collection.IViewCursor接口的属性（引自ActionScript3.0 Language Reference）
| 方法签名 |
描述 |
| 如果将光标定位于视图中最后一个项目之后，则此属性为 true |
|
| 如果将光标定位于视图中第一个项目之前，此属性为 true |
|
| 可以访问与当前属性返回的项目相对应的书签 |
|
| 可以访问位于此光标引用的源集合中的位置的对象 |
|
| 对与此光标关联的 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>