(七)数据绑定和集合

数据绑定和集合
1.数据绑定的原理
2.ArrayCollection
3.IViewCursor定位、取得、删除ArrayCollection中的元素
4.利用隐式的getter和setter方法隐藏内部功能
-------------------------------------------------
数据绑定的本质：
Flex中，关键在于改变模型(数据)的同时，让视图(各种组件)能够同步更新
[双向绑定 two-way binding:格式化和验证器会涉及]

要想让Flex监视某个属性的变化，使用[Bindable]标签标注，Flex会根据变化来更新视图(可见组件)

隐式的getter和setter
Flex在生成代码的过程中利用的第一个概要就是隐式的getter和setter
通过隐式的getter和setter除了可以设置和获取属性值之外，还能在属性值改变时完成其它功能
即，当改变值时，setter会被调用，那么就可以在setter方法中实现一些功能
如商品数量改变时，重新计算金额
eg:
private var _sum:Number;
private function get sum():Number {
return _sum;
}
private function set sum(value:Number):void {
_sum = value;
//执行其它操作
}

Flex中，下划线通常意味着变量为私有变量！具有隐式的getters和setter方法！

事件的分发和监听(数据绑定的本质---数据发生变化后分发事件，监听到该事件，更新数据)
1.监听
  MXML中监听的都是由Flex控件分发的事件
  监听事件首先要指定事件发生时要调用的函数，而且通常要向函数中传入一个事件对象作为参数
  如果是自定义的事件，还可以在event对象中设置属性，这样监听方就可以从event中取出数据
  <s:Button id="myButton"/>
  myButton.addEventListener("click",handleClickEvent);//注意：事件处理函数只需要写函数名即可，不要加()
  ===>
  <s:Button id="myButton" click="handleClickEvent(event)"/>
2.分发
  1.Flex控件进行事件分发
  2.自己分发(在setter方法中分发事件，当数据变化时setter会被调用)：
  var event:Event = new Event("myEvent");
  this.dispatchEvent(event);

使用[Bindable]和{}实现数据绑定，Flex如何实现的
1.Flex会在使用这些语法时生成对应的代码
2.数据绑定是通过后台隐式的事件分发和监听实现的
3.为确保数据绑定正确的工作，相关对象必须在有变化时分发事件

默认情况下，并不是所有Flex类都能分发事件，如值对象就不能分发事件
能够分发事件的类叫做事件分发器，Flex中所有的用户界面组件都是事件分发器
对于不具有事件分发能力的值对象，Flex看到[Bindable]元数据标签，就会在编译时将该类修改
为一个事件分发器！！！所以，进行数据绑定的类必修用[Bindable]标记！


Flex让一个不能分发事件的类具备分发能力，必须要求源代码存在着于项目中
Array类存在于Flash Player中，其源代码并不在项目中，
因此，Flex无法修改Array的代码使其具有事件分发能力。
结论：数据绑定不能直接用于数组Array！
但能通过代理技术来解决这个问题！

使用ArrayCollection(Array的代理)
Flex中常见类型：
1.XML、Object、Array 这3个类内置于Flash Player中，在编写ActionScript时，这几个类就已经存在了！
2.Number、String、int、uint、Boolean 基本数据类型

对复杂数据类型使用代理对象(其自身不具备事件分发能力)，最终实现数据绑定
Object---ObjectProxy
XMLList---XMLListCollection
Array---ArrayCollection/ArrayList
说明：ArrayCollection不仅支持数据绑定，还具有排序、筛选、查询等丰富的功能
      ArrayList只需要进行数据绑定时，是一个非常简单轻量级的工具

循环：
for each (var p:XML in resultDate) {}

代码片段：
使用HTTPService从远程获取数据后，执行下面的方法
private function handleProductResult(result:ResultEvent):void {
  var products:Array = new Array();//创建一个Array对象
  var resultData:XMLList = event.result..product;//E4X表达式后代搜寻product子元素
  for each(var p:XML in resultData) {
var product:Product = Product.buildProductFromAttribute(p);//静态方法，传入XMLList，返回product对象
products.push(product);//添加到Array中
  }
  groceryInventory = new ArrayCollection(products);//将Array传入ArrayCollection的构造函数中，这样就能代理了
}
===============================
ArrayCollection中的数据访问
1.myArrayCollection[0]   Array语法，通过下标进行访问
2.myArrayCollection.getItemAt(0); 
推荐使用第2种方法，运行时比Array语法更快；还能利用数据绑定在运行时更新组件

注意：
getItemAt(index)返回的是Object对象，通常都要将其转化为具体的对象3.
如：(groceryInventory.getItemAt(0) as Product).description

对ArrayCollection进行排序
    要进行排序，需要使用Sort和SortField类
1.创建新的Sort对象
2.创建一个或多个SortField对象(即可以指定主排序,副排序字段)
3.将SortField对象的数组赋值给Sort对象的fields属性
4.将Sort对象指定为ArrayCollection的sort属性
5.调用ArrayCollection的refresh()应用排序操作

对ArrayCollection中的商品进行排序，确保每次呈现的顺序一致
var prodSort:Sort = new Sort();
var sortFiled:SortField = new SortField("someFiled");//按someField属性进行排序
prodSort.fields = new Array(sortField);//或者[sortField]
myArrayCollection.sort = prodSort;
myArrayCollection.refresh();//必须refresh

说明：可以指定多个SortField，然后通过数组传递给Sort的fields属性
      var sortFiled1:SortField = new SortField("category");
      var sortFiled2:SortField = new SortField("listPrice");
      prodSort.fields = new Array(sortField1,sortField2);

      SortField对象的构造函数可以接受多个参数，第一个参数是必须的，即指定排序规则按哪个字段进行排序
      其它3个参数：
         1.是否区分大小写(默认区分大小写)
         2.升序还是降序(默认升序)
         3.按数值排序还是按字母排序(默认按字母表排序)
创建ArrayCollection时，如果没有指定Array，则系统会默认创建一个新数组放到构造函数中
即：new ArrayCollection 等价于 new ArrayCollection(new Array())

对ArrayCollection实现光标(cursor)搜索
使用光标，能够直接访问集合中的任意项
操作：
1.向前或向后移动光标
2.通过光标找到特定项
3.取得光标所在位置的项
4.根据光标位置添加和删除项
在集合类中使用光标的一般步骤：
1.createCursor()创建一个光标
2.集合排好序
3.移动光标并查询集合中的项
  findFirst()、findAny()、moveNext()、movePrevious、seek()
说明:
    并不是只有ArrayCollection才支持光标，其它很多类也支持
    详细信息，参考IViewCursor接口

使用光标：
var cursor:IViewCursor = items.createCursor();
var found:Boolean = cursor.findFirst(item);//item为排序时指定的字段
if(found) {
var existItem = cursor.current as ShoppingCartItem;//转换类型
}
注意：
1、集合排序时为Sort指定按哪个字段进行排序，搜索使就会按那个字段进行比较
比如：SoppingCart中，已经创建了按product字段进行排序的Sort对象，那么Flex就只会比较每个对象的product字段
2、集合排序完成后，使用光标查找速度比遍历集合速度快，有利于提升效率！

使用光标进行删除操作
public function removeItem(item:ShoppingCartItem):void {
  var cursor:IViewCursor = items.createCursor();
  if(cursor.findFirst(item)) {
     cursor.remove();
  }
}