Implementing the createChildren() method -- Flex 2

A component that creates other components or visual objects within it is called a composite component. For example, the Flex ComboBox control contains a TextInput control to define the text area of the ComboBox, and a Button control to define the ComboBox arrow. components implement the createChildren() method to create child objects (such as other components) in the component.

You do not call the createChildren() method directly; Flex calls it when the call to the addChild() method occurs to add the component to its parent. Notice that the createChildren() method has no invalidation method, which means that you do not have to call it a second time after the component is added to its parent.

Many components define a border around the component. For example, some Flex containers use the RectangularBorder class to define a border area around the container, as the following example shows:

// Declare variable for the border.
private var border:RectangularBorder;

override protected function createChildren():void {
    super.createChildren();

    // Create the border.
    // Test for the existence of the children before creating them.
    // This is optional, but do this so a subclass can create a different
    // child.
    if (!border)
    {
            border = new RectangularBorder();
            addChild(border);
    }
}

After you add the RectangularBorder object to your component, you can use properties of the RectangularBorder object to define the characteristics of the border area. You typically modify the border in an override of the updateDisplayList() method.

Notice in the previous example that the createChildren() method calls the addChild() method to add the child component. You must call the addChild() method for each child object.

In another example, you might define a new component that consists of a Button control and a TextArea control, where the Button control enables and disables user input to the TextArea control. The following example creates the TextArea and Button components:

// Declare two variables for the component children.
private var text_mc:TextArea;
private var mode_mc:Button;

override protected function createChildren():void {

    // Call the createChildren() method of the superclass.
    super.createChildren();
        
    // Test for the existence of the children before creating them.
    if (!text_mc)     {
        text_mc = new TextArea();
        text_mc.explicitWidth = 80;
        text_mc.editable = false;
        text_mc.addEventListener("change", handleChangeEvent);
        // Add the child component to the custom component.
        addChild(text_mc);
    }

    // Test for the existence of the children before creating them.
    if (!mode_mc)     {    
        mode_mc = new Button();
        mode_mc.label = "Toggle Editing";
        mode_mc.addEventListener("click", handleClickEvent);
        // Add the child component to the custom component.
        addChild(mode_mc);
    }
}

In this example, you create the Button and TextArea controls, initialize them, and register event listeners for them. In this method, you could also apply skins to the child components. For a complete example, see Example: Creating a composite component.