查字典图书网
查字典图书网
13.1 MXML的数据模型 在Flex应用开发中，处理数据是非常核心的工作。MXML提供了简单的方式帮助开发者在客户端存储数据，而更复杂的应用则须要利用ActionScript类来定义数据模型。 13.1.1 <mx:Model> <mx:Model>适合描述树状层次结构的数据。<mx:Model>声明必须置于MXML主应用文件或MXML组件文件的根标签下。<mx:Model>数据模型示例的代码如代码13-1所示。 代码13-1：<mx:Model>数据模型示例 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.controls.Alert; private function showAuthor():void{ mx.controls.Alert.show(bookModel.name +"的作者是：" + bookModel.author.firstName + " " + bookModel.author.lastName + "n" + " 订购数量：" + bookModel.quantity); } ]]> </mx:Script> <mx:Model id="bookModel"> <book> <author> <firstName>{txtFirstName.text}</firstName> <lastName>{txtLastName.text}</lastName> </author> <name>{txtName.text}</name> <quantity>{quantity.value}</quantity> </book> </mx:Model> <mx:Form width="288"> <mx:FormItem label="书名:"> <mx:TextInput id="txtName" /> </mx:FormItem> <mx:FormItem label="作者:"> <mx:TextInput id="txtFirstName" /> <mx:TextInput id="txtLastName" /> </mx:FormItem> <mx:FormItem label="订购数量"> <mx:NumericStepper id="quantity"/> </mx:FormItem> <mx:FormItem> <mx:Button id="button1" label="显示" click="showAuthor()"/> </mx:FormItem> </mx:Form> </mx:Application> 在上述应用示例中，用户填写完图书信息，点击“显示”按钮后，结果如图13-1所示。 图13-1 <mx:Model>示例结果 在这个例子中，可以看到，<mx:Model>声明的数据模型，最终被编译为ActionScript对象，通过其id进行引用。<mx:Model>能够很好地存储树型结构数据，但也仅限于此。其存储的数据局限于标量数据，不支持对数据的进一步处理。 在复杂的应用中，我们更经常使用ActionScript代码定义数据模型类。 13.1.2 ActionScript的DTO DTO，全称Data Transfer Object（数据传输对象），也被称作Value Object（简称VO）。DTO实际上就是简单的ActionScript类，该类的全部意义在于描述对象实体数据模型、存储数据，并在应用内部不同模块及应用与服务器之间传递数据。 与<mx:Model>定义的数据模型相比，DTO的属性变量不仅仅是标量类型（例如int、String等），也可以是复杂类型。DTO也能内嵌业务逻辑（例如数据校验、格式化等）。 一般来说，DTO类代码的最佳实践是，将属性声明为私有变量，并使用getter和setter方法提供属性的读写接口，DTO示例代码如代码13-2所示： 代码13-2：DTO示例 package com.longfei.bookLabs.bookStore.model { [Bindable] public class Book { public var name:String; public var price:Number; private var _quantity:int; public function Book() { } //5本起订 public function set quantity(value:int):void { if (value>= 5) { _quantity = value; } else { trace('不足起订数！'); } } public function get quantity():int { return _quantity; } } } 许多专家和文章建议将DTO或VO对象的属性变量设置为私有属性，并通过setter和getter访问器实现读写。但事实上，如果不须要对属性变量进行业务逻辑处理，例如校验或格式化，那么使用公共属性也不见得会带来什么坏处。 如果要在MXML中使用DTO对象，须要引入并实例化该类。可以使用MXML标签声明方式，也可以采用ActionScript代码声明并创建类实例。 如果使用MXML标签声明，须要定义指向DTO对象的命名空间，然后为该DTO对象设置id属性。 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:vo="com.longfei.bookLabs.bookStore.model.*" > <!―省略代码--> <!--使用MXML标签声明DTO对象实例--> <vo:Book id="tempBook"/> <!―省略代码--> </mx:Application> 用ActionScript代码创建DTO类实例的代码如下： <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Script> <![CDATA[ import com.longfei.bookLabs.bookStore.model.*; //ActionScript代码创建类实例 private var book:Book; ]]> </mx:Script> <!―省略代码--> </mx:Application> 13.2 深入解析数据绑定 数据绑定能帮助开发者快速地把应用界面与数据联系在一起，用户在应用界面上的操作，能够即时反应到绑定的数据上。 在本书前面章节的许多例子中，我们已经使用过数据绑定。数据绑定就是把数据源A和目标数据B关联在一起的过程，数据源A也许是属性变量、对象、方法，甚至是数组元素。使用MXML和ActionScript都能够实现数据绑定。 Flex数据绑定的背后是事件机制的应用。开发者使用不同方式（MXML或ActionScript）声明绑定的时候，即为绑定事件注册了事件侦听器，当数据源发生变化时，就会调度时间侦听器，实现数据绑定逻辑，默认的绑定逻辑就是将更新的数据复制到目标对象。 13.2.1 声明可绑定数据源――[Bindable]解析 数据绑定的数据源可以是属性变量、方法及ActionScript类对象实例。Flex通过元数据标签[Bindable]进行标识。标识为绑定数据源意味着当数据源变化时，能够调度事件，通知Flex更新目标数据。 Bindable元数据标签的签名如下： [Bindable] 或者 [Bindable(event=”eventName”)] 开发者一般忽略事件（event）名称，只使用[Bindable]标识可绑定数据源。这种情况下，Flex会默认地创建mx.events.PropertyChangeEvent类型事件，事件名为propertyChange。当数据绑定的数据源发生变化时，数据源会自动调度propertyChange事件，通知Flex将新值复制给目标数据。 如果在标识绑定时说明了事件，也就是说采用了[Bindable (event=”eventName”)]方式，开发者须要自己定义和调度事件。 我们依次说明如何声明属性、ActionScript类和方法作为可绑定的数据源。 声明可绑定属性 在属性变量定义之前，使用元数据标签[Bindable]声明属性可绑定。属性可以是公共属性、私有属性或被保护属性。声明如下： [Bindable] public var employee:Employee=new Employee(); [Bindable] private var acEmployees:ArrayCollection=new ArrayCollection(); 如上声明后，employee和acEmployees变量可作为绑定数据源。 对于使用getter和setter方法定义的属性变量，需要在get或set方法前声明[Bindable]。如代码13-3所示。 代码13-3：getter和setter的属性绑定声明 <?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[ private var _prop:String; private function init():void{ prop='bind was triggerd'; } [Bindable] private function set prop(value:String ):void{ //自定义代码 _prop=value; } private function get prop():String{ //自定义代码 return _prop; } ]]> </mx:Script> <mx:Text id="txtDest" text="{prop}"/> <mx:Button label="修改" click="prop='bind was triggerd Again!'"/> </mx:Application> 声明可绑定ActionScript类 在公共类定义前，使用[Bindable]声明该类是可绑定的。 声明ActionScript类可绑定意味着告诉Flex，这个类的所有公共属性都是可绑定的。因此，代码13-4、代码13-5具有相同的意义。 代码13-4：可绑定ActionScript类一 package com.longfei.bookLabs.bookStore.model { [Bindable] public class Employee { public var name:String; public var title:String; public function Employee(){ } } } 代码13-5：可绑定ActionScript类二 package com.longfei.bookLabs.bookStore.model { public class Employee { [Bindable] public var name:String; [Bindable] public var title:String; public function Employee(){ } } } 声明可绑定方法 在Flex中，方法也可以作为数据绑定的数据源，前提条件是方法的参数必须声明为可绑定的属性变量。当属性变量发生变化时，方法就会被调用，并把结果传递给目标数据，如代码13-6所示。 代码13-6：可绑定ActionScript方法 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ private var strDest:String; private function functionSrc(value:Object):String{ strDest="新数据是: " + value; return strDest; } ]]> </mx:Script> <mx:Form> <mx:FormItem label="数据源:"> <mx:TextInput id="txtSrc" /> </mx:FormItem> <mx:FormItem label="目标数据:"> <mx:TextInput id="txtDest" text="{functionSrc(txtSrc.text)}"/> </mx:FormItem> </mx:Form> </mx:Application> 13.2.2 MXML定义数据绑定 使用MXML，可以通过{}句法或<mx:Binding>标签完成数据绑定（如图13-2所示）。下面两段代码13-7、13-8实现了相同的结果。 代码13-7：使用{}句法进行数据绑定 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Form> <mx:FormItem label="数据源1:"> <mx:TextInput id="txtSrc1" /> </mx:FormItem> <mx:FormItem label="数据源2:"> <mx:TextInput id="txtSrc2" /> </mx:FormItem> <mx:FormItem label="目标数据:"> <mx:TextInput id="txtDest" text="{'信息来自：' + txtSrc1.text + ' 和 '+ txtSrc2.text}"/> </mx:FormItem> </mx:Form> </mx:Application> 代码13-8：使用<mx:Binding>句法进行数据绑定 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Form> <mx:FormItem label="数据源1:"> <mx:TextInput id="txtSrc1" /> </mx:FormItem> <mx:FormItem label="数据源2:"> <mx:TextInput id="txtSrc2" /> </mx:FormItem> <mx:FormItem label="目标数据:"> <mx:TextInput id="txtDest"/> </mx:FormItem> </mx:Form> <mx:Binding source="'信息来自：' + txtSrc1.text + '和' + txtSrc2.text" destination="txtDest.text"/> </mx:Application> 图13-2 在MXML中进行数据绑定 在上面两个代码示例中，绑定的数据源都是txtSrc1.text和txtSrc2.text，而绑定目标是txtDest.text。Flex对数据绑定要做的事情就是，当绑定的数据源发生变化时，将新的数据复制到绑定目标上。 使用{}句法，{}内包含的属性就是绑定的数据源，其中也可以包含ActionScript代码结合绑定数据源构成完整的表达式。 使用<mx:Binding>时，source属性是绑定的数据源，而destination则是绑定目标。在<mx:Binding>标签中，也可以在source属性中包含{}。在我们上面的样例代码中没有包含{}，那么source属性中的值被视为单一的ActionScript代码表达式，这就像source属性的值被完全包含在{}中一样。 例如，代码13-8中<mx:Binding>标签代码可以改写成如下格式。{}中的代码被视为ActionScript表达式。 <mx:Binding source="{'信息来自：' + txtSrc1.text + '和' + txtSrc2.text }" destination="txtDest.text"/> 这段代码也可以改为如下方式： <mx:Binding source="信息来自：{ txtSrc1.text }和{ txtSrc2.text }}" destination="txtDest.text"/> 在这里，source属性的值被视为串联在一起的代码表达式。 13.2.3 ActionScript定义数据绑定 在ActionScript中，使用mx.binding.utils.BindingUtil类完成数据绑定。BindingUtil提供了两个静态方法分别完成绑定属性（bindProperty方法）和绑定方法（bindSetter方法）。 bindProperty() bindProperty()方法签名 public static function bindProperty(site:Object, prop:String, host:Object, chain:Object, commitOnly:Boolean= false):ChangeWatcher bindProperty把对象host的属性或属性链的值（由chain参数说明）绑定到对象site的公共属性prop上。更准确地说，Flex将监控host对象中由chain参数声明的公共属性或属性链，当这些属性发生变化时，将会复制新值到site对象的prop属性上。 bindSetter()方法 bindSetter()方法签名 public static function bindSetter(setter:Function, host:Object, chain:Object, commitOnly:Boolean= false):ChangeWatcher bindSetter()与bindProperty()方法类似，不同的是把对象host的属性或属性链的值（由chain参数说明）传递给setter方法，由setter方法返回最终结果。setter()方法事实上就与绑定相关的事件侦听器方法。bindSetter()方法提供了更多的空间，开发者能够在绑定发生时进一步的处理数据，而不仅仅是单纯的绑定属性。 ChangeWatcher类 bindProperty()方法和bindSetter()都返回ChangeWatcher类实例。类如其名，mx.binding.utils.ChangeWatcher类负责监控绑定数据源的属性或属性链，当它们发生变化时获取通知，调用事件侦听器。关于ChangeWatcher类的具体说明请参考“ActionScript 3.0语言参考”。 在代码13-9中，应用初始化时调用initBinding()方法绑定了txtSrc.text（源）和txtDest.text（目标），也获取了该绑定的ChangeWaatcher实例cw。cw.setHandler方法修改了绑定事件发生后的侦听器方法，也就是说我们用自己的watcherListner()方法替换了bindProperty()默认的事件处理方法。 watcherListner()从cw.getValue()获取所监控属性或属性链的更新数据，并复制到目标对象（txtDest.text）上。一切都与绑定的默认行为一样。只不过我们埋下了一个圣诞彩蛋，如果txtSrc.text的值为“unbind”的时候，就利用cw.unwatch()解除绑定。 代码13-9：ChangeWatcher类的样例 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="initBinding()"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.binding.utils.*; private var cw:ChangeWatcher; private function initBinding():void{ cw=BindingUtils.bindProperty(txtDest,"text",txtSrc,"text"); cw.setHandler(watcherListner); } private function watcherListner(event:Event):void{ if(txtSrc.text=="unbind"){ txtDest.text=cw.getValue().toString(); cw.unwatch(); }else{ txtDest.text=cw.getValue().toString(); } } ]]> </mx:Script> <mx:Form> <mx:FormItem label="数据源"> <mx:TextInput id="txtSrc"/> </mx:FormItem> <mx:FormItem label="绑定目标"> <mx:TextInput id="txtDest"/> </mx:FormItem> </mx:Form> </mx:Application> 该样例的运行结果如图13-3所示，在“数据源”中输入unbind后，绑定关系就被解除了。 图13-3 ChangWatcher类使用示例 属性链 数据绑定中很重要的一环就是指定监听哪些数据源。Flex不仅可以监控单一的属性，也能够监控属性链。 在下面这个例子中，属性链为book.name，属性链中的任何一环发生变化，都会调度绑定的事件侦听器方法。 BindingUtils.bindProperty(txtDest,"text",,this,["book","name"]); 使用MXML也能够达到同样的目的： <mx:Text id="txtDest" text="{book.name }"/> 13.3 数据绑定样例――图书信息维护 我们通过一个例子，更好地说明如何在应用中使用ActionScript数据绑定。示例完成后的结果如图13-4所示，代码如代码13-10、代码13-11所示。 图13-4 更新图书信息样例 用户输入书名、价格和ISBN号，输入的内容会同时显示在其下方的描述文本上。点击“创建新书”按钮后，会在数据列表中添加图书的信息。 代码13-10：样例中使用的数据模型――Book.as package com.longfei.bookLabs.bookStore.model { [Bindable] public class Book { public var name:String; public var ISBN:String; public var price:Number; public function Book(){ } } } 代码13-11：更新图书信息的样例――主应用bindPOC.mxml <?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/10/01/data-binding-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Script> <![CDATA[ import mx.binding.utils.ChangeWatcher; import mx.collections.ArrayCollection; import mx.binding.utils.BindingUtils; import com.longfei.bookLabs.bookStore.model.Book; //Book数据模型的实例 [Bindable] public var book:Book=new Book(); //存储新增的所有图书，作为数据表books的数据源 [Bindable] public var acBooks:ArrayCollection=new ArrayCollection(); private var cwName:ChangeWatcher; private var cwISBN:ChangeWatcher; private var cwPrice:ChangeWatcher; //初始化绑定 private function init():void { cwName =BindingUtils.bindProperty(book, "name", txtName, "text"); cwISBN=BindingUtils.bindProperty(book, "ISBN", txtISBN, "text"); cwPrice=BindingUtils.bindProperty(book, "price", txtPrice, "text"); BindingUtils.bindProperty(txtBPDesc,"text",book,"name"); BindingUtils.bindSetter(updateBook,this,["book","name"]); } //绑定方法 private function updateBook(value:String):void{ txtBSDesc.text="新书的名字是" + value + ",价格为" + book.price; } //新建图书，更新books数据表，创建新的图书实例 private function newBook():void{ acBooks.addItem(book); cwName.unwatch(); cwISBN.unwatch(); cwPrice.unwatch(); book=new Book(); cwName=BindingUtils.bindProperty(book, "name", txtName, "text"); cwISBN=BindingUtils.bindProperty(book, "ISBN", txtISBN, "text"); cwPrice=BindingUtils.bindProperty(book, "price", txtPrice, "text"); } ]]> </mx:Script> <mx:Form> <mx:FormItem label="书名:"> <mx:TextInput id="txtName" /> </mx:FormItem> <mx:FormItem label="价格:"> <mx:TextInput id="txtPrice"/> </mx:FormItem> <mx:FormItem label="ISBN:"> <mx:TextInput id="txtISBN"/> </mx:FormItem> </mx:Form> <mx:Text id="txtBPDesc"/> <mx:Text id="txtBSDesc"/> <mx:Button id="button1" label="创建新书" click="newBook()"/> <mx:DataGrid id="books" dataProvider="{acBooks}"/> </mx:Application> 应用的关键点说明，其中涉及的[Bindable]元数据标签和数据集合ArrayCollection，将在本章后面详细介绍。 图13-5 更新图书示例说明 1. 使用[Bindable]元数据标签，声明ActionScript类Book为可绑定类，这意味着其所有公共属性都为可绑定属性，可以作为数据绑定的数据源。 2. 使用[Bindable]元数据标签，在主应用bindPOC.mxml中，声明了变量book和acBooks为可绑定变量。 3. init()方法分别使用bindProperty()方法绑定数据输入框txtName、txtISBN、txtPrice的text属性到book实例的对应属性上。当用户在输入框输入数据时，就会实时地更新book实例。 4. init()方法使用bindProperty()和bindSetter()方法分别为txtBPDesc和txtBSDesc进行了数据绑定。txtBSDesc的数据绑定是通过updateBook()方法实现的。 BindingUtils.bindProperty(txtBPDesc,"text",book,"name"); BindingUtils.bindSetter(updateBook,this,["book","name"]); 需要进一步说明的是，它们为txtBPDesc文本控件仅仅绑定了name属性（如上第一行代码），而调用updateBook为txtBSDesc文本控件所做的绑定则监控了属性链：book实例和name属性。这意味着，当book实例发生变化时（用户点击“创建新书”按钮后，就会创建新的book实例），txtBPDesc会失去对新的实例的监控，其显示不会进行更新。而txtBSDesc则仍然会监控新的book实例，并相应得更新数据。在本例的图13-4中，也可以看到txtBPDesc文本控件并没有显示新的书名。 5. 数据表格控件books的dataProvider属性与acBooks数据集合绑定。 6. 用户点击“创建新书”按钮后，book实例被加入到数据集合acBooks中，其结果自动地更新到DataGrid控件books上。在创建新的book实例前（book=new Book()），须要解除当前book实例与文本输入框的绑定，之后为新的book实例重新设定绑定关系。读者可以尝试注释newBook()方法中的unWatch代码行及bindProperty代码，重新运行应用，点击“创建新书”按钮后，在文本框中输入书名等信息，此时会发现文本输入框绑定的仍然是原有的book实例（该实例已被存入acBooks，显示为数据列表的第一行），同步更新的是数据列表的第一行。而当再次点击按钮，添加第二本新书时，新的book实例并没有获取文本框输入的信息，由此添加进来的是空的book实例。图13-6显示了修改代码后，应用运行的结果。 图13-6 错误的代码运行结果 13.4 关键的数据集合类 Flex应用处理数据离不开数据集合类。Flex赋予了数据集合类非凡的能力和重大的责任。许多Flex组件都是数据驱动的组件，例如DataGrid、ButtonBar、ComboBox，无一例外的依赖数据集合类提供数据。常用的数据集合类包括ArrayCollection类和XMLListCollection类。本节将介绍数据集合类的共同特点，以及如何使用ArrayCollection类。 13.4.1 数据集合类介绍 数据集合类通常用作Flex数据驱动组件和原始数据对象之间的数据处理层，通过实现IList和ICollectionView接口提供了访问和操纵数据的统一方法。数据集合类依赖数组和XMLList对象提供原始数据，但在对其包装之后，其具有了更丰富的数据处理能力。 ArrayCollection和XMLListCollection类都继承自mx.collections.ListCollection- View。ListCollectionView实现了IList和ICollectionView接口。从IList和ICollectionView接口，我们能够看到数据集合类支持哪些特别的数据处理能力。 mx.collection.IList接口 与ICollectionView接口相比，IList相对简单。IList接口代表了按顺序组织的项目的集合，实现该接口的类提供了对集合项目元素基于索引的访问和处理方法。 IList接口的方法很好地展现了实现该接口类的能力，见表13-1。 表13-1 mx.collection.IList接口的方法（引自ActionScript3.0 Language Reference） 方法签名描述addItem(item:Object):void向列表末尾添加指定项目addItemAt(item:Object, index:int):void在指定的索引处添加项目getItemAt(index:int, prefetch:int= 0):Object获取指定索引处的项目getItemIndex(item:Object):int如果项目位于列表中（此时getItemAt(index) == item），则返回该项目的索引itemUpdated(item:Object, property:Object= null,oldValue:Object= null, newValue:Object= null):void通知视图，某个项目已更新removeAll():void删除列表中的所有项目 续表 方法签名描述removeItemAt(index:int):Object删除指定索引处的项目并返回该项目setItemAt(item:Object, index:int):Object在指定的索引处放置项目toArray():Array返回与 IList 实现的填充顺序相同的Array 实现IList接口的类能够对集合中的项目元素进行添加、删除和获取操作，这些操作会直接作用到原始数据上。IList没有提供数据排序、筛选及游标操作等高级功能。 mx.collection.ICollectionView接口 ICollectionView是数据集合的视图，可以修改该视图以显示根据各种条件排序的数据，或显示在不修改基本数据的情况下经过筛选后的数据。实现ICollectionView接口的类能够对数据集合进行排序和过滤等操作，这些操作不会改变原始数据。 实现ICollectionView接口的类通过属性接口，允许开发者定义过滤方法和排序类操纵数据集合，见表13-2。 表13-2 mx.collection.ICollectionView接口的公共属性（引自ActionScript3.0 Language Reference） 属性描述filterFunction:Function视图用来消除不符合函数条件的项目的函数length:int此视图中的项目数 sort:Sort将应用于 ICollectionView 的排序 实现ICollectionView接口的类也提供了创建游标的方法，游标提供了对数据集合进行查找、搜索和标记书签的功能，还提供修改方法实现插入和删除。这些操作也会作用到原始数据上，并即时反映到由该集合类驱动的Flex可视化组件上，见表13-3。 表13-3 mx.collection.ICollectionView接口的公共方法（引自ActionScript3.0 Language Reference） 方法签名描述contains(item:Object):Boolean返回指示视图是否包含指定对象的信息createCursor():IViewCursor创建使用此视图的新 IViewCursordisableAutoUpdate():void防止视图调度对集合本身和集合中的项目的更改enableAutoUpdate():void启用自动更新 续表 方法签名描述itemUpdated(item:Object, property:Object = null,oldValue:Object = null, newValue:Object = null):void通知视图，某个项目已更新refresh():Boolean将排序和滤镜应用到视图 13.4.2 集合类在数据绑定中的应用 Flex时刻监控集合类数据的变化，它能够及时更新这些集合类数据驱动的组件。当对数组类型数据源进行数据绑定时，要使用集合类对象，而不是Array或XMLList类型对象。当通过IList和ICollectionView接口方法操作集合类对象（例如ListCollectionView 、ArrayCollection或XMLListCollection）时，数据的更新会即时地调度PropertyChanged事件，触发数据绑定，如代码13-12所示。 代码13-12：数组类型数据绑定 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.collections.*; [Bindable] private var arrBooks:Array = new Array("ActionScrip基础", "追风筝的 人", "神秘河"); [Bindable] private var acBooks:ArrayCollection=new ArrayCollection(arrBooks); private var myCursor:IViewCursor; private function updateData():void{ arrBooks[2]="数字城堡"; //在数组对象上的更新，无法即时触发数据绑定， 更新List组件 } private function removeData():void{ arrList.dataProvider.removeItemAt(0); //删除了"神秘河" acBooks.removeItemAt(0); //删除了"追风筝的人" } ]]> </mx:Script> <mx:HBox> <mx:List id="arrList" dataProvider="{arrBooks}"/> <mx:List id="acList" dataProvider="{acBooks}"/> </mx:HBox> <mx:Label text="arrBooks长度={arrList.dataProvider.length}, acBooks长度 ={acBooks.length}"/> <mx:HBox> <mx:Button id="button1" label="更新列表" click="updateData()"/> <mx:Button id="button2" label="删除数据" click="removeData()"/> </mx:HBox></mx:Application> 在上面例子中，第一个List组件arrList使用了数组arrBooks作为绑定数据源。此时，Flex会自动将arrBooks数组包装为ArrayCollction类。第二个List组件acList使用了ArrayCollection对象acBooks作为绑定数据源，其包装了数组arrBooks。 “更新列表”按钮调用了updateData()方法，该方法直接更新了arrBooks数组的第三个元素。但更新完毕后，List组件并没有发生变化。也就是说数据绑定没有触发。 图13-7显示了点击“更新列表”按钮后的显示。 图13-7 更新列表后的显示 此时，点击“删除数据”，调用removeData()方法。该方法分别调用了arrList.dataProvider和acBooks的removeItemAt(0)方法。arrList.dataProvider代表了封装arrBooks的ArrayCollection类对象。此时，两行代码分别删除了数组当前的第一个元素，并触发了数据绑定。updateData()方法中对数组的更新也同时显示在List组件上，删除数据后的显示如图13-8所示。 图13-8 删除数据后的显示 13.5 理解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如果将光标定位于视图中最后一个项目之后，则此属性为 truebeforeFirst:Boolean如果将光标定位于视图中第一个项目之前，此属性为 truebookmark: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> 图13-12 ArrayCollection游标查找样例应用