Flex Component Life-cycle

1. Flex Component Life-cycle

2. 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.

3. Component Life-cycle steps • Creation • Construction • Configuration • Attachment • Initialization • Life • Invalidation • Validation

4. 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)” />

5. 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.

6. 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) { }}

7. 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; }}

8. 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; }}

9. 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(); }}

10. 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”)); }}

11. Creation – Configuration • Dispatch binding events (optional)[Bindable(“labelChanged”)]public function get label ():String { return _label;}

12. 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>

13. 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

14. 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.

15. 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

16. 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

17. Life – Validation • Purpose • Apply the changes deferred until validation • 3 Phases occur in validation • commitProperties()‏ • measure()‏ • updateDisplayList()‏

18. 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

19. Life – Validation • commitProperties()‏ • Example

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

21. 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.

22. Life – Validation • measure()‏ • Example

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

24. 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.

25. 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.

26. Life – Validation • updateDisplayList()‏ • Example