本文共 4434 字，大约阅读时间需要 14 分钟。

存储和验证数据

你可以使用数据模型来存储特定数据，数据模型是一个可以提供存储数据属性和包含附加方法的AS对象。申明一个简单的没有任何方法的数据模型可以使用<mx:Model> 或 <mx:XML>标记，你还可以使用验证组件验证存储数据的有效性。Flex包含了一套标准的数据验证组件，当然你也可以创建自己的验证组件。下面的例子显示了一个简单的数据验证。

 <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/DataBindingActionScriptExpressionsSimple/index.html" width="420" height="350"> <mx:Model id="myModel"> <myModel> <!-- Perform simple property binding. --> <a>{nameInput.text}</a> <!-- Perform string concatenation. --> <b>This is {nameInput.text}</b> <!-- Perform a calculation. --> <c>{(Number(numberInput.text) as Number) * 6 / 7}</c> <!-- Perform a conditional operation using a ternary operator; the person object contains a Boolean variable called isMale. --> <d>{(isMale.selected) ? "Mr." : "Ms."} {nameInput.text}</d> </myModel> </mx:Model> <mx:Panel paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" width="100%" height="100%" title="Binding expressions" > <mx:Form> <mx:FormItem label="Last Name:"> <mx:TextInput id="nameInput"/> </mx:FormItem> <mx:FormItem label="Select sex:"> <mx:RadioButton id="isMale" label="Male" groupName="gender" selected="true" /> <mx:RadioButton id="isFemale" label="Female" groupName="gender" /> </mx:FormItem> <mx:FormItem label="Enter a number:"> <mx:TextInput id="numberInput" text="0"/> </mx:FormItem> </mx:Form> <mx:Text text="{'Simple binding: '+nameInput.text}"/> <mx:Text text="{'String concatenation: '+myModel.b}"/> <mx:Text text="{'Calculation: '+numberInput.text+' * 6 / 7 = '+myModel.c}"/> <mx:Text text="{'Conditional: '+myModel.d}"/> </mx:Panel> <mx:StringValidator source="{nameInput}" property="text" maxLength="5"/> <mx:NumberValidator source="{numberInput}" property="text" maxValue="9999" /></mx:Application>

  请注意其中使用了字符验证和数字验证组件

 格式化数据

除了进行数据验证之外，格式化输入的数据也是经常需要用到的。Flex一样包含了一套用于数据格式化的组件，下面的例子对邮编进行格式化处理：

 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:ZipCodeFormatter id='ZipCodeDisplay' formatString='#####-####' /> <mx:Script> <!--[CDATA[[Bindable] public var storedZipCode:int=123456789; ]]--></mx:Script><mx:Panel title='My Application'><mx:TextInput text='{ZipCodeDisplay.format(storedZipCode)}' /></mx:Panel></mx:Application>

 

 

常用的数据格式化还有对日期的格式化处理：

1: NumberFormatter 数字格式化

2 : CurrencyFormatter 货币格式化3 : PhoneFormatter 电话号码格式化4 : ZipCodeFormatter 邮编格式化5 : DateFormatter 日期格式化6 : SwitchSymbolFormatter 创建自定义格式

 

使用样式表

还可以使用<mx:Style>标记表来定义Flex组件的样式表。 注意该标记不能嵌套在除根标记外的标记中。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Style>.myclass { color: Red } /* class selector */Button { font-size: 18pt } /* type selector */</mx:Style><mx:Panel title='My Application' ><mx:Button styleName='myclass' label='This is red 18 point text.'/></mx:Panel></mx:Application>   

 

使用效果

可以对组件使用过渡效果，效果往往是在事件触发后产生，如鼠标单击、组件失去焦点和组件消失等。Flex专门提供了一套内置的效果组件。下面看一个例子：

 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Zoom id="zoom"/> <mx:Panel title='My Application' ><mx:Button id='myButton' label="Press me" mouseDownEffect="{zoom}" /></mx:Panel></mx:Application>

 

使用MXML组件

可以使用MXML文件定义自己的组件或者定义已有组件的组合，如 <?xml version="1.0" encoding="utf-8"?><mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="275"height="150" title="Member Login"><mx:Script><!--[CDATA[private function handleLoginEvent():void {lblTest.text = "logging in...";//login logic}]]--></mx:Script><mx:Label x="10" y="25" text="Username"/><mx:Label x="11" y="52" text="Password"/><mx:TextInput x="74" y="19" id="txtUID"/><mx:TextInput x="74" y="49" id="txtPwd" displayAsPassword="true"/><mx:Button x="178" y="84" label="Login" click="handleLoginEvent()"/><mx:Label x="74" y="85" id="lblTest"/></mx:Panel>

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="component.*"> <ns1:myb x="40" y="34"> </ns1:myb> </mx:Application>

 

 

 

转载地址：http://ribli.baihongyu.com/