Flex的Array和ArrayCollection

最新推荐文章于 2014-01-28 10:00:46 发布

2020好嗨哟

最新推荐文章于 2014-01-28 10:00:46 发布

阅读量745

点赞数

分类专栏： Flex

Flex 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.array作为控件使用
FLEX3写法：
<mx:Array id="barname">
<mx:String>Flash</mx:String>
<mx:String>Director</mx:String>
<mx:String>Dreamweaver</mx:String>
<mx:String>ColdFusion</mx:String>
</mx:Array>
FLEX4写法：
<fx:Array id="barname">
<fx:String>Flex</fx:String>
<fx:String>Flash</fx:String>
<fx:String>Dreamweaver</fx:String>
</fx:Array>
举例
<mx:LinkBar id="navigationBar" dataProvider="{barname}"/>
<mx:LinkBar id="navigationBar" dataProvider="barname"/>
注：写{}，则当barname数据的值修改后，linkbar的数据同步更新
2.array在程序中使用
[Bindable]
public var barname:Array=["Flex","Flash","Dreamweaver"];
<mx:LinkBar id="navigationBar" dataProvider="{barname}"/>
var barname:Array = new Array();
barname.push("Flex");
barname.push("Flash");
barname.push("Dreamweaver");
navigationBar.dataProvider = barname;
3.array的排序
private var temp:Array = new Array(1,4,3,45,4,6,7,77,9);
function sortArray(numbers:Array):Array{
numbers.sort(Array.NUMERIC);
return numbers;
}
4.ArrayCollection特点
ArrayCollection是flex中的数组集合类，它是很常用的，我们使用它时需要注意几个地方
(1)事件监听
ArrayCollection可以为它注册一个集合改变的监听事件(CollectionEvent.COLLECTION_CHANGE)，就是一旦 ArrayCollection数组改变就会触发Event，不是所有情况的改变都会触发改变事件，如果集合当中的对象属性没有被绑定，那么你改变它的对象值也是不会触发事件的，在这种情况下你也许可能需要去将对象的属性进行绑定或者通过itemUpdated方法去管理对象值改变,除非集合的长度改变了,事件才会被触发。

举例：

[Bindable]
            private var arr:ArrayCollection = new ArrayCollection([
                {nick:"刻意过活",age:23,sex:"男"},
                {nick:"ken",age:23,sex:"男"},
                {nick:"大佬",age:23,sex:"女"},
                {nick:"凌乱子",age:23,sex:"女"},
                {nick:"暗之幻影",age:23,sex:"女"},
            ]);

            private function arrchange(event:CollectionEvent ):void{
                Alert.show("arr数据更改");
            }

            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                arr.addEventListener(CollectionEvent.COLLECTION_CHANGE,arrchange);

            }

<s:DataGrid x="298" y="184" width="309" height="161" dataProvider="{arr}" editable="true"
                requestedRowCount="4">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="nick" headerText="列 1"></s:GridColumn>
                <s:GridColumn dataField="age" headerText="列 2"></s:GridColumn>
                <s:GridColumn dataField="sex" headerText="列 3"></s:GridColumn>
            </s:ArrayList>
        </s:columns>

</s:DataGrid>

