Posts Tagged ‘lifecycle

The following example is a Simple searchable DataGrid, I have also included dataGrid item renderer to show how to define/use a dataGrid “itemRendrer”. Search and Highlight a row depending on the searched text in a dataGrid. Define a cursor to traverse dataGrid rows.

The Objective of this example :

  • How to create custom item rendrer using Updatedisplaylist and data property.
  • How to use the itemrendrer (detail).
  • How to use custom cursors in a dataGrid.
  • how to write a custom component extending a base component in this case dataGrid. (highlight a row in the dataGrid).

Download source:

Sample : search_datagrid

There are different kinds of events in the Flex world. An event can be generated from user gesture, return of requests and component lifecycle. Use event is a two step process, (1) You need to write the handler (2) You need to register the handler to the event hook. To register event, there are two different ways:

Inline MXML way:<mx:Button id=”myButton” click=”myhandler(event)”/>

Actionscript way: myButton.addEventListener(MouseEvent.CLICK, myhandler);

The code above does the same job.  However, addEventListener provides more advanced control like event propagation and event priority. Event in Flex can be dispatched implicitly (user clicks on a button, the event is dispatched by the system) and explicitly (you can programmatically trigger an event).

Event propagation is an important topic for Flex programming. So, I will try to talk about what I have known on this topic here. Feel free to correct me if I am wrong. As I know, event propagation has three phases. They are capturing, at target, and bubbling. If you have an Application A contains a VBox B that has a Button C. When an user clicks the Button C, it first goes through “capturing phase”. In this phase, the event propagation through the topmost parent of C (ie. stage) and continue walk down the display object hierarchy until it reaches the original target (ie. C). The path for capturing phase is stage -> root -> A -> B -> C. When the event reaches C, the “at target phase” will be started and it just involves one object (ie. C). After that, the event bubbles up following the reverse path of the capturing phase and walk its way back up to root (C -> B -> A -> root -> stage). This is called “bubbling phase”.


As the event makes its way though each phase and each object within those phases, it calls all of the listener functions that were added for that event. This means that clicking on the Button C doesn’t limit the event to C, A and B also receive the event. Actually, they receive the event twice, once in the capturing phase and once in the bubbling phase.

However, by default, listener cannot receive event in capturing phase because the capability is turned off. To enable it, we need to set “true” to the third parameter in “addEventListener”, the “useCapture” parameter. If you don’t do that, listener would just listen to event in the “at target” or “bubbling” phase. However, it is an exclusion setting. Once you set the “useCapture” to true, it will not receive event in other phases. To get around this, you need to use “addEventListener” twice, once with “useCapture” set to false (or omitted) and once with “useCapture” set to true.  On the other hand, any listener along the path can stop the event propagation.

In the Event object, the “target” attributed is the component where the event originated (ie. C in this example) whereas “currentTarget” attribute is the component that event currently reaches. So, this attribute’s value will be changed along the propagation path. Apart from these two properties, Event object also contains properties like type (String), eventPhase (int), bubbles (boolean), and cancelable (boolean).

The lifecycle of component can be easily understood in few simple steps firstly you create a component holder, then create-children, set-sizes/properties and dispatch events. Following four methods plays a major role in component rendering.

  • createChildren()
  • commitProperties()
  • measure()
  • updateDisplayList()

Here is what I found after doing some studies. The most of the following part is taken from Adobe flex help however what I am trying to do here is to elaborate it more by putting up some comments to each step to make it clearer.

