Your SlideShare is downloading. ×
0
A Flex 4 Component’s life cycle




             Mrinal Wadhwa
       http://www.mrinalwadhwa.com
What is a life cycle?
Why does a Flex component
    need a life cycle?
Flex applications run in the
       Flash Player
What Flex can do is a subset of what
the Flash Player can do, not a superset.
so to understand flex components better, lets take a
    deeper look at how the flash player works ...
Frames
Frames
everything is done in frames ...
Frame Rate
the number of frames processed per second (fps)
Frame Rate
you can suggest the player a frame rate you
      would like your swf to have ...
Frame Rate
[SWF(width=”800”,height=”600”,frameRate=”60”)]

                      OR
             stage.frameRate = 60;
   ...
Frame Rate
lets look at some code to see what the player
          does with this suggestion ...


                 view c...
Frame Rate
some observations from our experiment ....
Frame Rate
the player tries its best to maintain the suggested
   frame rate, but there are no guarantees ...
Frame Rate
the actual framerate achieved may be lower or higher
              than what we suggested ...
Frame Rate
browsers can force a lower framerate on the
              flash player ...
Frame Rate
In Firefox and Safari, frame rate falls to about 10 if
      the Tab running the swf is out of focus ...
Frame Rate
In Safari if window is minimized,
    framerate falls to zero ..
now lets take a deeper look at what happens inside
                   each frame ..
now lets take a deeper look at what happens inside
                   each frame ..




      lets look at some more test ...
code execution             rendering




                 1 frame




                               the length of the tra...
what we saw in our experiment ..




code execution             rendering




                 1 frame




               ...
what we saw in our experiment ..




code execution             rendering               heavy code execution




         ...
what we saw in our experiment ..




code execution             rendering               heavy code execution              ...
Ted Patrick called this ...




code execution             rendering               heavy code execution                   ...
The Elastic Racetrack


code execution             rendering               heavy code execution                          h...
Sean Christmann did some more research on this ...
The Marshal
he proposed AVM2 is controlled by something he
             called the Marshal ..
The Marshal
the marshal is responsible for carving out time
                   slices ...
The Marshal
    the duration of a slice can vary based on your
                   OS,browser etc.

just for our discussion...
A Marshaled Slice
A Marshaled Slice




but all these actions may not happen on each slice ...
A Marshaled Slice




Flash Player’s Event.RENDER event is fired at this point
A Marshaled Slice




invalidate action and render action only happen in
             the last slice of a frame ..
lets experiment with some more code ...



              view code
so from our experiment the marshal does seem
        to be carving out 20ms slices ...
with 20ms slices ...
with 20ms slices ...




code execution
with 20ms slices ...




                       render
with 20ms slices ...
with 20ms slices ...




code execution
with 20ms slices ...




render
with 20ms slices ...
the marshal pre calculates the number of slices ...
long running code execution or render segments can
         extend a given slice beyond 20ms

 this may or may not cause t...
A swfs actual framerate won’t exceed the Marshals
      rate defined for the player instance ...
Code can be executed more often then the compiled
                  framerate ...

 i.e in a single frame calculation can ...
Code can be executed more often then the compiled
                  framerate ...

 i.e in a single frame calculation can ...
now lets come back to our original question ...
Why does a Flex component
    need a life cycle?
Since code can execute more often than rendering ..
 you could potentially do calculations that have no
                  ...
for example, lets say you change the width of a
                 component ...
this will cause the component, its container
        (and its containers container, so on ...),
 its surrounding component...
now in the next code segment you change width of
 your component again .... all that calculation will
                 hap...
your first set of calculations for change in width could
                potentially be useless ..
... this is the main reason a component needs a
                      life cycle


             performance
so what is the life cycle of a component ...
BIRTH
BIRTH




LIFE
BIRTH




 LIFE




DEATH
Construction

  Addition       BIRTH


Initialization




                  LIFE




                 DEATH
Construction

  Addition       BIRTH


Initialization


Invalidation
                  LIFE
 Validation

  Update


      ...
