狠狠撸

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

2011.08.24

组件开发事件驱动机制
Contents Flex4.x开发核心技术数据绑定机制

数据集合

组件演示

组件开发实战 Flex组件生命周期
动手实践组件开发

Q&A

核心技术

Event

事件驱动机制

Flex4.X开发核心技术数据绑定机制

数据集合

核心技术

Event

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

核心技术

Event

public function addEventListener(
type:String, listener:Function,
useCapture:Boolean = false, priority:int = 0,
useWeakReference:Boolean = false):void

核心技术

Event

显示列表
Display List

核心技术

Event

事件流
Event Flow
EventFlow.mxml

核心技术

Event

自定义事件
Custom Event
CustomEvent.as

核心技术

Event

事件派发：

dispatchEvent(new CustomEvent("传递的错误消息内容"));

事件侦听：

someComponent.addEventListener(CustomEvent.ERROR_MESSAGE_EVENT,
onCustomEventHandler);

核心技术

Event

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

核心技术

Event

扩展阅读
1. EventBroker
2. AS3 Signals
3. Parsley消息机制
4. PureMVC消息机制

核心技术

Data Binding

数据绑定
什么是数据绑定？

核心技术

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

核心技术

Data Binding

1. { }
<s:TextInput id="txtInputA" />
<s:TextInput id="txtInputB" text="{txtInputA.text}"/>

核心技术

Data Binding

2. <Binding/>
<fx:Binding source="txtInputA.text"
destination="txtInputB.text"/>
<s:TextInput id="txtInputA" />
<s:TextInput id="txtInputB" />

核心技术

Data Binding

3. BindingUtil
BindingUtils.bindProperty(txtInputB, "text",
txtInputA, "text");

核心技术

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();

核心技术

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"/>

核心技术

Data Binding

6. [Bindable]
[Bindable]
public var person:Person = new Person();

[Bindable(event="customEvent")]
public function get person():Person {
return _person;
}

在类前使用绑定元标签
......

核心技术

Data Binding

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

核心技术

Data Binding

数据绑定最佳实践

核心技术
Data
Collection

Flex中的数据集合
此部分放在后面的与服务器端通信的课程中谈论

核心技术
Data
Collection

数据集合实践与应用
1. ArrayCollection与Array
2. XMLListCollection与XMLList
3. 数据集合的访问与操作
4. 最佳实践

核心技术
Data
Collection

组件开发
Component
Development

组件演示

组件开发实战 Flex组件生命周期
动手实践组件开发

组件开发
Component
Development

本页内容请勿制

组件开发
Component
Development

Flex组件架构及生命周期
Halo/Spark组件架构
组件生命周期

组件开发

Spark架构

http://www.dehats.com/drupal/?q=node/96

组件开发

Spark架构

MX/Halo组件架构 Spark组件架构
(Flex3) (Flex4)

组件开发

Spark架构

M V C

组件开发

Spark架构 MXHalo architecture

M V
V
C

组件开发

Spark架构
Spark architecture

M C
V

组件开发

Spark架构

Data

Parts

States

组件开发

Spark架构

Why Flex Component
Lifecycle ?
为什么需要理解Flex组件生命周期

组件开发

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

组件开发

帧模型

http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-?ash-9-and-avm2/

组件开发

帧模型

What means ?
帧模型图到底有什么用

组件开发

帧模型

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

组件开发

LifeCycle

Deat
Birth Life
h

组件开发

LifeCycle

灰色标识的事件仅执行一次

组件开发
?
LifeCycle ?

?

?

LIFE

通常在invalidation阶段提出请求，在validation阶段完成请求

组件开发

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);

组件开发

LifeCycle
// Create a Button control.
var b:Button = new Button()

调用：
BRITH Constructor

组件开发

LifeCycle
// Configure the button control.
b.label = "Submit";

BRITH
调用:
invalidateProperties(),
invalidateSize(),
invalidateSkinState(),
或 invalidateDisplayList()

组件开发

LifeCycle
// Add the Button control to the
Box container.
gropContainer.addElement(b);

BRITH
preinitialize

initial

http://help.adobe.com/en_US/?ex/using/WS460ee381960520ad-2811830c121e9107ecb-7fff.html

组件开发

LifeCycle

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

组件开发
Container Component
LifeCycle

组件开发
Component
Development

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

组件开发
Component
Development

复合MXML组件
composite_mxml.mxml

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

组件开发

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

组件开发

publish

补充部分：
组件测试准备
组件发布

组件开发

Notes

多看官方文档及SDK源代码 ~~
多参考第三方开源库
多动手实践

组件开发

Notes

作业～～

资源推荐
Link A brief overview of the Spark architecture and component set
http://www.adobe.com/devnet/?ex/articles/?ex4_sparkintro.html

Flex 4 Component Lifecycle
http://weblog.mrinalwadhwa.com/2009/06/21/?ex-4-component-lifecycle/

Elastic RaceTrack
http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-?ash-9-and-avm2/

Using Flex4 - Custom components
http://help.adobe.com/en_US/?ex/using/WS4bebcd66a74275c35bf45738120d4f86190-8000.html

《Flex公司级应用发最佳实践》 ... 写作中

提问
Q&A

谢谢?～?～
微博: http://weibo.com/agilelife

狠狠撸

Flex 4.5 action custom component development

Recommended

More Related Content

What's hot (12)

Similar to Flex 4.5 action custom component development (20)

Flex 4.5 action custom component development

Editor's Notes