Flex Array，Arraylist，ArrayCollection使用详解

Flex Array，Arraylist，ArrayCollection使用详解

1.1.1 Array的申明

//申明arraylist的四种方式

var arr1:Array=new Array("小强","小红","小刚");

var arr2:Array=['小强','小红','小刚'];

var aar3:Array=new Array(

{name:"小强",type:"boy"},

{name:"小红",type:"gril"},

{name:"小刚",type:"boy"});

<fx:Array id="arr4">

<fx:String小强</fx:String>

<fx:String>小红</fx:String>

<fx:String>小刚</fx:String>

</fx:Array>

1.1.2 ArrayList的申明

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

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

   xmlns:s="library://ns.adobe.com/flex/spark"

   xmlns:mx="library://ns.adobe.com/flex/mx"

   minWidth="955" minHeight="600" creationComplete="appInit(event)">

<s:layout>

<s:VerticalLayout/>

</s:layout>

 

<fx:Script>

<![CDATA[

import mx.collections.ArrayList;

import mx.events.FlexEvent;

import mx.rpc.events.ResultEvent;

[Bindable]

private var arr1:ArrayList;

[Bindable]

private var arr2:ArrayList;

[Bindable]

private var arr3:ArrayList;

 

protected function appInit(event:FlexEvent):void

{

var arr:Array=new Array(

{name:"小强",type:"boy"},

{name:"小红",type:"gril"},

{name:"小刚",type:"boy"});

arr1=new ArrayList();

arr1.addItem({name:"小强",type:"boy"});

arr1.addItem({name:"小红",type:"gril"});

arr1.addItem({name:"小刚",type:"boy"});

arr2=new ArrayList(arr);

this.ser.send();

}

 

protected function OnResultEvent(event:ResultEvent):void

{

this.arr3 = event.result.data.region;

}

 

]]>

</fx:Script>

<fx:Declarations>

<!-- 将非可视元素（例如服务、值对象）放在此处 -->

<s:HTTPService id="ser" result="OnResultEvent(event)" resultFormat="object" url="data/data.xml" />

</fx:Declarations>

<s:ComboBox dataProvider="{arr1}" labelField="name"/>

<s:ComboBox dataProvider="{arr2}" labelField="name"/>

<s:DataGrid id="ag" y="200" width="302" dataProvider="{arr3}">

 

<s:columns>

 

<s:ArrayList>

 

<s:GridColumn dataField="totle" headerText="Totle"/>

 

<s:GridColumn dataField="city" headerText="City"/>

 

<s:GridColumn dataField="state" headerText="State"/>

 

</s:ArrayList>

 

</s:columns>

 

</s:DataGrid>

</s:Application>

 

 

1.1.3 ArrayCollection的申明

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

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

   xmlns:s="library://ns.adobe.com/flex/spark"

   xmlns:mx="library://ns.adobe.com/flex/mx"

   minWidth="955" minHeight="600" creationComplete="appInit(event)">

<s:layout>

<s:VerticalLayout/>

</s:layout>

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

import mx.events.FlexEvent;

[Bindable]

private var AC1:mx.collections.ArrayCollection;

[Bindable]

private var AC2:mx.collections.ArrayCollection;

[Bindable]

private var AC3:mx.collections.ArrayCollection;

private var arr1:Array;

protected function appInit(event:FlexEvent):void

{

    arr1=new Array(

{name:"小强",type:"boy"},

{name:"小红",type:"gril"},

{name:"小刚",type:"boy"});

AC1=new mx.collections.ArrayCollection(arr1);

 

AC2=new mx.collections.ArrayCollection();

AC2.addItem({name:"小强",type:"boy"});

AC2.addItem({name:"小红",type:"gril"});

AC2.addItem({name:"小刚",type:"boy"});

AC3=new mx.collections.ArrayCollection([

{id:"01",name:"汽车名称",type:"汽车类型",children:[{id:"01-01",name:"大众",type:"汽车"},{id:"01-02",name:"本田",type:"汽车"}]},

{id:"02",name:"书籍名称",type:"书籍类型",children:[{id:"02-01",name:"神话",type:"小说"},{id:"02-02",name:"美女",type:"小说"}]}

]);

 

}

 

]]>

