积少成多Flash(12) - Flex 3.0 验证控件(Validator), 缓动效果(easing)

[源码下载]

积少成多Flash(12) - Flex 3.0 验证控件(Validator), 缓动效果(easing)

作者： webabcd


介绍
演示 Flex 3.0 中的验证控件的应用，以及各种缓动效果(easing)的应用

• Validator - 各种验证控件的基类，其可用于必填验证
• DateValidator - 日期验证控件
• EmailValidator - Email 验证控件
• RegExpValidator - 正则表达式验证控件
• 缓动（easing） - 系统自带的动画缓动效果，以及自定义缓动效果
• 加密/解密 - 常用加密算法的 AS3 库的应用
• 其他 - 其他一些常用的东西

在线DEMO
http://www.cnblogs.com/webabcd/archive/2009/11/09/1598980.html


1、Validator.mxml 

<? xml version="1.0" encoding="utf-8" ?>

<!--
    各种验证控件的基类 Validator 的 Demo，其可用于必填验证
-->

< mx:Panel  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  width ="400"  height ="300"
    title ="Validator - Validator (其他验证器的基类，可用于必填验证)" >
    
     < mx:Validator  id ="validator"  
        source ="{txtInput}"  property ="text"  
        required ="true"  requiredFieldError ="请输入必填字段"
        trigger ="{btnSubmit}"  triggerEvent ="click"
     />
        
     < mx:Form >
         < mx:FormItem  label ="必填字段: " >
             < mx:TextInput  id ="txtInput" />
         </ mx:FormItem >
         < mx:FormItem  >
             < mx:Button  id ="btnSubmit"  label ="验证"   />
         </ mx:FormItem >
     </ mx:Form >
    
</ mx:Panel >

2、DateValidator.mxml

<? xml version="1.0" encoding="utf-8" ?>

<!--
    应用日期验证控件的 Demo
-->

< mx:Panel  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  width ="400"  height ="300"
    title ="Validator - DateValidator (日期验证)" >

     < mx:DateValidator  source ="{txtDate}"  property ="text"
        required ="true"  requiredFieldError ="请输入日期"  
        allowedFormatChars ="-"  inputFormat ="YYYY-MM-DD"  
        trigger ="{btnSubmit}"  triggerEvent ="click"  
        valid ="mx.controls.Alert.show('验证成功');"
        invalid ="mx.controls.Alert.show('验证失败');"  
        wrongDayError ="日输入错误"
        wrongMonthError ="月输入错误"
        wrongYearError ="年输入错误"
        wrongLengthError ="日期长度错误"
        invalidCharError ="日期分隔符错误"
        formatError ="inputFormat 配置错误"
     />
        
      < mx:Form >
         < mx:FormItem  label ="日期(格式 yyyy-MM-dd): " >
             < mx:TextInput  id ="txtDate" />
         </ mx:FormItem >
         < mx:FormItem  >
             < mx:Button  id ="btnSubmit"  label ="验证"   />
         </ mx:FormItem >
     </ mx:Form >
    
</ mx:Panel >

3、EmailValidator.mxml

<? xml version="1.0" encoding="utf-8" ?>

<!--
    应用 Email 验证控件的 Demo

-->
< mx:Panel  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  width ="400"  height ="300"
    title ="Validator - EmailValidator (Email验证)" >
    
     < mx:EmailValidator  id ="emailValidator"  source ="{txtEmail}"  property ="text"
        missingAtSignError ="缺少@"  
           valid ="mx.controls.Alert.show('验证成功');"
     />
       
     < mx:Form >
         < mx:FormItem  label ="Email: " >
             < mx:TextInput  id ="txtEmail" />
         </ mx:FormItem >
         < mx:FormItem  >
             < mx:Button  id ="btnSubmit"  label ="验证"  click ="emailValidator.validate();"   />
         </ mx:FormItem >
     </ mx:Form >
    
</ mx:Panel >

4、RegExpValidator.mxml

