簡單組件
組件定義：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>