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

最新推荐文章于 2022-07-11 06:55:56 发布

nasonwys

最新推荐文章于 2022-07-11 06:55:56 发布

阅读量135

点赞数

分类专栏： FLEX 文章标签： Flex 公告 Adobe Flash XML

FLEX 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

跟我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">
     
  <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>