第22讲Flex数据集成基础

本文格式为Word版，下载可任意编辑——第22讲Flex数据集成基础

北风网项目培训应用Flex+http://.77技术构建大型网上书店电子商务交易平台全程实录第21讲：Flex数据集成基础-使用集合与数据绑定

讲师：风舞烟

应用1:为ArrayCollection添加，排序和获取数据应用2:过滤ArrayCollection应用3:创立GroupingCollection应用4:遍历集合对象并记录位置应用5:过滤和排序XMLListCollection应用6:对集合的多个字段进行排序应用7:对集合的日期类型数据进行排序应用8:用唯一的IDs标识数据对象

概述应用1:绑定一个属性应用2:绑定到一个函数

应用3:创立一个双向绑定应用4:使用ActionScript来进行数据绑定应用5:链式的属性绑定应用6:使用E4X进行绑定XML的数据应用7:创立特性化可绑定的属性应用8:绑定到一个一般的对象

集合是ActionScript中功能强大的基于索引的数组组件，添加了如对内容进行排序等功能，操作数组的读取位置，创立经过排序的数组视图。集合也能通知其任意事件监听器监听其数据是否改变，以及任何数据项被添加到源数组时可执行自定义规律。当数据改变时可通知其监听器，这是集合的新功能，叫数据绑定，还有就是允许DataGrid和List组件对其内容进行排序和过滤。集合是使用数据驱动控件以及从数据库返回的服务器端服务的重要内容。经常被使用的两个集合类型是ArrayCollection类XMLListCollection类。ArrayCollection是Array的包装类，提供更便利的如添加和移除数据项以及能够创立游标启用要轻松地存储数组中的最终读取的位置等方法。而XMLListCollection是XML对象的包装类，提供的功能有：根据索引访问数据，添加新对象以及游标等方法。XMLListCollection对于处理XML对象以及经常需要解析XML为数组时特别有用。

Demo1.mxml核心代码：importmx.collections.ArrayCollection;importmx.collections.Sort;privatevarcoll:ArrayCollection;privatefunctioninit():void{coll=newArrayCollection([{name:Zhangsan,age:25},{name:lishi,age:15},{name:wangwu,age:23}]);}

privatefunctionaddItem():void{coll.addItemAt({name:zhaoliu,age:40},0);trace(coll);}privatefunctionre

moveItem():void{coll.removeItemAt(0);trace(coll);}

//排序privatefunctionSortByAge(){varsort:Sort=newSort();sort.fields=[newSortField(age,false)];coll.sort=sort;coll.refresh();trace(coll.getItemAt(0).age++coll.getItemAt(0).name);}

应用2:过滤ArrayCollection问题我需要对ArrayCollection数据进行过滤，设置过滤器移除些不匹配的结果。方法J将原型为function(item:Object):Boolean的函数传递给ArrayCollection的filter属性。假使返回true表示值继续留在ArrayCollection,返回false表示其值被移除。说明filterFunction属性是由ListCollectionView类定义，它是ArrayCollection的父类。当过滤器函数被传递给继承自ListCollectionView的任何子类后，这里为ArrayCollection对象，应用过滤器后必需调用refresh方法：

Demo2.mxml核心代码：importmx.collections.ArrayCollection;privatevarcoll:ArrayCollection;privatefunctioninit():void{coll=newArrayCollection([{name:zhang,age:25},{name:lishi,age:15},{name:wang,age:23},{name:zhao,age:21}]);coll.filterFunction=filterFunc;coll.refresh();for(vari:int=0;icoll.length;i++){trace(coll.getItemAt(i).name);}}privatefunctionfilterFunc(value:Object):Object{if(Number(value.age)21){returntrue;}returnfalse;}

