Skip to end of metadata
Go to start of metadata


Life Cycle methods of Flex Components

       The component life cycle describes the sequence of steps that occur when we create a component object from a component class. As part of that life cycle, Flex automatically calls component methods, dispatches events, and makes the component visible. The lifecycle of component in flex includes creation of a component holder, creation of its children, setting of their sizes and positions, and dispatching of events.

       This topic covers component life cycle methods of flex components. It includes the usage of each method. Following methods play a major role in component rendering. 

 1. Constructor

2. commitProperties

3. updateDisplayList

4. createChildren

5. measure

Note:

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

1. Constructor:-

  • This is the place where we initialize all variables.
  • This is the better place to add event listeners.
  • It is not good to add children here. We have the other methods to add children.
  • Flex doesn't support function overloading, so we can have only single constructor with a particular set of parameters.

2. commitProperties:-

            We shouldn't call this method directly. We can trigger this method by calling invalidateProperties() after we give input. commitProperties is a method where we do some calculations required for the functionality based on given inputs to the present component. This means we shouldn't do calculations in any other places like setter methods.

       Bad practices:-
     


 

Here,

  • In setter method we extract values from the input and do operations according to that.
  • So when ever this method is called, all these operations will be done immediately which causes the performance of the component to go down. 
     

     Best practices:-

 


 

Here,

  • In the setter method we store the value into a private variable and set changed flag to true to invalidate that data and then call invalidateProperties() method ( So that it calls commitProperties method).  
  • In commitProperties method we can check for that flag, do required operations using that data and change that flag to false. 
  • So whenever this method is called all these operations will not be done immediately. Flex framework calls commitProperties method after completing all the setter operations, which means it will do operations only once. This technique improves the performance of that component.

3. updateDisplayList:-

        This method will be used to draw the UI. A component doesn't appear on the screen until its updateDisplayList is called. This method mainly used to set the positioning and size for all the children. This method will get two parameters. They are unscaledWidth and unscaledHeight, where these parameters are the width and height of the present component. We can make use of these parameters for positioning and sizing of its children. We shouldn't call this method directly. We can invoke this method by calling invalidateDisplayList() method.            

        We can position and size the children using move(x,y) and setActualSize(width, height) methods.

        We can set x and y positions separately, but it will dispatch dataChange event for both operations. So it dispatches the event twice. We can ignore this by calling move(x,y) method so that it dispatches the event only once and the performance will be improved. Same way we do it for size to improve performance.

        This method will be executed in a top down approach. First it executes for the parent, sets the size for its children, then it goes to its children and again their respective updateDisplayList is called.

4. createChildren:-

        This method will be used to create children. We shouldn't call this method directly. As soon as we call addChild() method on some display object, flex calls createChildren() method in response to that call. While implementing custom components it is suggested to override this method and to call its super method implementation. This method is only used to add children to the present component. But positioning and sizing of children is not recommended to do in this method. We have updateDisplayList method to take care of this.

5. measure:-

        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. In this method it calculates the measuredWidth and measuredHeight of a parent depending on its children size. It is not recommended to calculate the size of the parent or its children in this method.

       This method will be executed in a bottom up approach. First it executes for its children, sets the measured size and then it executes for its parent.

       Flex does not call the measure() method when the user sets the height and width of the component. When we use the addChild() method to add a component, Flex automatically calls the invalidateSize() method.

  • No labels