杜增强-Flex3组件生命周期

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

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)

Methods addingChild(child); $addChildAt(child, index); childAdded(child);

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

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.

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

References Ely Greenfield: “Building a Flex Component” •http://www.onflex.org/ACDS/BuildingAFlexCo mponent.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/

http://www.duzengqiang.com	287
http://www.slideshare.net	12
http://www.zhuaxia.com	3
http://zhuaxia.com	1
http://translate.googleusercontent.com	1

杜增强-Flex3组件生命周期

by beyond0102 on Jun 12, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 304

Statistics

杜增强-Flex3组件生命周期 — Presentation Transcript