flex custom component lifecycle practice

Flex Custom Component LifeCycle PracticeCheng-Du, ChinaApr 24, 2009

Jex ChenJex.chen@activenetwork.com

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