FLEX 系統提供的事件與DOM的事件基本上完全一致 但是和傳統的WEB開發不同的是 可以為自定義的組件添加自定義的事件 比如我們做了一個組件是一個登錄框 當點擊登錄按鈕的時候觸發我們自定義的事件 比如叫"login"事件 雖然這個login事件 歸根結底還是某個按鈕的click事件 但自定義的事件比傳統的事件有什么好處呢 ：一是事件的名字是自定義的 可以形象的表示這個事件本身 而不像以前還要關心是哪個按鈕按了一下等等 這樣為組件與組件的通訊提供便利 下面的例子中自定義了一個組件叫testComponent , 這個自定義的組件中有一個按鈕和一個輸入框, 當按下這個按鈕的時候 新建一個新的事件叫shareData
并且shareData事件被聲明為一個textEvent ， textEvent可以通過text屬性來傳遞數據（textInput控件的值） 。
EventTest.mxml中引用了這個自定義組件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 構造函數 至少傳遞一個事件名
var event:TextEvent = new TextEvent("shareData");
event.text = myTxtInput.text;
//使用disptchEvent 來拋出創建的事件
dispatchEvent(event);
}
]]>
</mx:Script>
<mx:Label text="This is the Test component" />
<mx:TextInput id="myTxtInput"/>
<!-- 當點擊按鈕時進行自定義事件 -->
<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>
<!-- 調用我們自定義的組件 并處理它的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="請在此輸入您的名字！" 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;
// 定義一個變量來獲取對主應用程序的引用
public var myObj:Object;
// 該方法用來關閉彈出的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;
// 響應按鈕單擊事件，彈出myTitleWindow對話框
private function openWindow(event:MouseEvent):void {
// 使用PopUpManager.createPopUp方法彈出myTitleWindow
var aTitleWindow:title=title(PopUpManager.createPopUp(this,title, true));
PopUpManager.centerPopUp(aTitleWindow); //居中
// 注意這里為自定義組件的myObj屬性賦值以引用當前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 閱讀(521)
評論(0) 編輯 收藏