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

2.
What is a component ?

3.
Composition

4.
a squad ...

5.
Squad.mxml

6.
a legion ...

7.
Legion.mxml

8.
the architecture ...

9.
in flex ...

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

11.
Spark
the architecture of components in Flex 4

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

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

14.
the lifecycle of a component ...

15.
BIRTH

16.
BIRTH
LIFE

17.
BIRTH
LIFE
DEATH

18.
Why does a component need a life cycle?

19.
Flex applications run in the Flash Player

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

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

22.
Frames

23.
Frames
everything is done in frames ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

42.
A Marshaled Slice

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

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

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

46.
with 20ms slices ...

47.
with 20ms slices ...
code execution

48.
with 20ms slices ...
render

49.
with 20ms slices ...

50.
with 20ms slices ...
code execution

51.
with 20ms slices ...
render

52.
with 20ms slices ...

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

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

55.
BIRTH
LIFE
DEATH

56.
Construction
Addition BIRTH
Initialization
LIFE
DEATH

57.
Construction
Addition BIRTH
Initialization
Invalidation
LIFE
Validation
Update
DEATH

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

59.
StormTrooper.as

60.
StormTrooperSkin.mxml

61.
Constructor

62.
Constructor

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

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

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

66.
the lifecycle methods ...

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

68.
defining states ...

69.
defining skin parts ...

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

71.
dynamic ...

72.
required ...

73.
optional ...

74.
partAdded and partRemoved

75.
defining properties ...

76.
Bindable properties

77.
throwing events ...

78.
.......

79.
defining styles ...

80.
?

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