Custom Components in Flex 4 Components in Flex 4 use the Spark architecture where all components inherit from spark.components.supportClasses.SkinnableComponent rather than mx.core.UIComponent. A component has a defined lifecycle with phases for construction, addition, initialization, invalidation/validation, update, and removal. Understanding the Flash Player's frame-based execution model, with code execution and rendering separated across slices, explains why components need lifecycles to ensure proper display and behavior.

1. Custom Components in Flex 4
Mrinal Wadhwa
http://www.mrinalwadhwa.com

2. What is a component ?

4. Composition

9. a squad ...

10. Squad.mxml

12. a legion ...

13. Legion.mxml

16. the architecture ...

18. in flex ...

19. Halo
the architecture of components in Flex 3 and before

20. Spark
the architecture of components in Flex 4

21. all components inherit from ...
mx.core.UIComponent

22. in Spark its more common to use ...
spark.components.supportClasses.SkinnableComponent

23. the lifecycle of a component ...

24. BIRTH

25. BIRTH
LIFE

26. BIRTH
LIFE
DEATH

27. Why does a component need a life cycle?

28. Flex applications run in the Flash Player

29. What Flex can do is a subset of what the Flash Player
can do, not a superset.

30. so to understand flex components better, lets take a deeper
look at how the flash player works ...

31. Frames

32. Frames
everything is done in frames ...

33. Frame Rate
the number of frames processed per second (fps)

34. Frame Rate
you can suggest the player a frame rate you
would like your swf to have ...

35. Frame Rate
[SWF(width=”800”,height=”600”,frameRate=”60”)]
OR
stage.frameRate = 60;
OR
<s:Application frameRate=”60” ... >

36. Frame Rate
the player tries its best to maintain the suggested
frame rate, but there are no guarantees ...

37. Frame Rate
the actual framerate achieved may be lower or higher
than what we suggested ...

38. Frame Rate
browsers can force a lower framerate on the
flash player ...

39. Frame Rate
In Firefox and Safari, frame rate falls to about 10 if
the Tab running the swf is out of focus ...

40. Frame Rate
In Safari if window is minimized,
framerate falls to zero ..

41. now lets take a deeper look at what happens inside
each frame ..

42. code execution rendering
1 frame
the length of the track represents the time taken by this frame

43. code execution rendering heavy code execution
1 frame 1 frame
the length of the track represents the time taken by this frame

44. 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

45. 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

46. 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

47. Sean Christmann did some more research on this ...

48. The Marshal
He proposed AVM2 is controlled by something he
called the Marshal ..

49. The Marshal
the marshal is responsible for carving out time
slices ...

50. 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 ..

51. A Marshaled Slice

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

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

54. A Marshaled Slice
invalidate action and render action only happen in
the last slice of a frame ..

55. with 20ms slices ...

56. with 20ms slices ...
code execution

57. with 20ms slices ...
render

58. with 20ms slices ...

59. with 20ms slices ...
code execution

60. with 20ms slices ...
render

61. with 20ms slices ...

62. Code can be executed more often than the
times stuff is rendered on the screen ...

63. ... this is the main reason a component needs a
lifecycle
performance

64. BIRTH
LIFE
DEATH

65. Construction
Addition BIRTH
Initialization
LIFE
DEATH

66. Construction
Addition BIRTH
Initialization
Invalidation
LIFE
Validation
Update
DEATH

67. Construction
Addition BIRTH
Initialization
Invalidation
LIFE
Validation
Update
Removal DEATH

70. StormTrooper.as

71. StormTrooperSkin.mxml

72. Constructor

73. Constructor

74. Construction
Addition BIRTH
Initialization
Invalidation
LIFE
Validation
Update
Removal DEATH

75. Construction
Addition BIRTH
Initialization
Invalidation
LIFE
Validation
Update
Removal DEATH

76. Invalidation
invalidateProperties
invalidateSize
invalidateDisplayList
Event.RENDER
LIFE
Validation
commitProperties
measure
layoutChrome(optional)
updateDisplayList
Update

77. the lifecycle methods ...

78. Invalidation/Validation cycle (Life)
invalidateProperties commitProperties
invalidateSize measure
invalidateDisplayList updateDisplayList

82. defining states ...

87. defining skin parts ...

89. static ...
when the number of instances needed is known and small

92. dynamic ...

96. required ...

98. optional ...

100. partAdded and partRemoved

101. defining properties ...

106. Bindable properties

109. throwing events ...

112. .......

113. defining styles ...

119. ?

120. Mrinal Wadhwa
http://www.mrinalwadhwa.com
http://twitter.com/mrinal