Flex Component Life-cycle
description
Transcript of Flex Component Life-cycle
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);
In MXML <mx:Button label=”test” click=”onClick(event)” />
Creation – Configuration
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)
Adobe does this in their component framework.
Creation – Configuration
Check to see if the value has changedprivate var _label:String = “”;private var _labelChanged:Boolean = false;
public function set label (value:String):void {if (_label != value) {
}}
Creation – Configuration
Set a private instance of the new valueprivate var _label:String = “”;private var _labelChanged:Boolean = false;
public function set label (value:String):void {if (_label != value) {
_label = value;
}}
Creation – Configuration
Set a boolean flag to indicate the value changeprivate var _label:String = “”;private var _labelChanged:Boolean = false;
public function set label (value:String):void {if (_label != value) {
_label = value;_labelChanged = true;
}}
Creation – Configuration
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: 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>
Creation – Initialization
Consists of 1 life-cycle phase and 3 events
“preinitialize” event is dispatched on the component 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 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 Use private variables and boolean flags to defer setting
any render-related properties until the proper validation method is reached
Life – Invalidation
Deferred Validation
3 methods that trigger validation methods 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
Life – Validation
Purpose Apply the changes deferred until validation
3 Phases occur in validation 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
This method is called before measure() or updateDisplayList()
This allows you to set property values that influence size or position
Life – Validation
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
The default minimum width of the component Use getExplicitOrMeasuredHeight() and
getExplicitOrMeasuredWidth() to get child proportions.
Life – Validation
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.
Life – Validation
updateDisplayList() 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 Use this event for actions that must be performed each time
a component's characteristics change, not just when it is created.
Life – Validation
updateDisplayList() Example