Flex笔记_格式化数据原

LeoXu

发布于 2018-08-15 14:32:59

5510

发布于 2018-08-15 14:32:59

文章被收录于专栏：LeoXu的博客LeoXu的博客

格式化程序（formatter）

是一类对象，它们可以接收原始数据，并将其转换为可展示的格式。
用法上同验证器在实现机制上比较类似。
应用模式有下列两种：

实时格式化；
脚本式格式化

用法简单，输入原始数据，就会输出结构清晰，容易认读的格式化数据。

内置的格式化程序

Formatter

所有专用格式化程序的父类，可以作为其它格式化程序的模板。
format函数：接收一个需要被格式化的对象，返回string类型的结果。
error属性

NumberFormatter

用来处理数值表示的细节，如小数的精度，很用作千分位分隔符的字符。
decimalSeparatorFrom、decimalSeparatorTo、precision、rounding、thousandSeparatorFrom、thousandSeparatorTo、useNegativeSign、useThousandSeparator
额外的错误消息：Invalid Value、Invalid Format

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
<fx:XML id="myData" xmlns="">
<root>
<forsale>
<item name="weight" value="32.5x698"/>
</forsale>
</root>
</fx:XML>

<mx:NumberFormatter id="fmtNumber" precision="2" rounding="up"/>
</fx:Declarations>
<s:VGroup>
<s:Label text="Weight {fmtNumber.format(myData.forsale.item.@value)} lbs"/>
<s:Label text="{fmtNumber.error}"/>
</s:VGroup>
</s:Application>

CurrencyFormatter

插入预定义的货币符号，并在适当的位置插入千分位分隔符，将数据组织成公认的货币表示形式。
包括两个特定于货币的属性：alignSymbol指定在输出字符串的什么位置放置货币符号、currencySymbol指定输出字符串中使用的货币符号。
具有同NumberFormatter同样的错误消息。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
<fx:XML id="myData" xmlns="">
<root>
<forsale>
<item name="Laptop" value="599.999"/>
</forsale>
</root>
</fx:XML>
<mx:CurrencyFormatter id="fmtCurrency" precision="2"/> 
</fx:Declarations>
<s:VGroup>
<s:Label text="Laptop Price {fmtCurrency.format(myData.forsale.item.@value)}"/>
<s:Label text="{fmtCurrency.error}"/>
</s:VGroup>
</s:Application>

DateFormatter

控制输出日期的显示方式。
formatString属性，如YYYY/MM/DD，取值定义：

Y：年， YY,YYYY
M: 月， M，MM， MMM（三个字符的英文月份表示），MMMM（完整的英文月份表示）
D：天， D，DD
E：周几，周日为0， E，EE，EEE（三个字符的英文周几表示），EEEE（完整的英文周几表示）
A：上午下午， AM，PM
J：24小时格式的小时，0表示第一小时， J，JJ
H：24小时格式的小时，1表示第一小时， H，HH
K：12小时格式的小时，0表示第一小时， K，KK
L：12小时格式的小时，0表示第一小时， L，LL
N：分，N，NN
S：秒，S，SS
其它字符

错误消息：Invalid Value、Invalid Format

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">


<fx:Script>
<![CDATA[
[Bindable]
public var sDate:String = "12/01/08 12:42";
[Bindable]
public var dDate:Date = new Date("12/01/08 12:42");
]]>
</fx:Script>
<fx:Declarations>
<mx:DateFormatter id="fmtDate" formatString="YY/MM/DD"/>
</fx:Declarations>
<s:VGroup verticalCenter="0" horizontalCenter="0" horizontalAlign="center">
<s:Label text="Formatting the Date as a String:{fmtDate.format(sDate)}"/>
<s:Label text="Formatting the Date as a Date object:{fmtDate.format(dDate)}"/>
</s:VGroup>
</s:Application>

综合使用DateFormatter和XML

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">


<fx:Declarations>
<fx:XML id="myData">
<root>
<info>
<item lastVisit="12/01/08 12:42"/>
</info> 
</root>
</fx:XML>
<mx:DateFormatter id="fmtDate" formatString="YY/MM/DD"/>
</fx:Declarations>
<s:VGroup verticalCenter="0" horizontalCenter="0" horizontalAlign="center">
<s:Label text="{fmtDate.format(myData.info.item.@lastVisit)}"/>
</s:VGroup>
</s:Application>

注意：上述代码没有输出结果是因为Flex内部会把XML转换成一组高级对象，既不是Date也不是String，而format函数只接受这两种对象作为参数，因此代码需要做如下修改：

<s:Label text="{fmtDate.format(String(myData.info.item.@lastVisit))}"/>

PhoneFormatter

