Php文档 Php问答行业资讯 Php论坛 Php手册 Php博客

游戏榜单

软件榜单

关闭导航

热搜榜

热门下载

热门标签

关闭搜索

php爱好者> php文档>Flex中的数据处理

Flex中的数据处理

时间：2008-05-30 来源：qbq

数据是程序处理的主要对象。在应用程序中最核心的部分也是数据处理。本章将为读者介绍Flex 3.0中对数据的处理，包括数据绑定、数据存储、数据验证、数据格式化等内容。

19.1 数据绑定

数据绑定是指用户可以将某个属性与其他的属性或变量相关联。这样，当被绑定的属性或变量发生改变时，绑定项同时发生改变。例如，任意播放窗口大小，其上的组件相应变化尺寸。此时可使用绑定方法，将组件的宽度和高度分别以一定比例与主窗口的宽度和高度相关联。数据绑定是Flex技术中一项非常有用的技术，可以有效地减少程序代码，提高运行效率。

19.1.1 简单绑定方式

Flex 3.0中绑定数据最简单的方式是使用“{}”运算符。其语法如下所示。

{可绑定的属性或变量}

使用“[Bindable]”关键字可指明变量或属性为可绑定。其语法如下所示。

[Bindable]

变量或属性

以下代码定义变量s为可绑定变量。

[Bindable]

private var s:String="111111";

组件的大部分属性都是可绑定的，因为在组件定义中属性一般都指明为“[Bindable]”。对于要绑定的变量需要先声明为“[Bindable]”。若用户使用“{}”操作符绑定未声明为可绑定的变量时，编译会提示警告，但运行正常。

以下代码将<mx:Text>组件的text属性绑定至<mx:HSlider>组件的value属性。运行的效果是<mx:Text>组件实时显示<mx:HSlider>组件的拖动值。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Panel title="简单数据绑定" fontSize="13" x="225" y="180" height="138" width="213" verticalAlign="middle" horizontalAlign="center">

<mx:VBox>

<mx:HSlider id="mySlider"/>

<mx:Text text="{mySlider.value}"/>

</mx:VBox>

</mx:Panel>

</mx:Application>

（1）本程序中使用“{}”绑定方式，从而有效地减少了代码。若不使用绑定方式，本程序必须使用事件处理：在<mx:HSlider>组件的拖动值发生改变时，修改<mx:Text>组件的text值。

（2）需要注意的是，绑定时类型要一致。text属性的值为字符串类型。除了字符串类型外，不能绑定别的数据类型。

本程序的运行效果如图19-1所示。

图19-1 使用“{}”操作符绑定数据效果

19.1.2 使用<mx:Binding>组件绑定数据

<mx:Binding>组件也可实现绑定数据，其语法如下所示。

<mx:Binding source="绑定源" destination="绑定目标"/>

source属性指明被绑定的源，destination属性指明绑定的目标。需要注意的是两者指向的类型必须相同。例如，source属性为<mx:Text>组件的text属性，destination属性为<mx:HSlider>组件的value属性，两者都为字符串属性。

以下代码将Label组件的text属性绑定至<mx:Model>组件下的name值。<mx:Model>组件用于存储自定义复杂数据。有关<mx:Model>组件的详细介绍将在后续章节中介绍。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Model id="myEmployee">

<name>fisher</name>

</Employee>

</mx:Model>

<mx:Binding source="myEmployee.name" destination="lbl.text"/>

<mx:Panel title="使用Binding组件绑定" fontSize="15" x="216" y="102" width="371" height="200" verticalAlign="middle" horizontalAlign="center">

<mx:Label id="lbl" fontSize="15"/>

</mx:Panel>

</mx:Application>

本程序的运行效果如图19-2所示。

图19-2 使用<mx:Binding>组件绑定数据

<mx:Binding>组件绑定方式完全可以用“{}”方式替代。其中，source属性指明的绑定源可在“{}”中定义。

上述程序使用“{}”方式表示的代码如下所示。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Model id="myEmployee">

<name>fisher</name>

</Employee>

</mx:Model>

<mx:Panel title="使用Binding组件绑定" fontSize="15" x="216" y="102" width="371" height="200" verticalAlign="middle" horizontalAlign="center">

<mx:Label id="lbl" fontSize="15" text="{myEmployee.name}"/>

</mx:Panel>

</mx:Application>

使用“{}”方式绑定数据简单、快速、代码更少，是实际开发中最频繁使用的语句之一。Flex 3.0绑定数据的特性能有效地减少代码，提高效率。在实际编写应用程序时建议尽量使用数据绑定，因为绑定的运行效率比代码实现的效率要高得多。

