Flex学习笔记——关于Flex里的事件

事件是Flex重要的部分，对于事件的学习也是Flex学习中重要的环节
1,简单的事件派发
这里先新建一个项目，再新建一个Component名字为EventImage，这个组件EventImage的mxml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml">
 
 <mx:Script>
  <![CDATA[   
   private function complete() : void
   {
    this.dispatchEvent( new Event(Event.COMPLETE ));
   }
  ]]>
 </mx:Script>
 <mx:Image id="image" complete="complete()" />
</mx:TitleWindow>

这里我将事件的类型直接用 flash.vents.Event.COMPLETE。
再看主程序的代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  fontSize="12"  xmlns:local="*"  creationComplete="init()">
<mx:Script>
 <![CDATA[
  private function init () : void
  {
   myImage.addEventListener(Event.COMPLETE,completeHandler);
   myImage.image.source = '1.jpg';
  }
  private function completeHandler( e : Event ) : void
  {
   trace('图片加载完成');
  } 
 ]]>
</mx:Script>

<local:EventImage id="myImage" />
</mx:Application>

当图片加载完成的时候的会输出 '图片加载完成'的字符串。当程序初始化的时候 首先给myImage添加了事件监听，监听类型为Event.COMPLETE的事件。
当myImage中的image加载图片完成时，会派发一个类型为Event.COMPLETE的事件。换句话说直接调用了主程序的函数completeHandler。

2，使用Event元标签：

稍作上面的代码的修改，便可了解Event元标签
EventImage：

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Metadata>
  [Event(name="complete",type="flash.events.Event")]//Event元标签的写法
 </mx:Metadata>
 <mx:Script>
  <![CDATA[   
   private function complete() : void
   {
    this.dispatchEvent( new Event(Event.COMPLETE ));
   }
  ]]>
 </mx:Script>
 <mx:Image source="1.jpg"  complete="complete()" />
</mx:TitleWindow>
 
主程序：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  fontSize="12"  xmlns:local="*" >
<mx:Script>
 <![CDATA[  
  private function completeHandler( e : Event ) : void
  {
   trace('图片加载完成');
  } 
 ]]>
</mx:Script>
<local:EventImage  complete="completeHandler(event)"  />
</mx:Application>
使用Event元标签可以直接在组件的mxml代码里定义事件，如上<local:EventImage  complete="completeHandler(event)"  />
注意[Event(name="complete",type="flash.events.Event")]里边的name指的是 this.dispatchEvent( new Event(Event.COMPLETE ))语句里的Event.COMPLETE的值，type指的是事件类型。
如果不想用flash的Event类，可以自定义一个事件类，请继承Event类。
如果想让一个类具有派发事件的能力，请继承EventDispatcher类。
如果直接在as类中使用Event标签，直接在类名前添加[Event(name="complete",type="flash.events.Event")]即可。
上面的描述中请区分Event元标签和Event类，虽然名称一样但是意义就差很远了。

3,自定义触发器将事件和效果关联起来

首先新建一个类EffectTitleWindow继承 TitleWindow 代码如下：

package
{
 import flash.events.Event;
 import flash.events.MouseEvent; 
 import mx.containers.TitleWindow;
 
 [Event(name="hideWin", type="flash.events.Event")]
 [Event(name="showWin", type="flash.events.Event")]
 
 [Effect(name="hideWinEffect",event="hideWin")]
 [Effect(name="showWinEffect",event="showWin")]
 
 public class EffectTitleWindow extends TitleWindow
 {
  public function EffectTitleWindow()
  {
   super();
   this.addEventListener(MouseEvent.CLICK, clickHandler);
  }
  
  private var ck : Boolean = true;
  private function clickHandler( e : MouseEvent ) : void
  {
   if( ck )
   {
    this.dispatchEvent( new Event("hideWin"));
   }
   else
   {
    this.dispatchEvent( new Event("showWin") );
   }
   ck = !ck;
  }
 }
}

然后在主程序中输入以下代码：

<mx:Fade id="hide" duration="500" alphaFrom="1" alphaTo="0" />
<mx:Fade id="show" duration="500" alphaFrom="0" alphaTo="1" />
<local:EffectTitleWindow
  hideWinEffect="{hide}" 
  showWinEffect="{show}" 
  width="200" height="200"/>

运行程序，便可知真理。

4.一个关于Event的实例.
其实如果上面的内容已经掌握，那么我觉得下面的我将开始废话的旅程.
这个列子很简单，程序初始化全屏显示然后使用HTML控件载入百度的页面，然后在点击百度搜索的文本框，可以在文本框输入一些文字。

