Flex的Array,ArrayConllection,for each

1.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}"/>

 

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是不错的选择

 

ArrayCollection的优点：
   1)ArrayCollection 实现接口 ICollectionView，在 Flex 的类定义内属于[数据集]，他提供更强大的检索、过滤、排序、分类、更新监控等功能。类似的类还有 XMLListCollection
   2)用 array 在作为 dataProvider 绑定于 control 之上，就无法获得控件的更新(实际上效果是可以得到更新的)，除非控件被重新绘制或者 data provider 被重新指定，而 Collection 则是将 array 的副本存储于 Collection 类的某个对象之中，其特点是 Collection 类本身就具备了确保数据同步的方法，例子如下（取自 adobe 内部工程师 training 示例，稍有改变）
   3)对ArrayCollection中的对象进行增加删除更新操作时ArrayCollection会产生事件，可以通过collectionchange事件监听，所以在图表开发中都用ArrayCollection做数据源，一旦有更新，就会反映在图标上

 

7.深入理解ItemRenderer:

FLEX提供了很多标准可视化控件，但也不是说它们完全能够满足我们富表现层的所有需求。一般情况下FLEX控件都有默认的数据展示方式，比如DataGrid控件它对数据的默认展示是字符串分组列表的方式，但如果需要在某一列根据dataProvider提供的数据展示一幅图片又或更复杂的的元素集合该怎么办呢？这时我们通常要用到itemRenderer属性。itemRenderer提供了开发者按照自己的意愿展示数据的弹性。关于怎么定义itemRenderer，基本上有两种方式，一种是内置定义方式，另一种则是组件自定义方式。说到底itemRenderer是基于当前组件对数据的另一种展示方式，那么这个数据是什么呢？答案就是data变量，每个自定义的Renderer类不管是内置定义方式还是组件自定义方式，开发者都可以直接应用一个名字叫data的Object类型变量，这个变量当我们的Renderer类初始化时被应用自动初始化，任何时刻它都包含数据集中某一个元素的所有信息，可以在形式上理解为data = 组件id.dataProvider.getItemAt(i).

(1)内置定义方式

所谓内置定义方式，就是开发者不必另外定义一个Renderer类，而是采用内置的方式直接在组件内部现场定义Renderer的外观和样式。参考示例，

<?xml version="1.0"?>

<!-- charts/CustomPlotRendererAS.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="912" height="596">

<mx:Script><![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

public var collection:ArrayCollection = new ArrayCollection([

{Month:"January", Profit:2000, selected:true},

{Month:"February", Profit:1000, selected:true},

{Month:"March", Profit:1500, selected:false},

{Month:"April", Profit:500, selected:true},

{Month:"May", Profit:1000, selected:false},

{Month:"June", Profit:2000, selected:true}

]);

]]></mx:Script>

<mx:Panel title="ItemRenderer Demo">

<mx:DataGrid id="grid" width="100%" height="100%" dataProvider="{collection}">

<mx:columns>

<mx:DataGridColumn dataField="Month" headerText="Month"/>

<mx:DataGridColumn dataField="Profit" headerText="Profit"/>

<mx:DataGridColumn dataField="selected" headerText="Select">

<mx:itemRenderer>

<mx:Component>

<mx:CheckBox selected="{data.selected}"/>

</mx:Component>

</mx:itemRenderer>

</mx:DataGridColumn>

</mx:columns>

</mx:DataGrid>

</mx:Panel>

</mx:Application>

注意这段代码

<mx:DataGridColumn dataField="selected" headerText="Select">

<mx:itemRenderer>

<mx:Component>

<mx:CheckBox selected="{data.selected}"/>

</mx:Component>

</mx:itemRenderer>

</mx:DataGridColumn>

这里以内置定义的方法直接在dataField绑定在selected属性的列中用CheckBox展示selected的值而不是true或false的字符串。

(2) 组件自定义方式

如果Renderer的结构有些复杂，那么就最好使用组件自定义方式展示数据了。这种方式比内置定义方式最大的好处是可以在整个应用的范围内重用这个我们自定义的Renderer组件。而内置定义方式是不能做到这一点的。采用这种方式，第一步就是以自定义组件的方式定义Renderer类。如checkBoxRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:CheckBox xmlns:mx="http://www.adobe.com/2006/mxml" selected="{data.selected}" >

</mx:CheckBox>

第二步就是利用组件的itemRenderer的属性设置Renderer的目标对象，如

<?xml version="1.0"?>

<!-- charts/CustomPlotRendererAS.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="912" height="596">

<mx:Script><![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

public var collection:ArrayCollection = new ArrayCollection([

{Month:"January", Profit:2000, selected:true},

{Month:"February", Profit:1000, selected:true},

{Month:"March", Profit:1500, selected:false},

{Month:"April", Profit:500, selected:true},

{Month:"May", Profit:1000, selected:false},

{Month:"June", Profit:2000, selected:true}

]);

]]></mx:Script>

<mx:Panel title="ItemRenderer Demo">

<mx:DataGrid id="grid" width="100%" height="100%" dataProvider="{collection}">

<mx:columns>

<mx:DataGridColumn dataField="Month" headerText="Month"/>

<mx:DataGridColumn dataField="Profit" headerText="Profit"/>

<mx:DataGridColumn dataField="selected" headerText="Select" itemRenderer="CustomBox"/>

</mx:columns>

</mx:DataGrid>

</mx:Panel>

</mx:Application>

8.Event与Bindable:

Event:

1.事件派发 Dispatching

Flash.events.EventDispacher类提供了事件dispatch函数,如果需要dispatch事件,则应该考虑继承该类或其子类.如果不能继承该类,则应实现IEventDispatcher接口 

2.监听事件 Listening to Events

在监听事件时应首先考虑是否要使用weak referenced.如果事件监听与派发与监听函数有共同的生命周期,则可以使用strong referenced,在其他的大部分情况下,则应使用weak referenced.

Bindable的三种实现方式:

1.使用Event实现.

2.MXML中使用大括号实现.

3.AS中使用ChangeWatcher实现.

(1)1.使用Event Bindable:

var person:Person = new Person();   //数据绑定

 person.addEventListener("propertyChange",propertyChangeHandler);  
/**
* 通过对PropertyChangeEvent.property判断是name还是desc被监听,更新屏幕
*/
private function propertyChangeHandler(e:PropertyChangeEvent):void {  
if(e.property == "name") {  
        textArea_Name.text = e.newValue.toString();  
    }else if(e.property == "desc") {  
        textArea_Desc.text = e.newValue.toString();  
    }else {  
return;  
    }  
    trace("view: " + e.property + " Changed");  
} 
 
(2)MXML使用大括号:
<mx:textarea x="202" y="107" width="131" height="21" wordwrap="true" editable="false" id="textArea_Name" text="{person.name}">

(3)使用AS中的ChangeWatcher :
private function init():void {   
    var nameWatcher:ChangeWatcher; 
//nameWatcher = BindingUtils.bindProperty(textArea_Name,"text",person,"name"); 
    ChangeWatcher.watch(person,"name",nameSetter); 
}

private function nameSetter(e:PropertyChangeEvent):void {   
if(e==null) {   
return;   
    }   
    textArea_Name.text = e.newValue.toString();   
    trace("Name Changed by nameSetter on the Event " + e + " to " + e.newValue);   
}