19.2 复杂数据的存储

数据存储是指在编程过程中将数据以特定的形式存储。简单的数据模型可以用简单的数据类型存储，如int型、String型、Array型。对于复杂的逻辑模型，需要将数据合理存储。Flex 3.0提供了<mx:Model>、<mx:Object>、<mx:XML>3种存储复杂的数据模型。用户可以灵活地设计适合的数据存储类型。

19.2.1 使用<mx:Model>组件存储数据

<mx:Model>组件是Flex 3.0中的数据模型组件，用于存储自定义的数据。<mx:Model>以树型结构存储，类似XML数据定义。树型存储结构的优点是定位迅速、容易理解。<mx:Model>组件存储数据的语法如下所示。

<mx:Model id="Model组件id">

<根节点>

<节点1/>

<节点2/>

…

</根节点>

</mx:Model>

<mx:Model>组件定义数据时必须有根节点，即<mx:Model>标签下的有一节点能包括全部的其他节点。

以下代码使用<mx:Model>组件定义了员工的数据模型，包括名称、部门、E-mail等信息。将<mx:Model>组件中的数据作为DataGrid组件的数据源并显示。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="13">

<mx:Model id="employeemodel">

<name>John Smith</name>

<email>[email protected]</email>

</employee>

<name>Tom Steve</name>

<department>人力资源部</department>

<email>[email protected]</email>

</employee>

</employees>

</mx:Model>

<mx:Panel title="使用Model组件">

<mx:DataGrid dataProvider="{employeemodel.employee}">

<mx:columns>

<mx:DataGridColumn dataField="name" headerText="员工名"/>

<mx:DataGridColumn dataField="department" headerText="部门"/>

<mx:DataGridColumn dataField="email" headerText="Email"/>

</mx:columns>

</mx:DataGrid>

</mx:Panel>

</mx:Application>

指向<mx:Model>组件中的数据时需要跳过根节点，这与XML组件有所不同。本程序中指向员工数据的代码为“employeemodel.employee”，跳过了根节点<employees>。

本程序的运行代码如图19-3所示。

图19-3 使用<mx:Model>组件存储数据

19.2.2 使用<mx:Object>组件存储数据

<mx:Object>组件是一种抽象的数据模型组件，可用于定义复杂数据。使用<mx:Object>组件存储数据的语法如下所示。

<mx:Object 属性名1="属性值1" 属性名2="属性值2" … 属性名n=’属性值n"/>

<mx:Object>组件使用属性来存储数据。一个<mx:Object>组件可看成为一行数据，多个<mx:Object>组件就组成了类似表格的复杂数据模型。

以下代码使用<mx:Object>组件定义员工模型，并在<mx:DataGrid>组件中显示。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Panel title="使用Object组件">

<mx:DataGrid >

<mx:dataProvider>

<mx:Object name="John Smith" department="技术部" email="john@ 163.com"/>

<mx:Object name="Tom Steve" department="人力资源部" email= "[email protected]"/>

<mx:Object name="fisher Steve" department="人力资源部" email= "[email protected]"/>

</mx:dataProvider>

</mx:DataGrid>

</mx:Panel>

</mx:Application>

本程序的运行效果如图19-4所示。

图19-4 使用<mx:Object>组件存储数据

19.2.3 使用<mx:XML>组件存储数据

XML标准是国际通用标准，有非常广泛的应用。<mx:XML>组件用于Flex应用程序中定义XML数据。<mx:XML>组件的定义语法与<mx:Model>组件定义语法相近，都为树型数据定义。其定义语法如下所示。

<mx:XML id="XML组件id">

<根节点>

<节点1/>

<节点2/>

…

</根节点>

</mx:XML>

以下代码使用<mx:XML>组件定义列表数据，并在<mx:Tree>组件中显示。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

fontFamily="simsun" fontSize="12"

layout="absolute" width="242" height="442" >

<mx:Panel title="使用XML组件">

<mx:Tree id="tree" x="10" y="35" width="218" height="397" showRoot= "false" labelField="@label">

<mx:dataProvider>

<mx:XML id="XMLData">

<menus>

</node>

</node>

</menus>

</mx:XML>

</mx:dataProvider>

</mx:Tree>

</mx:Panel>

</mx:Application>

（3） <mx:Tree>组件使用labelField属性指明显示内容。本程序中显示XML数据中的label属性。

（4） <mx:Tree>组件中的showRoot属性表示是否显示根节点。本程序中XML数据的根节点为<menus>。

本程序的运行效果如图19-5所示。

图19-5 使用<mx:XML>组件存储数据

