简单组件
组件定义：SimpleMonths.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:dataProvider>
<mx:ArrayCollection>
<mx:String>January</mx:String>
<mx:String>February</mx:String>
<mx:String>March</mx:String>
<mx:String>April</mx:String>
<mx:String>May</mx:String>
<mx:String>June</mx:String>
<mx:String>July</mx:String>
<mx:String>August</mx:String>
<mx:String>September</mx:String>
<mx:String>October</mx:String>
<mx:String>November</mx:String>
<mx:String>December</mx:String>
</mx:ArrayCollection>
</mx:dataProvider>
</mx:ComboBox>
或带着样式的定义
<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml"
themeColor="#400080" borderColor="#800080"
fillColors="[#800080, #ffffff]"
fillAlphas="[0.5, 0.5]"
cornerRadius="0">
<mx:dataProvider>
<mx:ArrayCollection>
<mx:String>January</mx:String>
<mx:String>February</mx:String>
<mx:String>March</mx:String>
<mx:String>April</mx:String>
<mx:String>May</mx:String>
<mx:String>June</mx:String>
<mx:String>July</mx:String>
<mx:String>August</mx:String>
<mx:String>September</mx:String>
<mx:String>October</mx:String>
<mx:String>November</mx:String>
<mx:String>December</mx:String>
</mx:ArrayCollection>
</mx:dataProvider>
</mx:ComboBox>
调用以上组件：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comps="*" backgroundColor="#FFFFFF">
<mx:Panel title="Simple Months" width="100%" height="100%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"
layout="horizontal">
<comps:SimpleMonths />
<comps:SimpleStyledMonths />
</mx:Panel>
</mx:Application>
/**注意**/ this总是当前正在使用的文件，当从自定义组件调用this时，返回的组件的id，如果没有设置ID,那么将返回Flex赋予的ID
高级组件（自定义属性、方法）
<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init()"
dataProvider="{this.months}"
labelField="{this.labelFieldVar}">
<mx:Script>
<![CDATA[
[Bindable]
private var months:Array = [{full:"January",abr:"Jan",num:1},
{full:"February",abr:"Feb",num:2},
{full:"March",abr:"Mar",num:3},
{full:"April",abr:"Apr",num:4},
{full:"May",abr:"May",num:5},
{full:"June",abr:"Jun",num:6},
{full:"July",abr:"Jul",num:7},
{full:"August",abr:"Aug",num:8},
{full:"September",abr:"Sep",num:9},
{full:"October",abr:"Oct",num:10},
{full:"November",abr:"Nov",num:11},
{full:"December",abr:"Dec",num:12}];
[Bindable]
[Inspectable(defaultValue="full", enumeration="full,abr,num")]
public var labelFieldVar:String = "full";
public function getSelectedMonth(s:String):String{
return "You have selected "+this.selectedItem[s];
}
]]>
</mx:Script>
</mx:ComboBox>
调用高级组件
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comps="*" backgroundColor="#FFFFFF">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</mx:Script>
<mx:Panel title="Advanced Months" width="100%" height="100%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"
layout="horizontal">
<comps:AdvancedMonths id="full" labelFieldVar="full"
change="mx.controls.Alert.show(full.getSelectedMonth('full'))" />
<comps:AdvancedMonths id="abr" labelFieldVar="abr"
change="mx.controls.Alert.show(abr.getSelectedMonth('abr'))"/>
<comps:AdvancedMonths id="num" labelFieldVar="num"
change="mx.controls.Alert.show(num.getSelectedMonth('num'))" />
</mx:Panel>
</mx:Application>
复合组件
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comps="*"
creationComplete="init()">
<mx:Script>
<![CDATA[
[Bindable]
private var days:Array = new Array();
[Bindable]
private var years:Array = new Array();
private function init():void{
for(var i:int=1; i<=31; i++){
this.days.push(i);
}
for(var j:int=1950; j<=2006; j++){
this.years.push(j);
}
this.daysCB.selectedIndex=1;
this.yearsCB.selectedIndex=30;
}
[Bindable]
public var labelFieldVar:String = "full";
public function getBirthdate():Date{
return new Date(this.yearsCB.selectedItem,this.monthsCB.selectedItem['num']-1,this.daysCB.selectedItem);
}
]]>
</mx:Script>
<comps:AdvancedMonths id="monthsCB" labelField="{this.labelFieldVar}"/>
<mx:ComboBox id="daysCB" dataProvider="{this.days}" width="50"/>
<mx:ComboBox id="yearsCB" dataProvider="{this.years}" width="65"/>
</mx:HBox>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comps="*" backgroundColor="#FFFFFF">
<mx:Panel title="Birth date" width="100%" height="100%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"
layout="horizontal">
<comps:Birthdate labelFieldVar="full" id="birthdate" />
<mx:Button label="getBirthdate()"
click="mx.controls.Alert.show(birthdate.getBirthdate().toString())"/>
</mx:Panel>
</mx:Application>
模板组件（TemplateLayoutComp.mxml)
<?xml version="1.0"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();" width="100%" height="100%">
<mx:Script>
<![CDATA[
import mx.containers.HBox;
import mx.core.UIComponent;
// Define a property for components
public var header:UIComponent;
public var menu:UIComponent;
public var footer:UIComponent;
// Define an Array of elements for the mainContent
// components of type mx.core.UIComponent.
[ArrayElementType("mx.core.UIComponent")]
public var content:Array;
private function init():void {
// Add the header component
this.addChild(header);
// Create an HBox container. This container
// is the parent container of the bottom row of components.
var body:HBox= new HBox();
body.percentHeight=100;
body.percentWidth=100;
addChild(body);
body.addChild(menu);
var mainContent:VBox = new VBox();
mainContent.percentHeight=100;
mainContent.percentWidth=100;
// Loop through the content Array and add components to mainContent section
for (var i:int = 0; i < this.content.length; i++){
mainContent.addChild(this.content[i]);
}
// Add the body
body.addChild(mainContent);
// Add the footer
this.addChild(footer);
}
]]>
</mx:Script>
</mx:VBox>
***:header menu footer content 是UIComponent类型的组件
使用模板组件（UseTemplate1.mxml,UseTemplate2.mxml)
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comps="*"
width="500" height="500"
backgroundColor="#FFFFFF">
<comps:TemplateLayoutComp id="tc1" borderStyle="solid">
<comps:header>
<mx:Canvas width="100%" height="30" backgroundColor="#CCCCCC">
<mx:Label text="This is the section where the header would be."
horizontalCenter="0" verticalCenter="0"/>
</mx:Canvas>
</comps:header>
<comps:menu>
<mx:LinkBar color="#0000FF" fontWeight="bold"
dataProvider="{myViewStack}" direction="vertical"/>
</comps:menu>
<comps:content>
<mx:Label text="This section is set to allow multiple UIComponents" />
<mx:ViewStack id="myViewStack" borderStyle="solid"
width="100%" height="100%">
<mx:Canvas id="s1" backgroundColor="#CC3399"
label="Screen 1" width="100%" height="100%">
<mx:Label text="This is Screen 1 of the ViewStack component"/>
</mx:Canvas>
<mx:Canvas id="s2" backgroundColor="#33FFCC"
label="Screen 2" width="100%" height="100%">
<mx:Label text="This is Screen 2 of the ViewStack component"/>
</mx:Canvas>
<mx:Canvas id="s3" backgroundColor="#FFFF66"
label="Screen 3" width="100%" height="100%">
<mx:Label text="This is Screen 3 of the ViewStack component"/>
</mx:Canvas>
</mx:ViewStack>
<mx:Label text="Here is a 3rd component in the content section." />
</comps:content>
<comps:footer>
<mx:Canvas width="100%" height="30" backgroundColor="#CCCCCC">
<mx:Label text="This is the section where the footer would be."
horizontalCenter="0" verticalCenter="0"/>
</mx:Canvas>
</comps:footer>
</comps:TemplateLayoutComp>
</mx:Application>
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comps="*"
width="500" height="500" backgroundColor="#FFFFFF">
<comps:TemplateLayoutComp id="tc2" borderStyle="solid">
<comps:header>
<mx:Image source="header.gif" />
</comps:header>
<comps:menu>
<mx:ToggleButtonBar color="#0000FF" fontWeight="bold"
dataProvider="{myViewStack}" direction="vertical"/>
</comps:menu>
<comps:content>
<mx:Label text="This section is set to allow multiple UIComponents" />
<mx:ViewStack id="myViewStack" borderStyle="solid"
width="100%" height="100%">
<mx:Canvas id="s1" backgroundColor="#CC3399"
label="Screen 1" width="100%" height="100%">
<mx:Label text="This is Screen 1 of the ViewStack component"/>
</mx:Canvas>
<mx:Canvas id="s2" backgroundColor="#33FFCC"
label="Screen 2" width="100%" height="100%">
<mx:Label text="This is Screen 2 of the ViewStack component"/>
</mx:Canvas>
<mx:Canvas id="s3" backgroundColor="#FFFF66"
label="Screen 3" width="100%" height="100%">
<mx:Label text="This is Screen 3 of the ViewStack component"/>
</mx:Canvas>
</mx:ViewStack>
<mx:TextInput width="100%"
text="Here is a 3rd component, this time a TextInput." />
</comps:content>
<comps:footer>
<mx:Canvas width="100%" height="30" backgroundColor="#CCCCCC">
<mx:Label text="This is the section where the footer would be."
horizontalCenter="0" verticalCenter="0"/>
</mx:Canvas>
</comps:footer>
</comps:TemplateLayoutComp>
</mx:Application>