A standard component defines a property with a concrete data type, such as Number or String. The component user must then pass a value that exactly matches the property's data type or else Adobe® Flex® issues a compiler error.

A template component is a component in which one or more of its properties is defined with a general data type. This property serves as a slot for values that can be of the exact data type of the property, or of a value of a subclass of the data type.For example, to accept any Flex visual component as a property value, you define the data type of the property as UIComponent. To accept only container components, you define the data type of the property as Container.

When you use the template component in an application, the component user sets the property value to be an object with a concrete data type. You can think of the property as a placeholder for information, where it is up to the component user, rather than the component developer, to define the actual data type of the property.

The following example shows an application that uses a template component called MyTemplateComponent:

<?xml version="1.0"?>
<!-- templating/MainTemplateButton.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*"
    height="700" width="700">

    <mx:Panel paddingTop="10" paddingBottom="10" 
        paddingRight="10" paddingLeft="10">
    
        <MyComp:MyTemplateComponent id="myTComp1">
            <MyComp:topRow>                        
                <mx:Label text="top component"/>
            </MyComp:topRow>
            <MyComp:bottomRow>
                <mx:Button label="Button 1"/>           
                <mx:Button label="Button 2"/>
                <mx:Button label="Button 3"/>
            </MyComp:bottomRow>
        </MyComp:MyTemplateComponent>
    </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

The MyTemplateComponent takes two properties:

• The topRow property specifies the single Flex component that appears in the top row of the VBox container.
• The bottomRow property specifies one or more Flex components that appear along the bottom row of the VBox container.

The implementation of the MyTemplateComponent consists of a VBox container that displays its children in two rows. The following image shows the output of this application:

The implementation of the topRow and bottomRow properties lets you specify any Flex component as a value, as the following example shows:

<?xml version="1.0"?>
<!-- templating/MainTemplateLink.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*"
    height="700" width="700">

    <mx:Panel paddingTop="10" paddingBottom="10" 
        paddingRight="10" paddingLeft="10">
    
        <MyComp:MyTemplateComponent id="myTComp2">
            <MyComp:topRow>                        
                <mx:TextArea text="top component"/>
            </MyComp:topRow>
            <MyComp:bottomRow>
                <mx:LinkButton label="Link 1"/>         
                <mx:LinkButton label="Link 2"/>
                <mx:LinkButton label="Link 3"/>
            </MyComp:bottomRow>
        </MyComp:MyTemplateComponent>
    </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, the top component is a TextArea control, and the bottom components are two LinkButton controls.