Go to the documentation from Adobe, I noticed a abstract quite interesting that talks about the cycle of implementation / creation of each component of our application, it is amazing how every single button to be added to a container has a dozen proceedings until it is triggered the event creationComplete. For those who have already created / component via an extended action script already knows what I mean, but still put the explanation.

I am speaking only of the process of adding a button as a child to a container (Box) with

the simple code:

  1: / / Create a box, a button, set the label and add as child 

   Box(); 2: var boxContainer: Box = new Box (); 

  3: 

   Button() 4: var b: Button = new Button () 

  5: 

  ; 6: b.label = "Send"; 

  7: 

  8: boxContainer.addChild (b); 

The flex, proceed as follows:

1. It is called the component manufacturer (new Box and then new Button)

2. Called the setter (b.label =) and updated the entire component (and often are called to update methods to define the entire layout: invalidateProperties (), invalidateSize (), or invalidateDisplayList ())

3. Adds as a child (son) of the box. Here the flex makes most of the work, running the following order:

4. Defines the property of the parent component to make reference to his "container".

5. Calculates and sets the style / "style" of the entire component.

6. Shoot preinitialize the event of the component.

7. Draws the method createChildren () of the component.

8. Draws the methods invalidateProperties (), invalidateSize (), and invalidateDisplayList () to force to be fired / Call the methods commitProperties (), measure (), or updateDisplayList () in the next event surrender. The only exception to these events is that the flex measure does not call the method () when the "user / programmer 'defines the height and width of the component.

9. Shoot the event initialize the component. At this point all Childs (childrens) the component is initialized, but the component has not yet been properly defined by their size, or processed your layout. This event can be used to define / implement procedures in extra component before it is fully processed.

10. Shoot childAdd in the event the "father" / "parent".

11. Shoot initialize the event of its constituent "father" / "parent".

12. Over the next event surrender the flex makes the following actions:

• - Call the methods in the following order:
• commitProperties ();
• measure ();
• layoutChrome ();
• updateDisplayList ();
• -- Finally is triggered in the event updateComplete component.

13. The flex, then this process can also trigger events of rendering (rendering) if the methods commitProperties (), measure (), or updateDisplayList () are implemented / called by the methods invalidateProperties (), invalidateSize (), or invalidateDisplayList ().

14. After the last event to be called surrender, the flex performs the following actions:

• - Put the visible component (. Visible = true;).
• - Shoot in the event creationComplete component. The component is designed and processed for the layout. This event is triggered only once and only when the component is created.
• - Shoot in the event updateComplete component, this event is triggered when any settings are changed the component, such as layout, position, size or any change in the visual characteristics.

Most of the work of configuration, definition, and rendering of a component is that this is added to a container (method addChild ()), because while the component is not added to a container, the flex can not have your size , Set the property "in-line" / "inheriting" or draw it on the screen.

Understanding these steps are essential to know the properties and operations that are carried out in the establishment of a component. Help us to better understand why sometimes we have some errors in our code and to understand the process of creating a component, which is very useful for creating them to me and / or extend our own component.

Original article here (EN)

Hug.

This article is available in PDF for download.