Adobe Flex 3 Component Lifecycle

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

6. Birth

7. Construction

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? publicfunction 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

13. Configuration

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

16. Attachment

17. What is attachment? ‣ Adding a component to the display list (addChild, addChildAt, MXML declaration)

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

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.

25. Initialization

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. UIComponentsmust go inside other UIComponents. 3. UIComponents can contain anything (Sprites, Shapes, MovieClips, Video, etc).

29. Life

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

34. Interaction

35. Interaction ‣Flex is an Event Driven Interaction Model.

36. Death

37. Detachment

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

39. Garbage Collection

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

41. Conclusion ‣ Defer, Defer, DEFER! ‣ Use validation methods correctly

42. Conclusion ‣ Defer, Defer, DEFER! ‣ Use validation methods correctly

43. 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/

44. QA