</fx:Script>

<fx:Declarations>

<!-- 将非可视元素（例如服务、值对象）放在此处 -->

</fx:Declarations>

<s:ComboBox dataProvider="{AC1}" labelField="name"/>

<s:ComboBox dataProvider="{AC2}" labelField="name"/>

<s:ComboBox dataProvider="{AC3}" labelField="name"/>

</s:Application>

 

 

1.1.4 XML转换为ArrayCollection

1.1.4.1 第一种直接转换

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

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

   xmlns:s="library://ns.adobe.com/flex/spark"

   xmlns:mx="library://ns.adobe.com/flex/mx"

   minWidth="955" minHeight="600" creationComplete="appInit(event)">

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

import mx.events.FlexEvent;

import mx.rpc.events.ResultEvent;

[Bindable]

private var home:mx.collections.ArrayCollection;

 

protected function appInit(event:FlexEvent):void

{

this.srv.send();

 

}

 

protected function OnResultEvent(event:ResultEvent):void

{

this.home = event.result.data.region;

}

 

]]>

</fx:Script>

<fx:Declarations>

<!-- 将非可视元素（例如服务、值对象）放在此处 -->

<s:HTTPService id="srv" result="OnResultEvent(event)" resultFormat="object"

   url="data/data.xml"/>

</fx:Declarations>

<s:DataGrid id="ag" y="200" width="302" dataProvider="{home}">

 

<s:columns>

 

<s:ArrayList>

 

<s:GridColumn dataField="totle" headerText="Totle"/>

 

<s:GridColumn dataField="city" headerText="City"/>

 

<s:GridColumn dataField="state" headerText="State"/>

 

</s:ArrayList>

 

</s:columns>

 

</s:DataGrid>

 

</s:Application>

 

注意：

1. 要将XML数据转为ArrayCollection，那么这个XML的数据内容不能写在节点的属性中，而是要作为节点的内容。例如，不能使用下面的写法：<node type=”汽车"name=”宝马"/>

2. XML数据中如果只有一条数据时转成的ArrayCollection会是个空值，节要单独处理。

3. 如果对加载的XML指定应用E4X格式，Flex将不会使用ArrayCollection类进行转换，例如，下面的写法无法转为ArrayCollection:

<mx:HTTPService id="ser" url="data/data.xml"  Result="resuleHandler(event)"resultFormat="e4x"/>

4. ArrayCollection作数据源时DataGrid可以不必写DalaCridColumn标签，ArrayCollection每一条数据的所有字段会自动作为DataCrid的各列。这样适合表格列数不确定的情况。

HTTPService获取数据转换为ArrayCollection。但这种方法有局限，首先是条目为1条时会出现问题，如上例中，node节点个数为1时，无法正常显示内容；当node节点个数大于1而某个node的子节点Children的个数为1时，子节点没有显示出来。只有当node节点个数大于1,而node的子节点children的个数大于1时，这种方式没有问题。

1.1.4.2 第二种将xml解析为对象

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

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 

   xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="arrInit(event)"

   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

import mx.containers.Form;

import mx.events.FlexEvent;

import mx.rpc.events.ResultEvent;

[Bindable]

private var home:mx.collections.ArrayCollection;

 

protected function arrInit(event:FlexEvent):void

{

this.ser.send();

 

}

 

protected function ResultHandler(event:ResultEvent):void

{

//this.home=event.result.data.region;

var myxml:XML=event.result as XML;

var arr:Array=new Array();

for (var i:int = 0; i < myxml.region.length(); i++) 

{

var obj:Object=new Object();

obj.totle=myxml.region[i].totle;

obj.city=myxml.region[i].city;

obj.state=myxml.region[i].state;

arr.push(obj);

}

this.home=new mx.collections.ArrayCollection(arr);

 

}

 

]]>

