Your SlideShare is downloading. ×
0
Flex 中的数据绑定和列表模式 <ul><li>徐哲  Doit.im </li></ul>
问题 <ul><li>谁在用 Flex 做企业应用? </li></ul><ul><li>用框架了吗? </li></ul>
丑陋的框架 <ul><li>Cairngorm </li></ul><ul><li>Mate </li></ul><ul><li>PureMVC </li></ul><ul><li>...... </li></ul>
Flex 开发什么应用? <ul><li>RichClient </li></ul><ul><li>像 HTML Web 还是传统 Client ? </li></ul>
传统 HTML 应用的模式 <ul><li>根据页面事件向服务器请求数据 </li></ul><ul><li>手工数据更新页面 </li></ul>
Flex 的优点 <ul><li>数据绑定 </li></ul><ul><li>One Page 或者 Less Page 应用、 AIR </li></ul>
Flex 的开发模式 <ul><li>数据更新应该由数据绑定自动完成 </li></ul><ul><li>我们只操作客户端内存中的数据 </li></ul><ul><li>与服务器或者本地数据的交互应该由框架来完成 </li></ul><ul>...
所以需要 ...... <ul><li>数据绑定的列表操作模式 </li></ul><ul><li>Datasource </li></ul>
数据绑定的列表操作模式 <ul><li>定义 </li></ul><ul><ul><li>针对列表的操作,使集合 A 变换成集合 B </li></ul></ul><ul><ul><li>操作的结果符合数据绑定的特性,即数据源更新会触发绑定对象...
模式列表 <ul><li>绑定子集:从列表 A ,过滤出一个列表 B </li></ul><ul><li>绑定并集:从列表 A1 , A2, 合并成一个并集 B </li></ul><ul><li>绑定映射:从列表 A ,映射其元素得到一个新的...
子集模式实现 <ul><li>使用 ListCollectionView 的 filter function 即可 </li></ul>
<ul><li>监听列表 A1 、 A2 的 CollectionEvent ,忽略 CollectionEventKind.MOVE 和 UPDATE 事件 </li></ul><ul><li>维护一个从 A1 、 A2 合并的列表,根据 A...
映射模式实现 <ul><li>监听列表 A 所有的 CollectionEvent </li></ul><ul><li>列表 B 必须和列表 A 同步,包含每个对象的对于位置 </li></ul>
 
Datasource <ul><li>监听服务器端的变化更新 Datasource ,并通过数据绑定反映到 UI ,反之亦然 </li></ul><ul><li>按照类型组织 </li></ul><ul><li>使用 Dictionary 做一...
Datasource <ul><li>private var data:Dictionary = new Dictionary(); </li></ul><ul><li>private var lists:Dictionary = new Di...
 
Thank you !
Upcoming SlideShare
Loading in...5
×

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

2,038

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,038
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
48
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Flex中的数据绑定和列表模式—徐哲"

  1. 1. Flex 中的数据绑定和列表模式 <ul><li>徐哲 Doit.im </li></ul>
  2. 2. 问题 <ul><li>谁在用 Flex 做企业应用? </li></ul><ul><li>用框架了吗? </li></ul>
  3. 3. 丑陋的框架 <ul><li>Cairngorm </li></ul><ul><li>Mate </li></ul><ul><li>PureMVC </li></ul><ul><li>...... </li></ul>
  4. 4. Flex 开发什么应用? <ul><li>RichClient </li></ul><ul><li>像 HTML Web 还是传统 Client ? </li></ul>
  5. 5. 传统 HTML 应用的模式 <ul><li>根据页面事件向服务器请求数据 </li></ul><ul><li>手工数据更新页面 </li></ul>
  6. 6. Flex 的优点 <ul><li>数据绑定 </li></ul><ul><li>One Page 或者 Less Page 应用、 AIR </li></ul>
  7. 7. Flex 的开发模式 <ul><li>数据更新应该由数据绑定自动完成 </li></ul><ul><li>我们只操作客户端内存中的数据 </li></ul><ul><li>与服务器或者本地数据的交互应该由框架来完成 </li></ul><ul><li>服务器交互 REST 或者类 REST 风格 </li></ul>
  8. 8. 所以需要 ...... <ul><li>数据绑定的列表操作模式 </li></ul><ul><li>Datasource </li></ul>
  9. 9. 数据绑定的列表操作模式 <ul><li>定义 </li></ul><ul><ul><li>针对列表的操作,使集合 A 变换成集合 B </li></ul></ul><ul><ul><li>操作的结果符合数据绑定的特性,即数据源更新会触发绑定对象的更新 </li></ul></ul><ul><ul><ul><li>根据源数据列表 A 的增删操作更新列表,并 Dispatch 对应的 CollectionEvent 事件 </li></ul></ul></ul><ul><ul><ul><li>如果源数据列表 A 发生 CollectionEventKind.RESET 事件,比如 removeAll ,则更新整个列表 B 并 Dispatch 对应的 CollectionEventKind.RESET 事件 </li></ul></ul></ul><ul><ul><ul><li>一般来说,对列表 B 只用来做展示使用,而不适合做增删修改操作,所有增删改操作都应该作用在源数据列表 A 上 </li></ul></ul></ul>
  10. 10. 模式列表 <ul><li>绑定子集:从列表 A ,过滤出一个列表 B </li></ul><ul><li>绑定并集:从列表 A1 , A2, 合并成一个并集 B </li></ul><ul><li>绑定映射:从列表 A ,映射其元素得到一个新的列表 B </li></ul>
  11. 11. 子集模式实现 <ul><li>使用 ListCollectionView 的 filter function 即可 </li></ul>
  12. 12. <ul><li>监听列表 A1 、 A2 的 CollectionEvent ,忽略 CollectionEventKind.MOVE 和 UPDATE 事件 </li></ul><ul><li>维护一个从 A1 、 A2 合并的列表,根据 A1 、 A2 列表的 CollectionEvent ,操作合并后的列表与其同步 </li></ul><ul><li>该实现不支持对并集 B 的操作,应该通过修改原始列表 (A1 、 A2) 更新并集 B </li></ul>并集模式实现
  13. 13. 映射模式实现 <ul><li>监听列表 A 所有的 CollectionEvent </li></ul><ul><li>列表 B 必须和列表 A 同步,包含每个对象的对于位置 </li></ul>
  14. 15. Datasource <ul><li>监听服务器端的变化更新 Datasource ,并通过数据绑定反映到 UI ,反之亦然 </li></ul><ul><li>按照类型组织 </li></ul><ul><li>使用 Dictionary 做一个 id 对应的字典 </li></ul><ul><li>类 REST 方式保存数据 </li></ul>
  15. 16. Datasource <ul><li>private var data:Dictionary = new Dictionary(); </li></ul><ul><li>private var lists:Dictionary = new Dictionary(); </li></ul><ul><li>private var filters:Dictionary = new Dictionary(); </li></ul><ul><li>public function listFromServerByExp(type:Class, exp:ExpressionExt, callback:Function = null):void </li></ul><ul><li>public function list(type:Class):ListCollectionView </li></ul><ul><li>public function listByExp(type:Class, exp:ExpressionExt):ListCollectionView </li></ul><ul><li>public function update(entity:RawEntity):void </li></ul><ul><li>public function remove(entity:RawEntity):void </li></ul><ul><li>public function detectEntityById(type:Class, id:String):RawEntity </li></ul><ul><li>public function detectEntityByExp(exp:ExpressionExt):RawEntity </li></ul>
  16. 18. Thank you !
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×