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>