formatString属性，应用于电话号码的格式
areaCode属性，Number型，默认值为-1，表示忽略此项，再输入10位电话号码的情况下，用来指定一个区号。
areaCodeFormat属性，String型，定义如何表示区号，默认值为（###）
validPatternChars属性，String型，可以在formatString中使用的一组字符。字符#用于表示一个数字位。默认字符为+、（、）、#和-。
模式示例：

###-##-####、(###)-###-####、###.###.####、#-###-###-####、+##-########

错误消息：Invalid Value、Invalid Format

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">


<fx:Declarations>
<fx:XML id="myData">
<root>
<contactlist>
<item name="contact" phone="2016679872"/>
</contactlist>
</root>
</fx:XML>
<mx:PhoneFormatter id="fmtNumber" formatString="(###) ###-####"/>
</fx:Declarations>
<s:VGroup verticalCenter="0" horizontalCenter="0" horizontalAlign="center">
<s:Label text="Contact Phone:{fmtNumber.format(myData.contactlist.item.@phone)}"/>
</s:VGroup>
</s:Application>

ZipCodeFormatter

主要用于格式化美国邮政编码和加拿大邮递区号。
formatString属性，默认值#####

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">


<fx:Declarations>
<fx:XML id="myData">
<root>
<contacts>
<item name="Leo" zipcode="953763233"/>
</contacts>
</root>
</fx:XML>
<mx:ZipCodeFormatter id="fmtZipCode" formatString="#####-####"/>
</fx:Declarations>
<s:VGroup verticalCenter="0" horizontalCenter="0" horizontalAlign="center">
<s:Label text="Zip Code:{fmtZipCode.format(myData.contacts.item.@zipcode)}"/>
</s:VGroup>
</s:Application>

SwitchSymbolFormatter

通用的格式化程序，用于处理Flex内置格式化程序不适用的数据。
与内置的格式化程序的不同在于，它对要处理的数据类型的上下文信息缺乏了解，因此用途有一定的局限性。
可以使用SwitchSymbolFormatter创建自定义格式化程序。
没有相应的MXML组件，但可以使用其ActionScript版本。
默认构造函数SwitchSymbolFormatter接收一个表示用作数字占位符的字符值。默认为#。
formatValue方法接收一个格式化字符串和一个源对象引用的组合。
没有特定的错误消息。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.formatters.SwitchSymbolFormatter;
public var fmtSymbol:SwitchSymbolFormatter
= new SwitchSymbolFormatter("#");
public function formatMe(rawData:String):String {
return fmtSymbol.formatValue("####-####", rawData);
}
]]>
</fx:Script>
<fx:Declarations>
<fx:XML id="myData">
<root>
<workorders>
<item name="Fix something" id="99818382"/>
</workorders>
</root>
</fx:XML>
</fx:Declarations>
<s:VGroup verticalCenter="0" horizontalCenter="0" horizontalAlign="center">
<s:Label text="Workorder:{formatMe(myData.workorders.item.@id)}"/>
</s:VGroup>
</s:Application>

实时格式化

脚本格式化

结合使用函数与格式化程序组件
结合使用函数与格式化程序类

处理格式化错误

如果格式化过程顺利，error属性的值为空；
如果格式化遇到问题，那么error属性中就会保存有相应的错误代码。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.formatters.*;

public function formatThis(plainText:String):String {
var fmtPhone:PhoneFormatter = new PhoneFormatter();
var formatedString = fmtPhone.format(plainText);
if(fmtPhone.error == "Invalid value") {
Alert.show("Invalid...");
} else if(fmtPhone.error == "Invalid format") {
Alert.show("Invalid Format");
}
return formatedString;
}
]]>
</fx:Script>
<s:VGroup verticalCenter="0" horizontalCenter="0" horizontalAlign="center">
<s:Label text="{formatThis('222')}"/>
</s:VGroup>
</s:Application>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2014/08/30 ，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

编程算法

登录后参与评论

0 条评论

热度

Flex笔记_格式化数据原

Flex笔记_格式化数据原

格式化程序（formatter）

内置的格式化程序

Formatter

NumberFormatter

CurrencyFormatter

DateFormatter

综合使用DateFormatter和XML

PhoneFormatter

ZipCodeFormatter

SwitchSymbolFormatter

实时格式化

脚本格式化

处理格式化错误

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

Flex笔记_格式化数据 原

Flex笔记_格式化数据 原

格式化程序（formatter）

内置的格式化程序

Formatter

NumberFormatter

CurrencyFormatter

DateFormatter

综合使用DateFormatter和XML

PhoneFormatter

ZipCodeFormatter

SwitchSymbolFormatter

实时格式化

脚本格式化

处理格式化错误

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

Flex笔记_格式化数据原

Flex笔记_格式化数据原