Flex的Array和ArrayCollection
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"/>
?? 注:寫{},則當(dāng)barname數(shù)據(jù)的值修改后,linkbar的數(shù)據(jù)同步更新
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中的數(shù)組集合類,它是很常用的,我們使用它時需要注意幾個地方
(1)事件監(jiān)聽
??? ArrayCollection可以為它注冊一個集合改變的監(jiān)聽事件(CollectionEvent.COLLECTION_CHANGE),就是一旦 ArrayCollection數(shù)組改變就會觸發(fā)Event,不是所有情況的改變都會觸發(fā)改變事件,如果集合當(dāng)中的對象屬性沒有被綁定,那么你改變它的對象值也是不會觸發(fā)事件的,在這種情況下你也許可能需要去將對象的屬性進(jìn)行綁定或者通過itemUpdated方法去管理對象值改變,除非集合的長度改變了,事件才會被觸發(fā)
(2)對象刪除
??? ArrayCollection的對象刪除方法removeAll(),有這樣一種情況,當(dāng)你在過濾集合數(shù)據(jù)的時候,它并不會刪除所有數(shù)據(jù),而是刪除全部過濾的數(shù)據(jù),不符合過濾條件的數(shù)據(jù)就沒被刪除,依然還在source中
(3)過濾函數(shù)
??? ArrayCollection有個filterFunction過濾函數(shù),就是可能集合中你只需要顯示其中某幾個對象,你將會需要根據(jù)對象條件篩選對象,那么你可能會用過濾函數(shù),過濾函數(shù)會將不符合條件的對象過濾出來,但是ArrayCollection有個source屬性是不會變的,它是個數(shù)組,所有源數(shù)據(jù)全在里面,盡管你去過濾,所有對象都會一直存在其中
(4)排序
??? ArrayCollection還有一個sort屬性是用來排序的,你可以為其指定排序字段
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 參數(shù)可以是包含屬性和所需值的任何對象。
?? Mode 字符串可以是Sort.ANY_INDEX_MODE,表示返回任何匹配項索引,Sort.FIRST_INDEX_MODE 表示返回第一個匹配項索引,Sort.LAST_INDEX_MODE 表示返回最后一個匹配項索引。
?? returnInsertionIndex 參數(shù)表示如果該方法找不到由values 參數(shù)標(biāo)識的項目,并且此參數(shù)為
true,則findItem() 方法將返回這些值的插入點,也就是排序順序中應(yīng)插入此項目的。
?? compareFunction 設(shè)置用于查找該項目的比較運算符函數(shù).
舉例
?? 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 的父類。
?? 當(dāng)過濾器函數(shù)被傳遞給繼承自ListCollectionView 的任何子類后,這里為ArrayCollection 對象,應(yīng)用過濾器后必須調(diào)用refresh 方法
?? 將原型為function(item:Object):Boolean 的函數(shù)傳遞給ArrayCollection 的filter 屬性。如果返回true 表示值繼續(xù)留在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)排序
?? 首先要創(chuàng)建一個Sort,傳遞一個SortField 對象數(shù)組給fields 屬性。這些SortField 對象包含的字符串正是每個ArrayCollection 元素將要用來排序的屬性。如要對每個對象的age 屬性進(jìn)行排序,創(chuàng)建Sort 對象,傳遞SortField。
??? 設(shè)置排序字段為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)
參數(shù)?
??? name:String (default = null) — 此字段用來進(jìn)行比較的屬性的名稱。如果該對象為簡單類型,則傳遞 null。
??? caseInsensitive:Boolean (default = false) — 在對字符串進(jìn)行排序時,指示比較運算符是否忽略值的大小寫。
??? descending:Boolean (default = false) — 指示比較運算符是否按降序排列項目。?
??? numeric:Object (default = null) — 指示比較運算符是否按編號而不按字母順序比較排序項目。
6.Array和ArrayCollection的比較
Array的優(yōu)點:
?? 1)Array的性能優(yōu)于ArrayCollection,從測試結(jié)果平均看來,ArrayCollection的效率是隨著object的數(shù)目呈線性下降的,而Array則是體現(xiàn)了優(yōu)異的效率,在object增加的情況下,基本上沒有太大的變化。所以如果在你需要遍歷所有元素的情況下(比如說物理引擎,3D引擎等),Array是不錯的選擇
???? 程序見附件1.
?? 2)后臺JavaBean也用的是數(shù)組[]
?? 3)for循環(huán)數(shù)組似乎比for each? ArrayConllection看起來更“傻瓜化”
?? 4)給Array數(shù)組擴(kuò)展長度,也可以變通實現(xiàn),而且代價并不大
ArrayCollection的優(yōu)點:
?? 1)ArrayCollection 實現(xiàn)接口 ICollectionView,在 Flex 的類定義內(nèi)屬于[數(shù)據(jù)集],他提供更強大的檢索、過濾、排序、分類、更新監(jiān)控等功能。類似的類還有 XMLListCollection
?? 2)用 array 在作為 dataProvider 綁定于 control 之上,就無法獲得控件的更新(實際上效果是可以得到更新的),除非控件被重新繪制或者 data provider 被重新指定,而 Collection 則是將 array 的副本存儲于 Collection 類的某個對象之中,其特點是 Collection 類本身就具備了確保數(shù)據(jù)同步的方法,例子如下(取自 adobe 內(nèi)部工程師 training 示例,稍有改變)
?? 3)對ArrayCollection中的對象進(jìn)行增加刪除更新操作時ArrayCollection會產(chǎn)生事件,可以通過collectionchange事件監(jiān)聽,所以在圖表開發(fā)中都用ArrayCollection做數(shù)據(jù)源,一旦有更新,就會反映在圖標(biāo)上
附件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="插入條數(shù):" 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數(shù)目"/>
??????????????? </mx:horizontalAxis>
??????????????? <mx:verticalAxis>
??????????????????? <mx:LinearAxis id="la" minimum="-1" title="響應(yīng)時間(毫秒)"/>
??????????????? </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>
參考文獻(xiàn):
?? 1.TonyLian. Array 和 ArrayCollection 區(qū)別. 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
原文地址 http://blog.chinaunix.net/u/21752/showart_2086023.html
轉(zhuǎn)載于:https://www.cnblogs.com/jiayuan/archive/2010/01/04/1638806.html
總結(jié)
以上是生活随笔為你收集整理的Flex的Array和ArrayCollection的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: cacheAsBitmap = ‘tru
- 下一篇: 书湿水后怎么处理皱折