Flex Component Life Cycle

  • 3,530 views
Uploaded on

Details the recursive life cycle of components in the Adobe Flex SDK.

Details the recursive life cycle of components in the Adobe Flex SDK.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
3,530
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
67
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide













































Transcript

  • 1. Adobe Flex Component Life Cycle http://www.on3solutions.com | Yeah, I built an app for that!
  • 2. Take Aways • Flex frame cycle • Flex component life cycle • Deferment http://www.on3solutions.com | Elements to grow from within
  • 3. Flex Component Life Cycle •What is it? •The way the SDK interacts with every Flex component •Methods the SDK calls to instantiate, control, and destroy components •Methods that make the most of the elastic racetrack http://www.on3solutions.com | Elements to grow from within
  • 4. Elastic Racetrack Source: http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for- flash-9-and-avm2/ http://www.on3solutions.com | Elements to grow from within
  • 5. Elastic Racetrack •Given a specific frame rate •Flash player will devote •First segment to execute code •Second segment to render display objects •Either segment can grow its part •To accommodate more processing •Effectively extend the duration of the frame Source: http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for- flash-9-and-avm2/ http://www.on3solutions.com | Elements to grow from within
  • 6. Single Threaded Execution Source: http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for- flash-9-and-avm2/ http://www.on3solutions.com | Elements to grow from within
  • 7. Single Threaded Execution Player events are dispatched • User code is executed • RENDER event is dispatched • Final user code is executed • Player renders changes to the display list Source: http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for- flash-9-and-avm2/ http://www.on3solutions.com | Elements to grow from within
  • 8. Sliced Frames Source: http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for- flash-9-and-avm2/ http://www.on3solutions.com | Elements to grow from within
  • 9. Life Cycle Phases CREATION construction configuration attachment initialization MODIFICATION invalidation validation interaction DISCARD detachment garbage collection http://www.on3solutions.com | Elements to grow from within
  • 10. Life Cycle Phases CREATION construction configuration attachment initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 11. Construction • A function called to instantiate a new instance of a class •created in memory MXML: <s:Button label="Hello World"/> ActionScript: CREATION construction var button:Button = new Button(); configuration button.label = "Hello World"; attachment initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 12. Available to Constructor • Properties on the class • Methods on the class • Children have NOT yet been created CREATION construction configuration attachment initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 13. A Constructor • Only one per class (no overloading!) • Must be public • No return type • If instantiated via MXML •No required arguments (all optional) • Calls super() to invoke superclass CREATION construction constructor configuration attachment initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 14. A Constructor • Only one per class (no overloading!) • Must be public public function NewComponent() { • No return type super(); } • If instantiated via MXML •No required arguments (all optional) • Calls super() to invoke superclass CREATION construction constructor configuration attachment initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 15. Constructor’s Role • Since the component’s children have not yet been created, there’s not much that can be done. • There are specific methods that should be used for most of the things you’d be tempted to put in a constructor. CREATION • A good place to add event listeners construction configuration to the object attachment initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 16. Constructor’s Role •Don’t create or attach children in the constructor •It’s best to delay the cost of createChildren calls for added children until it’s necessary CREATION construction configuration attachment initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 17. Configuration • The process of assigning values to properties on objects • In MXML, properties are assigned in this phase, before components are attached or initialized <comp:MyComponent aProperty="theValue"/> CREATION construction configuration attachment initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 18. Life Cycle So Far <s:Application ...> <comp:MyComponent aProperty="theValue"/> </s:Application> •SomeComponent constructor •SomeComponent.property setter •Add child SomeComponent CREATION construction configuration attachment initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 19. Container Life Cycle • Must not expect their children have to be instantiated when properties are set <s:Application ...> <local:NewContainer property1="value" > <comp:MyComponent property2="value"/> </local:NewContainer> </s:Application> •NewContainer constructor •NewContainer.property1 setter CREATION construction •MyComponent constructor configuration attachment initialization •MyComponent.property2 setter MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 20. Configuration Must Be Fast • Avoid performance bottlenecks •Make your setters fast •Defer any real work until validation • More about deferment in a minute •validation / invalidation section CREATION construction configuration attachment initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 21. Attachment • Adding a component to the display list •addChild •addChildAt •MXML declaration • The component life cycle is stalled after configuration until attachment occurs CREATION construction configuration attachment initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 22. Look at Example Rule of Thumb: Don’t add components to the stage until you need them http://www.on3solutions.com | Elements to grow from within
  • 23. Initialization • preinitialize event is dispatched • createChildren() is called • initialize event is dispatched • Validation pass occurs • creationComplete event is dispatched CREATION construction configuration attachment initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 24. createChildren() •Method used to add children to containers •Override this method to add children •Follow MXML’s creation strategy: create, configure, attach override protected function createChildren():void { super.createChildren(); var a:MyComp = new MyComp(); CREATION a.prop = "some string"; construction configuration this.addChild( a ); attachment } initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 25. createChildren() •Method used to add children to containers •Override this method to add children •Follow MXML’s creation strategy: create, configure, attach override protected function createChildren():void { super.createChildren(); var a:MyComp = new MyComp(); Construction CREATION a.prop = "some string"; construction configuration this.addChild( a ); attachment } initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 26. createChildren() •Method used to add children to containers •Override this method to add children •Follow MXML’s creation strategy: create, configure, attach override protected function createChildren():void { super.createChildren(); var a:MyComp = new MyComp(); Construction CREATION a.prop = "some string"; Configuration construction configuration this.addChild( a ); attachment } initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 27. createChildren() •Method used to add children to containers •Override this method to add children •Follow MXML’s creation strategy: create, configure, attach override protected function createChildren():void { super.createChildren(); var a:MyComp = new MyComp(); Construction CREATION a.prop = "some string"; Configuration construction configuration this.addChild( a ); Attachment attachment } initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 28. createChildren() • Defer creating dynamic and data-driven components until commitProperties() • It’s good practice to always call super.createChildren() CREATION construction configuration attachment initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 29. First Validation Pass • Invalidation is not part of initialization, only Validation • Validation consists of 3 methods: •commitProperties() •measure() •updateDisplayList() CREATION construction configuration attachment initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 30. Invalidation •Flex imposes deferred validation on the Flash API •Defer screen updates until all properties have been set •3 main method pairs to be aware of: invalidateProperties() commitProperties() CREATION invalidateSize() measure() construction configuration invalidateDisplayList() updateDisplayList() initialization attachment MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 31. The Central Concept • 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 CREATION construction configuration attachment initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 32. Proper Deferment • Bad public function set text( value:String ):void { myLabel.text = value; // Possible Error! during first config phase, myLabel might not exist! } • Good private var _text:String = ""; override protected function public function set text(value:String):void commitProperties():void { { textSet = true; if(textChanged) _text = value; { textChanged = true; myLabel.text = _text; invalidateProperties(); textChanged = false; invalidateSize(); } invalidateDisplayList(); super.commitProperties(); } } http://www.on3solutions.com | Elements to grow from within
  • 33. Invalidation Methods • invalidateProperties() •For deferred calculation, child management • invalidateSize() •Changes to measured size of component • invalidateDisplayList() •Changes to appearance of component CREATION construction configuration attachment initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 34. Look at Example http://www.on3solutions.com | Yeah, I built an app for that!
  • 35. Validation •Apply the changes deferred in invalidation •Update all visual aspects of the application in preparation for the render phase •3 methods: •commitProperties() •measure() CREATION construction •updateDisplayList() configuration attachment initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 36. commitProperties() • Ely says: “Calculate and commit the effects of changes to properties and underlying data.” • Invoked first - immediately before measurement and layout ALL changes based on property and data events go here • Even creating and destroying children, so long as they’re based on changes to properties or CREATION construction underlying data configuration attachment initialization • Example: any list based component with MODIFICATION invalidation empty renderers on the screen validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 37. measure() • Component calculates its preferred and minimum proportions based on content, layout rules, constraints. • Measure is called bottom up - lowest children first • Caused by invalidateSize() CREATION construction • NEVER called for explicitly sized configuration attachment components initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 38. Overriding measure() • Used for dynamic layout containers (VBox, etc.) • Use getExplicitOrMeasuredWidth() (or height) to get child proportions • ALWAYS called during initialization • Call super.measure() first! • Set measuredHeight, measuredWidth for the default values; measuredMinHeight and measuredMinWidth for minimum • Not reliable - Framework optimizes away any calls CREATION construction to measure it deems “unecessary” configuration attachment • Ely says: “Start by explicitly sizing your component initialization MODIFICATION and implement this later.” invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 39. updateDisplayList() •All drawing and layout code goes here, making this the core method for all container objects •Caused by invalidateDisplayList(); •Concerned with repositioning and resizing children CREATION construction •updateDisplayList() is called top-down configuration attachment initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 40. Overriding •Usually call super.updateDisplayList() first •super() is optional - don’t call it if you’re overriding everything it does •Size and lay out children using move(x,y) and setActualSize(w,h) if possible CREATION construction configuration attachment initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 41. Repeat Validation http://www.on3solutions.com | Elements to grow from within
  • 42. 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 CREATION construction •If an abandoned component has no configuration attachment more active references, it *should* be initialization MODIFICATION garbage collected invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 43. Detachment •Re-parenting isn’t cheap, but it’s cheaper than re-creating the same component twice •Children do not need to be removed from their parent before being re-parented, but always should be •Consider hiding rather than removing CREATION construction •set visible and includeInLayout to configuration attachment false initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 44. Garbage Collection •Reference counting and Mark & Sweep •Identified objects will be GC candidates •Set references to detached children to “null” to mark them for GC •Consider using weak references on event listeners CREATION construction configuration attachment initialization MODIFICATION invalidation validation interaction DISCARD detachment http://www.on3solutions.com | Elements to grow from within garbage collection
  • 45. Conclusion •Remember the elastic racetrack •Use validation methods correctly •Defer, Defer, DEFER! http://www.on3solutions.com | Elements to grow from within
  • 46. References • Building a Flex Component •Ely Greenfield • CraftyMind.com •Sean Christman • Component Development •Chafic Kazoun http://www.on3solutions.com | Elements to grow from within