1. Adobe Flex 3 Component
Lifecycle
Presented by Ethan Du(杜增强)
2. Who am I ?
Ethan Du
– Senior Flex Architect @ 123Show
– blog: http://www.duzengqiang.com
3. Flex
What is Flex?
• MXML
• A set of components
• The component lifecycle!
4. Flex Component Lifecycle
What is it?
• The way the framework interacts with
every Flex component
• A set of methods the framework calls to
instantiate, control, and destroy components
5. Phases of the Lifecycle
3 Main Phases:
BIRTH:
• construction, configuration,attachment,
initialization
LIFE:
• invalidation, validation, interaction
DEATH:
• detachment, garbage collection
8. What is a constructor?
A function called to instantiate (create in
memory) a new instance of a class
9. How is a constructor invoked?
Actionscript:
var theLabel : Label = new Label();
MXML:
<mx:Label id="theLabel"/>
10. What does an ActionScript3
constructor look like?
public function ComponentName()
{
super();
//blah blah blah
}
No required arguments (if it will be used in
MXML); zero, or all optional
Only one per class (no overloading!)
No return type
Must be public
Call super()…or the compiler will do it for you.
11. What should a constructor do?
A good place to add event listeners to the
object.
Not much. Since the component’s
children have not yet been created, there’s
not much that can be done.
12. Don’t create or add children in
the constructor
It’s best to delay the cost of createChildren
calls for added children until it’s necessary
14. Configuration
The process of assigning values to
properties on objects
In MXML, properties are assigned in this
phase, before components are attached or
initialized
<local:SampleChild property1="value"/>
15. Configuration Optimization
To avoid performance bottlenecks, make
your setters fast and defer any real work
until validation
We’ll talk more about deferment in the
validation / invalidation section
19. Must know about attachment
The component lifecycle is stalled after
configuration until attachment occurs.
20. Consider this component:
public class A extends UIComponent
{
public function A() {
trace( "CONSTRUCTOR" );
super();
}
override protected function createChildren() : void {
trace( "CREATECHILDREN" );
super.createChildren();
}
override protected function measure() : void {
trace( "MEASURE" );
super.measure();
}
override protected function updateDisplayList(width:Number, height:Number) : void {
trace( "UPDATEDISPLAYLIST" );
super.updateDisplayList(width,height);
}
override protected function commitProperties():void {
trace( "COMMITPROPERTIES" );
super.commitProperties();
}
(It traces all of its methods.)
21. And this application:
<mx:Application ...>
<mx:Script>
<![CDATA[
override protected function createChildren() :
void {
super.createChildren();
var a : A = new A();
}
]]>
</mx:Script>
</mx:Application>
22. Output:
CONSTRUCTOR
Without attachment, the rest of the lifecycle
doesn’t happen.
23. But what about this application?
<mx:Application ...>
<mx:Script>
<![CDATA[
override protected function createChildren() :
void {
super.createChildren();
var a : A = new A();
this.addChild( a );
}
]]>
</mx:Script>
</mx:Application>
24. Output:
CONSTRUCTOR
CREATECHILDREN
COMMITPROPERTIES
MEASURE
UPDATEDISPLAYLIST
Don’t add components to the stage
until you need them.
26. Initialization
1. ‘preInitialize’ dispatched
2. createChildren(); called
3. ‘initialize’ dispatched
4. first validation pass occurs
5. ‘creationComplete’ dispatched – component
is fully commited, measured, and updated.
27. createChildren()
MXML uses the createChildren() method to add children to
containers
Override this method to add children using AS
• Follow MXML’s creation strategy: create, configure, attach
override protected function createChildren():void
{
...
textField = new UITextField();
textField.enabled = enabled;
textField.ignorePadding = true;
textField.addEventListener("textFieldStyleChange",
textField_textFieldStyleChangeHandler);
...
...
addChild(DisplayObject(textField));
}
28. 3 Important Rules
1. Containers must contain only UIComponents
2. UIComponents must go inside other
UIComponents.
3. UIComponents can contain anything (Sprites,
Shapes, MovieClips, Video, etc).
30. Invalidation / Validation cycle
Flex imposes deferred validation on the
Flash API
• goal: defer screen updates until all
properties have been set
3 main method pairs to be aware of:
• invalidateProperties() ->
commitProperties()
• invalidateSize() -> measure()
• invalidateDisplayList() ->
updateDisplayList()
31. Deferment
Deferment is the central concept to
understand in the component Life-cycle
Use private variables and boolean flags to
defer setting any render-related properties until
the proper validation method
32. bad example
public function set text(value:String):void
{
myLabel.text = value;
}
33. good example
private var _text:String = "";
private var textChanged:Boolean = false;
public function set text(value:String):void
{
_text = value;
textChanged = true;
invalidateProperties();
invalidateSize();
invalidateDisplayList();
}
override protected function commitProperties():void{
{
if(textChanged){
myLabel.text = _text;
textChanged = false;
}
super.commitProperties();
}
38. Detachment
“Detachment” refers to the process of
removing a child from the display list
These children can be re-parented
(brought back to life) or abandoned to die
Abandoned components don’t get
validation calls and aren’t drawn
If an abandoned component has no more
active references, it *should* be garbage-
collected
40. Garbage Collection
The process by which memory is returned
to the system
Only objects with no remaining references
to them will be gc’d
• Set references to detached children to
“null” to mark them for GC
Consider using weak references on event
listeners
