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 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:
196
Creating Template Components