flex custom component lifecycle practice
TRANSCRIPT
Flex Custom Component LifeCycle PracticeCheng-Du, ChinaApr 24, 2009
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
outterBox
button1
innerBox
Application
★ button1
innerBox
outterBox
application
Target Phase
Capture Phase Bubbling Phase
button2
button1
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
First Frame Second Frame
1 Frame 100 Frame50 Frame
Flash Application
Flex Application
Application startup lifecycle
Frame 1(Preloader)
Frame2(Application)
contains the SystemManager, the Preloader, the DownloadProgressBar and some “ glue” helper classes.
contains the rest of the Flex framework code, your application code and all of your application assets like embedded fonts, images, etc.
★ SystemManager
.The SystemManager is the first display class created within an application
.System Manager goes on to frame 2 and instantiates the Application instance.
…...
Application startup lifecycle
preinitialize
initilize
createComplete
applicationComplete
The application has been instantiated but has not yet created any child components
The application has created child components but has not yet laid out those components
The application has been completely instantiated and has out all components
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
Update Phase
Destruction Phase
invalidation & validation
Initialization Phase
Construction
Configuration
Attachment
Initilization
Initialization Phase
★ start real life
Initilization
invalidateProperties()
invalidateSize()
invalidateDisplayList()
commitProperties()
Measure()
updateDisplayList()
invalidation
validation
preinitialize Event
creatChildren()
initial Event
invalidation
validation
createComplete Event
Initilization
★ start real life
Overview
createChildren()
commitProperties()
measure()
updateDisplayList()
Maybe need to override
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