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 createChildrencalls 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: CONSTRUCTORCREATECHILDRENCOMMITPROPERTIESMEASUREUPDATEDISPLAYLIST

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

Initialization

Initialization

1. ‘preInitialize’ dispatched2. createChildren(); called3. ‘initialize’ dispatched4. first validation pass occurs5. ‘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 UIComponents2. 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