flex 4 component lifecycle
DESCRIPTION
The talk goes into the details of how the flash player works, why a component needs a lifecycle and the various stages of a components life.Related Experimental code can be found at http://weblog.mrinalwadhwa.com/2009/06/21/flex-4-component-lifecycle/TRANSCRIPT
![Page 1: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/1.jpg)
A Flex 4 Component’s life cycle
Mrinal Wadhwa
http://www.mrinalwadhwa.com
![Page 2: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/2.jpg)
What is a life cycle?
![Page 3: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/3.jpg)
![Page 4: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/4.jpg)
Why does a Flex component need a life cycle?
![Page 5: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/5.jpg)
Flex applications run in the Flash Player
![Page 6: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/6.jpg)
What Flex can do is a subset of what the Flash Player can do, not a superset.
![Page 7: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/7.jpg)
so to understand flex components better, lets take a deeper look at how the flash player works ...
![Page 8: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/8.jpg)
Frames
![Page 9: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/9.jpg)
Frameseverything is done in frames ...
![Page 10: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/10.jpg)
Frame Ratethe number of frames processed per second (fps)
![Page 11: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/11.jpg)
Frame Rateyou can suggest the player a frame rate you
would like your swf to have ...
![Page 12: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/12.jpg)
Frame Rate[SWF(width=”800”,height=”600”,frameRate=”60”)]
ORstage.frameRate = 60;
OR<s:Application frameRate=”60” ... >
![Page 13: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/13.jpg)
Frame Rate
lets look at some code to see what the player does with this suggestion ...
view code
![Page 14: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/14.jpg)
Frame Rate
some observations from our experiment ....
![Page 15: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/15.jpg)
Frame Rate
the player tries its best to maintain the suggested frame rate, but there are no guarantees ...
![Page 16: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/16.jpg)
Frame Rate
the actual framerate achieved may be lower or higher than what we suggested ...
![Page 17: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/17.jpg)
Frame Rate
browsers can force a lower framerate on the flash player ...
![Page 18: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/18.jpg)
Frame Rate
In Firefox and Safari, frame rate falls to about 10 if the Tab running the swf is out of focus ...
![Page 19: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/19.jpg)
Frame RateIn Safari if window is minimized,
framerate falls to zero ..
![Page 20: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/20.jpg)
now lets take a deeper look at what happens inside each frame ..
![Page 21: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/21.jpg)
now lets take a deeper look at what happens inside each frame ..
lets look at some more test code first ..
view code
![Page 22: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/22.jpg)
1 frame
renderingcode execution
the length of the track represents the time taken by this frame
![Page 23: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/23.jpg)
1 frame
renderingcode execution
the length of the track represents the time taken by this frame
what we saw in our experiment ..
![Page 24: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/24.jpg)
1 frame
renderingcode execution
1 frame
heavy code execution
the length of the track represents the time taken by this frame
what we saw in our experiment ..
![Page 25: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/25.jpg)
1 frame
renderingcode execution
1 frame
heavy code execution heavy rendering
1 frame
the length of the track represents the time taken by this frame
what we saw in our experiment ..
![Page 26: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/26.jpg)
the length of the track represents the time taken by this frame
1 frame
renderingcode execution
1 frame
heavy code execution heavy rendering
1 frame
Ted Patrick called this ...
![Page 27: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/27.jpg)
the length of the track represents the time taken by this frame
1 frame
renderingcode execution
1 frame
heavy code execution heavy rendering
1 frame
The Elastic Racetrack
![Page 28: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/28.jpg)
Sean Christmann did some more research on this ...
![Page 29: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/29.jpg)
he proposed AVM2 is controlled by something he called the Marshal ..
The Marshal
![Page 30: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/30.jpg)
The Marshal
the marshal is responsible for carving out time slices ...
![Page 31: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/31.jpg)
The Marshal
the duration of a slice can vary based on your OS,browser etc.
just for our discussion lets assume a slice is 20ms long ..
![Page 32: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/32.jpg)
A Marshaled Slice
![Page 33: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/33.jpg)
but all these actions may not happen on each slice ...
A Marshaled Slice
![Page 34: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/34.jpg)
Flash Player’s Event.RENDER event is fired at this point
A Marshaled Slice
![Page 35: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/35.jpg)
invalidate action and render action only happen in the last slice of a frame ..
A Marshaled Slice
![Page 36: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/36.jpg)
lets experiment with some more code ...
view code
![Page 37: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/37.jpg)
so from our experiment the marshal does seem to be carving out 20ms slices ...
![Page 38: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/38.jpg)
with 20ms slices ...
![Page 39: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/39.jpg)
code execution
with 20ms slices ...
![Page 40: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/40.jpg)
render
with 20ms slices ...
![Page 41: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/41.jpg)
with 20ms slices ...
![Page 42: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/42.jpg)
code execution
with 20ms slices ...
![Page 43: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/43.jpg)
render
with 20ms slices ...
![Page 44: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/44.jpg)
with 20ms slices ...
![Page 45: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/45.jpg)
the marshal pre calculates the number of slices ...
![Page 46: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/46.jpg)
long running code execution or render segments can extend a given slice beyond 20ms
this may or may not cause the the duration of the frame to increase ...
![Page 47: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/47.jpg)
A swfs actual framerate won’t exceed the Marshals rate defined for the player instance ...
![Page 48: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/48.jpg)
Code can be executed more often then the compiled framerate ...
i.e in a single frame calculation can happen many times but rendering happens only once at the end
![Page 49: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/49.jpg)
Code can be executed more often then the compiled framerate ...
i.e in a single frame calculation can happen many times but rendering happens only once at the end
Code can be executed more often then the compiled framerate ...
This is very significant
![Page 50: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/50.jpg)
now lets come back to our original question ...
![Page 51: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/51.jpg)
Why does a Flex component need a life cycle?
![Page 52: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/52.jpg)
Since code can execute more often than rendering .. you could potentially do calculations that have no
effect ...
![Page 53: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/53.jpg)
for example, lets say you change the width of a component ...
![Page 54: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/54.jpg)
this will cause the component, its container (and its containers container, so on ...),
its surrounding components etc. to recalculate size and positioning of themselves and all their children ..
i.e a lot of calculation will happen.
![Page 55: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/55.jpg)
now in the next code segment you change width of your component again .... all that calculation will
happen again ...
now since code segments can execute more times than render segments ...
![Page 56: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/56.jpg)
your first set of calculations for change in width could potentially be useless ..
![Page 57: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/57.jpg)
... this is the main reason a component needs a life cycle
performance
![Page 58: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/58.jpg)
so what is the life cycle of a component ...
![Page 59: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/59.jpg)
BIRTH
![Page 60: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/60.jpg)
BIRTH
LIFE
![Page 61: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/61.jpg)
BIRTH
LIFE
DEATH
![Page 62: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/62.jpg)
Construction
Addition
Initialization
BIRTH
LIFE
DEATH
![Page 63: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/63.jpg)
Construction
Addition
Initialization
BIRTH
Invalidation
Validation
Update
LIFE
DEATH
![Page 64: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/64.jpg)
Construction
Addition
Initialization
Invalidation
Validation
Update
Removal
BIRTH
LIFE
DEATH
![Page 65: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/65.jpg)
lets setup some breakpoints and walk through some code as we look at
each of these phases ..
![Page 66: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/66.jpg)
var b:MyButton = new MyButton();
Construction
• not much happens in this phase• thats good because Constructors are not JIT• the component is given a name in FlexSprite• event listeners are added
![Page 67: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/67.jpg)
this.addChild(b);
Addition
• calls addingChild(), $addChild() and childAdded()• a lot happens in addingChild(), • child’s parent and document properties are set etc. • $addChild() is the flash player method that adds the component to the display list • childAdded() calls the initialize() method of the child if not initialized
![Page 68: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/68.jpg)
initialize(); // called by the parent’s childAdded
Initialization
•fires FlexEvent.PREINITIALIZE when it starts•calls createChildren() .. where children of this component
are created and added to itself•fires FlexEvent.INITIALIZED when it ends
![Page 69: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/69.jpg)
a component has been born ...
Construction
Addition
Initialization
BIRTH
![Page 70: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/70.jpg)
Construction
Addition
Initialization
BIRTH
LIFE
![Page 71: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/71.jpg)
Invalidation
Validation
Update
LIFE
Construction
Addition
Initialization
BIRTH
![Page 72: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/72.jpg)
Invalidation
Validation
Update
LIFE
![Page 73: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/73.jpg)
Invalidation
Validation
Update
LIFE
Event.RENDER
updateDisplayList
layoutChrome(optional)
measure
commitProperties
invalidateDisplayList
invalidateSize
invalidateProperties
![Page 74: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/74.jpg)
Invalidation/Validation cycle (Life)
this is how the framework defers calculations to the end of the frame, just before rendering ...
![Page 75: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/75.jpg)
Invalidation/Validation cycle (Life)
when a property changes...
•its new value is stored in a temp variable, •a dirty flag is set,•and invalidate methods are called.
![Page 76: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/76.jpg)
Invalidation/Validation cycle (Life)
the LayoutManager keeps track of invalidated components
![Page 77: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/77.jpg)
Invalidation/Validation cycle (Life)
the invalidation methods tell the LayoutManager that a component is now in an invalid state
![Page 78: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/78.jpg)
Invalidation/Validation cycle (Life)
LayoutManger listens for Event.RENDER and calls corresponding validate methods when the render event occurs
![Page 79: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/79.jpg)
Invalidation/Validation cycle (Life)
invalidateProperties
invalidateSize
invalidateDisplayList
commitProperties
measure
updateDisplayList
![Page 80: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/80.jpg)
Invalidation/Validation cycle (Life)
finally an UPDATE_COMPLETE event is dispatched
![Page 81: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/81.jpg)
Invalidation
Validation
Update
LIFE
Construction
Addition
Initialization
BIRTH
![Page 82: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/82.jpg)
Invalidation
Validation
Update
LIFE
Construction
Addition
Initialization
BIRTH
DEATH
![Page 83: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/83.jpg)
Construction
Addition
Initialization
Invalidation
Validation
Update
Removal
BIRTH
LIFE
DEATH
![Page 84: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/84.jpg)
this.removeChild(b);
Removal (death)
• $removeChild() is the flash player method that removes the component from the display list
![Page 85: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/85.jpg)
All that we saw till now has been the same since Flex 2 and Flash Player 9 ..
maybe even before that, I’m not sure
![Page 86: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/86.jpg)
So what has changed in Flex 4?
![Page 87: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/87.jpg)
not much ....
![Page 88: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/88.jpg)
not much ....
at least from a life cycle perspective ..
![Page 89: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/89.jpg)
Flex 3 Component Model (Halo)
![Page 90: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/90.jpg)
Flex 4 Component Model (Spark)
Flex 3 Component Model (Halo)
![Page 91: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/91.jpg)
Flex 4 Component Model (Spark)
Flex 3 Component Model (Halo)
Spark is built on top of Halo ....
![Page 92: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/92.jpg)
Flex 4 Component Model (Spark)
Flex 3 Component Model (Halo)
SkinnableComponent extends UIComponent ...
![Page 93: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/93.jpg)
SkinnableComponent lives the same life cycle ...
![Page 94: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/94.jpg)
the Skin is a child to the component and lives its own life cycle ...
![Page 95: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/95.jpg)
lets step through some more code ...
![Page 96: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/96.jpg)
some observations ...
![Page 97: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/97.jpg)
createChildren() of SkinnableComponent calls validateSkinState() which in turn calls
attachSkin() ...
![Page 98: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/98.jpg)
attachSkin() creates the skin and adds it as a child ...
which in turn kicks off the life cycle of the skin
![Page 99: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/99.jpg)
attachSkin() also calls findSkinParts() which looks though the children of the skin and populates our
declared static part references
![Page 100: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/100.jpg)
attachSkin() also calls findSkinParts() which looks though the children of the skin and populates our
declared static part references
findSkinParts() calls partAdded() for all the static parts it finds
![Page 101: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/101.jpg)
attachSkin() also calls findSkinParts() which looks though the children of the skin and populates our
declared static part references
findSkinParts() calls partAdded() for all the static parts it finds
also throws an exception if it does not find a required part
![Page 102: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/102.jpg)
at a later time, when you create a dynamic part using createDynamicPartInstance()
that method calls partAdded() as well
![Page 103: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/103.jpg)
?
![Page 104: Flex 4 Component Lifecycle](https://reader034.vdocument.in/reader034/viewer/2022052601/558a47b6d8b42a9a368b4655/html5/thumbnails/104.jpg)
Mrinal Wadhwa
http://www.mrinalwadhwa.com
http://twitter.com/mrinal