Flex之数据格式化

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

格式化组件概述

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

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

组件名

说明

CurrencyFormatter

对货币数据格式化

DataFormatter

对日期数据格式化

NumberFormatter

对数据格式化

PhoneFormatter

对电话号码数据格式化

ZipCodeFormatter

对邮编数据格式化

 

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

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

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

var today:Date=new Date();

DateDisplay.format(today);

货币格式化组件<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" currencySymbol="￥"/>

    <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>

日期格式化组件<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>

数字格式化组件<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>

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

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

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

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

属 性 名

说    明

error

格式化数据出错时的提示信息

formatString

格式化掩码。例如，(###)###-####

areaCodeFormat

区号掩码。例如，(###)

validPatternChars

可用的掩码符。默认为“+()#-.”六种

 

<?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>

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

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

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

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

属 性 名

说    明

error

格式化数据出错时的提示信息

formatString

格式化掩码。例如，####，###-###

 

<?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>