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

本篇主要介绍使用Form、FormHeading、FormItem这三个组件进行布局表单界面,这三个组件使用非常简单。本篇以布局一个用户登录界面为示例,如下代码片段: < mx:Form width ="100%" id ="loginForm" >
< mx:FormHeading label ="用户登录" >

< mx:FormItem label ="用户名:" >
< mx:TextInput id ="txtUserName" >


< mx:FormItem label ="密码:" >
< mx:TextInput id ="txtPassword" displayAsPassword ="true" >


< 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()" />


如上代码段,很容易理解,就相当于html里的Form,只是这里他不做post/get等数据提交方式,只为界面布局。在里可以嵌入许多的其他组件,如上的下还有两种组件,是用于设计表单头,理所当然则是用于布局表单体的。
【走近Flex组件系列(六)(使用Form、FormHeading、FormItem布局表单界面(登录界面示例)...)】另外上面还通过组件对界面上的数据输入进行了控制和tooltip提示。

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

    推荐阅读