分类： 系统运维
2008-05-30 11:27:51
数据是程序处理的主要对象。在应用程序中最核心的部分也是数据处理。本章将为读者介绍Flex 3.0中对数据的处理，包括数据绑定、数据存储、数据验证、数据格式化等内容。
数据绑定是指用户可以将某个属性与其他的属性或变量相关联。这样，当被绑定的属性或变量发生改变时，绑定项同时发生改变。例如，任意播放窗口大小，其上的组件相应变化尺寸。此时可使用绑定方法，将组件的宽度和高度分别以一定比例与主窗口的宽度和高度相关联。数据绑定是Flex技术中一项非常有用的技术，可以有效地减少程序代码，提高运行效率。
19.1.1 简单绑定方式Flex 3.0中绑定数据最简单的方式是使用“{}”运算符。其语法如下所示。
{可绑定的属性或变量}
使用“[Bindable]”关键字可指明变量或属性为可绑定。其语法如下所示。
[Bindable]
变量或属性
以下代码定义变量s为可绑定变量。
[Bindable]
private var s:String="111111";
组件的大部分属性都是可绑定的，因为在组件定义中属性一般都指明为“[Bindable]”。对于要绑定的变量需要先声明为“[Bindable]”。若用户使用“{}”操作符绑定未声明为可绑定的变量时，编译会提示警告，但运行正常。
以下代码将
（1） 本程序中使用“{}”绑定方式，从而有效地减少了代码。若不使用绑定方式，本程序必须使用事件处理：在
（2） 需要注意的是，绑定时类型要一致。text属性的值为字符串类型。除了字符串类型外，不能绑定别的数据类型。
本程序的运行效果如图19-1所示。
图19-1 使用“{}”操作符绑定数据效果
19.1.2 使用source属性指明被绑定的源，destination属性指明绑定的目标。需要注意的是两者指向的类型必须相同。例如，source属性为
以下代码将Label组件的text属性绑定至
本程序的运行效果如图19-2所示。
图19-2 使用
上述程序使用“{}”方式表示的代码如下所示。
使用“{}”方式绑定数据简单、快速、代码更少，是实际开发中最频繁使用的语句之一。Flex 3.0绑定数据的特性能有效地减少代码，提高效率。在实际编写应用程序时建议尽量使用数据绑定，因为绑定的运行效率比代码实现的效率要高得多。
数据存储是指在编程过程中将数据以特定的形式存储。简单的数据模型可以用简单的数据类型存储，如int型、String型、Array型。对于复杂的逻辑模型，需要将数据合理存储。Flex 3.0提供了
19.2.1 使用<根节点>
<节点1/>
<节点2/>
…
以下代码使用
指向
本程序的运行代码如图19-3所示。
图19-3 使用
19.2.2 使用以下代码使用
本程序的运行效果如图19-4所示。
图19-4 使用
19.2.3 使用XML标准是国际通用标准，有非常广泛的应用。
<根节点>
<节点1/>
<节点2/>
…
以下代码使用
fontFamily="simsun" fontSize="12" layout="absolute" width="242" height="442" >
（3）
（4）
本程序的运行效果如图19-5所示。
图19-5 使用
数据验证是指应用程序中对输入的数据进行某种方式的校验。例如，电话号码必须为数字，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属性进行验证。
以下代码使用
由于验证组件都不为可视化组件，所以不能放置于可视化组件内。本程序中
19.3.3 验证触发方式验证触发方式是指用户采用何种动作触发验证。常用的触发方式有默认触发和任意动作触发。默认触发是指当焦点离开输入源时触发验证。任意动作触发是指用户可指定某一动作触发验证。前者是开发过程中最常使用到的一种方式，后者比较灵活，也比较容易理解。
当用户把焦点离开输入源时触发默认触发验证。其语法如下所示。
默认触发方式需确定验证组件的source属性和property属性，其他属性默认。
以下代码采用默认触发验证方式。当焦点离开第一个输入框时触发验证。
验证组件的结果直接反映在数据组件上。本程序中若输入框组件phoneInput验证错误，结果为输入框边框颜色变红色。验证错误的提示存储于数据组件的errorString属性中。
本程序的运行效果如图19-6所示。
图19-6 默认触发验证效果
用户可根据需要触发验证。例如，当按下“验证”按钮时触发验证。
任意动作触发验证有两种写法。一种是在验证组件中指明触发器和触发动作。另一种是执行事件处理函数。
在验证组件中指明触发器和触发动作的语法如下所示。
source="{输入源id}" property="输入源的属性" trigger="{触发器}" triggerEvent="触发事件" > trigger属性指明触发验证的组件，也称为触发器。triggerEvent属性表示触发验证组件的方法。 以下代码当用户单击“验证”按钮时触发邮编验证。 本程序的运行效果如图19-7所示。 图19-7 click动作触发验证 任意动作的触发也可采用代码触发验证方式。代码触发验证的方式符合Flex 3.0的事件机制，更容易理解。其语法如下所示。 <组件事件="验证组件.validate();"/> 验证组件都包含一个validate方法，用以代码执行验证。 上述程序使用代码方式触发验证的代码如下所示。 验证失败时需要做错误的提示及处理。验证组件中提供了丰富的错误类型，只是这些错误类型的提示是英文的，用户可能需要改变提示。修改错误提示的方法是修改组件中相应的错误类型属性。例如，PhoneNumberValidator组件中的wrongLengthError属性表示长度错误提示。 用户可根据需要修改相应的出错信息。其语法如下所示。 <验证组件错误类型属性="自定义错误提示"/> 以下代码自定义EmailValidator组件中的错误提示。
import mx.events.ValidationResultEvent; //引用ValidationResult Event类 import mx.controls.Alert; //引用Alert类 private function checkHandle():void //验证处理函数 { if(emailV.validate().type==ValidationResultEvent.VALID) //验证通过 { Alert.show("电子邮件验证成功"); //提示"验证成功" } } ]]> id="emailV" source="{txtEmail}" property="text" invalidCharError="非法字符" invalidDomainError="非法域" invalidIPDomainError="非法IP域" missingAtSignError="缺少@符" missingPeriodInDomainError="缺少域后缀" missingUsernameError="缺少用户名" /> 判断验证是否正确的语法如下所示。 If(验证组件id.validate().type==ValidationResultEvent.VALID) 本程序的运行效果如图19-8所示。 当验证组件不能满足用户的特殊验证需求时，用户可考虑自定义验证组件。一般来说，多条件复杂数据验证都需要自定义验证组件。例如，字符串长度为3~43，内容不能包含某些脏字。 Flex 3.0中自定义验证组件先继承功能最相近的验证组件，然后重写验证组件中的doValidation方法。读者可参照如下步骤自定义验证组件。 在“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=""语句。 引用自定义组件的语法如下所示。 <最外层组件 … xmlns:空间名称="类所属的包"> … <空间名称:自定义组件/> 空间名称可任意取名。类所属的包必须与类定义时的package关键字相同。 以下代码引用自定义组件myValidators。 xmlns:MyComp="myCompenent.*"> … 以下代码调用myValidator组件验证输入框中的数据。 source="{txtString}" property="text" /> 互联网应用程序中用户注册时经常需要数据验证，如密码长度、电子邮箱等。本小节为读者详解用户注册实例。 用户注册实例的步骤如下所示。 设计外观。在设计模式下拖曳组件到编辑区。组件及其必要属性如表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代码。上述步骤产生的代码如下所示。 id="emailV" source="{txtEmail}" property="text" invalidCharError="非法字符" invalidDomainError="非法域" invalidIPDomainError="非法IP域" missingAtSignError="缺少@符" missingPeriodInDomainError="缺少域后缀" missingUsernameError="缺少用户名" /> 验证组件绑定输入源后，若输入源数据验证失败，其错误提示会自动记录在输入源组件的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 用户注册运行效果 数据格式化是对某些特殊的数据的格式进行规范。例如，日期格式有很多种，可以为“1990-1-2”、“2/1/1990”等。有时数据格式化是必须的，如货币的格式要统一。 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 属 性 名 说 明 alignSymbol 货币符号位置。其值可为“left”或“right” currencySymbol 货币符号。如“$”、“￥”、“￡” useThousandsSeparator 是否使用千位符“,”。其值可为true或false useNegativeSign 是否使用负号。其值可为true或false error 格式化数据出错时的提示信息 以下代码使用
[Bindable] private var currency:Number =150000.456; //定义Number类型变量currency ]]> 本程序的运行效果如图19-13所示。 图19-13 使用 表19-5 属 性 名 说 明 error 格式化数据出错时的提示信息 formatString 格式化掩码 表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”。 以下代码使用
[Bindable] private var today:Date = new Date(); //获得系统时间，存储在Date类型中 ]]> 本程序的运行效果如图19-14所示。 表19-7 属 性 名 说 明 useThousandsSeparator 是否使用千位符“,”。其值可为true或false useNegativeSign 是否使用负号。其值可为true或false error 格式化数据出错时的提示信息 以下代码使用
[Bindable] private var num:Number =140000.456; //定义Number类型变量num ]]> 本程序的运行效果如图19-15所示。 图19-14 使用 表19-8 属 性 名 说 明 error 格式化数据出错时的提示信息 formatString 格式化掩码。例如，(###)###-#### 区号掩码。例如，(###) 可用的掩码符。默认为“+()#-.”六种 以下代码使用
[Bindable] private var telephone:String ="057723344499"; //定义String类型变量telephone ]]> 本程序的运行效果如图19-16所示。 图19-16 使用 组件格式化电话号码 表19-9 属 性 名 说 明 error 格式化数据出错时的提示信息 formatString 格式化掩码。例如，####，###-### 以下代码使用
[Bindable] private var ZipCode:Number =43354; //定义String类型变量ZipCode ]]> 本章主要介绍了Flex 3.0中有关数据的操作与处理。内容包括数据绑定、数据存储、数据验证、数据格式化等。其中，数据绑定在Flex 3.0中应用很广泛。通过绑定的方法用户可以以最少的代码编写最有效的应用程序。Flex 3.0中有关复杂的数据可以存储于
19.3.4 验证失败处理
ValidationResultEvent类包含于“mx.events.*”中，是验证结果事件类。其中，INVALID值表示验证失败，VALID值表示验证成功。
19.3.5 自定义验证组件
单击“File”|“New”|“ActionScript Class”命令，弹出“New ActionScript Class”对话框，如图19-9所示。
本程序的运行效果如图19-10所示。 19.3.6 数据验证应用实例 新建一个Flex工程，命名为“用户注册数据验证实例”。
19.4 数据格式化
19.4.1 格式化组件概述
19.4.2 货币格式化组件
19.4.3 日期格式化组件
19.4.4 数字格式化组件
19.4.5 电话格式化组件
19.4.6 邮编格式化组件
本程序的运行效果如图19-17所示。19.5 小结
