走近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 >

 

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

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

 

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