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

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