Component Life Cycle in flex

This post has been moved to http://srinichekuri.com/2011/05/12/component-life-cycle-in-flex-for-a-button/

*********************************************************************

I was trying to experiment on some custom components and I ran into some rendering issues, so had to go back to refresh my memory about component life cycle. I thought of blogging about it. I have gone through many articles but found the post on Bill White’s blog and article in livedocs particularly interesting. I have summarized the lifecycle for those who would be interested in reading in bullets.

These are the series of methods that are called by Flex Framework for all components:
  1. As the component is going to be in a container, the parent property of the component will be referred to the container.
  2. Component’s Constructor:
    • Setup initial properties and do tasks that are not related to display of UI or not.
    • Don’t create child components or position items.
    • Constructor is called when component is created but the other lifecycle methods don’t occur until a component is added to a container.
  3. Gets the Style setting of the component.
  4. preInitialize event on the component
    • UIComponent is in a very basic stage with no children added at this time.
  5. createChildren() method is called.
    • Creates visual children of the component.
    • Flex doesn’t size or position them at this point because it doesn’t know how much screen space it has.
  6. initialize event is dispatched by the component –
    • All the component’s children are initialized.
  7. commitProperties() method
    • Is responsible to coordinate property modifications.
    • This is needed when there are multiple properties that should be set before you take action.
    • This is called when selectedIndex or selectedChild is called
    • Can be called by calling invalidateProperties(). Each time this method is called commitProperties() is scheduled to be called next time there is a screen repaint or refresh.
  8. measure() method is called only if explicit height and width is not set in the code
    • Flex calls this method to determine how much screen size a component requires.
    • This is not called when the height and width are explicitly set in the code as flex knows offhand how much screen size it will take.
    • This method sets these four properties (or you can set it)
      • measuredMinWidth
      • measuredMinHeight
      • measuredWidth
      • measuredHeight
    • LayoutManager also gets started at this point as layour manager starts with the outermost component and to size the outer most component it should know the size of its children.
    • Can be called by calling invalidateSize(). Each time this method is called measure() is scheduled to called next time there is a screen refresh.
  9. updateDisplayList() method is called
    • Is responsible for positioning of children. You can specify your children here
    • It is passed two paramters
      • unscaledWidth
      • unscaledHeight
    • Flex containers choose never to size one of their children smaller than minimum size but you can choose to override it.
    • Can be called by calling invalidateDisplayList(). Each time this method is called updateDisplayList() is scheduled to be called next time there is a screen refresh.
  10. Dispatches creationComplete event.
I wrote a very simple code to illustrate the lifecycle where a button is being painted. I have created a flex project called LifeCycle that will paint a Button. I have put in traces at various  stages.
LifeCycle.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<local:MyButton/>
</s:Application>
MyButton.as
package
{
	import mx.events.FlexEvent;
	import mx.events.PropertyChangeEvent;

	import spark.components.Button;

	public class MyButton extends Button
	{
		private var number:int=0;

		public function MyButton()
		{
			trace("Constructor in Button -"+ number++);
			super();
			label="test";
			this.addEventListener(FlexEvent.PREINITIALIZE,preInitializeHandler);
			this.addEventListener(FlexEvent.INITIALIZE,initializeHandler);
			this.addEventListener(FlexEvent.CREATION_COMPLETE,creationCompleteHandler);
		}

		public function preInitializeHandler(e:FlexEvent):void{
			trace("preInitialize event on Button - "+ number++);
		}

		public function initializeHandler(e:FlexEvent):void{
			trace("Initialize event on Button - "+ number++);
		}

		public function creationCompleteHandler(e:FlexEvent):void{
			trace("creationComplete event on Button - "+ number++);
		}

		override protected function createChildren():void{
			trace("createChildren function in Button - "+ number++);
			super.createChildren();
		}

		override protected function commitProperties():void{
			trace("CommitProperties function in Button - "+ number++);
			super.commitProperties();
		}

		override protected function measure():void{
			trace("Measure function in Button - "+ number++);
			super.measure();
		}

		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
			trace("updateDisplayList function in Button - "+ number++);
			super.updateDisplayList(unscaledWidth,unscaledHeight);
		}

	}
}
Output in Console
Constructor in Button - 0
preInitialize event on Button - 1
createChildren function in Button - 2
Initialize event on Button - 3
CommitProperties function in Button - 4
Measure function in Button - 5
updateDisplayList function in Button - 6
creationComplete event on Button - 7
Advertisements