FLEX 系統(tǒng)提供的事件與DOM的事件基本上完全一致 但是和傳統(tǒng)的WEB開發(fā)不同的是 可以為自定義的組件添加自定義的事件 比如我們做了一個(gè)組件是一個(gè)登錄框 當(dāng)點(diǎn)擊登錄按鈕的時(shí)候觸發(fā)我們自定義的事件 比如叫"login"事件 雖然這個(gè)login事件 歸根結(jié)底還是某個(gè)按鈕的click事件 但自定義的事件比傳統(tǒng)的事件有什么好處呢 ：一是事件的名字是自定義的 可以形象的表示這個(gè)事件本身 而不像以前還要關(guān)心是哪個(gè)按鈕按了一下等等 這樣為組件與組件的通訊提供便利 下面的例子中自定義了一個(gè)組件叫testComponent , 這個(gè)自定義的組件中有一個(gè)按鈕和一個(gè)輸入框, 當(dāng)按下這個(gè)按鈕的時(shí)候 新建一個(gè)新的事件叫shareData
并且shareData事件被聲明為一個(gè)textEvent ， textEvent可以通過text屬性來傳遞數(shù)據(jù)（textInput控件的值） 。
EventTest.mxml中引用了這個(gè)自定義組件testComponent 并捕獲testComponent中的自定義事件shareData, 輸出testComponent 中textInput控件的字符串
testComponent.mxml :
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
<!-- 聲明本組件將拋出的事件 -->
<mx:Metadata>
[Event(name="shareData",type="flash.events.TextEvent")]
</mx:Metadata>
<mx:Script>
<![CDATA[
private function fnOnClick_testComp():void {
//event 構(gòu)造函數(shù) 至少傳遞一個(gè)事件名
var event:TextEvent = new TextEvent("shareData");
event.text = myTxtInput.text;
//使用disptchEvent 來拋出創(chuàng)建的事件
dispatchEvent(event);
}
]]>
</mx:Script>
<mx:Label text="This is the Test component" />
<mx:TextInput id="myTxtInput"/>
<!-- 當(dāng)點(diǎn)擊按鈕時(shí)進(jìn)行自定義事件 -->
<mx:Button label="clickMe" click="fnOnClick_testComp()" />
</mx:VBox> |
eventTest.mxml :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
xmlns:view="view.*">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function fnOnShareData(event:TextEvent):void {
Alert.show("event has been use. event.text => " + event.text );
}
]]>
</mx:Script>
<!-- 調(diào)用我們自定義的組件 并處理它的shareData事件 就像click事件一樣使用 -->
<view:testComponent shareData="fnOnShareData(event)"/>
</mx:Application>
|
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="
layout="absolute" width="200" height="150"
title="請?jiān)诖溯斎肽拿郑? fontWeight="normal" fontSize="12" showCloseButton="true" close="PopUpManager.removePopUp(this);">
<mx:TextInput x="10" y="10" id="myTextInput"/>
<mx:Button x="36" y="74" label="確定" id="myButton"
click="closeTitleWindow(event);"/>
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.controls.Text;
// 定義一個(gè)變量來獲取對主應(yīng)用程序的引用
public var myObj:Object;
// 該方法用來關(guān)閉彈出的TitleWindow 容器.
private function closeTitleWindow(event:MouseEvent):void {
myObj.myLabel.text = "您輸入的是：" + myTextInput.text;
myObj.myLabel.setStyle("color",String(cp.selectedColor))
PopUpManager.removePopUp(this);
}
private function close(evt:MouseEvent):void{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:Button x="96" y="74" label="close" click="close(event);"/>
<mx:ColorPicker x="10" y="44" id="cp" selectedColor="#F30A0A"/>
</mx:TitleWindow>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
<mx:Script>
<![CDATA[
import flash.events.*;
import mx.managers.PopUpManager;
import mx.containers.TitleWindow;
// 響應(yīng)按鈕單擊事件，彈出myTitleWindow對話框
private function openWindow(event:MouseEvent):void {
// 使用PopUpManager.createPopUp方法彈出myTitleWindow
var aTitleWindow:title=title(PopUpManager.createPopUp(this,title, true));
PopUpManager.centerPopUp(aTitleWindow); //居中
// 注意這里為自定義組件的myObj屬性賦值以引用當(dāng)前MXML文檔
aTitleWindow.myObj = this;
}
]]>
</mx:Script>
<mx:Button label="打開對話框" click="openWindow(event);" x="404" y="24"/>
<mx:Label id="myLabel" text="wait..." width="200" x="375" y="110" fontWeight="bold" fontSize="18" color="#06C9F3"/>
</mx:Application>
|
posted on 2010-02-10 16:57
北國狼人的BloG 閱讀(522)
評論(0) 編輯 收藏