Flex Custom Component LifeCycle Practice
Cheng-Du, China
Apr 24, 2009
Jex Chen
[email protected]
http://www.jexchen.com
Content
• Flex Fundamental (30 mins)
• Application Startup LifeCycle (15 mins)
• Flex custom component lifecycle (1 hour)
• Learning resource (10 mins)
• Date/Time component by Young (30 mins)
Example + Best Practice
Flex Fundamental
• RIA
• Flex & Flash
• Development Dev
• MXML & ActionScript3.0 (Hello Active)
• Event Based Application
Event Flow Example
Application
application
outterBox
outterBox
innerBox
Capture Phase Bubbling Phase
innerBox
button1 button1
★ button1 button2
Target Phase
Content
• Flex Fundamental (30 mins)
• Application Startup LifeCycle (15 mins)
• Flex custom component lifecycle (1 hour)
• Learning resource (10 mins)
• Date/Time component by Young (25 mins)
Example + Best Practice
Essential of Flash & Flex
Flash Application
1 Frame 50 Frame 100 Frame
First Frame Second Frame
Flex Application
Application startup lifecycle
contains the SystemManager, the Preloader, the
DownloadProgressBar and some “glue” helper classes.
.The SystemManager is the
first display class created
within an application
Frame 1
(Preloader)
★ SystemManager
.System Manager goes on to
Frame2 frame 2 and instantiates the
(Application) contains the rest of the Flex framework code, your application code Application instance.
and all of your application assets like embedded fonts, images, etc.
…...
Application startup lifecycle
preinitialize
The application has been instantiated but has not yet created any child components
initilize
The application has created child components but has not yet laid out those
components
createComplete
The application has been completely instantiated and has out all components
applicationComplete
createChildren()
• frame 1
• Create SystemManager instance
• SystemManager instruct the Flash Player to stop at the end of frame 1.
• Preloader DownloadProgressBar
• System Manager goes on to frame 2 and instantiates the Application instance.
• the SystemManager sets Application.systemManager to itself.
• preinitialize event
• Application goes on to create its children. The method createChildren() is
called on the application.
• initialize event which indicates that all application’s components have been
initialized.
• child controls and containers have been created, sized and positioned, the
Application dispatches the creationComplete event.
• the Preloader removes the DownloadProgressBar control and the
SystemManager adds the Application instance to the Flash Player display
list.
• applicationComplete
Example
Content
• Flex Fundamental (30 mins)
• Application Startup LifeCycle (15 mins)
• Flex custom component lifecycle
• Learning resource (10 mins)
• Date/Time component by Young (30 mins)
Example + Best Practice
LifeCycle of Custom Component
• BIRTH:
• construction, configuration, attachment, initialization.
• LIFE:
• invalidation, validation, interaction
• DEATH:
• detachment, garbage collection
LifeCycle of Custom Component
Initialization Phase
invalidation
& validation Update Phase
Destruction Phase
Initialization Phase
Construction
Configuration
Initialization Phase
Attachment
★ start real life
Initilization
Initilization
preinitialize Event
creatChildren()
invalidation
initial Event
★ start real life invalidateProperties()
invalidation invalidateSize()
Initilization
invalidateDisplayList()
commitProperties()
validation Measure()
updateDisplayList()
createComplete Event
validation
Overview
Maybe need to override
createChildren()
commitProperties()
measure()
updateDisplayList()
Flash Player Model
createChildren()
When is it called?
• automatically called by Flex addChild(customComponent).
What is its purpose?
• To add other child components that the custom component may be
comprised of.
comitProperties()
When is it called?
• automatically called by Flex
• also be called during the next render event by the invalidateProperties()
method.
What is its purpose?
• It should be called whenever the component is modified in any way that
will affect its display.
Order?
• gets called before measure().
measure()
When is it called?
• automatically called by Flex
• It can also be called during the next render event by the invalidateSize()
method.
What is its purpose?
• measuredHeight
• measuredWidth
• measuredMinHeight
• measuredMinWidth.
Order?
• gets called before updateDisplayList().
updateDisplayList()
When is it called?
• automatically called by Flex
• It can also be called during the next render event by the
invalidateDisplayList() method.
What is its purpose?
• Set the size and position of the custom component’s children
• Draws any visual elements .
Order?
• last method to be called in the component lifecycle.
container's creation life cycle:
Example
Tips and Tricks
Flex Learning Resource
How to learn Flex
• http://www.adobe.com/devnet/flex/learn/
• source code of Flex SDK is great material for learning
• Learning from lots of open-source components