</fx:Script>

<fx:Declarations>

<!-- 将非可视元素（例如服务、值对象）放在此处 -->

<s:HTTPService id="ser" result="ResultHandler(event)" resultFormat="e4x" url="data/data.xml" />

</fx:Declarations>

<s:DataGrid dataProvider="{home}">

 

</s:DataGrid>

</s:Application>

 

1.1.5 将ArrayCollection转化为XML

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

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

   xmlns:s="library://ns.adobe.com/flex/spark"

   xmlns:mx="library://ns.adobe.com/flex/mx"

   minWidth="955" minHeight="600" creationComplete="appInit(event)">

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

import mx.collections.HierarchicalData;

import mx.events.FlexEvent;

 

[Bindable]

var arr1:mx.collections.ArrayCollection;

protected function appInit(event:FlexEvent):void

{

// TODO Auto-generated method stub

var arr:mx.collections.ArrayCollection =new mx.collections.ArrayCollection();

arr.addItem({id:"01",name:"大众",type:"汽车"});

arr.addItem({id:"02",name:"宝马",type:"汽车"});

arr.addItem({id:"03",name:"奔驰",type:"汽车"});

 

var root:XML=new XML("<root />");

for (var i:int = 0; i < arr.length; i++) 

{

var node:XML=new XML("<node />");

node.id=arr[i].id;

node.name=arr[i].name;

node.type=arr[i].type;

root.appendChild(node);

}

trace(root);

 

// 定义多个富有子节点

  arr1 =new mx.collections.ArrayCollection([

{id:"01",name:"汽车名称",type:"汽车类型",children:[{id:"01-01",name:"大众",type:"汽车"},{id:"01-02",name:"本田",type:"汽车"}]},

{id:"02",name:"书籍名称",type:"书籍类型",children:[{id:"02-01",name:"神话",type:"小说"},{id:"02-02",name:"美女",type:"小说"}]}

]);

 

var data:XML=new XML("<data />");

for (var i:int = 0; i < arr1.length; i++) 

{

var region:XML=new XML("<node />");

region.id=arr1[i].id;

region.name=arr1[i].name;

region.type=arr1[i].type;

for (var k:int = 0; k < arr1[i].children.length; k++) 

{

var child:XML=new XML("<child />");

child.id=arr1[i].children[k].id;

child.name=arr1[i].children[k].name;

child.type=arr1[i].children[k].type;

region.appendChild(child);

}

data.appendChild(region);

 

}

trace(data);

 

adg.dataProvider=new HierarchicalData(arr1);

 

}

 

]]>

</fx:Script>

<fx:Declarations>

<!-- 将非可视元素（例如服务、值对象）放在此处 -->

</fx:Declarations>

<mx:AdvancedDataGrid id="adg">

<mx:columns>

<mx:AdvancedDataGridColumn dataField="id"/>

<mx:AdvancedDataGridColumn dataField="name"/>

<mx:AdvancedDataGridColumn dataField="type"/>

</mx:columns>

</mx:AdvancedDataGrid>

</s:Application>

 

1.2 数据捆绑

1.2.1 使用｛｝实现绑定。

在前面的很多例子中都设定过组件的数据源，基本做法是：使用[Bindable]定义一个可绑定的变量：

[Bindable]

Private var arr1:Array;

同时，将这个变量作为数据源，使用日来绑定到一个组件上：

<mx: ComBox dataProvider="{arr1}" />