Construction

  Addition       BIRTH


Initialization


Invalidation
                  LIFE
 Validation

  Update


  Remo...
lets setup some breakpoints and walk
  through some code as we look at
        each of these phases ..
Construction

 var b:MyButton = new MyButton();




• not much happens in this phase
• thats good because Constructors are...
Addition

                             this.addChild(b);




• calls addingChild(), $addChild() and childAdded()
• a lot h...
Initialization

      initialize();   // called by the parent’s childAdded




• fires FlexEvent.PREINITIALIZE when it star...
Construction

   Addition                     BIRTH


  Initialization


a component has been born ...
Construction

  Addition       BIRTH


Initialization




                 LIFE
Construction

  Addition       BIRTH


Initialization


Invalidation
                 LIFE
 Validation

  Update
Invalidation
               LIFE
Validation

  Update
Invalidation
 invalidateProperties

     invalidateSize

 invalidateDisplayList




 Event.RENDER

                       ...
Invalidation/Validation cycle (Life)

this is how the framework defers calculations to the end of the
                 fra...
Invalidation/Validation cycle (Life)

            when a property changes...

    •its new value is stored in a temp varia...
Invalidation/Validation cycle (Life)

the LayoutManager keeps track of invalidated components
Invalidation/Validation cycle (Life)

the invalidation methods tell the LayoutManager that a component is
                ...
Invalidation/Validation cycle (Life)

LayoutManger listens for Event.RENDER and calls corresponding
       validate method...
Invalidation/Validation cycle (Life)

 invalidateProperties    commitProperties

 invalidateSize          measure

 invali...
Invalidation/Validation cycle (Life)

   finally an UPDATE_COMPLETE event is dispatched
Construction

  Addition       BIRTH


Initialization


Invalidation
                 LIFE
 Validation

  Update
Construction

  Addition       BIRTH


Initialization


Invalidation
                  LIFE
 Validation

  Update


      ...
Construction

  Addition       BIRTH


Initialization


Invalidation
                  LIFE
 Validation

  Update


  Remo...
Removal (death)

             this.removeChild(b);




• $removeChild() is the flash player method that
  removes the compo...
All that we saw till now has been the same
      since Flex 2 and Flash Player 9 ..




       maybe even before that, I’m...
So what has changed in
       Flex 4?
not much ....
not much ....



at least from a life cycle perspective ..
Flex 3 Component Model (Halo)
Flex 4 Component Model (Spark)


Flex 3 Component Model (Halo)
Flex 4 Component Model (Spark)


Flex 3 Component Model (Halo)


  Spark is built on top of Halo ....
Flex 4 Component Model (Spark)


    Flex 3 Component Model (Halo)


SkinnableComponent extends UIComponent ...
SkinnableComponent lives the same
           life cycle ...
the Skin is a child to the component
    and lives its own life cycle ...
lets step through some more code ...
some observations ...
createChildren() of SkinnableComponent calls
    validateSkinState() which in turn calls
               attachSkin() ...
attachSkin() creates the skin and adds it as a
                   child ...

which in turn kicks off the life cycle of the...
attachSkin() also calls findSkinParts() which looks
though the children of the skin and populates our
         declared sta...
attachSkin() also calls findSkinParts() which looks
though the children of the skin and populates our
         declared sta...
attachSkin() also calls findSkinParts() which looks
though the children of the skin and populates our
         declared sta...
