DEMO

1 分隔

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:HBox width="100%">
 <mx:Label text="aaa">
 </mx:Label>
 <mx:Spacer width="100%"/>
  <mx:Label text="bbb">
 </mx:Label>
 </mx:HBox>
</mx:Application>

2 COMBOBOX

<?xml version="1.0"?>
<!-- Simple example to demonstrate the ComboBox control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable]
            public var cards:ArrayCollection = new ArrayCollection(
                [ {label:"Visa", data:1},
                  {label:"MasterCard", data:2},
                  {label:"American Express", data:3} ]);
       
            private function closeHandler(event:Event):void {
                myLabel.text = "You selected: " +  ComboBox(event.target).selectedItem.label;
                myData.text = "Data: " +  ComboBox(event.target).selectedItem.data;
            }    
        ]]>
    </mx:Script>

    <mx:Panel title="ComboBox Control Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <mx:ComboBox dataProvider="{cards}" width="150"
            close="closeHandler(event);"/>

        <mx:VBox width="250">
            <mx:Text  width="200" color="blue" text="Select a type of credit card."/>
            <mx:Label id="myLabel" text="You selected:"/>
            <mx:Label id="myData" text="Data:"/>
        </mx:VBox>        

    </mx:Panel>   
</mx:Application>      

3 日期

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the DateField control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
      <![CDATA[

         // Event handler for the DateField change event.
         private function dateChanged(date:Date):void {
            if (date == null)
                selection.text = "Date selected: ";               
            else
                selection.text = "Date selected: " + date.getFullYear().toString() +
                    '/' + (date.getMonth()+1).toString() + '/' + date.getDate();
         }
      ]]>
    </mx:Script>
 
 <mx:DateFormatter id="df"/>

    <mx:Panel title="DateField Control Example" height="75%" width="75%"
        paddingTop="10" paddingLeft="10" paddingRight="10">

        <mx:Label width="100%"  color="blue"
            text="Select a date in the DateField control. Select it again to clear it."/>

        <mx:Label text="Basic DateField:"/>
        <mx:DateField id="dateField1" yearNavigationEnabled="true"
            change="dateChanged(DateField(event.target).selectedDate)" />
        <mx:Label id="selection"  color="blue" text="Date selected:" />

        <mx:Label text="Disable dates on or before June 1, 2006."/>
        <mx:DateField id="dateField2" yearNavigationEnabled="true"
            disabledRanges="{[ {rangeEnd: new Date(2006, 5, 1)} ]}" />
        <mx:Label  color="blue" text="Date selected: {df.format(dateField2.selectedDate)}"/>

    </mx:Panel>
</mx:Application>
4 Hbox

<?xml version="1.0"?>
<!-- Simple example to demonstrate the VBox layout container. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Panel title="VBox Container Example" height="75%" width="75%"
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

       <mx:Label width="100%" color="blue"
           text="A VBox container with vertically aligned children."/>
          
       <mx:VBox borderStyle="solid" paddingTop="10" paddingBottom="10"
               paddingLeft="10" paddingRight="10">

            <mx:Button label="Button 1"/>
            <mx:Button label="Button 2"/>
            <mx:Button label="Button 3"/>
            <mx:ComboBox/>

        </mx:VBox>

    </mx:Panel>
</mx:Application>