扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条
存储和验证数据
你可以使用数据模型来存储特定数据,数据模型是一个可以提供存储数据属性和包含附加方法的AS对象。申明一个简单的没有任何方法的数据模型可以使用<mx:Model> 或 <mx:XML>标记,你还可以使用验证组件验证存储数据的有效性。Flex包含了一套标准的数据验证组件,当然你也可以创建自己的验证组件。
下面的例子显示了一个简单的数据验证。
1. <mx:Application xmlns:mx='http://www.macromedia.com/2003/mxml' >
2. <mx:Panel title='My Application' marginTop='10' marginBottom='10'
3. marginLeft='10' marginRight='10' >
4. <mx:TextInput id='homePhoneInput' text='这不是一个有效的电话号码'/>
5. <mx:TextInput id='cellPhoneInput' text='(999)999-999'/>
6. <mx:TextInput id='emailInput' text='me@somewhere.net'/>
7. </mx:Panel>
8. <mx:Model id='contact'>
9. <homePhone>{ homePhoneInput.text }</homePhone>
10. <cellPhone>{ cellPhoneInput.text }</cellPhone>
11. <email>{ emailInput.text }</email>
12. </mx:Model>
13. <mx:PhoneNumberValidator field='contact.homePhone'/>
14. <mx:PhoneNumberValidator field='contact.cellPhone'/>
15. <mx:EmailValidator field='contact.email'/>
16. </mx:Application>
运行效果如图
请注意其中使用了电话号码验证和Email验证组件
要使用验证组件,需要注意几个地方:
首先定义需要验证的字段,如
<mx:Model id='contact'>
2. <homePhone>{ homePhoneInput.text }</homePhone>
3. <cellPhone>{ cellPhoneInput.text }</cellPhone>
4. <email>{ emailInput.text }</email>
5. </mx:Model>
然后使用验证组件验证相关字段,如
<mx:PhoneNumberValidator field='contact.cellPhone'/>
2. <mx:EmailValidator field='contact.email'/>
格式化数据
除了进行数据验证之外,格式化输入的数据也是经常需要用到的。Flex一样包含了一套用于数据格式化的组件,下面的例子对邮编进行格式化处理:
1. <mx:Application xmlns:mx='http://www.macromedia.com/2003/mxml'>
2. <mx:ZipCodeFormatter id='ZipCodeDisplay' formatString='#####-####' />
3. <mx:Script>
4. <![CDATA[
5. var storedZipCode=123456789;
6. ]]>
7. </mx:Script>
8. <mx:Panel title='My Application' marginTop='10' marginBottom='10' marginLeft='10' marginRight='10' >
9. <mx:TextInput text='' />
10. </mx:Panel>
11. </mx:Application>
常用的数据格式化还有对日期的格式化处理:
: NumberFormatter 数字格式化
2 : CurrencyFormatter 货币格式化
3 : PhoneFormatter 电话号码格式化
4 : ZipCodeFormatter 邮编格式化
5 : DateFormatter 日期格式化
6 : SwitchSymbolFormatter 创建自定义格式
使用样式表
还可以使用<mx:Style>标记表来定义Flex组件的样式表。
1. <mx:Application xmlns:mx='http://www.macromedia.com/2003/mxml'>
2. <mx:Style>
3. .myclass { color: Red } /* class selector */
4. Button { font-size: 18pt } /* type selector */
5. </mx:Style>
6. <mx:Panel title='My Application' marginTop='10' marginBottom='10'
7. marginLeft='10' marginRight='10' >
8. <mx:Button styleName='myclass' label='This is red 18 point text.'/>
9. </mx:Panel>
10. </mx:Application>
注意该标记不能嵌套在除根标记外的标记中。
运行效果如图
使用效果
可以对组件使用过渡效果,效果往往是在事件触发后产生,如鼠标单击、组件失去焦点和组件消失等。Flex专门提供了一套内置的效果组件。下面看一个例子:
<mx:Application xmlns:mx='http://www.macromedia.com/2003/mxml'>
2. <mx:Panel title='My Application' marginTop='10' marginBottom='10' marginLeft='10' marginRight='10' >
3. <mx:Button id='myButton' mouseOverEffect='Zoom' />
4. </mx:Panel>
5. </mx:Application>
如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。
现场直击|2021世界人工智能大会
直击5G创新地带,就在2021MWC上海
5G已至 转型当时——服务提供商如何把握转型的绝佳时机
寻找自己的Flag
华为开发者大会2020(Cloud)- 科技行者