(2)对象删除
ArrayCollection的对象删除方法removeAll()，有这样一种情况，当你在过滤集合数据的时候，它并不会删除所有数据，而是删除全部过滤的数据，不符合过滤条件的数据就没被删除，依然还在source中。
(3)过滤函数
ArrayCollection有个filterFunction过滤函数，就是可能集合中你只需要显示其中某几个对象，你将会需要根据对象条件筛选对象，那么你可能会用过滤函数，过滤函数会将不符合条件的对象过滤出来，但是ArrayCollection有个source属性是不会变的，它是个数组，所有源数据全在里面，尽管你去过滤，所有对象都会一直存在其中。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml%22
                layout="vertical"
                verticalAlign="middle"
                backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridColumn;

            private function toggleFilter():void {
                if (checkBox.selected) {
                    arrColl.filterFunction = processFilter;
                } else {
                    arrColl.filterFunction = null;
                }
                arrColl.refresh();
            }

            private function processFilter(item:Object):Boolean {
                return parseFloat(item.value) == 0;
            }

            private function value_labelFunc(item:Object, col:DataGridColumn):String {
                return item[col.dataField].toFixed(2);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object name="ColdFusion" value="0.00" />
                <mx:Object name="Dreamweaver" value="0.12" />
                <mx:Object name="Fireworks" value="1.01" />
                <mx:Object name="Flash" value="0" />
                <mx:Object name="Flash Player" value="-0.00" />
                <mx:Object name="Flex" value="0.00" />
                <mx:Object name="Illustrator" value="2.92" />
                <mx:Object name="Lightroom" value="0.32" />
                <mx:Object name="Photoshop" value="0.06" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:Panel status="{arrColl.length}/{arrColl.source.length} item(s)">
        <mx:DataGrid id="dataGrid"
                     dataProvider="{arrColl}"
                     verticalScrollPolicy="on">
            <mx:columns>
                <mx:DataGridColumn dataField="name" />
                <mx:DataGridColumn dataField="value"
                                   labelFunction="value_labelFunc" />
            </mx:columns>
        </mx:DataGrid>
        <mx:ControlBar>
            <mx:CheckBox id="checkBox"
                         label="Filter DataGrid"
                         click="toggleFilter();" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

[mx.collections.ListCollectionView.filterFunction(f:Function):void

视图用来消除不符合函数条件的项目的函数。FilterFunction 应具有以下签名：

f(item:Object):Boolean

如果指定的项目应保留在视图中，则返回值为 true。

如果滤镜是不支持的滤镜，则在访问此属性时 Flex 会引发错误。必须在设置 filterFunction 属性后调用 refresh() 以更新视图。

注意：ICollectionView 的 Flex 实现将先检索远程位置的所有项目，然后再执行 filter 函数。如果使用分页，请在检索数据之前将该滤镜应用到远程集合。

此属性可用作数据绑定的源代码。]

[mx.controls.dataGridClasses.DataGridColumn.labelFunction(value:Function):void

这是一个用来确定表格中的列如何显示本的函数。 默认情况下，列显示与列名称匹配的数据字段的文本。不过，有时您希望显示基于多个数据字段的文本，或显示不具备自己想要格式的文本。在这种情况下，可使用labelFunction 指定一个回调函数。

对于 DataGrid 控件，方法签名具有以下格式：

labelFunction(item:Object, column:DataGridColumn):String

其中，item 包含 DataGrid 项目对象，并且 column 指定 DataGrid 列。

回调函数可能会连接数据中的 firstName 和 lastName 字段，或者对 Date 设置某些自定义格式，也可能将月的数字形式转换为字符串形式。

此属性可用作数据绑定的源代码。]

(4)排序
ArrayCollection还有一个sort属性是用来排序的，你可以为其指定排序字段

[mx.collections.Sort从 Flex 4.5 开始，Adobe 建议您使用 spark.collections.Sort 类作为此类的替代。

提供在现有视图上建立排序所需的排序信息（ICollectionView 接口或实现此接口的类）。将 Sort 实例分配给视图的 sort 属性后，必须调用该视图的refresh() 方法才能应用此排序标准。通常，这种排序是针对包含复杂项目的集合定义的，这样的集合是指那些对其中的对象的一个或多个属性执行排序的集合。以下示例显示了这种用法： var col:ICollectionView = new ArrayCollection(); // In the real world, the collection would have more than one item. col.addItem({first:"Anders", last:"Dickerson"}); // Create the Sort instance. var sort:Sort = new Sort(); // Set the sort field; sort on the last name first, first name second. // Both fields are case-insensitive. sort.fields = [new SortField("last",true), new SortField("first",true)]; // Assign the Sort object to the view. col.sort = sort; // Apply the sort to the collection. col.refresh();

也有集合中包含简单项目（如 String、Date 和 Boolean 等）的情形。在这种情况下，可直接对简单类型应用排序。在构造简单项目的排序时，请使用一个排序字段，并在 SortField 对象构造函数中指定 null name（第一个）参数。例如： var col:ICollectionView = new ArrayCollection(); col.addItem("California"); col.addItem("Arizona"); var sort:Sort = new Sort(); // There is only one sort field, so use a null // first parameter. sort.fields = [new SortField(null, true)]; col.sort = sort; col.refresh();

ICollectionView 接口的 Flex 实现将先检索远程位置的所有项目，然后再执行排序。如果要对排序后的列表使用分页，请在检索数据之前对远程集合应用排序。

默认情况下，此 Sort 类不会提供正确的特定于语言的字符串排序。对于这种类型的排序，请参阅 spark.collections.Sort 和 spark.collections.SortField类。]

        protected function button1_clickHandler(event:MouseEvent):void
            {
                var sortarrColl:Sort=new Sort();
                 sortarrColl.fields=[new SortField("value"),new SortField("name")];
                arrColl.sort=sortarrColl;
                arrColl.refresh();
            }

5.ArrayCollection在程序中使用
(1)插入或删除
import mx.collections.ArrayCollection;
private var coll:ArrayCollection;
coll = new ArrayCollection(
[{name:"Martin Foo", age:25},
{name:"Joe Bar", age:15},
{name:"John Baz", age:23}]);
}
要插入元素，可使用addItemAt和addItem：
coll.addItemAt({name:"James Fez", age:40}, 0);
coll.addItem({name:"James Fez", age:40});
(2)搜索
Sort 对象提供findItem 方法用于搜索这个ArrayCollection 中的所有元素。
方法原型如下：
public function findItem(items:Array, values:Object, mode:String,
returnInsertionIndex:Boolean = false, compareFunction:Function = null):int
Value 参数可以是包含属性和所需值的任何对象。
Mode 字符串可以是Sort.ANY_INDEX_MODE，表示返回任何匹配项索引，Sort.FIRST_INDEX_MODE 表示返回第一个匹配项索引，Sort.LAST_INDEX_MODE 表示返回最后一个匹配项索引。
returnInsertionIndex 参数表示如果该方法找不到由values 参数标识的项目，并且此参数为
true，则findItem() 方法将返回这些值的插入点，也就是排序顺序中应插入此项目的。
compareFunction 设置用于查找该项目的比较运算符函数.
举例
private function checkExistence():int {
var sort:Sort = new Sort();
return sort.findItem(coll.source,{name:nameTI.text, age:Number(ageTI.text)}, Sort.ANY_INDEX_MODE);
}
(3)过滤
filterFunction 属性是由ListCollectionView 类定义，它是ArrayCollection 的父类。
当过滤器函数被传递给继承自ListCollectionView 的任何子类后，这里为ArrayCollection 对象，应用过滤器后必须调用refresh 方法
将原型为function(item:Object):Boolean 的函数传递给ArrayCollection 的filter 属性。如果返回true 表示值继续留在ArrayCollection，返回false 表示其值被移除。
举例：
private function init():void {
coll = new ArrayCollection([{name:"Martin Foo", age:25},{name:"Joe Bar", age:15},name:"John Baz", age:23},{name:"Matt Baz", age:21}]);
coll.filterFunction = filterFunc;
coll.refresh();
for(var i:int = 0; i<coll.length; i++) {
trace(coll.getItemAt(i).name);
}
}
private function filterFunc(value:Object):Object {
if(Number(value.age) > 21) {
return true;
}
return false;
}
(4)排序
首先要创建一个Sort，传递一个SortField 对象数组给fields 属性。这些SortField 对象包含的字符串正是每个ArrayCollection 元素将要用来排序的属性。如要对每个对象的age 属性进行排序，创建Sort 对象，传递SortField。
设置排序字段为age：
private function getOldest():void {
var sort:Sort = new Sort();
sort.fields = [new SortField("age")];
coll.sort = sort;
coll.refresh();
trace(coll.getItemAt(0).age+" "+coll.getItemAt(0).name);
}
先按name升序排序，再按age降序排序
sort.fields = [new SortField("name"),new SortField("age",true,true)];
API说明：
public function SortField(
name:String = null,
caseInsensitive:Boolean = false,
descending:Boolean = false,
numeric:Object = null)
参数
name:String (default = null) — 此字段用来进行比较的属性的名称。如果该对象为简单类型，则传递 null。
caseInsensitive:Boolean (default = false) — 在对字符串进行排序时，指示比较运算符是否忽略值的大小写。
descending:Boolean (default = false) — 指示比较运算符是否按降序排列项目。
numeric:Object (default = null) — 指示比较运算符是否按编号而不按字母顺序比较排序项目。
6.Array和ArrayCollection的比较
Array的优点：
1)Array的性能优于ArrayCollection，从测试结果平均看来，ArrayCollection的效率是随着object的数目呈线性下降的，而Array则是体现了优异的效率，在object增加的情况下，基本上没有太大的变化。所以如果在你需要遍历所有元素的情况下(比如说物理引擎，3D引擎等)，Array是不错的选择
程序见附件1.
2)后台JavaBean也用的是数组[]
3)for循环数组似乎比for each ArrayConllection看起来更“傻瓜化”
4)给Array数组扩展长度，也可以变通实现，而且代价并不大
ArrayCollection的优点：
1)ArrayCollection 实现接口 ICollectionView，在 Flex 的类定义内属于[数据集]，他提供更强大的检索、过滤、排序、分类、更新监控等功能。类似的类还有 XMLListCollection
2)用 array 在作为 dataProvider 绑定于 control 之上，就无法获得控件的更新(实际上效果是可以得到更新的)，除非控件被重新绘制或者 data provider 被重新指定，而 Collection 则是将 array 的副本存储于 Collection 类的某个对象之中，其特点是 Collection 类本身就具备了确保数据同步的方法，例子如下（取自 adobe 内部工程师 training 示例，稍有改变）
3)对ArrayCollection中的对象进行增加删除更新操作时ArrayCollection会产生事件，可以通过collectionchange事件监听，所以在图表开发中都用ArrayCollection做数据源，一旦有更新，就会反映在图标上
附件1：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" frameRate="100" layout="vertical" horizontalAlign="center">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var ds:ArrayCollection;
private var array:Array;
private var ac:ArrayCollection;
public function loop(loopCount:uint):Object
{
array = null;
ac = null;
var begin:uint;
var end:uint;
var interval1:Number = 0;
var interval2:Number = 0;
var interval3:Number = 0;
var interval4:Number = 0;
var i:uint;
// for array, insert to array
i=0;
array= new Array();
begin = getTimer();
for (i;i<loopCount;i++)
{
array.push({test:"helllo"});
}
end = getTimer();
interval1 = end - begin;
t1.text = interval1.toString()+" ms";
//loop the array
i=0;
begin = getTimer();
for (i;i<array.length;i++)
{
array[i];
}
end = getTimer();
interval3 = end - begin;
t3.text = interval3.toString()+" ms";
/// for ac, insert to array collection
i=0;
ac= new ArrayCollection();
begin = getTimer();
for (i;i<loopCount;i++)
{
ac.addItem({test:"helllo"});
}
end = getTimer();
interval2 = end - begin;
t2.text = interval2.toString()+ " ms";
//loop the array collection
i=0;
begin = getTimer();
for (i;i<ac.length;i++)
{
ac.getItemAt(i);
}
end = getTimer();
interval4 = end - begin;
t4.text = interval4.toString()+ " ms";
return {ct:loopCount,
array_insert:interval1,
ac_insert:interval2,
array_loop:interval3,
ac_loop:interval4
};
}
private function autoLoop():void
{
ds=null;
ds = new ArrayCollection();
var i:uint=0;
for (i;i<parseInt(count.text);i+=parseInt(count.text)>100?parseInt(count.text)/10:1)
{
ds.addItem(loop(i));
}
}
public function reset():void
{
t1.text ="0";
t2.text ="0";
t3.text = "0";
t4.text = "0";
count.text = "1000";
ds=null;
ds = new ArrayCollection();
}
]]>
</mx:Script>
<mx:ApplicationControlBar width="503">
<mx:Label text="插入条数：" fontSize="12" color="#0B333C" fontWeight="bold"/>
<mx:TextInput width="98" text="1000" id="count"/>
<mx:Button id="startBtn0" label="Test" click="autoLoop()"/>
<mx:VRule height="15"/>
<mx:Button label="reset" click="reset()"/>
</mx:ApplicationControlBar>
<mx:Panel width="500" height="480" layout="horizontal" id="testBed" title="Array 与Array Collection的性能比较" fontSize="11" fontWeight="normal">
<mx:Canvas width="100%" height="100%" id="main" borderStyle="none" autoLayout="false" horizontalScrollPolicy="off" fontSize="10">
<mx:LineChart id="lc" x="8.5" y="133" width="463" height="306" showDataTips="true" dataProvider="{ds}" >
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{ds}" categoryField="ct" title="插入Object数目"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis id="la" minimum="-1" title="响应时间（毫秒）"/>
</mx:verticalAxis>
<mx:series>
<mx:LineSeries displayName="array 插入耗时" yField="array_insert" />
<mx:LineSeries displayName="arraycollection 插入耗时" yField="ac_insert"/>
<mx:LineSeries displayName="array 遍历耗时" yField="array_loop"/>
<mx:LineSeries displayName="arraycollection 遍历耗时" yField="ac_loop"/>
</mx:series>
</mx:LineChart>
<mx:HBox x="10" y="0" width="460" height="134" horizontalAlign="left" verticalAlign="middle">
<mx:Grid horizontalGap="1" borderThickness="1" borderColor="#C6C6C6" borderStyle="solid">
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="86" height="100%">
<mx:Label text="毫秒(ms)" fontSize="12"/>
</mx:GridItem>
<mx:GridItem width="100%" height="100%" fontSize="12">
<mx:Label text="Array"/>
</mx:GridItem>
<mx:GridItem width="100%" height="100%" fontSize="12">
<mx:Label text="ArrayCollection"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="66" height="100%">
<mx:Label text="插入耗时" fontSize="12"/>
</mx:GridItem>
<mx:GridItem width="100%" height="100%">
<mx:Text text="0" width="80" id="t1" fontSize="12"/>
</mx:GridItem>
<mx:GridItem width="100%" height="100%">
<mx:Text text="0" id="t2" width="80" fontSize="12"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="100%" height="100%">
<mx:Label text="遍历耗时" fontSize="12"/>
</mx:GridItem>
<mx:GridItem width="100%" height="100%" fontSize="12">
<mx:Text text="0" width="80" id="t3"/>
</mx:GridItem>
<mx:GridItem width="100%" height="100%">
<mx:Text text="0" id="t4" width="80" fontSize="12"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
<mx:VRule height="73" width="3"/>
<mx:Legend dataProvider="{lc}" width="100%" direction="vertical" fontSize="9" verticalGap="2" fontWeight="normal" fontStyle="normal" fontFamily="Verdana"/>
</mx:HBox>
</mx:Canvas>
</mx:Panel>
<mx:LinkButton label="beherca" click="navigateToURL(new URLRequest('http://blog.beherca.com'),'_blank')"/>
</mx:Application>
参考文献：
1.TonyLian. Array 和 ArrayCollection 区别. http://tonylian.javaeye.com/blog/288964
2.凯文. Array 和ArrayCollection的性能比较. http://blog.beherca.com/logs/45628162.html
3.xldbk. Flex ArrayCollection几点注意. http://xldbk.javaeye.com/blog/265064
4.Callan. Flex 集合(ArrayCollection). http://callan.javaeye.com/blog/335551
5.hugo. Flex的ArrayCollection与Array的排序. http://www.hugo8.com/article.asp?id=744

***************************************

7.使用游标

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;