首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 媒体动画 > flex >

[译] Flex Collection 事件跟手动通知变化

2012-10-26 
[译] Flex Collection 事件和手动通知变化?[说明: 本文为?http://www.smithfox.com/?e38?原创, 转载请注

[译] Flex Collection 事件和手动通知变化

?

[说明: 本文为?http://www.smithfox.com/?e=38?原创, 转载请注明原文, 谢谢]

英文原文:?http://livedocs.adobe.com/flex/3/html/help.html?content=about_dataproviders_5.html

原创翻译:?http://www.smithfox.com/?e=38

(JavaEye的文章编辑器怎么不能自动换行呢? 大家看的累就直接到我的个人blog看?[译] Flex Collection 事件跟手动通知变化?)

学习Flex中最常见的例子可能就是放一个DataGrid控件,然后放个HttpService之类和后台交互的组件,绑定一个ArrayCollection。

这个例子让我们养成了一个非常不好的习惯(最起码我看到的新手Flex程序都是这样): 每次都是根据后台数据构造生成新一个ArrayCollection对象,再赋给DataGrid控件的dataProvider,使整个DataGrid都刷新.

原因就是对Collection怎么和DataGrid进行交互根本不了解。看完这篇文章相信菜鸟能变成火鸟. (哈哈,还是鸟)

Collection事件和手动变化通知

集合用下面事件来表示发生了变化. 我们可以用这些事件来监控集合的变化从而作相应的显示上的更新.
Collection事件: CollectionEvent, PropertyChangeEvent和FlexEvent.

  1. 当今集合发生变化时, 发布 CollectionEvevnt.COLLECTION_CHANGE.
  2. CollectionEvent.kind(CollectionEventKind类型)用来表示是什么变化类型,比如UPDATE.
  3. CollectionEvent.items(是一个Array类型), 如果是ADD和REMOVE kind 事件, 这个数组包含了被删除或是被增加的items.?? 对于UPDATE事件, items则是一个事件数组,数组成员全都是PropertyChangeEvent, 每个事件表示相应的item的update
  4. PropertyChangeEvent.kind(类型是PropertyChangeEventKind)表示是那个属性发生了变化.
  5. 当游标位置发生了变化, 视图游标(View cursor)发布一个事件. ? type属性是FlexEvent.CURSOR_UPDATE

?

例如,一个自定义控件用一个collection作为它的data provider, 你肯定想每次collection发生变化时控件能被自动更新以显示修改后的最新数据. 这时上面这些集合事件就能派上用场.

假设我们做一个汽车租赁的预定系统. 应用程序就能用COLLECTION_CHANGE 事件来监听 预定信息.为这个事件的侦听器函数起个名字叫 reservationsChanged,这个函数判断 Change事件的kind 字段做不同业务逻辑.

  • 如果kind是ADD, ? ?遍历事件的items属性,调用一个函数更新预定信息的显示(一个显示所有预定时间的框)
  • 如果kind是REMOVE, 遍历事件的items属性, 调用一个函数将这些预定信息从框中删除
  • 如果kind是UPDATE, 遍历事件的items属性, 此时每个item是一个PropertyChangeEvent事件, 我们调用函数更新所有对应的预定信息的显示.
  • 如果kind是RESET, ?调用一个函数重置预定信息.

    代码如下:

    ?

    所以最常见的itemUpdate用法是: 一个不能Bindable的类,或是无法实现IEventDispatcher接口的类的数据(属性)发生变化时来用通知collection.

    下面的例子展示在这样的情景时你就可以用itemUpdated()

    假设你有一个你不能控制和再编辑的类:

    public class ClassICantEdit {?? ?public var field1:String;?? ?public var field2:String;}

    你还有一个ArrayCollection, 里面的item全都是 classICantEdit对象.

    public var myCollection:ArrayCollection = new ArrayCollection();

    你有如下一个DataGrid控件:

    <mx:DataGrid dataProvider="{myCollection}"/>

    当你象下面更改myCollection中的item的值时, DataGrid控件是不会自动更新的:

    myCollection.getItemAt(0).field1="someOtherValue";

    为更新DataGrid控件,你必须 itemUpdated()函数:

    myCollection.itemUpdated(collectionOfThoseClasses.getItemAt(0));


    禁止和启用自动更新

    Collection还提供了enableAutoUpdate()和disableAutoUpdate()方法,这两个方法可以启用或是禁止数据发生变化时自动更新数据视图的功能。

    collection的 disableAutoUpdate()方法会阻止基本数据改变事件被collection视图广播.同时还阻止,collection自身作为一个结果集被改变的事件.
    当一个collection绑定为一个控件的dataProvider时, 用这个方法可以防止因collection多次变化而引起控件不必要的中间显示更新。
    例如, DataGrid控件在item被选中时,就会调用disableAutoUpdate(), 当这个item不再被选中时再调用enableAutoUpdate(),

    这样可以当你正在编辑一个item时,不会因为这item是在一个排序的collection中而导致在屏幕上下乱跳.
    下面的代码片断显示了怎样调用disableAutoUpdate(), enableAutoUpdate()

    var obj:myObject = myCollection.getItemAt(0);
    myCollection.disableAutoUpdate();
    obj.prop1 = 'foo';
    obj.prop2 = 'bar';
    myCollection.enableAutoUpdate();


    例子: 在DataGrid控件中修改数据

    下面的例子你可以在DataGrid控件中增加, 删除, 修改数据

    ?

    ?

    ?

    Flash显示效果请到?http://livedocs.adobe.com/flex/3/html/help.html?content=about_dataproviders_5.html?文章最后部分查看.

    [说明: 本文为?http://www.smithfox.com/?e=38?原创, 转载请注明原文, 谢谢]

    ?

    ?

热点排行