杜增强-Flex3组件生命周期

2,484 views
2,403 views

Published on

杜增强-Flex3组件生命周期

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
  • 您好,我叫于小龙,正在学习flex相关知识,想研究flex性能优化,恳请杜老师指点一二,或者提供一些学习资料,非常感谢,祝工作顺利!身体健康!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,484
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
52
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

杜增强-Flex3组件生命周期

  1. 1. Adobe Flex 3 Component Lifecycle Presented by Ethan Du(杜增强)
  2. 2. Who am I ? Ethan Du – Senior Flex Architect @ 123Show – blog: http://www.duzengqiang.com
  3. 3. Flex   What is Flex? • MXML • A set of components • The component lifecycle!
  4. 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. 5. Phases of the Lifecycle   3 Main Phases:   BIRTH: • construction, configuration,attachment, initialization   LIFE: • invalidation, validation, interaction   DEATH: • detachment, garbage collection
  6. 6. Birth
  7. 7. Construction
  8. 8. What is a constructor?   A function called to instantiate (create in memory) a new instance of a class
  9. 9. How is a constructor invoked? Actionscript: var theLabel : Label = new Label(); MXML: <mx:Label id="theLabel"/>
  10. 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. 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. 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. 13. Configuration
  14. 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. 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. 16. Attachment
  17. 17. What is attachment?   Adding a component to the display list (addChild, addChildAt, MXML declaration)
  18. 18. Methods addingChild(child); $addChildAt(child, index); childAdded(child);
  19. 19. Must know about attachment   The component lifecycle is stalled after configuration until attachment occurs.
  20. 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. 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. 22. Output: CONSTRUCTOR   Without attachment, the rest of the lifecycle doesn’t happen.
  23. 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. 24. Output: CONSTRUCTOR CREATECHILDREN COMMITPROPERTIES MEASURE UPDATEDISPLAYLIST Don’t add components to the stage until you need them.
  25. 25. Initialization
  26. 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. 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. 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).
  29. 29. Life
  30. 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. 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. 32. bad example public function set text(value:String):void { myLabel.text = value; }
  33. 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. 34. Interaction
  35. 35. Interaction   Flex is an Event Driven Interaction Model.
  36. 36. Death
  37. 37. Detachment
  38. 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. 39. Garbage Collection
  40. 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. 41. Conclusion   Defer, Defer, DEFER!   Use validation methods correctly
  42. 42. Conclusion   Defer, Defer, DEFER!   Use validation methods correctly
  43. 43. 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/
  44. 44. QA

×