Flex4.5实战课程 - 事件、数据绑定与组件开发

1. Flex4.5 实战课程
事件、数据绑定与组件开发
http://weibo.com/agilelife
2011.08.24

2. 组件开发 事件驱动机制
Contents Flex4.x开发核心技术 数据绑定机制
数据集合
组件演示
组件开发实战 Flex组件生命周期
动手实践组件开发
Q&A

3. 核心技术
Event
事件驱动机制
Flex4.X开发核心技术 数据绑定机制
数据集合

4. 核心技术
Event
1. 显示列表 Display List
2. 事件驱动模型 Event Model
3. 自定义事件 Custom Event
4. 扩展阅读

5. 核心技术
Event
public function addEventListener(
type:String, listener:Function,
useCapture:Boolean = false, priority:int = 0,
useWeakReference:Boolean = false):void

6. 核心技术
Event
显示列表
Display List

7. 核心技术
Event

8. 核心技术
Event
事件流
Event Flow
EventFlow.mxml

9. 核心技术
Event
自定义事件
Custom Event
CustomEvent.as

10. 核心技术
Event
事件派发：
dispatchEvent(new CustomEvent("传递的错误消息内容"));
事件侦听：
someComponent.addEventListener(CustomEvent.ERROR_MESSAGE_EVENT,
onCustomEventHandler);

11. 核心技术
Event
事件应用最佳实践
1. 事件的阻止
2. 松耦合的核心
3. 于弱引用

12. 核心技术
Event
扩展阅读
1. EventBroker
2. AS3 Signals
3. Parsley消息机制
4. PureMVC消息机制

13. 核心技术
Data Binding
数据绑定
什么是数据绑定？

14. 核心技术
Data Binding
数据绑定的不同形式
1. { }
2. <Binding/>
3. BindingUtil
4. ChangeWatcher
5.Two Way Binding
6. [Bindable]

15. 核心技术
Data Binding
1. { }
<s:TextInput id="txtInputA" />
<s:TextInput id="txtInputB" text="{txtInputA.text}"/>

16. 核心技术
Data Binding
2. <Binding/>
<fx:Binding source="txtInputA.text"
destination="txtInputB.text"/>
<s:TextInput id="txtInputA" />
<s:TextInput id="txtInputB" />

17. 核心技术
Data Binding
3. BindingUtil
BindingUtils.bindProperty(txtInputB, "text",
txtInputA, "text");

18. 核心技术
Data Binding
4. ChangeWatcher
var watcher:ChangeWatcher = ChangeWatcher.watch(person,
"firstName", onWatcher);
private function onWatcher(evt:PropertyChangeEvent):void {
firstNameId.text = evt.newValue.toString();
}
...
//当你要停止绑定时，手动调用
watcher.unwatch();

19. 核心技术
Data Binding
5.Two Way Binding
//仅需在绑定符号{}外加上@符号即可
<s:TextInput id="txtInputB" text="@{txtInputA.text}"/>
//或者
//在<Binding/>标签中指定twoWay为true即
<fx:Binding source="txtInputA.text"
destination="txtInputB.text" twoWay="true"/>

20. 核心技术
Data Binding
6. [Bindable]
[Bindable]
public var person:Person = new Person();
[Bindable(event="customEvent")]
public function get person():Person {
return _person;
}
在类前使用绑定元标签
......

21. 核心技术
Data Binding
数据绑定机制背后的故事
添加相应的编译参数“-keep”或“-keep-generated-actionscript”
并观察编译器自动生成的中间AS3代码

22. 核心技术
Data Binding
数据绑定最佳实践

23. 核心技术
Data
Collection
Flex中的数据集合
此部分放在后面的与服务器端通信的课程中谈论

24. 核心技术
Data
Collection
数据集合实践与应用
1. ArrayCollection与Array
2. XMLListCollection与XMLList
3. 数据集合的访问与操作
4. 最佳实践

25. 核心技术
Data
Collection

26. 组件开发
Component
Development
组件演示
组件开发实战 Flex组件生命周期
动手实践组件开发

27. 组件开发
Component
Development
本页内容请勿 制

28. 组件开发
Component
Development
本页内容请勿 制

29. 组件开发
Component
Development
Flex组件架构及生命周期
Halo/Spark组件架构
组件生命周期