应用3:创立GroupingCollection问题我想基于集合中数据项的某个属性创立唯一的分组数据方法传递一个Array参数给GroupingCollection构造器或设置GroupingCollection对象的source属性。对某属性进行分组，首先创立具有一致该属性的所有对象分组，创立Grouping实例，传递GroupingField对象数组给Grouping实例的fields:如：vargroupingInst:Grouping=newGrouping();groupingInst.fields=[newGroupingField(state)];groupingColl.grouping=groupingInst;groupingColl.refresh(false);Grouping实例初始化后，设置GroupingCollection的grouping属性为groupingInst,然后刷新，集合将根据state属性值对集合所有数据进行分组：

Demo3.mxml(核心代码)importmx.collections.Grouping;importmx.collections.GroupingField;importmx.collections.GroupingCollection;[Bindable]privatev

argroupingColl:GroupingCollection;privatefunctioninit():void{groupingColl=newGroupingCollection();groupingColl.source=[{city:Columbus,state:Ohio,region:East},{city:Cleveland,state:Ohio,region:East},{city:Sacramento,state:California,region:West},{city:Atlanta,state:Georgia,region:South}];vargroupingInst:Grouping=newGrouping();groupingInst.fields=[newGroupingField(state)];groupingColl.grouping=groupingInst;groupingColl.refresh(false);}

//设置好GroupingCollection的grouping属性后，设置另外的分组将会覆盖当前分组:privatefunctioncreateRegionGrouping():void{vargroupingInst:Grouping=newGrouping();groupingInst.fields=[newGroupingField(region)];groupingColl.grouping=groupingInst;groupingColl.refresh(false);}]]/fx:Scriptmx:AdvancedDataGriddataProvider={groupingColl}width=50%mx:columnsmx:AdvancedDataGridColumndataField=city//mx:columns/mx:AdvancedDataGrid

应用4:遍历集合对象并记录位置问题:我想双向遍历集合，并保持当前所在位置方法:使用ListViewCollection类的createCursor方法创立可前后移动的游标。说明:可使用视图游标浏览集合数据视图中所有数据项，访问和修改集合数据。游标是一个位置指示器，它执行特定位置的数据项。你可以使用集合的createCursor方法返回一个视图游标。游标的各种方法和属性都由IViewCursor接口定义。通过IViewCursor方法，你可以前后移动游标，用特定条件探寻数据项，获取指定位置的数据项，保存游标所在位置，以及添加，删除或修改数据值。当你使用标准的Flex集合类如ArrayCollection和XMLListCollection时，可直接使用IViewCursor接口，不需要引用对象实例，例如：

IViewCursor接口定义了三个方法用于探寻集合：findFirst(values:Object):Boolean此方法查找集合中具有指定属性的第一个项目，并将光标定位到该项目findLast(values:Object):Boolean此方法查找集合中具有指定属性的最终一个项目，并将光标定位到该项目findAny(values:Object):Boolean此方法查找集合中具有指定属性的项目并将光标定位到该项目，这个是速度最快的方法。注意这三个方法可工作在未排序的ArrayCollection或XMLListCollection。

Demo4.mxml(核心代码)importmx.collections.SortField;importmx.collections.Sort;importmx.collections.IViewCursor;importmx.collections.CursorBookmark;importmx.collections.ArrayCollection;[Bindable]privatevarcoll:ArrayCollection;[Bindable]privatevarcursor:IViewCursor;privatefunctioninit():void{coll=newArrayCollection([{city:Columbus,state:Ohio,reg

ion:East},{city:Cleveland,state:Ohio,region:East},{city:Sacramento,state:California,region:West},{city:Atlanta,state:Georgia,egion:South}]);cursor=coll.createCursor();}

privatefunctionfindRegion():void{varsort:Sort=newSort();sort.fields=[newSortField(region)];coll.sort=sort;coll.refresh();cursor.findFirst({region:regionInput.text});}privatefunctionfindState():void{varsort:Sort=newSort();sort.fields=[newSortField(state)];coll.sort=sort;coll.refresh();cursor.findFirst({region:stateInput.text});}