- 浏览: 558188 次
- 性别:
文章分类
- 全部博客 (337)
- WEB前端@HTML (4)
- WEB前端@CSS (5)
- WEB前端@javascript (31)
- WEB前端@DHTML (8)
- WEB前端@jQuery (3)
- WEB前端@Flex4 (19)
- WEB前端@BootStrap3 (21)
- 数据交换@JSON (1)
- 模板标签@JSTL (1)
- 模板标签@Thymeleaf (1)
- 模板标签@XSL-FO (3)
- WEB后台@JavaSE (75)
- WEB后台@JAX-WS (27)
- WEB后台@HttpClient (0)
- WEB后台@SSO (2)
- 框架@Spring3 (3)
- 框架@spring_MVC (8)
- 框架@Hibernate (26)
- 框架@play framework (18)
- 框架@sl4j (4)
- 数据库@ (2)
- 数据库@JDBC (0)
- 服务器@Linux (14)
- 服务器@Tomcat (2)
- 第三方jar@dom4j (1)
- 第三方jar@POI (2)
- 第三方jar@CXF (5)
- 项目管理@Maven (22)
- 项目管理@SVN (1)
- 缓存管理@ehcache (1)
- 系统设计@设计模式 (10)
- 单元测试@JunitTest (1)
- 开发工具 (3)
- BUG收录 (1)
- 学习之路 (6)
- 面试之道 (1)
- 我的项目 (2)
最新评论
-
superich2008:
logback配置文件的改动会导致应用重新加载,多改动几次后就 ...
Chapter 3: Logback configuration -
chenzhihui:
不是可以在log4j中配置以控制台或者文件方式保存日志的?
play记录日志 -
smilease:
很棒,正缺这个,非常感谢
bootstrap3-typeahead 自动补全 -
guangling13345:
[size=x-small][/size]
二级联动菜单 -
jacksondesign:
有,和YAML的格式有关,不知道有没有什么好的YAML格式的验 ...
(四)play之yabe项目【页面】
Flex提供了数据格式化功能,可以对数据进行格式化。通过内置的格式化器,用户不必通过字符串连接来实现数据的格式处理
Flex内置了格式化器和验证器
1.在客户端使用内置数据验证器,减少对服务器的请求,从而提升应用程序的性能
2.通过内置的格式化器,自动完成设定数据格式的重复过程,节省开发时间
格式化
对货币进行格式化处理
格式化器是继承自Formatter类的ActionScript类
常见的格式化器:
mx.formatters.CurrencyFormatter 货币格式
mx.formatters.DateFormatter 日期格式
mx.formatters.NumberFormatter 数字格式
mx.formatters.PhoneFormatter 电话格式
mx.formatters.ZipCodeFormatter 邮编格式
应用:
创建格式化器
使用格式化器
将货币以某种形式显示出来 比如$
对日期进行格式化
如:xxxx年xx月xx日 则使用属性:locale="zh-Hans-CN"
xxxx-xx-xx 则使用属性:dateTimePattern="yyyy-MM-dd"
Review.mxml
--------------------------------------------------------------------
Flex提供了基本的数据验证器,防止非法数据的录入
验证器
在客户端使用内置的数据验证器,减少对服务器的请求,提高应用程序的性能
Flex的验证器都是Validator的子类
常见的验证器:
CreditCardValidator
DateValidator
EmailValidator EMAIL地址检查
NumberValidator
PhoneNumberValidator
SocialSecurityValidator
StringValidstor 字符串检查
ZipCodeValidator
将验证器放到一个数组中,统一存放,作为一个校验器集合
在ActionScript中通过Validator.validateAll()对校验数组中的校验器逐个进行校验
然后返回一个错误数组,如果数组的length不大于0,则说明验证都通过,可以继续到下一个流程!
CustomerInfo.mxml中的表单使用验证器
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>
- FlexGrocer.zip (482.7 KB)
- 下载次数: 1
发表评论
-
(十七)为Flex定制皮肤
2013-01-03 16:46 1291皮肤与组件的关系 使用状态和皮肤 创建Button皮肤 为应用 ... -
(十六)使用样式定制Flex应用
2013-01-03 11:47 1595为Flex应用程序添加样式: 通过标签属性设置样式 可 ... -
(十二)AdvancedDataGrid
2013-01-02 14:37 1588AdvancedDataGrid扩展了普通的DataGrid, ... -
(十一)为DataGrid指定项目呈现器(单元格内显示图片和按钮)
2013-01-02 14:31 16891.使用DataGrid组件展现数 ... -
(十)自定义事件并利用事件对象传递数据以及集合元素变化能派发的事件
2013-01-02 00:14 1302创建和分派事件 1.使用事件可以降低程序的耦合度 2.子类自定 ... -
(九)对List和DataGroup使用itemRenderer
2013-01-01 21:47 5383数据集 包含一组数据元素的对象就叫做数据集Data ... -
(八)自定义组件
2012-12-30 23:35 10401.组件的作用及其对开发的好处 2.Flex类的层次 3.可见 ... -
(七)数据绑定和集合
2012-12-30 17:53 925数据绑定和集合 1.数据绑定的原理 2.ArrayCollec ... -
(六)创建ActionScript类---值对象
2012-12-30 15:31 1008创建ActionScript类--值对象DTO/VO--数据模 ... -
(五)Flex4_使用远程数据
2012-12-30 11:44 1084使用远程XML数据 1.数据 ... -
(四)Flex4_事件
2012-12-29 23:57 885事件编程模型,构建松散耦合的应用程序 设置事件,向事件 ... -
(三)Flex4_Image控件,数据绑定
2012-12-29 23:03 1209数据绑定 1.给需要数据绑定的对象设置id,以便在程序中 ... -
(十八)Flex4_自定义ActionScript组件
2012-12-28 17:11 1091Spark组件是按复合(composi ... -
(十四)Flex4_导航
2012-12-28 09:46 1036Flex中实现导航有两种方式可以实现 1.使用状态,在不同事件 ... -
(二)Flex4 容器与布局
2012-12-27 23:03 1621MXML文件 1.文件头 2.命名空间 3.历史版本的恢复 4 ... -
(一)Flex4 第一篇 RIA到底是什么
2012-12-27 22:57 1023待续... -
(十三)Flex4_实现拖放功能
2012-12-27 20:30 2187增强型拖放组件: List ... -
本地Host文件的修改
2012-12-23 09:40 1034Flash builder 4.6 序列号: 1424-49 ...
相关推荐
除了使用内置的格式化器外,Flex还支持通过自定义函数来进行更复杂的数据格式化处理。例如,在DataGridColumn中使用`labelFunction`属性指定一个函数,该函数负责接收数据项并返回格式化后的字符串。 ```xml 电话...
标题中的“构建Flex自动验证框架”指的是在Flex应用程序开发中创建一个自动化验证系统。Flex是一种基于ActionScript的开源框架,用于构建富互联网应用程序(RIA)。自动验证框架是开发者用来确保用户输入数据有效性...
"flex"是这个包的核心组件,它是一个开源工具,用于生成词法分析器(lexer),通常在编译器构造、解析器开发或者处理结构化文本输入时使用。版本号"2.5.39"表示这是flex工具的一个具体发行版,意味着它可能包含了该...
在Flex开发中,时间相关的功能经常被用到,比如日期选择器、时间输入框等。对于这些需求,Adobe Flex框架提供了丰富的组件来帮助开发者实现。本文将详细介绍如何在Flex项目中实现时分秒的计算与展示,并结合具体代码...
**FLEX1000系列温湿度模块**是一款高度集成化的环境监测设备,由大连泓尊商业发展有限公司生产。该产品集成了瑞士SENSIRION®品牌的高精度温湿度传感器,能够实现对环境温湿度的精确测量。它适用于多种应用场景,...
- **错误检测与纠正**:为了确保数据的可靠性,可能实现了某种错误检测机制,如CRC校验。 对于上位机端,通常会有一个用户界面,允许用户输入要发送的文本信息,并通过串行通信(如USB或蓝牙)与单片机交互。软件...
3. **格式校验**:确保消息格式符合要求,比如限制字符数、不允许特殊字符等。 4. **安全保护**:拦截潜在的攻击性代码,防止XSS(跨站脚本攻击)或其他安全风险。 5. **个性化过滤**:根据用户角色或权限设置不同的...
通过本文的学习,读者能够深入了解MPC5744P微控制器(MCU)的存储器资源分配、Flash驱动开发、FlexCAN驱动开发、上位机软件及CAN总线通信协议等方面的知识,并能够掌握bootloader的设计与实现方法。 #### 二、MPC...
- **CRC校验模块**:图2展示了CRC校验码生成器的设计。该模块使用了一个16位的多项式进行CRC校验计算,确保了数据传输的准确性。CRC校验码通常附加在数据帧的尾部,在接收端进行校验以检测传输过程中可能发生的错误...
数据处理包括验证用户输入的有效性(如非空检查、格式校验等)和序列化数据(将数据转化为服务器可理解的格式,如URL编码)。 三、表单数据提交方式 1. GET方法:数据作为URL的一部分传递,适用于少量且不敏感的...
帧头起始的同步字段用于同步接收器与发送器的时钟,确保数据准确无误地被接收。 3.1.2 有效数据部分 有效数据部分可以携带最多128个字节的信息,适应各种复杂的应用场景。 3.1.3 帧尾部分 帧尾的校验和通常是CRC...
**3.1 选择器与组合器** - **后代选择器**:`div p`表示选取`div`内的所有`p`标签。 - **伪类与伪元素**:`:hover`、`:before`等用于增强样式效果。 **3.2 弹性布局(Flexbox)** - **容器属性**:`display: flex...
4. **VayoPro Flexa加速器**:专为Fuji Flexa编程加速,提高设备编程效率。 5. **VayoPro Test Expert**:快速进行检测测试分析,支持ICT、FP、AOI和X-Ray编程,简化测试流程。 6. **VayoPro Document Expert**:...
FlexHEX还提供了强大的计算和转换工具,如计算校验和、哈希值(如MD5、SHA-1等)以及二进制到其他格式的转换。这些功能对于验证数据完整性或在不同格式之间交换数据十分实用。 此外,FlexHEX具有集成的脚本语言,...
这些函数被组织在不同的子目录下,如prim(基本元件)、mf(中规模器件)、Mega_lpm(大型可配置元件)以及Edif(符合EDIF格式的元件)。在设计时,我们需要根据需要从相应的库中选取合适的元件。 2. **引脚和节点...
随着计算机科学的深入发展,编程语言的构造与解析越来越受到重视。在计算机编程领域,词法分析与语法分析作为编译原理的基石,对于理解、设计与实现编程语言至关重要。《实验手册1》正是为了让学生深入理解这一过程...
- **格式设计**:由填报设计器设计并导出成Excel格式,供用户填报。 - **数据导入**:设计一段程序或JavaScript脚本来完成数据导入的过程。 #### 十、案例展示 - **离线填报样例**:展示了一个典型的离线填报...
4. **数据交互与存储**:熟悉AXIOS和AJAX,用于前后端的数据通信,JSON用于数据交换格式,sessionStorage和localStorage则用于在浏览器端存储数据。 5. **预编译语言**:了解less、sass和stylus,这些是CSS的预...