19.3 数据验证

数据验证是指应用程序中对输入的数据进行某种方式的校验。例如，电话号码必须为数字，E-mail地址有特定的规则等。本章将详细介绍Flex 3.0数据验证的基本方法和自定义方法。本章结尾还将提供一个用户注册的实例来帮助读者掌握数据验证。

19.3.1 数据验证组件概述

数据验证组件是专门针对数据验证的特殊组件，包含一定规则的验证及出错提示。使用数据验证组件使得对数据验证更加方便，摆脱了复杂的验证逻辑，有利于应用程序的开发。

Flex 3.0中提供了一些常用的组件进行数据验证，这些组件能基本满足用户的要求。若用户想自定义所需的数据验证，可继承类型相近的验证组件，从而创建自定义的数据验证组件。Flex 3.0提供的数据验证组件，包括CreditCardValidator、CurrencyValidator、DateValidator等。这些组件可以有效地完成验证任务，出错提示也很丰富。

Flex 3.0提供的基本验证组件如表19-1所示。

表19-1 基本验证组件

组件名	说明
CreditCardValidator	信用卡号码验证
CurrencyValidator	货币验证
DateValidator	日期验证
EmailValidator	Email验证
NumberValidator	数字验证
PhoneNumberValidator	电话号码验证
RegExpValidator	正则表达式验证
SocialSecurityValidator	美国“Social Security”号码验证
StringValidator	字符串验证
ZipCodeValidator	邮编验证

Flex 3.0提供的一些验证组件是以美国的规则定制的。例如，美国邮编长度为5位，中国的邮编长度为6位。当验证组件不能满足要求时，用户需要修改组件的某些属性从而达到要求。例如，数字验证组件中可指明最大值和最小值。若用户有特殊的验证要求而组件未提供属性或方法时，用户可用自定义组件来实现验证效果。

19.3.2 如何使用数据验证组件

使用数据验证组件的语法如下所示。

<验证组件 source="{需验证的数据组件id}" property="数据组件的属性">

指明source属性和property属性表示验证组件针对某一数据组件的特定属性进行验证。例如，邮箱验证组件对某输入框的text属性进行验证。

以下代码使用<mx:PhoneNumberValidator>组件对一个输入框中的文本进行电话号码验证。

<mx:PhoneNumberValidator id="pnV" source="{phoneInput}" property="text"/>

<mx:Panel>

<mx:TextInput id="phoneInput"/>

</mx:Panel>

由于验证组件都不为可视化组件，所以不能放置于可视化组件内。本程序中<mx:PhoneNumberValidator>组件不能放置于<mx:Panel>组件中。

19.3.3 验证触发方式

验证触发方式是指用户采用何种动作触发验证。常用的触发方式有默认触发和任意动作触发。默认触发是指当焦点离开输入源时触发验证。任意动作触发是指用户可指定某一动作触发验证。前者是开发过程中最常使用到的一种方式，后者比较灵活，也比较容易理解。

1．默认触发验证

当用户把焦点离开输入源时触发默认触发验证。其语法如下所示。

<mx:验证组件类型 source="{输入源id}" property="输入源的属性">

默认触发方式需确定验证组件的source属性和property属性，其他属性默认。

以下代码采用默认触发验证方式。当焦点离开第一个输入框时触发验证。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="13">

<mx:PhoneNumberValidator id="pnV" source="{phoneInput}" property="text"/>

<mx:Panel title="默认触发验证" width="400" height="300" horizontalAlign= "center" verticalAlign="middle" x="261" y="77">

<mx:Label text="请在第一个输入框中输入,然后焦点转移到第二个输入框"/>

<mx:TextInput id="phoneInput"/>

<mx:Label text="{phoneInput.errorString}"/>

<mx:TextInput />

</mx:Panel>

</mx:Application>

验证组件的结果直接反映在数据组件上。本程序中若输入框组件phoneInput验证错误，结果为输入框边框颜色变红色。验证错误的提示存储于数据组件的errorString属性中。

本程序的运行效果如图19-6所示。

图19-6 默认触发验证效果

2．任意动作触发验证

用户可根据需要触发验证。例如，当按下“验证”按钮时触发验证。

任意动作触发验证有两种写法。一种是在验证组件中指明触发器和触发动作。另一种是执行事件处理函数。

在验证组件中指明触发器和触发动作的语法如下所示。

<mx:验证组件类型

source="{输入源id}"

property="输入源的属性"

trigger="{触发器}"

triggerEvent="触发事件"

trigger属性指明触发验证的组件，也称为触发器。triggerEvent属性表示触发验证组件的方法。