30. 组件开发
Spark架构
http://www.dehats.com/drupal/?q=node/96

31. 组件开发
Spark架构
MX/Halo组件架构 Spark组件架构
(Flex3) (Flex4)

32. 组件开发
Spark架构
M V C

33. 组件开发
Spark架构 MXHalo architecture
M V
V
C

34. 组件开发
Spark架构
Spark architecture
M C
V

35. 组件开发
Spark架构
Data
Parts
States

36. 组件开发
Spark架构
Why Flex Component
Lifecycle ?
为什么需要理解Flex组件生命周期

37. 组件开发
Spark架构
Lifecycle
?
生命周期
1. Flex Application
2. Flex Component
3. Others (Jquery/Spring/Servlet...)

38. 组件开发
帧模型
http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-flash-9-and-avm2/

39. 组件开发
帧模型
http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-flash-9-and-avm2/

40. 组件开发
帧模型
http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-flash-9-and-avm2/

41. 组件开发
帧模型
What means ?
帧模型图到底有什么用

42. 组件开发
帧模型
1. 单帧内代码可能会执行多次
2. Render 仅一次在一帧的末尾发生
3. SWF实际的帧率不会超过Marshals定的帧率

43. 组件开发
LifeCycle
Deat
Birth Life
h

44. 组件开发
LifeCycle
灰色标识的事件仅执行一次

45. 组件开发
⁃
LifeCycle ⁃
⁃
⁃
LIFE
通常在invalidation阶段提出请求，在validation阶段完成请求

46. 组件开发
LifeCycle // Create a Group container.
var groupContainer:Group = new Group();
// Configure the Group container.
groupContainer.x = 10;
groupContainer.y = 10;
// Create a Button control.
var b:Button = new Button()
// Configure the button control.
b.label = "Submit";
...
// Add the Button control to the Box
container.
groupContainer.addElement(b);

47. 组件开发
LifeCycle
// Create a Button control.
var b:Button = new Button()
调用：
BRITH Constructor

48. 组件开发
LifeCycle
// Configure the button control.
b.label = "Submit";
BRITH
调用:
invalidateProperties(),
invalidateSize(),
invalidateSkinState(),
或 invalidateDisplayList()

49. 组件开发
LifeCycle
// Add the Button control to the
Box container.
gropContainer.addElement(b);
BRITH
preinitialize
initial
http://help.adobe.com/en_US/flex/using/WS460ee381960520ad-2811830c121e9107ecb-7fff.html

50. 组件开发
LifeCycle
1. 通常须override的方法
2. 注意事件驱动的本质
3. 注意各个方法执行的顺序
4. 将Lifecycle过程对应到帧模型及Elastic Racetrack图

51. 组件开发
LifeCycle

52. 组件开发
Container Component
LifeCycle

53. 组件开发
Component
Development
组件开发的几种方式
1. 合MXML组件
2. 标准组件扩展
3. 完全自定义组件
SkinableComponent
SkinableContainer

54. 组件开发
Component
Development
复合MXML组件
composite_mxml.mxml

55. 组件开发
Component
Development
扩展Flex标准组件
MXML
ActionScript
extended_actionscript.mxml

56. 组件开发
Case Study
完全自定义组件
StatusIconSample.mxml
CustomPopUpWinSample.mxml

57. 组件开发
publish
补充部分：
组件测试准备
组件发布

58. 组件开发
Notes
多看官方文档及SDK源代码 ~~
多参考第三方开源库
多动手实践

59. 组件开发
Notes
作 业 ～～

60. 资源推荐
Link A brief overview of the Spark architecture and component set
http://www.adobe.com/devnet/flex/articles/flex4_sparkintro.html
Flex 4 Component Lifecycle
http://weblog.mrinalwadhwa.com/2009/06/21/flex-4-component-lifecycle/
Elastic RaceTrack
http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-flash-9-and-avm2/
Using Flex4 - Custom components
http://help.adobe.com/en_US/flex/using/WS4bebcd66a74275c35bf45738120d4f86190-8000.html
《Flex企业级应用 发最佳实践》 ... 写作中

61. 提问
Q&A
谢谢〜～〜～
微博: http://weibo.com/agilelife