首先需要两个文件
KeySetEvent.as  代码如下：

package event
{
 import flash.events.Event;

 public class KeySetEvent extends Event
 {
  public function KeySetEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
  {
   super(type, bubbles, cancelable);
  }
  public var label : String;

  public static const WRITE_WORD : String = "wirteWord";  //输入单词
  public static const DELETE_WORD: String = "deleteWord"; //删除文本框的最后一个单词
  public static const CLERAR_WORD : String = "clearWord"; //清除所有单词
  
 }
}

KeySetView.as

package view
{
 import event.KeySetEvent;
 
 import flash.events.MouseEvent;
 
 import mx.containers.Canvas;
 import mx.controls.Button;
 import mx.events.FlexEvent;
 
 [Event(name="wirteWord",type="event.KeySetEvent")]
 [Event(name="deleteWord",type="event.KeySetEvent")]
 [Event(name="clearWord",type="event.KeySetEvent")]

 public class KeySetView extends Canvas
 {
  public function KeySetView()
  {
   super();
   this.addEventListener( FlexEvent.CREATION_COMPLETE,addKeys );
  }
  private function addKeys( e : FlexEvent ) : void
  {
   this.removeAllChildren();
   var labelArr : Array = ['a','b','c','d','e','f','g','h','i','<-','clearAll'];//省略了很多字母，豆腐渣工程了
   var itemHeight : int = (this.height - 4 * 4) / 4;
   var itemWidth : int = (this.width - 3 * 4) / 3;
   for (var i : uint = 0; i < labelArr.length; i ++)
   {
    var btn : Button = new Button;
    btn.label = labelArr[i];
    btn.width = itemWidth;
    
    if (btn.label == 'clearAll')
     btn.width = 2 * itemWidth + 4;
     
    btn.height = itemHeight;
    btn.x = (i % 3) * itemWidth + 4;
    btn.y = int(i / 3) * itemHeight + 4;
    btn.addEventListener( MouseEvent.CLICK, clickHandler );
    this.addChild( btn );
   }
  }
  private function clickHandler( e : MouseEvent ) : void
  {
   var target : Button = Button( e.target );
   var label : String = target.label;
   switch(label)
   {
    case "clearAll":
     dispatch( KeySetEvent.CLERAR_WORD, label );
     break;
    case "<-":
     dispatch( KeySetEvent.DELETE_WORD, label );
     break;
    default :
     dispatch( KeySetEvent.WRITE_WORD, label );
   }
  }
  private function dispatch( type : String, label : String ) : void // 派发事件
  {
   var e : KeySetEvent = new KeySetEvent( type );
   e.label = label;
   this.dispatchEvent( e );
  }
  
 }
}

主程序的代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
 xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="absolute" xmlns:local="*"
 xmlns:view="view.*"
 applicationComplete="init()">

 <mx:Script>
  <![CDATA[
   import event.KeySetEvent;

   [Bindable]
   private var isEnabel : Boolean = false;
   
      private var input : Object;
   
   private function init() : void
   {
    this.stage.displayState = StageDisplayState.FULL_SCREEN;
   }
   private function complete( ) : void//当载入完成
   {
    var inputs : Object = myHtml.domWindow.document.getElementsByTagName("input");
    for( var i : uint = 0; i < inputs.length; i ++)
    {
     if( inputs[i].type != "text" )
      continue;
     inputs[i].onclick = function() : void  //这里使用了js和as混合的写法 input是as中的变量 this是js里的变量，其实远没有这么复杂 都是在as中
     {
      input = this;
     }
    }
    isEnabel = true;
   }
   private function reset() : void//当html的地址发生变化的时候
   {
    isEnabel = false;
    input = null;
   }

   private function write( e : KeySetEvent ) : void
   {
    if( input )
    {
     input.value += e.label;
    }
   }
   private function clear() : void
   {
    if( input )
    {
     input.value = '';
    }
   }
   private function dele() : void
   {
    if( input )
    {
     var value : String = input.value;
     if( value != "")
     {
      value = value.substr( 0, value.length-1 );
     }
     input.value = value;
    }
   }
  ]]>
 </mx:Script>
 <mx:HTML 
  location="http://www.baidu.com.cn/" 
  id="myHtml"
  complete="complete()"
  locationChange="reset()"
  left="10"
  top="10"
  bottom="10"
  right="205"/>

 <view:KeySetView
  width="200"
  height="120"
  bottom="10"
  right="10"
  enabled="{isEnabel}"
  wirteWord="write(event)"
  clearWord="clear()"
  deleteWord="dele()"/> 
  
</mx:WindowedApplication>