Following steps are demonstrating the Button component life cycle

  • Given if the component is going to be in a container then the parent property of component will be referred to the container(DisplayObjectContainer type)
  • Get the style settings of the component
  • Dispatches the preinitialize event on the component. // The preinitialize event( is triggered when the UIComponent is in a very raw stage and there is no children in existence at that time
  • Calls the component’s createChildren() method. // createChildren is a protected method of UIComponent class which we need to override when we create a subclass of the UIComponent. Also from within an override of the createChildren() method, you call the addChild() method to add each child object. You do not call this method directly. Flex calls the createChildren() method in response to the call to the addChild() method to add the component to its parent.
  • Calls the invalidateProperties(), invalidateSize(), and invalidateDisplayList() methods to trigger later calls to the commitProperties(), measure(), or updateDisplayList() methods during the next render event. //invalidateProperties() marks a component so that its commitProperties() method gets called during a later screen update. invalidateSize () Marks a component so that its measure() method gets called during a later screen update. invalidateDisplayList () Marks a component so that its updateDisplayList() method gets called during a later screen update.

The only exception to this rule is that Flex does not call the measure() method when the user sets the height and width of the component(it is the explicit hight and explicit width that the user can set for any component).

  • Dispatches the initialize event on the component. At this time, all of the component’s children are initialized, but the component has not been sized or processed for layout. You can use this event to perform additional processing of the component before it is laid out.// Initizlize event gets dispatched when the component has finished its construction and has all initialization properties set. After the initialization phase, properties are processed, the component is measured, laid out, and drawn. After which the creationComplete event is dispatched.
  • Dispatches the childAdd event on the parent container.The childAdd event is dispatched when the addChild() or addChildAt() method is called. At the time when this event is sent, the child object has been initialized, but its width and height have not yet been calculated, and the child has not been drawn on the screen. If you want to be notified when the child has been fully initialized and rendered, then register as a listener for the child’s creationComplete event.
  • Dispatches the initialize event on the parent container.Dispatched when the component has finished its construction and has all initialization properties set. After the initialization phase, properties are processed, the component is measured, laid out, and drawn, after which the creationComplete event is dispatched.
  • During the next render event, Flex performs the following actions:
    • Calls the component’s commitProperties() method.//commitProperties() processes the properties set on the component. You do not call this method directly. Flex calls the commitProperties() method when you use the addChild() method to add a component to a container, or when you call the invalidateProperties() method of the component. Calls to the commitProperties() method occur before calls to the measure() method. This lets you set property values that might be used by the measure() method.
    • Calls the component’s measure() method.// Measure() calculates the default size, and optionally the default minimum size, of the component. This is an advanced method that you might override when creating a subclass of UIComponent.
      The default implementation of measure() sets measuredWidth, measuredHeight, measuredMinWidth, and measuredMinHeight to 0.
    • Calls the component’s (Adobe help mention this method is in UIComponent where as it is in container class) container’s layoutChrome() method.The Container class, and some subclasses of the Container class, use the layoutChrome() method to define the border area around the container.
    • Calls the component’s updateDisplayList() method. //updateDisplayList() method sizes and positions the children of your component based on all previous property and style settings, and draws any skins or graphic elements that the component uses. The parent container for the component determines the size of the component itself.
    • Dispatches the updateComplete event on the component.
      Dispatched when an object has had its commitProperties(), measure(), and updateDisplayList() methods called (if needed).
      This is the last opportunity to alter the component before it is displayed. All properties have been committed and the component has been measured and layed out.
  • Flex dispatches additional render events if the commitProperties(), measure(), or updateDisplayList() methods call the invalidateProperties(), invalidateSize(), or invalidateDisplayList() methods.
  • After the last render event occurs, Flex performs the following actions:
    • Makes the component visible by setting the visible property to true.
    • Dispatches the creationComplete event on the component. The component is sized and processed for layout. This event is only dispatched once when the component is created.
    • Dispatches the updateComplete event on the component. Flex dispatches additional updateComplete events whenever the layout, position, size, or other visual characteristic of the component changes and the component is updated for display. Read the rest of this entry »

I have moved to a different location

check out my new home Flexout


May 2017
« May    

Blog Stat

  • 83,676 Hop's so far!!!

follow me


Linkedin Blogger Twitter Youtube Orkut

Top Clicks

  • None

latest flickr photos

deep in the jungle

little umbrella

poor jumbo!


over the rice paddy!

More Photos

top rated