flex custom component lifecycle practice
TRANSCRIPT
![Page 1: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/1.jpg)
Flex Custom Component LifeCycle PracticeCheng-Du, ChinaApr 24, 2009
http://www.jexchen.com
![Page 2: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/2.jpg)
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
![Page 3: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/3.jpg)
Flex Fundamental
• RIA• Flex & Flash• Development Dev• MXML & ActionScript3.0 (Hello
Active)• Event Based Application
![Page 4: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/4.jpg)
Event Flow Example
outterBox
button1
innerBox
Application
★ button1
innerBox
outterBox
application
Target Phase
Capture Phase Bubbling Phase
button2
button1
![Page 5: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/5.jpg)
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
![Page 6: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/6.jpg)
Essential of Flash & Flex
First Frame Second Frame
1 Frame 100 Frame50 Frame
Flash Application
Flex Application
![Page 7: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/7.jpg)
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.
…...
![Page 8: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/8.jpg)
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
![Page 9: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/9.jpg)
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
![Page 10: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/10.jpg)
Example
![Page 11: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/11.jpg)
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
![Page 12: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/12.jpg)
LifeCycle of Custom Component
• BIRTH: •construction, configuration, attachment, initialization.
• LIFE: • invalidation, validation, interaction
• DEATH: •detachment, garbage collection
![Page 13: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/13.jpg)
LifeCycle of Custom Component
Initialization Phase
Update Phase
Destruction Phase
invalidation & validation
![Page 14: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/14.jpg)
Initialization Phase
Construction
Configuration
Attachment
Initilization
Initialization Phase
★ start real life
![Page 15: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/15.jpg)
Initilization
invalidateProperties()
invalidateSize()
invalidateDisplayList()
commitProperties()
Measure()
updateDisplayList()
invalidation
validation
preinitialize Event
creatChildren()
initial Event
invalidation
validation
createComplete Event
Initilization
★ start real life
![Page 16: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/16.jpg)
Overview
createChildren()
commitProperties()
measure()
updateDisplayList()
Maybe need to override
![Page 17: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/17.jpg)
Flash Player Model
![Page 18: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/18.jpg)
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.
![Page 19: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/19.jpg)
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().
![Page 20: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/20.jpg)
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().
![Page 21: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/21.jpg)
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.
![Page 22: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/22.jpg)
container's creation life cycle:
![Page 23: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/23.jpg)
Example
![Page 24: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/24.jpg)
Tips and Tricks
![Page 25: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/25.jpg)
Flex Learning Resource
![Page 26: Flex Custom Component Lifecycle Practice](https://reader036.vdocument.in/reader036/viewer/2022062406/55905a9a1a28ab7f208b45c4/html5/thumbnails/26.jpg)
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