走近Flex组件系列(六)：使用Form、FormHeading、FormItem布局表
发布时间：2020-12-15 04:13:40 所属栏目：百科 来源：网络整理
导读：转自http://www.csharpwin.com/dotnetspace/3166.shtml 本篇主要介绍使用Form、FormHeading、FormItem这三个组件进行布局表单界面，这三个组件使用非常简单。本篇以布局一个用户登录界面为示例，如下代码片段： mx:Form? width ="100%" ?id ="loginForm" ???
|
转自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。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |