flex中的数据绑定和列表模式—徐哲
DESCRIPTION
TRANSCRIPT
![Page 1: Flex中的数据绑定和列表模式—徐哲](https://reader031.vdocuments.site/reader031/viewer/2022013114/546b22f0af7959221d8b6d91/html5/thumbnails/1.jpg)
Flex 中的数据绑定和列表模式
徐哲 Doit.im
![Page 2: Flex中的数据绑定和列表模式—徐哲](https://reader031.vdocuments.site/reader031/viewer/2022013114/546b22f0af7959221d8b6d91/html5/thumbnails/2.jpg)
问题
•谁在用 Flex 做企业应用?
•用框架了吗?
![Page 3: Flex中的数据绑定和列表模式—徐哲](https://reader031.vdocuments.site/reader031/viewer/2022013114/546b22f0af7959221d8b6d91/html5/thumbnails/3.jpg)
丑陋的框架
•Cairngorm
•Mate
•PureMVC
•......
![Page 4: Flex中的数据绑定和列表模式—徐哲](https://reader031.vdocuments.site/reader031/viewer/2022013114/546b22f0af7959221d8b6d91/html5/thumbnails/4.jpg)
Flex 开发什么应用?
•RichClient
•像 HTML Web 还是传统 Client ?
![Page 5: Flex中的数据绑定和列表模式—徐哲](https://reader031.vdocuments.site/reader031/viewer/2022013114/546b22f0af7959221d8b6d91/html5/thumbnails/5.jpg)
传统 HTML 应用的模式
•根据页面事件向服务器请求数据
•手工数据更新页面
![Page 6: Flex中的数据绑定和列表模式—徐哲](https://reader031.vdocuments.site/reader031/viewer/2022013114/546b22f0af7959221d8b6d91/html5/thumbnails/6.jpg)
Flex 的优点
•数据绑定
•One Page 或者 Less Page 应用、 AIR
![Page 7: Flex中的数据绑定和列表模式—徐哲](https://reader031.vdocuments.site/reader031/viewer/2022013114/546b22f0af7959221d8b6d91/html5/thumbnails/7.jpg)
Flex 的开发模式
•数据更新应该由数据绑定自动完成
•我们只操作客户端内存中的数据
•与服务器或者本地数据的交互应该由框架来完成
•服务器交互 REST 或者类 REST 风格
![Page 8: Flex中的数据绑定和列表模式—徐哲](https://reader031.vdocuments.site/reader031/viewer/2022013114/546b22f0af7959221d8b6d91/html5/thumbnails/8.jpg)
所以需要 ......
•数据绑定的列表操作模式
•Datasource
![Page 9: Flex中的数据绑定和列表模式—徐哲](https://reader031.vdocuments.site/reader031/viewer/2022013114/546b22f0af7959221d8b6d91/html5/thumbnails/9.jpg)
数据绑定的列表操作模式
•定义• 针对列表的操作,使集合 A 变换成集合 B
• 操作的结果符合数据绑定的特性,即数据源更新会触发绑定对象的更新
• 根据源数据列表 A 的增删操作更新列表,并 Dispatch 对应的 CollectionEvent 事件
• 如果源数据列表 A 发生 CollectionEventKind.RESET 事件,比如 removeAll ,则更新整个列表 B 并 Dispatch 对应的 CollectionEventKind.RESET 事件
• 一般来说,对列表 B 只用来做展示使用,而不适合做增删修改操作,所有增删改操作都应该作用在源数据列表 A 上
![Page 10: Flex中的数据绑定和列表模式—徐哲](https://reader031.vdocuments.site/reader031/viewer/2022013114/546b22f0af7959221d8b6d91/html5/thumbnails/10.jpg)
模式列表
• 绑定子集:从列表 A ,过滤出一个列表 B
• 绑定并集:从列表 A1 , A2, 合并成一个并集B
• 绑定映射:从列表 A ,映射其元素得到一个新的列表 B
![Page 11: Flex中的数据绑定和列表模式—徐哲](https://reader031.vdocuments.site/reader031/viewer/2022013114/546b22f0af7959221d8b6d91/html5/thumbnails/11.jpg)
子集模式实现
• 使用 ListCollectionView 的 filter function即可
![Page 12: Flex中的数据绑定和列表模式—徐哲](https://reader031.vdocuments.site/reader031/viewer/2022013114/546b22f0af7959221d8b6d91/html5/thumbnails/12.jpg)
• 监听列表 A1 、 A2 的 CollectionEvent ,忽略 CollectionEventKind.MOVE 和 UPDATE事件
• 维护一个从 A1 、 A2 合并的列表,根据 A1 、A2 列表的 CollectionEvent ,操作合并后的列表与其同步
• 该实现不支持对并集 B 的操作,应该通过修改原始列表 (A1 、 A2) 更新并集 B
并集模式实现
![Page 13: Flex中的数据绑定和列表模式—徐哲](https://reader031.vdocuments.site/reader031/viewer/2022013114/546b22f0af7959221d8b6d91/html5/thumbnails/13.jpg)
映射模式实现
•监听列表 A 所有的 CollectionEvent
•列表 B 必须和列表 A 同步,包含每个对象的对于位置
![Page 14: Flex中的数据绑定和列表模式—徐哲](https://reader031.vdocuments.site/reader031/viewer/2022013114/546b22f0af7959221d8b6d91/html5/thumbnails/14.jpg)
QuickTime™ and aBMP decompressor
are needed to see this picture.
QuickTime™ and aBMP decompressor
are needed to see this picture.
![Page 15: Flex中的数据绑定和列表模式—徐哲](https://reader031.vdocuments.site/reader031/viewer/2022013114/546b22f0af7959221d8b6d91/html5/thumbnails/15.jpg)
Datasource
•监听服务器端的变化更新Datasource ,并通过数据绑定反映到UI ,反之亦然
•按照类型组织
•使用 Dictionary 做一个 id 对应的字典
•类 REST 方式保存数据
![Page 16: Flex中的数据绑定和列表模式—徐哲](https://reader031.vdocuments.site/reader031/viewer/2022013114/546b22f0af7959221d8b6d91/html5/thumbnails/16.jpg)
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
![Page 17: Flex中的数据绑定和列表模式—徐哲](https://reader031.vdocuments.site/reader031/viewer/2022013114/546b22f0af7959221d8b6d91/html5/thumbnails/17.jpg)
![Page 18: Flex中的数据绑定和列表模式—徐哲](https://reader031.vdocuments.site/reader031/viewer/2022013114/546b22f0af7959221d8b6d91/html5/thumbnails/18.jpg)
Thank you !