Flex 中的数据绑定和列表模式

徐哲 Doit.im

问题

•谁在用 Flex 做企业应用？

•用框架了吗？

丑陋的框架

•Cairngorm

•Mate

•PureMVC

•......

Flex 开发什么应用？

•RichClient

•像 HTML Web 还是传统 Client ？

传统 HTML 应用的模式

•根据页面事件向服务器请求数据

•手工数据更新页面

Flex 的优点

•数据绑定

•One Page 或者 Less Page 应用、 AIR

Flex 的开发模式

•数据更新应该由数据绑定自动完成

•我们只操作客户端内存中的数据

•与服务器或者本地数据的交互应该由框架来完成

•服务器交互 REST 或者类 REST 风格

所以需要 ......

•数据绑定的列表操作模式

•Datasource

数据绑定的列表操作模式

•定义• 针对列表的操作，使集合 A 变换成集合 B

• 操作的结果符合数据绑定的特性，即数据源更新会触发绑定对象的更新

• 根据源数据列表 A 的增删操作更新列表，并 Dispatch 对应的 CollectionEvent 事件

• 如果源数据列表 A 发生 CollectionEventKind.RESET 事件，比如 removeAll ，则更新整个列表 B 并 Dispatch 对应的 CollectionEventKind.RESET 事件

• 一般来说，对列表 B 只用来做展示使用，而不适合做增删修改操作，所有增删改操作都应该作用在源数据列表 A 上

模式列表

• 绑定子集：从列表 A ，过滤出一个列表 B

• 绑定并集：从列表 A1 ， A2, 合并成一个并集B

• 绑定映射：从列表 A ，映射其元素得到一个新的列表 B

子集模式实现

• 使用 ListCollectionView 的 filter function即可

• 监听列表 A1 、 A2 的 CollectionEvent ，忽略 CollectionEventKind.MOVE 和 UPDATE事件

• 维护一个从 A1 、 A2 合并的列表，根据 A1 、A2 列表的 CollectionEvent ，操作合并后的列表与其同步

• 该实现不支持对并集 B 的操作，应该通过修改原始列表 (A1 、 A2) 更新并集 B

并集模式实现

映射模式实现

•监听列表 A 所有的 CollectionEvent

•列表 B 必须和列表 A 同步，包含每个对象的对于位置

QuickTime™ and aBMP decompressor

are needed to see this picture.

QuickTime™ and aBMP decompressor

are needed to see this picture.

Datasource

•监听服务器端的变化更新Datasource ，并通过数据绑定反映到UI ，反之亦然

•按照类型组织

•使用 Dictionary 做一个 id 对应的字典

•类 REST 方式保存数据

Datasource• private var data:Dictionary = new Dictionary();

• private var lists:Dictionary = new Dictionary();

• private var filters:Dictionary = new Dictionary();

• public function listFromServerByExp(type:Class, exp:ExpressionExt, callback:Function = null):void

• public function list(type:Class):ListCollectionView

• public function listByExp(type:Class, exp:ExpressionExt):ListCollectionView

• public function update(entity:RawEntity):void

• public function remove(entity:RawEntity):void

• public function detectEntityById(type:Class, id:String):RawEntity

• public function detectEntityByExp(exp:ExpressionExt):RawEntity

Thank you !