<
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: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。