走近Flex组件系列(六)：使用Form、FormHeading、FormItem布局表单

转自http://www.csharpwin.com/dotnetspace/3166.shtml

本篇主要介绍使用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。