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>
