Adobe Flex 3 Component Lifecycle

Presented by Ethan Du(杜增强 )

Who am I ?

Ethan Du– Senior Flex Architect @ 123Show

– blog: http://www.duzengqiang.com

Flex

‣What is Flex?• MXML

• A set of components

• The component lifecycle!

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

Phases of the Lifecycle

‣ 3 Main Phases: ‣ BIRTH:

• construction, configuration,attachment, initialization

‣ LIFE:

• invalidation, validation, interaction

‣ DEATH:

• detachment, garbage collection

Birth

Construction

What is a constructor?

‣ A function called to instantiate (create in

memory) a new instance of a class

How is a constructor invoked?

Actionscript:

var theLabel : Label = new Label();

MXML:

<mx:Label id="theLabel"/>

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.

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.

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

Configuration

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

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

Attachment

What is attachment?

‣ Adding a component to the display list

(addChild, addChildAt, MXML declaration)

addingChild(child);

$addChildAt(child, index);

childAdded(child);

Methods

Must know about attachment

‣ The component lifecycle is stalled after

configuration until attachment occurs.

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

And this application:

<mx:Application ...> <mx:Script>

<![CDATA[ override protected function

createChildren() : void { super.createChildren(); var a : A = new A();

} ]]>

</mx:Script></mx:Application>

Output:

CONSTRUCTOR

‣Without attachment, the rest of the lifecycle

doesn’t happen.

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>

Output: CONSTRUCTOR

CREATECHILDREN

COMMITPROPERTIES

MEASURE

UPDATEDISPLAYLIST

Don’t add components to the stage until you need them.

Initialization

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.

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

}

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

Life

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

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

bad example

public function set text(value:String):void

{

myLabel.text = value;

}

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

}

Interaction

Interaction

‣Flex is an Event Driven Interaction Model.

Death

Detachment

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

Garbage Collection

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

Conclusion

‣ Defer, Defer, DEFER!

‣ Use validation methods correctly

Conclusion

‣ Defer, Defer, DEFER!

‣ Use validation methods correctly

References

‣ Ely Greenfield: “Building a Flex Component”

•http://www.onflex.org/ACDS/BuildingAFlexComponent.pdf

‣ RJ Owen: “Flex 3 Component Life-cycle”

•http://rjria.blogspot.com/2009/04/cf-united-express-denver-presentation.html

‣Mrinal Wadhwa: “Flex 4 Component Lifecycle”

•http://weblog.mrinalwadhwa.com/2009/06/21/flex-4-component-lifecycle/

QA