Macromedia flex 2 Manual

198

Creating Template Components

The following code shows the implementation of MyTemplateComponent: 

<?xml version="1.0"?>
<!-- templating/myComponents/MyTemplateComponent.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
    initialize="init();">

    <mx:Script>
        <![CDATA[
        
            import mx.containers.HBox;
            import mx.core.UIComponent;
                
            // Define a property for the top component.
            public var topRow:UIComponent;

            // Define an Array of properties for a row of components.
            // Restrict the type of the Array elements 
            // to mx.core.UIComponent.          
            [ArrayElementType("mx.core.UIComponent")]
            public var bottomRow:Array;
    
            private function init():void {            
                // Add the top component to the VBox container.
                addChild(topRow);

                // Create an HBox container. This container 
                // is the parent container of the bottom row of components.
                var controlHBox:HBox = new HBox();

                // Add the bottom row of components 
                // to the HBox container.              
                for (var i:int = 0; i < bottomRow.length; i++)
                    controlHBox.addChild(bottomRow[i]);

                // Add the HBox container to the VBox container.
                addChild(controlHBox);
            }
        ]]>
    </mx:Script>
</mx:VBox>

For the bottomRow property, you define it as an Array and include the 

[ArrayElementType]

 

metadata tag to specify to the compiler that the data type of the Array elements is also 
UIComponent. For more information on the 

[ArrayElementType]

 metadata tag, see 

.