Flex精华摘要--基本MXML功能

存储和验证数据
你可以使用数据模型来存储特定数据，数据模型是一个可以提供存储数据属性和包含附加方法的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>