Flex笔记_格式化数据 原

格式化程序(formatter)

  • 是一类对象,它们可以接收原始数据,并将其转换为可展示的格式。
  • 用法上同验证器在实现机制上比较类似。
  • 应用模式有下列两种:
  1. 实时格式化;
  2. 脚本式格式化
  • 用法简单,输入原始数据,就会输出结构清晰,容易认读的格式化数据。

内置的格式化程序

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,取值定义:
  1. Y:年, YY,YYYY
  2. M: 月, M,MM, MMM(三个字符的英文月份表示),MMMM(完整的英文月份表示)
  3. D:天, D,DD
  4. E:周几, 周日为0, E,EE,EEE(三个字符的英文周几表示),EEEE(完整的英文周几表示)
  5. A:上午下午, AM,PM
  6. J:24小时格式的小时,0表示第一小时, J,JJ
  7. H:24小时格式的小时,1表示第一小时, H,HH
  8. K:12小时格式的小时,0表示第一小时, K,KK
  9. L:12小时格式的小时,0表示第一小时, L,LL
  10. N:分,N,NN
  11. S:秒,S,SS
  12. 其它字符
  • 错误消息: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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏郭霖

Android最佳性能实践(三)——高性能编码优化

在前两篇文章当中,我们主要学习了Android内存方面的相关知识,包括如何合理地使用内存,以及当发生内存泄露时如何定位出问题的原因。那么关于内存的知识就讨论到这...

220100
来自专栏吴裕超

js中三目运算符和&& || 符的个人浅见

这两天看到别人写的代码,感觉很牛逼,如下,大神请忽视 $(".lgn").on("click", function() { var a = {}...

85970
来自专栏生信宝典

Python学习 - 可视化变量赋值、循环、程序运行过程

Python Tutor (http://www.pythontutor.com/)是`Philip Guo`开发的,通过把计算机运行程序代码的过程可视化的展示...

26780
来自专栏用户1191492的专栏

物联网平台设计文档:精简GC(垃圾回收)

许多高级编程语言的自动内存管理功能让编程变成了比较容易的一件事。然而,嵌入式平台经常缺少这一部分功能,这是有原因的:现代垃圾收集(GC)系统使用的...

30650
来自专栏老九学堂

1分钟彻底理解C语言指针的概念

计算机中所有的数据都必须放在内存中,不同类型的数据占用的字节数不一样,例如 int 占用4个字节,char 占用1个字节。为了正确地访问这些数据,必须为每个字节...

54980
来自专栏老马说编程

计算机程序的思维逻辑 (9) - 强大的循环

循环 上节我们介绍了流程控制中的条件执行,根据具体条件不同执行不同操作。本节我们介绍流程控制中的循环,所谓循环就是多次重复执行某些类似的操作,这个操作一般不是...

22380
来自专栏北京马哥教育

Python 的正则表达式彩蛋

虽然我觉得在 Python 的标准库里的确有不少很恶心的库,但是 re 库肯定不属于这种。尽管它真的有年头没有更新了,但是在我看来,仍不失为动态语言中最好的库...

30470
来自专栏ImportSource

快来了解JDK10中引入的全新JIT编译器:Graal

在(JDK10要来了:下一代 Java 有哪些新特性?)文中,我们提到jdk10中包含有一个实验性质的编译器(compiler)。它的名字叫做:Graal。这是...

592110
来自专栏小李刀刀的专栏

[译]Laravel 5.0 之 Eloquent 属性转换

本文译自 Matt Stauffer 的系列文章. ---- 之前完全忘了要把这个 Laravel 5 的系列博客写完,不过最近看到了一篇关于属性转换的简介 L...

45380
来自专栏10km的专栏

java:关于json解析工具选型(JSON-java,json-lib,gson,fastjson)

没有最好的工具,只有最适合的. 最近的项目需要对java 对象和json之间的序列化和反序列化,更准确的说是java bean对象和json之间的转换,使用...

36560

扫码关注云+社区

领取腾讯云代金券