以下代码当用户单击“验证”按钮时触发邮编验证。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="13">

<mx:ZipCodeValidator id="zipV" source="{myZip}" property="text" trigger ="{mySubmit}" triggerEvent="click"/>

<mx:Panel title="click动作触发验证" width="352" height="202" horizontalAlign ="center" verticalAlign="middle">

<mx:TextInput id="myZip"/>

<mx:Label text="{myZip.errorString}"/>

<mx:Button id="mySubmit" label="验证"/> <!—按钮组件，用于触发验证-->

</mx:Panel>

</mx:Application>

本程序的运行效果如图19-7所示。

图19-7 click动作触发验证

任意动作的触发也可采用代码触发验证方式。代码触发验证的方式符合Flex 3.0的事件机制，更容易理解。其语法如下所示。

<组件事件="验证组件.validate();"/>

验证组件都包含一个validate方法，用以代码执行验证。

上述程序使用代码方式触发验证的代码如下所示。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="13">

<mx:ZipCodeValidator id="zipV" source="{myZip}" property="text">

<mx:Paneltitle="click动作触发验证"width="352"height="202"horizontalAlign ="center" verticalAlign="middle">

<mx:TextInput id="myZip"/>

<mx:Label text="{myZip.errorString}"/>

<mx:Button id="mySubmit" label="验证" click="zipV.validate();"/>

</mx:Panel>

</mx:Application>

19.3.4 验证失败处理

验证失败时需要做错误的提示及处理。验证组件中提供了丰富的错误类型，只是这些错误类型的提示是英文的，用户可能需要改变提示。修改错误提示的方法是修改组件中相应的错误类型属性。例如，PhoneNumberValidator组件中的wrongLengthError属性表示长度错误提示。

用户可根据需要修改相应的出错信息。其语法如下所示。

<验证组件错误类型属性="自定义错误提示"/>

以下代码自定义EmailValidator组件中的错误提示。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="13">

<mx:Script>

