Flex Component Life Cycle

A flex component life cycle can be broadly compartmentalized into three distinct stages:

1. Initialization
2. Updating
3. Destruction

This three stage bundles Six main phases of flex component life cycle which are

1. Construction
2. Addition
3. Initialization
4. Invalidation
5. Validation
6. Removal

Following diagram shows the association of 7 different phase to their respective lifecycle stage

Description of Life Cycle Phases

Stage 1: Initialization

Phase 1: Construction

Construction phase is very first phase of component and is triggered when component is instantiated.  For an example

var myComponent:CustomComponent = new CustomComponent();

It should be noted that constructor should perform minimalist operation. Constructor should be zero argument constructors.

Phase 2: Addition

Addition phase of component is triggered when component is added to a parent component.

this.addChild( myComponent );

The process of adding component to its parent component execute large amount of code. This is the phase where life cycle of component actually gets started.  In granularity addChild method is further divided in to three method addingChild, $addChild and childAdded method.

The addingchild method initialize parent and document reference for component child object. Also it performs style propagation and management for the component.

The $addChild method actually add component to the display list.

The childAdded method calls initialize method on the child.

Phase 3: Initialize

Initialize phase is triggered by childAdded method of Addition phase of component. The initialize method is future broken down into four sub-methods createChildren, childrenCreated, initializeAccessibility and initializationComplete. When initialize method of the component is called first FlextEvent.PREINITIALIZE event is dispatch first and then createChildren method is called.

The createChildren method is responsible for create any extended component and then adding that child component.

The childrenCreated method is responsible for enabling first Invalidate-Validate cycle of flex component life cycle.

The initializeAccessibility method is responsible to configure the component to use flash player accessibility system.

The initializationComplete method is responsible for dispatching FlexEvent.INITIALIZED event. This method marks end of Stage 1 of Flex Component Life cycle.

Stage 2: Updating

Phase 4: Invalidation

Invalidation is the first phase of flex component life cycle that gets repeated throughout the life of the component.  Invalidation phase consist of three method invalidateProperties, invalidateSize and invalidateDisplayList

The invalidateProperties method is called whenever component property is changed and that require before component to re-measure and laid out.

The invalidateSize method is called whenever some action i.e. changes in property or user action which requires the components to re-calculate its size and its children’s size.

The invalidateDisplayList method is called whenever some changes that requires component display list to be updated.

Phase 5: Validation

Validation phase consost of four methods commitProperties, measure, layoutChrome and updateDisplayList. All this method of validate phase are executed in predefined order which is

1. commitProperties
2. measure
3. layoutchrome
4. updateDisplayList

Each of the invalidate phase method correspond to validate phase method

invalidateProperties ---> commitProperties

invalidatesize          ---> measure

invalidateDisplayList ---> updateDisplayList

Thus whenever invalidate method is called LayoutManager of Flex Application keeps track of which invalidate method is called and only calls corresponding validate method during validate phase.

The fourth method of validate phase is layoutChrome, this method is responsible for creating border or padding around children content.

Thus once validate cycle of component is executed LayoutManager will make component dispatch Event.UPDATE_COMPLETE event.

Note: The Invalidate - Validate cycle of component repeat itself as an when any changes are made to the component and component is not removed from its parent.

Stage 3: Destruction

Phase 6: Removal

The last phase of a component life-cycle is removal phase. This phase is triggered when the component is no longer parented i.e., when removeChild() method is called on the parent component, passing in the component to remove as a reference.

When removeChild() method is called on parent component then three methods are fired, removingChild(), $removeChild() and childRemoved().

The removingChild() method does not perform any operation, this method can be overridden to execute tasks/operation that needs to be perform before component is removed from display stack

The $removeChild() method is actually a Flash Player level method that removes component from display stack.

The childRemoved() method removes references of component form its parents and document properties.

Once reference from component's parent is removed component can be re-parented or are available for garbage collection. Also removal of parent refrence of compoenent prevent component fromm entering the Invalidate-Validate cycle.