The template component enables you to define and create properties in the components with a general data type. This means that a template component is equipped to act as a property or as the defined object with the same data type of the property declared in it or a subclass of that data type.
In previous solutions, when you created a property for a component created with MXML or ActionScript, you assigned an ArrayCollection or a String as the data type to these properties. In the invocation phase of the component in a main application, if you try to send another type of value to this property (such as an XMLListCollection data type), you receive an error at compile time.
With template components, the properties that are defined by the developer are the placeholders that wait to be used.
In this way, you can create components that are more reusable. You can also guarantee to everyone who will use this component that you have respected the rules for object creation.
To create a template component, you create an ActionScript or MXML component and define the properties linking them to a general data type; for example, one of the UIComponent or Container classes:
public var header:mx.controls.Image;
public var footer:mx.controls.Image;
When you invoke the component in the main application file, the developer can specify the properties to send, defining a valid subclass of the UIComponent or Container class, according to the data type used:
<comp:Chapter_2_Sol_10 id="myTplComp">
<comp:header>
<mx:Image source="" />
</comp:header>
<comp:bottomRow>
To create a template component, follow the same procedure that you used when you created a normal component.
1. Create an MXML component in the com/flexsolutions/chapter2 folder by selecting File > New > MXML Component and give it the name Chapter_2_Sol_10.mxml. Base the component on a VBox container:
<?xml version="1.0"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >
</mx:VBox>
2. In the MXML component, start a block of ActionScript code in which you define the property of the component with the general data types:
<?xml version="1.0"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
<![CDATA[
import mx.controls.Image;
import mx.core.UIComponent;
public var header:Image;
public var footer:Image;
[ArrayElementType("mx.core.UIComponent")]
public var content:Array;
]]>
</mx:Script>
</mx:VBox>
You have created three properties: header, footer and content. The first two are properties
to which you have assigned a data type of Image, which limits their use to an Image
control only (when the developer will send a value to this property, it can be only an Image
control). For the third property, content, you used a generic data type of UIComponent
type. You can send any value that is a valid subclass of the UIComponent class to this property.
To use the UIComponent class you must import it: import mx.core.UIComponent.
The [ArrayElementType] metadata defines the underlying property as an Array of the
subclass of UIComponent. This metadata enables you to specify the data type of the elements
of the Array.
3. To ensure that these objects become rendered on the screen in the moment of
their creation, you must use the addChild() method, which you write in a function
launched by the system event initialize:
import mx.controls.Image;
import mx.core.UIComponent;
public var header: Image;
public var footer: Image;
[ArrayElementType("mx.core.UIComponent")]
public var content:Array;
private function draw():void {
addChild(header);
for (var i:int = 0; i < content.length; i++)
{
addChild(content[i]);
}
addChild(footer);
}
]]>
To the draw() event handler, you have sent the properties to be added as children to the
VBox root tag of the MXML component to the addChild() method.
4. Create the main application file that will import and invoke the template component.
Select File ä New ä MXML Application, name the file Chapter_2_Sol_10_app.
mxml, and define a custom namespace within it to import the component:
height="700" width="700">
5. Invoke the template component in the Panel container:
height="700" width="700">
6. You can now send the two properties to the invoked component as child tags of
the component. Make the following change to the code:
height="700" width="700">
The comp:header and the comp:footer template tags are the two properties you created
in the Chapter_2_Sol_10.mxml component. They contain two Image controls because they
were typed as Image classes:
import mx.controls.Image;
import mx.core.UIComponent;
public var header:mx.controls.Image;
public var footer:mx.controls.Image;
// Define an Array of properties for a row of components.
[ArrayElementType("mx.core.UIComponent")]
public var content:Array;
private function draw():void {
addChild(header);
for (var i:int = 0; i < content.length; i++)
{
addChild(content[i]);
}
addChild(footer);
}
]]>
The preceding code was written in the
file. For the comp:content template tag, define two Label controls and two Button controls
nested to two HBox controls:
The comp:content property can contain any control that is a valid subclass of the
UIComponent class, so enter it as an Array of UIComponent types:
// Define an Array of properties for a row of components.
[ArrayElementType("mx.core.UIComponent")]
public var content:Array;
7. Save and run the application.
The same example showed in this entries can be used in an AIR application.