Custom Components In Flex 4

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

What is a component ?

Composition

a squad ...

Squad.mxml

a legion ...

Legion.mxml

the architecture ...

in ﬂex ...

Halo the architecture of components in Flex 3 and before

Spark the architecture of components in Flex 4

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

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

the lifecycle of a component ...

BIRTH LIFE

BIRTH LIFE DEATH

Why does a 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 ﬂex components better, lets take a deeper look at how the ﬂash 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; OR <s:Application frameRate=”60” ... >

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 ﬂash 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 ..

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

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

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

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

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

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 lets assume a slice is 20ms long ..

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 ﬁred at this point

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

with 20ms slices ...

with 20ms slices ... code execution

with 20ms slices ... render

with 20ms slices ... code execution

with 20ms slices ... render

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

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

BIRTH LIFE DEATH

Construction Addition BIRTH Initialization LIFE DEATH

Construction Addition BIRTH Initialization Invalidation LIFE Validation Update DEATH

Construction Addition BIRTH Initialization Invalidation LIFE Validation Update Removal DEATH

StormTrooper.as

StormTrooperSkin.mxml

Constructor

Construction Addition BIRTH Initialization Invalidation LIFE Validation Update Removal DEATH

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

the lifecycle methods ...

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

deﬁning states ...

deﬁning skin parts ...

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

dynamic ...

required ...

optional ...

partAdded and partRemoved

deﬁning properties ...

Bindable properties

throwing events ...

.......

deﬁning styles ...

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

http://weblog.mrinalwadhwa.com	5119
http://vapes.na.by	1258
http://www.slideshare.net	67
http://feeds.feedburner.com	17
http://translate.googleusercontent.com	11
http://www.vapes.na.by	10
http://paper.li	9
https://www-wave-opensocial.googleusercontent.com	8
http://www.linkedin.com	8
http://webcache.googleusercontent.com	4
http://reader.googleusercontent.com	2
http://static.slidesharecdn.com	2
https://1166842352-wave-opensocial.googleusercontent.com	1
http://alef.fiit.stuba.sk	1
http://hghltd.yandex.net	1
http://74.125.93.132	1
http://us-w1.rockmelt.com	1
https://21283913-wave-opensocial.googleusercontent.com	1
http://twittertim.es	1

Custom Components In Flex 4

by Mrinal Wadhwa

Accessibility

Categories

Upload Details

Usage Rights

19 Embeds 6,522

Statistics

Custom Components In Flex 4 Presentation Transcript