MX Container:Form

使用<mx:Form>创建一个表单容器。

一个表单容器由三部分组成：

1.表单头组件[可选]

2.表单项容器

3.表单域,如内嵌在表单项容器内的ComboBox、TextInput控件等。

 

例 添加表单头

 <?xml version="1.0"?>

<!-- containers\layouts\FormHeadingSimple.mxml -->

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:mx="library://ns.adobe.com/flex/mx"

xmlns:s="library://ns.adobe.com/flex/spark">

<mx:Form id="myForm" width="400" height="100">

<mx:FormHeading label="Billing Information"/>

<!--Define FormItem containers here. -->

</mx:Form>

</s:Application>

运行

表单项

表单项容器由两部分：

label

 一个或多个控件或容器，如input控件

你使用<mx:FormItem>标签定义FormItem容器。

例 拥有输入框的Form

<?xml version="1.0"?>
<!-- containers\layouts\FormItemStyle.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Style>
.myFormItemLabelStyle {
color: #333399;
fontSize: 20;
}
</fx:Style>
<fx:Script>
<![CDATA[
private function processValues(zip:String, pn:String):void {
// Validate and process data.
}
]]>
</fx:Script>
<mx:Form id="myForm" defaultButton="{mySubmitButton}">
<mx:FormItem label="Zip Code"
labelStyleName="myFormItemLabelStyle">
<mx:TextInput id="zipCode"/>
</mx:FormItem>
<mx:FormItem label="Phone Number">
<mx:TextInput id="phoneNumber"/>
</mx:FormItem>
<mx:FormItem>
<mx:Button label="Submit" id="mySubmitButton"
click="processValues(zipCode.text, phoneNumber.text);"/>
</mx:FormItem>
</mx:Form>

</s:Application> 

 运行 

 例 添填Combox 添加水平分割线的Form Container

<?xml version="1.0"?>
<!-- containers\layouts\FormComplete.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
private function submitForm():void {
// Handle the form submission.
}
]]>
</fx:Script>
<mx:Form id="myForm" width="400">
    <mx:FormHeading label="Billing Information"/>
    <mx:FormItem label="First Name">
        <mx:TextInput id="fname" width="100%"/>
    </mx:FormItem>
    <mx:FormItem label="Last Name">
        <mx:TextInput id="lname" width="100%"/>
    </mx:FormItem>
    <mx:FormItem label="Address">
        <mx:TextInput id="addr1" width="100%"/>
        <mx:TextInput id="addr2" width="100%"/>
    </mx:FormItem>
    <mx:FormItem label="City / State" direction="vertical">
        <mx:TextInput id="city"/>
        <mx:ComboBox id="st" width="75">
            <mx:ArrayList>
                <fx:String>MA</fx:String>
                <fx:String>NH</fx:String>
                <fx:String>RI</fx:String>
            </mx:ArrayList>
        </mx:ComboBox>
    </mx:FormItem>
    <mx:FormItem label="ZIP Code">
        <mx:TextInput id="zip" width="100"/>
    </mx:FormItem>
    <mx:FormItem label="Country">
        <mx:ComboBox id="cntry">
            <mx:ArrayList>
                <fx:String>USA</fx:String>
                <fx:String>UAE</fx:String>
                <fx:String>UAW</fx:String>
            </mx:ArrayList>
        </mx:ComboBox>
    </mx:FormItem>
    <mx:FormItem>
        <mx:HRule width="200" height="1"/>
        <mx:Button label="Submit Form" click="submitForm();"/>
    </mx:FormItem>
</mx:Form>

</s:Application>

运行