<? xml version="1.0" encoding="utf-8" ?>

<!--
    应用正则表达式验证控件的 Demo
-->

< mx:Panel  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  width ="400"  height ="300"
    title ="Validator - RegExpValidator (正则表达式验证)" >
    
     < mx:Script >
         <![CDATA[
        
            import mx.events.ValidationResultEvent;
            import mx.validators.*;
            import mx.controls.Alert;
            
            private function handleResult(e:ValidationResultEvent):void
            {
                if (e.type == ValidationResultEvent.VALID)
                {
                    Alert.show("验证成功");
                }
            }
            
         ]]>
     </ mx:Script >
    
     < mx:RegExpValidator  id ="regExpValidator"  
        source ="{txtInput}"  property ="text"  
        flags ="g,i"  expression ="^[a-z]+$"  
        valid ="handleResult(event)"  invalid ="handleResult(event)"
        trigger ="{btnSubmit}"  triggerEvent ="click"
        noMatchError ="请输入正确的英文字母"
        required ="false"
     />
        
     < mx:Form >
         < mx:FormItem  label ="请输入英文字母: " >
             < mx:TextInput  id ="txtInput" />
         </ mx:FormItem >
         < mx:FormItem  >
             < mx:Button  id ="btnSubmit"  label ="验证"   />
         </ mx:FormItem >
     </ mx:Form >
    
</ mx:Panel >

5、Easing.mxml

<? xml version="1.0" encoding="utf-8" ?>

<!--
    演示各种缓动（easing）的 Demo
    和 Silverlight 中的缓动一致 http://www.cnblogs.com/webabcd/archive/2009/08/20/1550334.html
-->

< mx:Panel  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  width ="400"  height ="300"
    title ="easing 的应用(TweenEffect 的 easingFunction 属性)" >
    
     < mx:Script >
         <![CDATA[
        
            import mx.events.TweenEvent;
            
            import mx.effects.easing.Back;
            import mx.effects.easing.Bounce;
            import mx.effects.easing.Circular;
            import mx.effects.easing.Cubic;
            import mx.effects.easing.Elastic;
            import mx.effects.easing.Exponential;
            import mx.effects.easing.Linear;
            import mx.effects.easing.Quadratic;
            import mx.effects.easing.Quartic;
            import mx.effects.easing.Quintic;
            import mx.effects.easing.Sine;
            
            private function moveImage(e:MouseEvent):void
            {
                effectMove.end();    
                effectMove.xTo = 240;
                effectMove.yTo = 120;
                effectMove.play();
            }
            
            private function radioChangeHandler():void
            {
                switch (radioGroup.selectedValue)
                {
                    case "Back" :
                        effectMove.easingFunction = Back.easeOut;
                        break;
                    case "Bounce" :
                        effectMove.easingFunction = Bounce.easeOut;
                        break;
                    case "Circular" :
                        effectMove.easingFunction = Circular.easeOut;
                        break;
                    case "Cubic" :
                        effectMove.easingFunction = Cubic.easeOut;
                        break;
                    case "Elastic" :
                        effectMove.easingFunction = Elastic.easeOut;
                        break;
                    case "Exponential" :
                        effectMove.easingFunction = Exponential.easeOut;
                        break;
                    case "Linear" :
                        effectMove.easingFunction = Linear.easeOut;
                        break;
                    case "Quadratic" :
                        effectMove.easingFunction = Quadratic.easeOut;
                        break;
                    case "Quartic" :
                        effectMove.easingFunction = Quartic.easeOut;
                        break;
                       case "Quintic" :
                        effectMove.easingFunction = Quintic.easeOut;
                        break;
                    case "Sine" :
                        effectMove.easingFunction = Sine.easeOut;
                        break;
                    default :
                        break;
                }
            }
            
            private function effectEndHandler():void
            {
                image.x = 24;
                image.y = 24;
            }
            
         ]]>
     </ mx:Script >
    
     < mx:Move  id ="effectMove"  target ="{image}"  duration ="5000"
        easingFunction ="{Bounce.easeOut}"  
        effectEnd ="effectEndHandler();"   />
    
     < mx:Canvas  id ="canvas"  width ="100%"  height ="100%" >
         < mx:Image  id ="image"  source ="@Embed('images/logo.png')"
            x ="24"  y ="24"  width ="48"  height ="48"   />
         < mx:Button  id ="btnMove"  label ="移动"  click ="moveImage(event)"  x ="10"  y ="80" />
        
         < mx:RadioButtonGroup  id ="radioGroup"  change ="radioChangeHandler();" />
         < mx:RadioButton  x ="10"  y ="140"  label ="Back"  groupName ="radioGroup" />
         < mx:RadioButton  x ="97"  y ="140"  label ="Bounce"  groupName ="radioGroup"  selected ="true" />
         < mx:RadioButton  x ="199"  y ="140"  label ="Circular"  groupName ="radioGroup" />
         < mx:RadioButton  x ="294"  y ="140"  label ="Cubic"  groupName ="radioGroup" />
         < mx:RadioButton  x ="10"  y ="170"  label ="Elastic"  groupName ="radioGroup" />
         < mx:RadioButton  x ="199"  y ="200"  label ="Exponential"  groupName ="radioGroup" />
         < mx:RadioButton  x ="10"  y ="200"  label ="Linear"  groupName ="radioGroup" />
         < mx:RadioButton  x ="97"  y ="200"  label ="Quadratic"  groupName ="radioGroup" />
         < mx:RadioButton  x ="294"  y ="170"  label ="Quartic"  groupName ="radioGroup" />
         < mx:RadioButton  x ="199"  y ="170"  label ="Quintic"  groupName ="radioGroup" />
         < mx:RadioButton  x ="97"  y ="170"  label ="Sine"  groupName ="radioGroup" />
     </ mx:Canvas >
    
</ mx:Panel >

6、CustomEasing.mxml

<? xml version="1.0" encoding="utf-8" ?>

<!--
    实现自定义 easing 的 Demo
-->

< mx:Panel  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  width ="400"  height ="300"
    title ="自定义 easing" >

      < mx:Script >
         <![CDATA[
        
            /**
             *  @param t 当前时间，介于 0 - 持续时间 之间
             *  @param b 动画属性的初始值
             *  @param c 动画属性的总计变化值
             *  @param d 运动的持续时间
             */
            private function myEasingFunction(t:Number, b:Number, c:Number, d:Number):Number 
            {
                if ((t /= d) < (1 / 2.75)) 
                {
                    return c * (7.5625 * t * t) + b;
                  }
                  else if (t < (2 / 2.75)) 
                  {
                    return c * (7.5625 * (t-=(1.5/2.75)) * t + .75) + b;
                  }
                  else if (t < (2.5 / 2.75)) 
                  {
                    return c * (7.5625 * (t-=(2.25/2.75)) * t + .9375) + b;
                  }
                  else 
                  {
                      return c * (7.5625 * (t-=(2.625/2.75)) * t + .984375) + b;
                  }
            };
            
            private function moveImage(e:MouseEvent):void
            {
                var position:Point = new Point(stage.mouseX, stage.mouseY);
                var localPosition:Point = canvas.globalToLocal(position);
            
                effectMove.end();    
                effectMove.xTo = localPosition.x - (image.width / 2)
                effectMove.yTo = localPosition.y - (image.height / 2)
                effectMove.play();
            }
         ]]>
     </ mx:Script >

     < mx:Move  id ="effectMove"  target ="{image}"  easingFunction ="myEasingFunction"   />
    
     < mx:Canvas  id ="canvas"  width ="100%"  height ="100%"  mouseDown ="moveImage(event)" >
    
         < mx:Image  id ="image"  source ="@Embed('images/logo.png')"
            x ="24"  y ="24"  width ="48"  height ="48"  
          />
         
     </ mx:Canvas >
        
</ mx:Panel >

