Flex精华摘要 2：基本MXML功能

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

1.

然后使用验证组件验证相关字段，如

<mx:PhoneNumberValidator field='contact.cellPhone'/>

2. <mx:EmailValidator field='contact.email'/>

1.

格式化数据
除了进行数据验证之外，格式化输入的数据也是经常需要用到的。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 创建自定义格式

1

使用样式表
还可以使用<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>

1.

使用MXML组件
可以使用MXML文件定义自己的组件或者定义已有组件的组合，并通过<local:自定义组件名/>的方式调用。
如

1. <!-- MyComboBox.mxml -->

2. <mx:VBox xmlns:mx='http://www.macromedia.com/2003/mxml'>

3. <mx:ComboBox >

4. <mx:dataProvider>

5. <mx:Array>

6. <mx:String>Dogs</mx:String>

7. <mx:String>Cats</mx:String>

8. <mx:String>Mice</mx:String>

9. </mx:Array>

10. </mx:dataProvider>

11. </mx:ComboBox>

12. </mx:VBox>

注意，MXML组件文件并不需要<mx:Application>标记，更复杂的自定义组件可以使用JSP或其它语言动态生成。
调用自定义组件的应用程序文件格式如下：

<!-- MyApplication.mxml -->

2. <mx:Application xmlns:mx='http://www.macromedia.com/2003/mxml' xmlns:local='*'>

3. <mx:Panel title='My Application' marginTop='10' marginBottom='10' marginLeft='10' marginRight='10' >

4. <!-- 调用MyComboBox组件 -->

5. <local:MyComboBox/>

6. </mx:Panel>

7. </mx:Application>

1.