(十五)Flex4_格式化与校验器

Flex提供了数据格式化功能，可以对数据进行格式化。通过内置的格式化器，用户不必通过字符串连接来实现数据的格式处理
Flex内置了格式化器和验证器
1.在客户端使用内置数据验证器，减少对服务器的请求，从而提升应用程序的性能
2.通过内置的格式化器，自动完成设定数据格式的重复过程，节省开发时间

格式化
    对货币进行格式化处理
格式化器是继承自Formatter类的ActionScript类
常见的格式化器：
    mx.formatters.CurrencyFormatter  货币格式
    mx.formatters.DateFormatter      日期格式
    mx.formatters.NumberFormatter    数字格式
    mx.formatters.PhoneFormatter     电话格式
    mx.formatters.ZipCodeFormatter   邮编格式
应用：
创建格式化器

	<fx:Declarations>
		<!-- 实例化货币格式化器 fractionalDigits属性指定小数后显示几位 useCurrencySymbol为true时显示货币符号-->
		<s:CurrencyFormatter id="currency" fractionalDigits="2" useCurrencySymbol="true"/>
		
		<!-- 实例化日期格式化器 locale="zh-Hans-CN"-->
		<s:DateTimeFormatter id="df" useUTC="false"  dateTimePattern="yyyy-MM-dd"/>
	</fx:Declarations>

使用格式化器
将货币以某种形式显示出来 比如$

<s:Label text="Total {currency.format(shoppingCart.total)}"/>

对日期进行格式化
如：xxxx年xx月xx日 则使用属性：locale="zh-Hans-CN"
   xxxx-xx-xx    则使用属性：dateTimePattern="yyyy-MM-dd"
Review.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:components="components.*">
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 实例化货币格式化器 fractionalDigits属性指定小数后显示几位 useCurrencySymbol为true时显示货币符号-->
		<s:CurrencyFormatter id="currency" fractionalDigits="2" useCurrencySymbol="true"/>
		
		<!-- 实例化日期格式化器 locale="zh-Hans-CN"-->
		<s:DateTimeFormatter id="df" useUTC="false"  dateTimePattern="yyyy-MM-dd"/>
	</fx:Declarations>

	<fx:Metadata>
		[Event(name="editInformation", type="flash.events.Event")]
		[Event(name="completeOrder", type="flash.events.Event")]
	</fx:Metadata>

	<fx:Script>
		<![CDATA[
			import cart.ShoppingCart;
			import cart.ShoppingCartItem;
			
			import events.OrderEvent;
			import events.ProductEvent;
			
			import valueObjects.OrderInfo;
			import valueObjects.Product;

			[Bindable]
			public var shoppingCart:ShoppingCart;
			
			[Bindable]
			public var orderInfo:OrderInfo;
			
			private function handleComplete( event:Event ):void {
				dispatchEvent( new Event( 'completeOrder' ) );  
			}
			
			private function handleEdit( event:Event ):void {
				dispatchEvent( new Event( 'editInformation' ) );	
			}

			private function removeProductHandler(event:ProductEvent):void {
				var sci:ShoppingCartItem = new ShoppingCartItem( event.product );
				shoppingCart.removeItem( sci );
			}			

		]]>
	</fx:Script>
	<s:Label text="Checkout Page 3 of 3"/>
	
	<s:HGroup width="100%" height="90%">
		<!-- 显示用户前面输入的个人基本信息 -->
		<mx:Form>
			<mx:FormHeading label="Review and Checkout"/>
			<mx:FormItem label="Name">
				<s:Label text="{orderInfo.billingName}"/>
			</mx:FormItem>
			<mx:FormItem label="Address">
				<s:Label text="{orderInfo.billingAddress}"/>
				<s:Label text="{orderInfo.billingCity}, {orderInfo.billingState} {orderInfo.billingZip}"/>
			</mx:FormItem>
			<mx:FormItem label="Card Type">
				<s:Label text="{orderInfo.cardType}"/>
			</mx:FormItem>
			<mx:FormItem label="Delivery Date">
				<s:Label text="{df.format(orderInfo.deliveryDate)}"/>
			</mx:FormItem>
			<mx:FormItem>
				<s:Button label="Complete Order" click="handleComplete( event )"/>
				<s:Button label="Edit Information" click="handleEdit( event )"/>
			</mx:FormItem>
		</mx:Form>
		
		<!--将购物车的详细信息进行显示-->
		<s:VGroup width="100%" height="100%">
			<components:CartGrid id="dgCart" 
								 width="100%" height="100%" 
								 dataProvider="{shoppingCart.items}"
								 removeProduct="removeProductHandler( event )"/>
	<!-- 对购物车总金额进行格式化-->		
	<s:Label text="Total {currency.format(shoppingCart.total)}"/>		
		</s:VGroup>
	</s:HGroup>
