Term Paper Of Component

Based Software

Submitted to Submitted by Preeti Sikka Diwakar Sharma

Reg No. 11113779

ACKNOWLEDGEMENT A very big thanks to my teacher Preeti Sikka

Madan,who taught me how to work for this term

paper.She was very helpful,as she cleared all the

concepts of a term paper to me.A special thanks to

my colleages who helped me out in doing hard work

in making this term paper,without their support this

couldn’t be possible.

Flex Component Life-cycle

What is it?

Sequence of steps that occur when you create a component object from a component class.

As part of this process, Flex automatically calls component methods, dispatches events, and makes the component visible.

Component Life-cycle steps

Creation

Construction

Configuration

Attachment

Initialization

Life

Invalidation

Validation

Creation –

Construction

Purpose

Create an instance of a component class

Configure the object by setting its initial properties

Examples

In Actionscript:

var b:Button = new Button();

b.label = “test”;

b.addEventListener(MouseEvent.CLICK, onClick);

Creation – Configuration

In MXML

<mx:Button label=”test” click=”onClick(event)” />

Purpose

Set initial properties with setters

Generic setter features

Check to see if the value has changed

Set a private instance of the value

Set a boolean flag to indicate the property has changed

Schedule component for invalidation (if necessary)

Dispatch binding events (optional)

Creation – Configuration

Adobe does this in their component framework.

Check to see if the value has changed private var

_label:String = “”;

private var _labelChanged:Boolean = false;

public function set label (value:String):void { if (_label != value) {

}

}

Set a private instance of the new value private var

_label:String = “”;

private var _labelChanged:Boolean = false;

Creation – Configuration

public function set label (value:String):void { if (_label != value) {

_label = value;

}

}

Set a boolean flag to indicate the value change private var _label:String = “”;

private var _labelChanged:Boolean = false;

public function set label (value:String):void { if (_label != value) {

_label = value;

Creation – Configuration

_labelChanged = true;

}

}

Schedule component for invalidation (optional) private var _label:String = “”; private var _labelChanged:Boolean = false;

public function set label (value:String):void { if (_label != value) {

_label = value; _labelChanged = true; invalidateProperties(); invalidateSize(); invalidateDisplayList();

Creation – Configuration

}

}

Dispatch binding events (optional) private var

_label:String = “”;

private var _labelChanged:Boolean = false;

public function set label (value:String):void { if (_label != value) {

_label = value; _labelChanged = true; invalidateProperties(); invalidateSize();

invalidateDisplayList();

dispatchEvent(new Event(“labelChanged”));

Creation – Configuration

}

}

Dispatch binding events (optional)

[Bindable(“labelChanged”)] public function get label ():String {

return _label;

}

Creation –

Attachment

Purpose

Attach the component to the display list.

Component life-cycle is stalled after configuration until attachment occurs In Actionscript:

panel.addChild(button);

In MXML:

Creation –

Don't need to do anything, the child is automatically added according to how it is nested. <mx:Panel id=”panel” >

<mx:Button id=”button” />

</mx:Panel>

Initialization

Consists of 1 life-cycle phase and 3 events

“preinitialize” event is dispatched on the component

Creation –

Component is in a very raw state. Its children have not yet been added (including internal children)

Use this event in rare circumstances (set the properties on a parent before the children are created)

createChildren() method is called by Flex on the component

override this method from UIComponent

Add child components that make up your custom component

Construct component, set properties, add to display list

Creation –

Initialization

Consists of 1 life-cycle phase and 3 events

“initialize” event is dispatched

At this point, the component's children have been added and the component's initial properties are set, but it has not been sized, positioned, or processed for layout

Use this event to perform additional processing before layout

“childAdd” event is dispatched from parent

Creation –

If the parent is also being initialized, its “initialize” event is dispatched when all of its children are added.

Life –

Invalidation

Deferred Validation

Flex uses a deferred validation for rendering components in their various states

Central concept in the component life-cycle

Life –

Use private variables and boolean flags to defer setting any render-related properties until the proper validation method is reached

Invalidation

Deferred Validation

3 methods that trigger validation methods

Life – Validation

invalidateProperties() --> commitProperties()

Use this to set any of the component's properties

invalidateSize() --> measure()

Use this to change the component's default size

invalidateDisplayList() --> updateDisplayList()

Use this to change the component's size or position

Purpose

Apply the changes deferred until validation

3 Phases occur in validation

Life –

commitProperties()

measure()

updateDisplayList()

Life – Validation

commitProperties()

Purpose

Commit any changes to component properties

Synchronize changes to occur at the same time or ensure that

they are set in a specific order When is it called?

Immediately after the initialize event during component creation

Whenever invalidateProperties() is called

What is its phase order

Life – Validation

This method is called before measure() or updateDisplayList()

This allows you to set property values that influence size or position

commitProperties()

Example

Life – Validation

measure()

Purpose

Calculate the component's preferred width and height and its

preferred minimum width and height When is it called?

After commitProperties() during initialization

When the invalidateSize() method is called

NOTE: measure() will never be called if the component is

given an explicit width or height What is its phase order?

After commitProperties() and before updateDisplayList()

Life – Validation

measure()

Caveats

Only 4 properties should normally be set in measure()

measuredHeight

The default height of the component

measuredWidth

The default width of the component

measuredMinHeight

The default minimum height of the component

measuredMinWidth

Life – Validation

The default minimum width of the component

Use getExplicitOrMeasuredHeight() and getExplicitOrMeasuredWidth() to get child proportions.

measure() Example

Life – Validation

updateDisplayList()

Purpose

To position and size children

Allow use of the Drawing API to draw on the component

When is it called?

After measure() during the initialization process

When invalidateDisplayList() is called What is it's order?

After measure()

Life – Validation

updateDisplayList()

Caveats

Position children using move(x, y), size them using setActualSize(width, height) instead of using the x, y, width, height properties

Adobe recommends these methods because they work better with Container layouts.

These methods are said to be quirky at times, so if they don't work for some reason just set the properties manually.

updateDisplayList()

Life – Validation

unscaledWidth, unscaledHeight

Arguments for updateDisplayList()

Indicate the width and height of the component as dictated by its parent.

They do not take scaleX and scaleY properties into account, so you will have to calculate scaling manually if needs be.

“updateComplete” event is dispatched by the component after its updateDisplayList() is executed

Life – Validation

Use this event for actions that must be performed each time a component's characteristics change, not just when it is created.

updateDisplayList()

Example

Reference http://www.iamdeepa.com/ http://opensource.adobe.com/wiki/display/flexsdk/Gumbo http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Component+Architecture