Flex Custom Component LifeCycle Practice Cheng-Du, China Apr 24, 2009 Jex Chen [email_address] http://www.jexchen.com

Cheng-Du, China

Apr 24, 2009

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 (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

RIA

Flex & Flash

Development Dev

MXML & ActionScript3.0 (Hello Active  )

Event Based Application

Event Flow Example

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

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

Application startup lifecycle

Application startup lifecycle

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

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

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

BIRTH :

construction, configuration, attachment, initialization .

LIFE:

invalidation, validation, interaction

DEATH:

detachment, garbage collection

LifeCycle of Custom Component

Initialization Phase

Initilization

Overview

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.

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().

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().

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.

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

http://www.adobe.com/devnet/flex/learn/

source code of Flex SDK is great material for learning

Learning from lots of open-source components