另外，除了可以定义可绑定的变量外，还可以定义可绑定的类，只需要把[Bindable］放在类的声明的上方即可。

1.2.2 使用Binding标签实现绑定。

使用Binding标签实现同{}相同效果。通常情况下，使用{}和Binding标签效果是一样的．但是使用Binding标鉴可以实现为同一个目标源定义不止一个数据源或者在绑定源处加一个附加表达式绑定到目标处。

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

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 

   xmlns:s="library://ns.adobe.com/flex/spark"  

   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

<s:layout>

<s:VerticalLayout/>

</s:layout>

 

<fx:Script>

<![CDATA[

 private function bindFunc(val:String):String

{

return "第三个文本框输入的是："+input3.text;

}

]]>

</fx:Script>

 

<fx:Script>

<![CDATA[

import mx.events.FlexEvent;

]]>

</fx:Script>

<fx:Declarations>

<!-- 将非可视元素（例如服务、值对象）放在此处 -->

</fx:Declarations>

<fx:Binding source="input2.text" destination="input3.text"/>

<s:TextInput x="44" y="82" id="input1"/>

<s:TextInput id="input2" text="{input1.text}"/>

<s:TextInput id="input3"/>

<s:TextInput width="359" text="{bindFunc(input3.text)}"/>

</s:Application>

 

使用对象作绑定数据源

将Flex与服务器语言通信时经常用到某个对象作绑定源。例如，使用BlazeDS与JavaEE通信，通常就是在ActionScript中创建对象，给对象各属性赋值后映射为Java中的对象传递到POJO java类中进行处理。

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

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 

   xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="appInit(event)"

   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

<fx:Script>

<![CDATA[

import mx.events.FlexEvent;

import mx.utils.ObjectProxy;

 

private var obj:Object;

[Bindable]

private var objproxy:ObjectProxy;

protected function appInit(event:FlexEvent):void

{

 obj={userName:"admin",passWord:"123"};

objproxy=new ObjectProxy(obj);

}

 

protected function button1_clickHandler(event:MouseEvent):void

{

objproxy.userName=input1.text;

objproxy.passWord=input2.text;

}

 

]]>

</fx:Script>

<fx:Declarations>

<!-- 将非可视元素（例如服务、值对象）放在此处 -->

</fx:Declarations>

<s:Button x="246" y="179" label="测试" click="button1_clickHandler(event)"/>

<s:Label x="171" y="104" text="姓名："/>

<s:Label x="167" y="144" text="密码："/>

<s:TextInput id="input1" x="229" y="104"/>

<s:TextInput id="input2" x="229" y="134"/>

<s:Label x="135" y="282" text="用户密码为："/>

<s:Label x="147" y="241" text="用户名为："/>

<s:Label x="229" y="241" text="{objproxy.userName}"/>

<s:Label x="229" y="282" text="{objproxy.passWord}"/>

</s:Application>

 

 

2 Flex中必备

2.1 Flex中Array，ArrayList和ArrayCollection区别

简单的说：

Array更新不通知组件
ArrayList和ArrayCollection更新通知组件
ArrayCollection可以排序sort和过滤filter
ArrayList不能

当Array的数据随着时间发生变化的时候，用它作为数据源的组件无法感知这种变化。例如：myArray.push ("new value"); 利用push方法向Array中添加一新的数据，如果一个List列表组件用它作为数据源，List不会增加刚刚添加的这个数据。
而对于ArrayCollection, 当数据发生变化，会通知相应的组件变化。例如：myArrayCollection.addItem ("new item"); ，那么，如果List用它作为数据源，则List列表的内容会增加。

ArrayCollection 实现了ICollectionView接口,它在FLEX中被定义为数据集。他提供了更加强大的搜索，过滤，排序，分类，更新监控等功能。FDK2类也提供了类似的XMLListCollection类。两者的不同点在于，array作为数据源与控件绑定的时候，不会得到控件的更新，除非控件被重绘或者数据源被重新分配，这时候，存储在Collection类的一个array的拷贝会变成一个对象，因此Collection类具有一个特点就是能够处理“数据同步”。在FLEX4中产生了一种新的数据类型ArrayList.
ArrayList实现了IList 接口，底部用Array用为数据源。本质上，ArrayList是一个轻量级的ArrayCollection。可以用来作为数据源绑定到控件上，与ArrayCollection的不同是，它不能过滤数据。需要注意的是，基于Spark 的控件列表，不能直接用Array用为数据源，必须实现IList接口，这应该也是一种新的数据类型ArrayList 产生的原因之一