`

Flex的Array和ArrayCollection总结

    博客分类:
  • flex
阅读更多

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"/> 
   注:写{},则当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方法去管理对象值改变,除非集合的长度改变了,事件才会被触发 
(2)对象删除 
    ArrayCollection的对象删除方法removeAll(),有这样一种情况,当你在过滤集合数据的时候,它并不会删除所有数据,而是删除全部过滤的数据,不符合过滤条件的数据就没被删除,依然还在source中 
(3)过滤函数 
    ArrayCollection有个filterFunction过滤函数,就是可能集合中你只需要显示其中某几个对象,你将会需要根据对象条件筛选对象,那么你可能会用过滤函数,过滤函数会将不符合条件的对象过滤出来,但是ArrayCollection有个source属性是不会变的,它是个数组,所有源数据全在里面,尽管你去过滤,所有对象都会一直存在其中 
(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 参数可以是包含属性和所需值的任何对象。 
   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> 

分享到:
评论

相关推荐

    Flex的Array和ArrayCollection

    Flex的Array和ArrayCollection

    Flex:ArrayCollection转xml形式的实例

    ArrayCollection是基于Array的,但提供了对数据的更高级别的访问,如排序和过滤功能。在某些情况下,我们需要将ArrayCollection转换为XML格式,以便于数据交换或存储。本实例将详细介绍如何实现这一转换。 首先,...

    ArrayCollection求最大值,最小值,排序

    在IT行业中,ArrayCollection是ActionScript 3.0和Flex框架中的一个重要数据结构,它扩展了Array类,提供了对数据的双向绑定和事件通知功能。ArrayCollection不仅支持数组的操作,还具备列表的数据管理特性,因此在...

    Flex中Tree组件的数据源举例(xml,array,object)

    本篇将详细介绍如何为Flex中的Tree组件设置不同的数据源,包括XML、Array和Object。 首先,让我们从XML数据源开始。XML因其结构化的特性,非常适合用来表示层次数据。在Flex中,我们可以使用mx.collections....

    ArrayCollection不完全绑定

    在Flex编程中,ArrayCollection是一种常用的集合类,它继承自Array类并添加了对数据绑定的支持。然而,尽管ArrayCollection通常被用作数据绑定的主要工具,但在特定情况下,可能会遇到“ArrayCollection不完全绑定”...

    flex 经典教程下载

    Flex 是一种用于构建富互联网应用程序(RIA)的框架,它主要基于Adobe的ActionScript编程语言和MXML标记语言。在本教程中,我们将深入探讨Flex的基础知识,包括设计视图和源视图的使用,以及如何创建动态效果、处理...

    Sample-Flex4-TabBar

    总结,Flex4的TabBar组件为开发者提供了强大的选项卡式界面设计工具,结合“Sample-Flex4-TabBar”示例,我们可以深入了解其工作原理和使用技巧,进一步提升Flex应用的用户体验。在实际开发中,应根据项目需求,充分...

    flex实现数据表格。

    1. **数据绑定**:Datagrid可以直接与数据提供者进行绑定,数据提供者可以是Array、ArrayCollection或其他支持ICollectionView接口的数据源。这意味着你可以动态地更新数据源,Datagrid会自动反映这些更改。 2. **...

    Flex类图和与Java交互时类型转换对照.rar

    Flex是Adobe开发的一种开源框架,主要用于构建富互联网应用程序(RIA),它基于ActionScript和MXML。在Flex应用程序中,我们通常使用AMF(Action Message Format)作为数据交换格式,这使得Flex可以与后端服务器(如...

    Flex类图和与Java交互时类型转换对照

    - `Array`:Flex中的数组对应Java的`ArrayList`或`Array`,但在AMF中,它会被序列化为`java.util.ArrayList`。 - `Object`:在AS3中,动态对象可以映射到Java的`Map`或自定义类,具体取决于字段结构。 3. **日期...

    flex Chart

    1. **数据绑定**:Flex Chart组件的数据源可以是XML、Array、ArrayCollection或其他可迭代对象,通过数据绑定机制将数据映射到图表上。 2. **Chart类型**:除了柱状图,Flex Chart还包括线性图(LineChart)、饼图...

    FLEX ArrayCollection删除过滤的数据问题解决

    在Flex开发中,ArrayCollection是一种常用的集合类,它继承自Array并添加了对数据绑定和事件处理的支持。然而,当ArrayCollection应用了过滤器后,直接使用`removeItemAt()`方法尝试删除过滤后的数据可能会遇到问题...

    看完Flex就可以做出一个小游戏

    - **Array 和 ArrayCollection**:Array 是基本的数组类型,ArrayCollection 是它的动态版本,支持数据绑定。 9. **HTTP 请求**: - **HttpService**:用于向远程服务器发送 HTTP 请求,通过 `url` 指定请求地址...

    flex android开发学习好实例

    在我们的例子中,可能的数据源可以是XML、Array或ArrayCollection。 下面是一段简单的Flex代码,展示了如何创建一个基本的List控件: ```actionscript &lt;![CDATA[ import mx.collections.ArrayCollection; ...

    flex导入excel2007版本以上并支持日期格式的类库Rxlsx

    //fr.data为flex加载excel的byte数组 var sheet:Array = excel.getSheetArray();//得到表格数据,为Array格式 var datasource:ArrayCollection = new ArrayCollection(sheet); //可转换为ArrayCollection,用于表格...

    FLEX的datagrid合计、平均值

    在Flex开发中,Datagrid组件是用于展示数据集的一个强大工具,它允许用户以表格的形式查看和操作数据。本文将深入探讨如何在Flex的Datagrid中实现数据的合计与平均值计算,帮助开发者更好地理解和应用这些功能。 ...

    Adobe Flex 编码规范

    - 使用ArrayCollection而非Array,因为ArrayCollection提供了更高效的遍历和绑定支持。 - 对于大量数据,考虑使用数据虚拟化技术,只加载可视区域的数据。 10. **版本控制**: - 使用版本控制系统(如Git)进行...

    flex 分页学习例子

    1. **数据集(Data Provider)**:分页的基础是数据集,它可以是Array、ArrayCollection或其他支持数据绑定的数据源。数据集应包含所有要显示的数据,并负责管理分页逻辑。 2. **Pagination组件**:Flex并没有内置...

    flex------组件-----数据可视化

    可以使用Array、XML、ArrayCollection或任何实现了IList接口的对象作为数据源。通过设置数据提供者,图表会自动更新以反映数据的变化。 3. **States和Effects**:Flex支持状态管理,允许你在不同场景下改变图表的...

    FLEX datagrid应用实例

    DataGrid可以与各种数据源绑定,包括Array、ArrayCollection、XMLList等,也可以通过数据提供者机制连接到更复杂的后端服务。 二、DataGrid的基本使用 创建一个基本的DataGrid涉及以下几个步骤: 1. 导入必要的库:...

Global site tag (gtag.js) - Google Analytics