<![CDATA[

import mx.events.ValidationResultEvent; //引用ValidationResult Event类

import mx.controls.Alert; //引用Alert类

private function checkHandle():void //验证处理函数

{

if(emailV.validate().type==ValidationResultEvent.VALID) //验证通过

{

Alert.show("电子邮件验证成功"); //提示"验证成功"

}

]]>

</mx:Script>

<mx:EmailValidator

id="emailV"

source="{txtEmail}"

property="text"

invalidCharError="非法字符"

invalidDomainError="非法域"

invalidIPDomainError="非法IP域"

missingAtSignError="缺少@符"

missingPeriodInDomainError="缺少域后缀"

missingUsernameError="缺少用户名"

<mx:Panel title="EmailValidator验证失败处理" width="352" height="202" horizontalAlign="center" verticalAlign="middle">

<mx:TextInput id="txtEmail"/>

<mx:Label text="{txtEmail.errorString}"/>

<mx:Button id="mySubmit" label="验证" click="checkHandle();"/>

</mx:Panel>

</mx:Application>

判断验证是否正确的语法如下所示。

If(验证组件id.validate().type==ValidationResultEvent.VALID)

ValidationResultEvent类包含于“mx.events.*”中，是验证结果事件类。其中，INVALID值表示验证失败，VALID值表示验证成功。

本程序的运行效果如图19-8所示。

19.3.5 自定义验证组件

当验证组件不能满足用户的特殊验证需求时，用户可考虑自定义验证组件。一般来说，多条件复杂数据验证都需要自定义验证组件。例如，字符串长度为3~43，内容不能包含某些脏字。

Flex 3.0中自定义验证组件先继承功能最相近的验证组件，然后重写验证组件中的doValidation方法。读者可参照如下步骤自定义验证组件。

单击“File”|“New”|“ActionScript Class”命令，弹出“New ActionScript Class”对话框，如图19-9所示。

在“Package”文本框中输入相对路径。在“Name”文本框中输入类名。在“Superclass”文本框中输入继承类，此处为“mx.validators.validator”。勾选“Generrate onstructor from superclass”表示沿用继承类的构造函数。单击“Finish”按钮，完成类的创建。

编写自定义验证组件类“myValidators.as”。

myValidators类继承于Validator类，所以包含了Validator类中的doValidation方法。此方法用于定义具体验证的处理方法。

图19-9 “New ActionScript Class”对话框

以下代码是完整的“myValidators.as”类。

//myValidators.as

package myCompenent

{

import mx.validators.Validator; //引用Validator类

import mx.validators.ValidationResult; //引用ValidationResult类

public class myValidators extends Validator

{

public function myValidators() //构造函数

{

super();

}

private var results:Array; //定义一个数组，用以存储错误

//重写验证函数

override protected function doValidation(value:Object):Array

{

var s:String = value as String;

results = []; //清空数组

results = super.doValidation(value); //先用继承类中的doValida tion方法验证

if (results.length > 0) //如果验证时有错，返回错误信息

return results;

if(s.length>6) //自定义验证，字符长度不超过6

{

//记录出错信息

results.push(new ValidationResult(true,"text","StringTooLong", "字符长度超过6了"));

}

return results;

}

（5） extends关键字表示继承。

（6） super关键字表示继承子类中的方法，所以“super.doValidation(value)”语句表示继承子类中的doValidator方法。

（7） override关键字表示重写函数。

（8） ValidationResult类是验证结果类，包含于“mx.validators.*”中。ValidationResult类的构造函数有四个参数。第一个参数表示是否为错误类型，第二个参数表示指向某特定属性，第三个参数表示错误类型，第四个参数表示错误提示。

（9）本程序中自定义了“StringTooLong”错误类型，提示“字符长度超过6了”。此错误在数据组件的长度超过6位时发生。

（4）调用自定义验证类。

调用自定义组件时必须指明名称空间。Flex 3.0提供的组件都在“mx”名称空间下，所以在新建MXML后都自动生成xmlns:mx="http://www.adobe.com/2006/mxml"语句。

引用自定义组件的语法如下所示。

<最外层组件 … xmlns:空间名称="类所属的包">

…

<空间名称:自定义组件/>

空间名称可任意取名。类所属的包必须与类定义时的package关键字相同。

以下代码引用自定义组件myValidators。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

xmlns:MyComp="myCompenent.*">

…

<MyComp:myValidator … />

以下代码调用myValidator组件验证输入框中的数据。

<?xml version="1.0" ?>

<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"xmlns:MyComp="myCompenent.*" fontSize="13">

<MyComp:myValidators id="myVal"

source="{txtString}" property="text"

<mx:Paneltitle="自定义验证组件" width="300" height="200" horizontalAlign= "center" verticalAlign="middle">

<mx:TextInput id="txtString"/>

<mx:Label text="{txtString.errorString}"/>

<mx:Button label="验证" click="myVal.validate();"/>

</mx:Panel>

</mx:Application>

本程序的运行效果如图19-10所示。

19.3.6 数据验证应用实例

互联网应用程序中用户注册时经常需要数据验证，如密码长度、电子邮箱等。本小节为读者详解用户注册实例。

用户注册实例的步骤如下所示。

新建一个Flex工程，命名为“用户注册数据验证实例”。

设计外观。在设计模式下拖曳组件到编辑区。组件及其必要属性如表19-2所示。其中，验证组件与输入源的绑定关系已在属性中定义。

表19-2 用户注册实例中的组件及属性

组件名	属性	属性值
Panel	title	“注册”
Label	text	“用户名”
Label	id	“lblResult”
Label	text	“输入密码”
Label	text	“确认密码”

续表

组件名	属性	属性值
Label	Text	“邮箱”
Label	text	“电话”
Label	text	“邮编”
Label	text	“以下信息请务必输入”
Label	id	“lblEmail”
text	“{txtEmail.errorString}”
Label	id	“lblTelephone”
text	“{txtTelephone.errorString}”
Label	id	“lblZipCode”
text	“{txtZipCode.errorString}”
Label	id	“lblQQ”
text	“{txtQQ.errorString}”
Label	text	“QQ”
TextInput	id	“txtUsername”
TextInput	id	“txtPassword”
displayAsPassword	“true”
TextInput	id	“txtRePassword”
displayAsPassword	“true”
TextInput	id	“txtEmail”
TextInput	id	“txtTelephone”
TextInput	id	“txtZipCode”
TextInput	id	“txtQQ”
Button	label	“检测”
id	“txtCheckUsername”
Button	label	“提交”
id	“txtSubmit”
EmailValidator	id	“emailV”
source	“{txtEmail}”
property	“text”
PhoneNumberValidator	id	“pnV”
source	“{txtTelephone}”
property	“text”
ZipCodeValidator	id	“zcV”
source	“{txtZipCode}”
property	“text”
NumberValidator	id	“numV”
source	“{txtQQ}”
property	“text”

切换至代码模式下查看MXML代码。上述步骤产生的代码如下所示。

<mx:EmailValidator

id="emailV"

source="{txtEmail}"

property="text"

invalidCharError="非法字符"

invalidDomainError="非法域"

invalidIPDomainError="非法IP域"

missingAtSignError="缺少@符"

missingPeriodInDomainError="缺少域后缀"

missingUsernameError="缺少用户名"

<mx:PhoneNumberValidator id="pnV" source="{txtTelephone}" property="text"/>

<mx:ZipCodeValidator id="zcV" source="{txtZipCode}" property="text"/>

<mx:NumberValidator id="numV" source="{txtQQ}" property="text"/>

<mx:Panel x="76" y="21" width="450" height="395" layout="absolute" title="注册" fontSize="12">

<mx:Label x="19" y="19" text="用户名"/>

<mx:TextInput x="74" y="19" width="117" id="txtUsername"/>

<mx:TextInput x="74" y="57" width="117" id="txtPassword" displayAsPassword ="true"/>

<mx:Buttonx="205"y="17"label="检测"width="58"id="txtCheckUsername"click ="var temp:Boolean=checkUsername();"/>

<mx:Label x="271" y="19" width="149" id="lblResult"/>

<mx:Label x="19" y="59" text="输入密码"/>

<mx:TextInput x="74" y="98" width="117" id="txtRePassword" displayAsPassword ="true"/>

<mx:Label x="19" y="100" text="确认密码"/>

<mx:TextInput x="74" y="175" width="117" id="txtEmail"/>

<mx:Label x="19" y="177" text="邮箱"/>

<mx:TextInput x="74" y="205" width="117" id="txtTelephone"/>

<mx:Label x="19" y="207" text="电话"/>

<mx:TextInput x="75" y="242" width="117" id="txtZipCode"/>

<mx:Label x="19" y="244" text="邮编"/>

<mx:Button x="104" y="319" label="提交" id="txtSubmit" click= "submitHandle()"/>

<mx:TextInput x="75" y="272" width="117" id="txtQQ"/>

<mx:Label x="19" y="274" text="QQ"/>

<mx:Label x="19" y="148" text="以下信息请务必输入" width="192" color="#FD0707"/>

<mx:Label x="199" y="175" width="221" id="lblEmail" text="{txtEmail. errorString}"/>

<mx:Label x="199" y="205" width="221" id="lblTelephone" text="{txtTelephone. errorString}"/>

<mx:Label x="199" y="242" width="221" id="lblZipCode" text="{txtZipCode. errorString}"/>

<mx:Label x="199" y="272" width="221" id="lblQQ" text="{txtQQ.errorString}"/>

</mx:Panel>

验证组件绑定输入源后，若输入源数据验证失败，其错误提示会自动记录在输入源组件的errorString属性中。本程序中将Label组件的text属性绑定至各输入框组件的errorString属性上，用于显示验证结果。

外观模型效果如图19-11所示。

图19-11 用户注册实例外观模型

编写处理函数。本实例中有两个主要的处理函数。一个处理函数是检测用户名是否已被占用。另一个处理函数是单击“提交”按钮时的验证处理。

检测用户名函数checkUsername的代码如下所示。

import mx.collections.ArrayCollection; //引用ArrayCollection类

import mx.controls.Alert; //引用Alert类

import mx.events.ValidationResultEvent; //引用ValidationResultEvent类

import mx.utils.StringUtil; //引用StringUtil类

//定义已被占用的用户名

public var usedUsername:Array=new Array("a","b","c","d","e","f");

//检测用户名是否被占用,返回true表示用户名可用,返回false表示用户名已被占用

private function checkUsername():Boolean

{

var userName:String=StringUtil.trim(txtUsername.text); //获得用户名

if(userName=="") //用户名为空时,警告

{

Alert.show("请输入用户名");

lblResult.text="";

}

else //用户名不为空

{

if(usedUsername.indexOf(userName)>=0) //用户名被占用时,提示

{

lblResult.text="用户名已被占用";

return false;

}

else //用户名未被占用,提示

{

lblResult.text="未占用";

return true;

}

return false;

}

（10）本程序中将已被占用的用户名存储在一个Array类型中。Array类中的indexOf方法用以查找某字符串并返回所在的起始位置。若返回值大于等于零，表示在数组中已存在此用户名。若返回值小于零表示数组中不存在此用户名。

（11） StringUtil类的trim方法用以过滤空格。

“提交”按钮的主要处理是验证各数据是否合法。

以下代码定义了处理函数submitHandle。

//"提交"按钮处理函数

private function submitHandle():void

{

//若用户名未占用且各种校验都正确

if(checkUsername()==true

&&emailV.validate().type==ValidationResultEvent.VALID

&&pnV.validate().type==ValidationResultEvent.VALID

&&zcV.validate().type==ValidationResultEvent.VALID

&&numV.validate().type==ValidationResultEvent.VALID)

{

//密码为空的情况时，警告

if(StringUtil.trim(txtPassword.text)==""||StringUtil.trim (txtRePassword.text)=="")

Alert.show("密码不能为空");

//两次输入密码不一致时，警告

else if(StringUtil.trim(txtPassword.text)!=StringUtil.trim (txtRe Password.text))

Alert.show("密码不一致");

else //注册成功时，提示

Alert.show("注册成功");

}

else

{

Alert.show("校验有误");

}

编译运行。按下Ctrl+F11快捷键，编译运行程序，运行效果如图19-12所示。

图19-12 用户注册运行效果

19.4 数据格式化

数据格式化是对某些特殊的数据的格式进行规范。例如，日期格式有很多种，可以为“1990-1-2”、“2/1/1990”等。有时数据格式化是必须的，如货币的格式要统一。

19.4.1 格式化组件概述

Flex 3.0中提供了几种常见的数据格式化组件，如DateFormatter、NumberFormatter、PhoneFormatter等。数据格式化组件说明如表19-3所示。

表19-3 Flex 3.0中的数据格式化组件

组件名	说明
CurrencyFormatter	对货币数据格式化
DateFormatter	对日期数据格式化
NumberFormatter	对数字数据格式化
PhoneFormatter	对电话号码数据格式化
ZipCodeFormatter	对邮编数据格式化

使用数据格式化组件的format方法可格式化数据。其语法如下所示。

数据格式化组件id.format(数据);

以下代码使用format方法格式化日期。

var today:Date=new Date();

DateDisplay.format(today);

19.4.2 货币格式化组件<mx:CurrencyFormatter>

<mx:CurrencyFormatter>组件用以格式化货币，其常用的属性如表19-4所示。

表19-4 <mx:CurrencyFormatter>组件常用属性

属性名	说明
alignSymbol	货币符号位置。其值可为“left”或“right”
currencySymbol	货币符号。如“$”、“￥”、“￡”
useThousandsSeparator	是否使用千位符“,”。其值可为true或false
useNegativeSign	是否使用负号。其值可为true或false
error	格式化数据出错时的提示信息

以下代码使用<mx:CurrencyFormatter>组件格式化货币。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="13">

<mx:Script>

<![CDATA[

[Bindable]

private var currency:Number =150000.456; //定义Number类型变量currency

]]>

</mx:Script>

<mx:CurrencyFormatter id="CurrencyDisplay" alignSymbol="right" currency Symbol="￥"/>

<mx:Panel width="400" height="200" title="使用CurrencyFormatter组件格式货币" horizontalAlign="left" verticalAlign="middle">

<mx:Label text="未格式化的货币:{currency}"/>

<mx:Label text="格式化后的货币:{CurrencyDisplay.format(currency)}"/>

</mx:Panel>

</mx:Application>

本程序的运行效果如图19-13所示。

图19-13 使用<mx:CurrencyFormatter>组件格式化货币

19.4.3 日期格式化组件<mx:DateFormatter>

<mx:DateFormatter>组件用以格式化日期，其常用的属性如表19-5所示。

表19-5 <mx:DateFormatter>组件常用属性

属性名	说明
error	格式化数据出错时的提示信息
formatString	格式化掩码

<mx:DateFormatter>组件的formatString属性中定义格式化掩码，可用“Y|M|D|A|E|H|J|K|L|N|S”组合生成。日期掩码字符的说明如表19-6所示。

表19-6 日期掩码字符的说明

掩码字符	说明
Y	年份。可用若干个Y组成。例如：YY=05，YYYY=2005，YYYYY=02005
M	月份。可用若干个M组成。例如：M=7，MM=07，MMM=Jul，MMMM=July
D	天。可用若干个D组成。例如，D=4，DD=04
A	am或pm
E	星期几。可用若干个E组成。例如，E=1，EE=01，EEE=Mon，EEEE=Monday
H	从1开始记数的24小时制（1-24）
J	从0开始记数的24小时制（0-23）
K	从0开始记数的12小时制（0-11）
L	从1开始记数的12小时制（1-12）
N	分钟。可用若干个N组成。例如，N=3，NN=03
S	秒。例如，SS=30

根据上述表格中的掩码字符可组成丰富的日期格式。例如，掩码“EEEE,MMM.D,YYYY ‘at’ H:NN A”应用的结果为“Tuesday,Sept.8,2005 at 1:26 PM”。

以下代码使用<mx:DateFormatter>组件格式化当前日期。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="13">

<mx:Script>

<![CDATA[

[Bindable]

private var today:Date = new Date(); //获得系统时间，存储在Date类型中

]]>

</mx:Script>

<mx:DateFormatter id="DateDisplay" formatString="MMMM D, YYYY"/>

<mx:Panel width="400" height="200" title="使用DateFormatter组件格式日期" horizontalAlign="left" verticalAlign="middle">

<mx:Label text="未格式化的日期:{today}"/>

<mx:Label text="格式化后的日期:{DateDisplay.format(today)}"/>

</mx:Panel>

</mx:Application>

本程序的运行效果如图19-14所示。

19.4.4 数字格式化组件<mx:NumberFormatter>

<mx:NumberFormatter>组件用以格式化数字，其常用的属性如表19-7所示。

表19-7 <mx:NumberFormatter>组件常用属性

属性名	说明
useThousandsSeparator	是否使用千位符“,”。其值可为true或false
useNegativeSign	是否使用负号。其值可为true或false
error	格式化数据出错时的提示信息

以下代码使用<mx:NumberFormatter>组件格式化数字。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="13">

<mx:Script>

<![CDATA[

[Bindable]

private var num:Number =140000.456; //定义Number类型变量num

]]>

</mx:Script>

<mx:NumberFormatter id="NumberDisplay" />

<mx:Panel width="400" height="200" title="使用NumberFormatter组件格式数字" horizontalAlign="left" verticalAlign="middle">

<mx:Label text="未格式化的数字:{num}"/>

<mx:Label text="格式化后的数字:{NumberDisplay.format(num)}"/>

</mx:Panel>

</mx:Application>

本程序的运行效果如图19-15所示。

图19-14 使用<mx:DateFormatter>组件格式化日期图19-15 使用<mx:NumberFormatter>组件格式化数字

19.4.5 电话格式化组件<mx:PhoneFormatter>

<mx:PhoneFormatter>组件用以格式化电话，其常用的属性如表19-8所示。

表19-8 <mx:PhoneFormatter>组件常用属性

属性名	说明
error	格式化数据出错时的提示信息
formatString	格式化掩码。例如，(###)###-####
areaCodeFormat	区号掩码。例如，(###)
validPatternChars	可用的掩码符。默认为“+()#-.”六种

以下代码使用<mx:PhoneFormatter>组件格式化电话号码。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="13">

<mx:Script>

<![CDATA[

[Bindable]

private var telephone:String ="057723344499"; //定义String类型变量telephone

]]>

</mx:Script>

<mx:PhoneFormatter id="TelephoneDisplay" formatString="####-########"/>

<mx:Panel width="400" height="200" title="使用PhoneFormatter组件格式电话" horizontalAlign="left" verticalAlign="middle">

<mx:Label text="未格式化的电话:{telephone}"/>

<mx:Label text="格式化后的电话:{TelephoneDisplay.format(telephone)}"/>

</mx:Panel>

</mx:Application>

本程序的运行效果如图19-16所示。

图19-16 使用<mx:PhoneFormatter>

组件格式化电话号码

19.4.6 邮编格式化组件<mx:ZipCodeFormatter>

<mx:ZipCodeFormatter>组件用以格式化邮编，其常用的属性如表19-9所示。

表19-9 <mx:ZipCodeFormatter>组件常用属性

属性名	说明
error	格式化数据出错时的提示信息
formatString	格式化掩码。例如，####，###-###

以下代码使用<mx:ZipCodeFormatter>组件格式化邮编。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="13">

<mx:Script>

<![CDATA[

[Bindable]

private var ZipCode:Number =43354; //定义String类型变量ZipCode

]]>

</mx:Script>

<mx:ZipCodeFormatter id="ZipCodeDisplay" formatString="#####"/>

<mx:Panel width="400" height="200" title="使用ZipCodeFormatter组件格式邮编" horizontalAlign="left" verticalAlign="middle">

<mx:Label text="北美标准的邮编:{ZipCodeDisplay.format(ZipCode)}"/>

</mx:Panel>

</mx:Application>

本程序的运行效果如图19-17所示。

19.5 小结

本章主要介绍了Flex 3.0中有关数据的操作与处理。内容包括数据绑定、数据存储、数据验证、数据格式化等。其中，数据绑定在Flex 3.0中应用很广泛。通过绑定的方法用户可以以最少的代码编写最有效的应用程序。Flex 3.0中有关复杂的数据可以存储于<mx:Model>组件、<mx:Object>组件或<mx:XML>组件。数据验证可用于规范数据的输入，从而避免复杂的逻辑判断。数据格式化可对特殊的数据进行格式化，从而使数据格式统一、规范

http://book.csdn.net/bookfiles/691/10069121585.shtml