</s:NavigatorContent>

--------------------------------------------------------------------
Flex提供了基本的数据验证器，防止非法数据的录入
验证器
在客户端使用内置的数据验证器，减少对服务器的请求，提高应用程序的性能
Flex的验证器都是Validator的子类
    常见的验证器：
    CreditCardValidator
    DateValidator
    EmailValidator      EMAIL地址检查
    NumberValidator
    PhoneNumberValidator
    SocialSecurityValidator
    StringValidstor      字符串检查
    ZipCodeValidator
将验证器放到一个数组中，统一存放，作为一个校验器集合

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<fx:Array id="validators">
			<mx:ZipCodeValidator source="{billingZip}" property="text" required="true"/>
			<mx:StringValidator source="{billingName}" property="text" required="true" minLength="2" />
		</fx:Array>
	</fx:Declarations>

在ActionScript中通过Validator.validateAll()对校验数组中的校验器逐个进行校验
然后返回一个错误数组，如果数组的length不大于0，则说明验证都通过，可以继续到下一个流程！

//导航到下一个页面
			//在分派事件之前，先对用户输入的数据进行验证，通过才分派事件
			private function handleProceed( event:Event ):void {
				//接收一个验证数组，允许数组中的每个验证器，并接收问题集
				var errors:Array = Validator.validateAll(validators);
				if(errors.length>0) {
					Alert.show("存在非法数据，请仔细检查并重写填写错误项！");	
				} else {
					dispatchEvent( new Event( 'proceed' ) );
				}
			}

CustomerInfo.mxml中的表单使用验证器

<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009" 
					xmlns:s="library://ns.adobe.com/flex/spark" 
					xmlns:mx="library://ns.adobe.com/flex/mx">
	<s:layout>
		<s:HorizontalLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 实例化内置的数据验证器 source指定验证对象的位置 ,property指定验证控件的哪个属性 , required属性表示必须不允许为null-->
		<!-- 将程序中用到的 验证器放到一个数组中进行管理-->
		<fx:Array id="validators">
			<!-- 用户名验证，至少2位-->
			<mx:StringValidator source="{billingName}" 
								property="text"  
								required="true"
								minLength="2"/>
			<!-- 邮政编码验证-->
			<mx:ZipCodeValidator source="{billingZip}" 
								 property="text" 
								 required="true" />
		</fx:Array>
	</fx:Declarations>

	<fx:Metadata>
		[Event(name="proceed", type="flash.events.Event")]
	</fx:Metadata>
	
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.validators.Validator;
			
			import valueObjects.OrderInfo;
			[Bindable]
			public var orderInfo:OrderInfo;
			
			//导航到下一个页面
			//在分派事件之前，先对用户输入的数据进行验证，通过才分派事件
			private function handleProceed( event:Event ):void {
				//接收一个验证数组，允许数组中的每个验证器，并接收问题集
				var errors:Array = Validator.validateAll(validators);
				if(errors.length>0) {
					Alert.show("存在非法数据，请仔细检查并重写填写错误项！");	
				} else {
					dispatchEvent( new Event( 'proceed' ) );
				}
			}
		]]>
	</fx:Script>
	<s:Label text="Checkout Page 1 of 3"/>
	<!-- "@"符表示将会把输入的数据更新到对象的属性中，传说中的双向数据绑定!!!!
	双向数据绑定：后台与前台的数据不管哪方变化了，都会更新到另一方
	注意：双向绑定时只有源和目标的数据类型相同才有效。
	不管是什么类型，要实现数据绑定，源与目标的数据类型必须一致！-->
	<mx:Form>
		<mx:FormHeading label="Customer Information"/>
		<mx:FormItem label="Customer Name" required="true"> <!--required="true" 表示此项不允许为空 -->
			<s:TextInput id="billingName" text="@{orderInfo.billingName}"/>
		</mx:FormItem>
		<mx:FormItem label="Address">
			<s:TextInput text="@{orderInfo.billingAddress}"/>
		</mx:FormItem>
		<mx:FormItem label="City">
			<s:TextInput text="@{orderInfo.billingCity}"/>
		</mx:FormItem>
		<mx:FormItem label="State">
			<s:TextInput text="@{orderInfo.billingState}"/>
		</mx:FormItem>
		<mx:FormItem label="Zip" required="true"> <!--required="true" 表示此项不允许为空 -->
			<s:TextInput id="billingZip" text="@{orderInfo.billingZip}"/>
		</mx:FormItem>
		<mx:FormItem label="Delivery Date">
			<mx:DateField selectedDate="@{orderInfo.deliveryDate}"/>
		</mx:FormItem>
		<mx:FormItem>
			<s:Button label="Proceed" click="handleProceed( event )"/>
		</mx:FormItem>
	</mx:Form>
</s:NavigatorContent>