at a later time, when you create a dynamic part
       using createDynamicPartInstance()

    that method calls partAdded(...
?
Mrinal Wadhwa


http://www.mrinalwadhwa.com
  http://twitter.com/mrinal
Flex 4 Component Lifecycle
Upcoming SlideShare
Loading in...5
×

Flex 4 Component Lifecycle

11,064

Published on

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/

Published in: Technology, Business
2 Comments
15 Likes
Statistics
Notes
No Downloads
Views
Total Views
11,064
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
365
Comments
2
Likes
15
Embeds 0
No embeds

No notes for slide

Transcript of "Flex 4 Component Lifecycle"

  1. 1. A Flex 4 Component’s life cycle Mrinal Wadhwa http://www.mrinalwadhwa.com
  2. 2. What is a life cycle?
  3. 3. Why does a Flex component need a life cycle?
  4. 4. Flex applications run in the Flash Player
  5. 5. What Flex can do is a subset of what the Flash Player can do, not a superset.
  6. 6. so to understand flex components better, lets take a deeper look at how the flash player works ...
  7. 7. Frames
  8. 8. Frames everything is done in frames ...
  9. 9. Frame Rate the number of frames processed per second (fps)
  10. 10. Frame Rate you can suggest the player a frame rate you would like your swf to have ...
  11. 11. Frame Rate [SWF(width=”800”,height=”600”,frameRate=”60”)] OR stage.frameRate = 60; OR <s:Application frameRate=”60” ... >
  12. 12. Frame Rate lets look at some code to see what the player does with this suggestion ... view code
  13. 13. Frame Rate some observations from our experiment ....
  14. 14. Frame Rate the player tries its best to maintain the suggested frame rate, but there are no guarantees ...
  15. 15. Frame Rate the actual framerate achieved may be lower or higher than what we suggested ...
  16. 16. Frame Rate browsers can force a lower framerate on the flash player ...
  17. 17. Frame Rate In Firefox and Safari, frame rate falls to about 10 if the Tab running the swf is out of focus ...
  18. 18. Frame Rate In Safari if window is minimized, framerate falls to zero ..
  19. 19. now lets take a deeper look at what happens inside each frame ..
  20. 20. now lets take a deeper look at what happens inside each frame .. lets look at some more test code first .. view code
  21. 21. code execution rendering 1 frame the length of the track represents the time taken by this frame
  22. 22. what we saw in our experiment .. code execution rendering 1 frame the length of the track represents the time taken by this frame
  23. 23. what we saw in our experiment .. code execution rendering heavy code execution 1 frame 1 frame the length of the track represents the time taken by this frame
  24. 24. what we saw in our experiment .. code execution rendering heavy code execution heavy rendering 1 frame 1 frame 1 frame the length of the track represents the time taken by this frame
  25. 25. Ted Patrick called this ... code execution rendering heavy code execution heavy rendering 1 frame 1 frame 1 frame the length of the track represents the time taken by this frame
  26. 26. The Elastic Racetrack code execution rendering heavy code execution heavy rendering 1 frame 1 frame 1 frame the length of the track represents the time taken by this frame
  27. 27. Sean Christmann did some more research on this ...
  28. 28. The Marshal he proposed AVM2 is controlled by something he called the Marshal ..
  29. 29. The Marshal the marshal is responsible for carving out time slices ...
  30. 30. 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 ..
  31. 31. A Marshaled Slice
  32. 32. A Marshaled Slice but all these actions may not happen on each slice ...
  33. 33. A Marshaled Slice Flash Player’s Event.RENDER event is fired at this point
  34. 34. A Marshaled Slice invalidate action and render action only happen in the last slice of a frame ..
  35. 35. lets experiment with some more code ... view code
  36. 36. so from our experiment the marshal does seem to be carving out 20ms slices ...
  37. 37. with 20ms slices ...
  38. 38. with 20ms slices ... code execution
  39. 39. with 20ms slices ... render
  40. 40. with 20ms slices ...
  41. 41. with 20ms slices ... code execution
  42. 42. with 20ms slices ... render
  43. 43. with 20ms slices ...
  44. 44. the marshal pre calculates the number of slices ...
  45. 45. 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 ...
  46. 46. A swfs actual framerate won’t exceed the Marshals rate defined for the player instance ...
  47. 47. 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
  48. 48. 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 This is very significant
  49. 49. now lets come back to our original question ...
  50. 50. Why does a Flex component need a life cycle?
  51. 51. Since code can execute more often than rendering .. you could potentially do calculations that have no effect ...
  52. 52. for example, lets say you change the width of a component ...
  53. 53. 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.
  54. 54. 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 ...
  55. 55. your first set of calculations for change in width could potentially be useless ..
  56. 56. ... this is the main reason a component needs a life cycle performance
  57. 57. so what is the life cycle of a component ...
  58. 58. BIRTH
  59. 59. BIRTH LIFE
  60. 60. BIRTH LIFE DEATH
  61. 61. Construction Addition BIRTH Initialization LIFE DEATH
  62. 62. Construction Addition BIRTH Initialization Invalidation LIFE Validation Update DEATH
  63. 63. Construction Addition BIRTH Initialization Invalidation LIFE Validation Update Removal DEATH
  64. 64. lets setup some breakpoints and walk through some code as we look at each of these phases ..
  65. 65. Construction var b:MyButton = new MyButton(); • 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
  66. 66. Addition this.addChild(b); • 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
  67. 67. Initialization initialize(); // called by the parent’s childAdded • 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
  68. 68. Construction Addition BIRTH Initialization a component has been born ...
  69. 69. Construction Addition BIRTH Initialization LIFE
  70. 70. Construction Addition BIRTH Initialization Invalidation LIFE Validation Update
  71. 71. Invalidation LIFE Validation Update
  72. 72. Invalidation invalidateProperties invalidateSize invalidateDisplayList Event.RENDER LIFE Validation commitProperties measure layoutChrome(optional) updateDisplayList Update
  73. 73. Invalidation/Validation cycle (Life) this is how the framework defers calculations to the end of the frame, just before rendering ...
  74. 74. 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.
  75. 75. Invalidation/Validation cycle (Life) the LayoutManager keeps track of invalidated components
  76. 76. Invalidation/Validation cycle (Life) the invalidation methods tell the LayoutManager that a component is now in an invalid state
  77. 77. Invalidation/Validation cycle (Life) LayoutManger listens for Event.RENDER and calls corresponding validate methods when the render event occurs
  78. 78. Invalidation/Validation cycle (Life) invalidateProperties commitProperties invalidateSize measure invalidateDisplayList updateDisplayList
  79. 79. Invalidation/Validation cycle (Life) finally an UPDATE_COMPLETE event is dispatched
  80. 80. Construction Addition BIRTH Initialization Invalidation LIFE Validation Update
  81. 81. Construction Addition BIRTH Initialization Invalidation LIFE Validation Update DEATH
  82. 82. Construction Addition BIRTH Initialization Invalidation LIFE Validation Update Removal DEATH
  83. 83. Removal (death) this.removeChild(b); • $removeChild() is the flash player method that removes the component from the display list
  84. 84. 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
  85. 85. So what has changed in Flex 4?
  86. 86. not much ....
  87. 87. not much .... at least from a life cycle perspective ..
  88. 88. Flex 3 Component Model (Halo)
  89. 89. Flex 4 Component Model (Spark) Flex 3 Component Model (Halo)
  90. 90. Flex 4 Component Model (Spark) Flex 3 Component Model (Halo) Spark is built on top of Halo ....
  91. 91. Flex 4 Component Model (Spark) Flex 3 Component Model (Halo) SkinnableComponent extends UIComponent ...
  92. 92. SkinnableComponent lives the same life cycle ...
  93. 93. the Skin is a child to the component and lives its own life cycle ...
  94. 94. lets step through some more code ...
  95. 95. some observations ...
  96. 96. createChildren() of SkinnableComponent calls validateSkinState() which in turn calls attachSkin() ...
  97. 97. attachSkin() creates the skin and adds it as a child ... which in turn kicks off the life cycle of the skin
  98. 98. attachSkin() also calls findSkinParts() which looks though the children of the skin and populates our declared static part references
  99. 99. 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
  100. 100. 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
  101. 101. at a later time, when you create a dynamic part using createDynamicPartInstance() that method calls partAdded() as well
  102. 102. ?
  103. 103. Mrinal Wadhwa http://www.mrinalwadhwa.com http://twitter.com/mrinal
  1. A particular slide catching your eye?

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

×