User Guide

196 Creating Template Components

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

MyTemplateComponent:

<?xml version="1.0"?>

<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: