跟我StepByStep学FLEX教程------Demo6之自定义事件&自定义组件

跟我StepByStep学FLEX教程------Demo6之自定义事件&自定义组件

 

 

说明：该文系作者原创，请勿商用或者用于论文发表，转载必须经作者同意并且注明出处。

 

 

      从这一讲开始，FLEX教程也从初级部分到中级了，Demo的复杂度也相应增加。

      简单的回顾一下初级部分，这一部分对Flex的概念以及开发工具进行了介绍，结合具体的DEMO对MXML和AS3的基础语法进行了讲解。这一部分内容希望读者对Flex有一个基础的认识，并且能够进行简单的应用开发。

     

       OK，这一讲的Demo以自定义事件和自定义组件为主题。 

       同样的，先看运行效果：

 

  

      代码结构如下：

 

      源代码如下：

自定义事件类MyCustomEvent.as:

package com.obj
{
 import flash.events.Event;
 
 public class MyCustomEvent extends Event
 {
  public static const TESTMYEVENT:String="testMyEvent"; //使用常量定义事件的触发方式名称
  public var userLog:UserLogin;
  
  public function MyCustomEvent(userLogin:UserLogin, type:String)
  {
   super(type);
   this.userLog=userLogin;
  }  
 }
}

用户登录类UserLogin.as:

package com.obj
{
 public class UserLogin
 {
  public var logUserNam:String=""; //用户名
  public var logUserPass:String=""; //用户密码
  public var logCompanyNam:String=""; //公司名称
  
  public function UserLogin(userNam:String, userPass:String, companyNam:String)
  {
   this.logUserNam=userNam;
   this.logUserPass=userPass;
   this.logCompanyNam=companyNam;
  }

 }
}

自定义组件SysLoginWin.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="594" height="274" backgroundColor="#0327D9" backgroundAlpha="0.39" creationComplete="init()">
 <mx:Script>
  <![CDATA[
   import com.obj.UserLogin;
      import mx.controls.Alert;
   import com.obj.MyCustomEvent;
   
   private function init():void
   {
    VeriCodeLab.text = generVeriCode();
   }
   
   private function generVeriCode():String
   {
    var ranNum:Number;
    var seedNum:Number;
    var tmpCode:String;
    var veriCode:String="";
    
    for(var i:int=0; i<4; i++)
    {
     ......

    }
    return veriCode;

   }

   internal function login(evt:MouseEvent):void {
    var userLogin:UserLogin = new UserLogin(logTxt.text, passTxt.text, sysInfoArea.text);
    var myTestEvent:MyCustomEvent = new MyCustomEvent(userLogin, MyCustomEvent.TESTMYEVENT);
    
    this.dispatchEvent(myTestEvent); //自定义事件加到事件流
   }      
  ]]>
 </mx:Script>
 
 <mx:Metadata>
  //声明事件注册通道的方法。name是事件对应的名称，也就是type。name一定要和事件类中的名称一致
        [Event(name="testMyEvent", type="com.obj.MyCustomEvent")]
 </mx:Metadata>
 
 <mx:Label x="42.5" y="31" text="用户名：" fontSize="15" fontWeight="bold"/>
 <mx:Label x="42.5" y="72" text="密   码：" fontSize="15" fontWeight="bold"/>
 <mx:TextInput x="126.5" y="31" id="logTxt" fontSize="12"/>
 <mx:TextInput x="126.5" y="73" displayAsPassword="true" id="passTxt" maxChars="8" width="160" fontSize="12"/>
 <mx:Button x="42.5" y="153" label="登陆" fontSize="16" fontWeight="bold" fontStyle="italic" id="logBtn" click="login(event)"/>
 <mx:Button x="220.5" y="153" label="帮助" fontSize="16" fontStyle="italic"/>
 <mx:Panel x="322.5" y="31" width="222" height="150" layout="absolute" title="系统公告" fontSize="15" horizontalAlign="center">
  <mx:TextArea x="0" y="0" width="202" height="104" text="五一劳动节放假3天    2009.5.1---2009.5.3" color="#030303" backgroundColor="#EF09C6" backgroundAlpha="0.27" id="sysInfoArea" maxChars="100" editable="false" wordWrap="true"/>
 </mx:Panel>
 <mx:Label x="102.25" y="219" text="XXX System XXX Company" width="399.5" fontSize="26" color="#0AE5F3" fontWeight="bold"/>
 <mx:Label x="42.5" y="111" text="验证码：" fontSize="15" fontWeight="bold"/>
 <mx:Label x="126" y="108" width="160.5" fontSize="19" fontFamily="Times New Roman" color="#FB07D6" id="VeriCodeLab" enabled="true" fontWeight="bold"/>
</mx:Canvas>

 

     可以在Components的Custom看见自定义组件了：


 

 主程序测试自定义事件TestMyEventMain.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%" xmlns:ns1="myComponents.*" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#E4F70C, #15A015]">
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import com.obj.MyCustomEvent;
   import mx.events.CloseEvent;
   
   private function loginHandler(event:MyCustomEvent):void {
    var useNam:String=event.userLog.logUserNam;
    var usePass:String=event.userLog.logUserPass;
    
    Alert.okLabel="确定";
    
    if (useNam=="wangyisong"){ //注意，字符串比较相等用==，和Java区别
     if (usePass=="12345678") {
      Alert.show("用户'" + event.userLog.logUserNam + "'登录","登录信息",Alert.OK,this);
     } else {
      Alert.show("密码不正确！")
     }
    } else {
     Alert.show("无效用户！")
    }    
   }
  ]]>
 </mx:Script>
 
 <mx:Panel x="34" y="22" width="630" height="332" layout="absolute" id="mainMenu">
     <!--testMyEvent就是SysLoginWin控件注册的事件-->
  <ns1:SysLoginWin x="-0.5" y="-1" width="610.5" height="293" testMyEvent="loginHandler(event)" backgroundColor="#E1610B" backgroundAlpha="0.5">
  </ns1:SysLoginWin>
 </mx:Panel>
</mx:Application>

     

      通过代码很容易明白，使用AS3方式的事件Event机制，可以将大部分功能抽象为自定义控件，达到代码的高度复用和系统的可扩展性。

      下一讲对这个Demo进行一下简单讲解。

      从这一讲开始，FLEX教程的内容和Demo比以前的复杂度会高一些------教程StepByStep，读者通过初级阶段的学习，这一阶段也就很容易了。

      如果对DEMO或者讲述的不明白或有疑义的，请在评论中描述，作者尽量一一回复，由于工作关系，没有及时回复，提前请您见谅。