7、Encyption3DES.mxml

<? xml version="1.0" encoding="utf-8" ?>

<!--
    用 AS3 封装好的常用加密算法。详情 http://crypto.hurlant.com
    以下以 3DES 加密/解密为例
-->

< mx:Panel  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"
    title ="3DES - ECB 加密解密算法 Demo"  width ="424"  height ="382" >

     < mx:Script >
         <![CDATA[
            
            import com.hurlant.crypto.symmetric.ICipher;
            import com.hurlant.crypto.symmetric.PKCS5;
            import com.hurlant.crypto.symmetric.IPad;
            import com.hurlant.util.Base64;
            import com.hurlant.util.Hex;
            import com.hurlant.crypto.Crypto;
            
            private function encryptHandler():void 
            {
                var key:String = txtKey.text;
                var keyData:ByteArray = Hex.toArray(Hex.fromString(key));

                var plain:String = txtPlainText.text;
                var plainData:ByteArray = Hex.toArray(Hex.fromString(plain));
                
                var name:String = "des3-ecb";
                            
                var pad:IPad = new PKCS5;
                var mode:ICipher = Crypto.getCipher(name, keyData, pad);
                pad.setBlockSize(mode.getBlockSize());
                mode.encrypt(plainData);
                
                var result:String = Base64.encodeByteArray(plainData);
                txtCipherText.text = result;
            }
            
            private function decryptHandler():void 
            {
                var key:String = txtKey.text;
                var keyData:ByteArray = Hex.toArray(Hex.fromString(key));

                var cipher:String = txtCipherText.text;
                var cipherData:ByteArray = Base64.decodeToByteArray(cipher);;
                
                var name:String = "des3-ecb";
                            
                var pad:IPad = new PKCS5;
                var mode:ICipher = Crypto.getCipher(name, keyData, pad);
                pad.setBlockSize(mode.getBlockSize());
                mode.decrypt(cipherData);
                
                var result:String = Hex.toString(Hex.fromArray(cipherData));
                txtPlainText.text = result;
            }
            
         ]]>
     </ mx:Script >

     < mx:Label  text ="加密结果以 Base64 编码输出"  x ="10"  y ="10" />
     < mx:Button  x ="286"  y ="184"  label ="加密"  id ="btnEncrypt"  click ="encryptHandler()" />
     < mx:Button  x ="342"  y ="184"  label ="解密"  id ="btnDecrypt"  click ="decryptHandler()" />
     < mx:TextInput  x ="53"  y ="34"  width ="337"  id ="txtKey"  text ="#s^un2ye31&lt;cn%|aoXpR,+vh" />
     < mx:Label  x ="10"  y ="36"  text ="密钥:" />
     < mx:TextInput  x ="10"  y ="88"  width ="380"  height ="88"  id ="txtPlainText" />
     < mx:TextInput  x ="10"  y ="240"  width ="380"  height ="88"  id ="txtCipherText" />
     < mx:Label  x ="10"  y ="62"  text ="原文: " />
     < mx:Label  x ="10"  y ="214"  text ="密文: " />
    
</ mx:Panel >

8、Other.mxml

<? xml version="1.0" encoding="utf-8" ?>
< mx:VBox  xmlns:mx ="http://www.adobe.com/2006/mxml"  width ="400"  height ="300" >
     < mx:Label  text ="懒了，Flex 还有好多东西啊，不过暂时先到这里吧" />
     < mx:Label  text ="SoundEffect 用于播放声音" />
     < mx:Label  text ="VideoDisplay 用于播放视频" />
     < mx:Label  text ="调用 Flash 开发的 swc 组件时，一般将其放入 libs 目录内" />
     < mx:Label  text ="减小主 Flex 程序的大小，可以把子模块写成 Module（被编译成独立的 swf） ，然后在需要的时候加载" />
     < mx:Label  text ="编译 Flex 的两种方式：Merged into code；Runtime shared library (RSL)" />
</ mx:VBox >

OK
[源码下载]