Adobe Flex Component Life
          Cycle




     http://www.on3solutions.com | Yeah, I built an app for that!
Take Aways
• Flex frame cycle
• Flex component life cycle
• Deferment




           http://www.on3solutions.com | Element...
Flex Component Life Cycle
•What is it?
 •The way the SDK interacts with every Flex
  component
 •Methods the SDK calls to ...
Elastic Racetrack




                     Source: http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-
   ...
Elastic Racetrack


•Given a specific frame rate
 •Flash player will devote
   •First segment to execute code
   •Second s...
Single Threaded Execution




                        Source: http://www.craftymind.com/2008/04/18/updated-elastic-racetra...
Single Threaded Execution




  Player events are dispatched
• User code is executed
• RENDER event is dispatched
• Final ...
Sliced Frames




                     Source: http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-
       ...
Life Cycle Phases
CREATION
  construction
  configuration
  attachment
  initialization
MODIFICATION
  invalidation
  vali...
Life Cycle Phases




                                                             CREATION
                              ...
Construction
• A function called to instantiate a new
  instance of a class
 •created in memory

                         ...
Available to Constructor
• Properties on the class
• Methods on the class
• Children have NOT yet been created


         ...
A Constructor
• Only one per class (no overloading!)
• Must be public
• No return type
• If instantiated via MXML
 •No req...
A Constructor
• Only one per class (no overloading!)
• Must be public           public function NewComponent()
           ...
Constructor’s Role
• Since the component’s children have not yet
  been created, there’s not much that can be
  done.
• Th...
Constructor’s Role
•Don’t create or attach children in the
 constructor
•It’s best to delay the cost of createChildren
 ca...
Configuration
• The process of assigning values to properties
  on objects
• In MXML, properties are assigned in this
  ph...
Life Cycle So Far
 <s:Application ...>
      <comp:MyComponent aProperty="theValue"/>
 </s:Application>

•SomeComponent co...
Container Life Cycle
• Must not expect their children have to be
  instantiated when properties are set
<s:Application ......
Configuration Must Be Fast
• Avoid performance bottlenecks
 •Make your setters fast
 •Defer any real work until validation...
Attachment
• Adding a component to the display list
 •addChild
 •addChildAt
 •MXML declaration
• The component life cycle ...
Look at Example
Rule of Thumb:

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




          http://www.on3solution...
Initialization
• preinitialize event is dispatched
• createChildren() is called
• initialize event is dispatched
• Validat...
createChildren()
•Method used to add children to containers
•Override this method to add children
•Follow MXML’s creation ...
createChildren()
•Method used to add children to containers
•Override this method to add children
•Follow MXML’s creation ...
createChildren()
•Method used to add children to containers
•Override this method to add children
•Follow MXML’s creation ...
createChildren()
•Method used to add children to containers
•Override this method to add children
•Follow MXML’s creation ...
createChildren()
• Defer creating dynamic and data-driven
  components until commitProperties()
• It’s good practice to al...
First Validation Pass
• Invalidation is not part of initialization, only
  Validation
• Validation consists of 3 methods:
...
Invalidation
•Flex imposes deferred validation on the
 Flash API
 •Defer screen updates until all properties have
  been s...
The Central Concept
• Deferment is the central concept to
  understand in the component life cycle
• Use private variables...
Proper Deferment
• Bad
public function set text( value:String ):void
{
myLabel.text = value;
// Possible Error! during firs...
Invalidation Methods
• invalidateProperties()
 •For deferred calculation, child management
• invalidateSize()
 •Changes to...
Look at Example




http://www.on3solutions.com | Yeah, I built an app for that!
Validation
•Apply the changes deferred in invalidation
•Update all visual aspects of the application
 in preparation for t...
commitProperties()
• Ely says: “Calculate and commit the effects of
  changes to properties and underlying data.”
• Invoke...
measure()
• Component calculates its preferred and
  minimum proportions based on content,
  layout rules, constraints.
• ...
Overriding measure()
• Used for dynamic layout containers (VBox, etc.)
• Use getExplicitOrMeasuredWidth() (or height) to g...
updateDisplayList()
•All drawing and layout code goes here,
 making this the core method for all
 container objects
•Cause...
Overriding
•Usually call super.updateDisplayList() first
•super() is optional - don’t call it if you’re
 overriding everyt...
Repeat Validation




http://www.on3solutions.com | Elements to grow from within
Detachment
•“Detachment” refers to the process of
 removing a child from the display list
•These children can be re-parent...
Detachment
•Re-parenting isn’t cheap, but it’s cheaper
 than re-creating the same component twice
•Children do not need to...
Garbage Collection
•Reference counting and Mark & Sweep
 •Identified objects will be GC candidates
•Set references to deta...
Conclusion
•Remember the elastic racetrack
•Use validation methods correctly
•Defer, Defer, DEFER!




           http://w...
References
• Building a Flex Component
 •Ely Greenfield
• CraftyMind.com
 •Sean Christman
• Component Development
 •Chafic...
Upcoming SlideShare
Loading in...5
×

Flex Component Life Cycle

3,636

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,636
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
68
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide













































  • Flex Component Life Cycle

    1. 1. Adobe Flex Component Life Cycle http://www.on3solutions.com | Yeah, I built an app for that!
    2. 2. Take Aways • Flex frame cycle • Flex component life cycle • Deferment http://www.on3solutions.com | Elements to grow from within
    3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 34. Look at Example http://www.on3solutions.com | Yeah, I built an app for that!
    35. 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. 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. 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. 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. 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. 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. 41. Repeat Validation http://www.on3solutions.com | Elements to grow from within
    42. 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. 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. 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. 45. Conclusion •Remember the elastic racetrack •Use validation methods correctly •Defer, Defer, DEFER! http://www.on3solutions.com | Elements to grow from within
    46. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×