走近Flex组件系列(六)：使用Form、FormHeading、FormItem布局表单界面（登录界面示例）

      本篇主要介绍使用Form、FormHeading、FormItem这三个组件进行布局表单界面，这三个组件使用非常简单。本篇以布局一个用户登录界面为示例，如下代码片段：

<mx:Form width="100%" id="loginForm">
    <mx:FormHeading label="用户登录">
    </mx:FormHeading>
    <mx:FormItem label="用户名:">
        <mx:TextInput id="txtUserName">
        </mx:TextInput>
    </mx:FormItem>
    <mx:FormItem label="密  码:">
        <mx:TextInput id="txtPassword" displayAsPassword="true">
        </mx:TextInput>
    </mx:FormItem>
    <mx:ControlBar>
        <mx:Spacer id="sp" width="110"/>
        <mx:Button label="登录" id="btnLogin" 
            enabled="{(txtUserName.text.length == 0 ) ? false : true}"
            toolTip="{btnLogin.enabled == true ? '点击登录' : '请输入用户名和密码'}" 
            click="connectApp()"/>
    </mx:ControlBar>
</mx:Form>

 

      如上代码段，很容易理解，<mx:Form>就相当于html里的Form，只是这里他不做post/get等数据提交方式，只为界面布局。在<mx:Form>里可以嵌入许多的其他组件，如上的<mx:Form>下还有<mx:FormHeading>和<mx:FormItem>两种组件，<mx:FormHeading>是用于设计表单头，理所当然<mx:FormItem>则是用于布局表单体的。

      另外上面还通过<mx:Button>组件对界面上的数据输入进行了控制和tooltip提示。

 

      与<mx:Form>组件功能类似的有<mx:Tile>等，这些组件使用都很简单。详细可以参考官方提供的Flex Component Explorer。