1. 程式人生 > >FLEX中給元件新增自定義事件

FLEX中給元件新增自定義事件

FLEX 系統提供的事件與DOM的事件基本上完全一致 但是和傳統的WEB開發不同的是  可以為自定義的元件新增自定義的事件    比如我們做了一個元件是一個登入框   當點選登入按鈕的時候觸發我們自定義的事件 比如叫"login"事件  雖然這個login事件 歸根結底還是某個按鈕的click事件 但自定義的事件比傳統的事件有什麼好處呢 :一是事件的名字是自定義的 可以形象的表示這個事件本身 而不像以前還要關心是哪個按鈕按了一下等等  這樣為元件與元件的通訊提供便利   下面的例子中自定義了一個元件叫testComponent , 這個自定義的元件中有一個按鈕和一個輸入框, 當按下這個按鈕的時候   新建一個新的事件叫shareData 並且shareData事件被宣告為一個textEvent ,  textEvent可以通過text屬性來傳遞資料(textInput控制元件的值) 。
EventTest.mxml中引用了這個自定義元件testComponent 並捕獲testComponent中的自定義事件shareData, 輸出testComponent 中textInput控制元件的字串 testComponent.mxml :(我們建立到:/src/view 資料夾下)
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <mx:VBoxxmlns:mx="http://www.adobe.com/2006/mxml"height="300">
  3. <!-- 宣告本元件將丟擲的事件 -->
  4. <mx:Metadata>
  5.  [Event(
    name="shareData",type="flash.events.TextEvent")]
  6. <!-- 這裡的 shareData相當於 click,將來的:event:TextEvent相當於e:MouseEvent -->
  7. </mx:Metadata>
  8. <mx:Script>
  9. <![CDATA[
  10.   private function fnOnClick_testComp():void {
  11.    //event1 建構函式 至少傳遞一個事件名,名字隨便起
  12.    var event1:TextEvent = new TextEvent("shareData");
  13.    event1.text = myTxtInput.text;
  14.    //使用disptchEvent 來丟擲建立的事件
  15.    dispatchEvent(event1);
  16.   }
  17.  ]]>
  18. </mx:Script>
  19. <mx:Labeltext="This is the Test component"/>
  20. <mx:TextInputid="myTxtInput"/>
  21. <!-- 當點選按鈕時進行自定義事件 -->
  22. <mx:Buttonlabel="clickMe"click="fnOnClick_testComp()"/>
  23. </mx:VBox
    >

eventTest.mxml :

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical"
  3. xmlns:view="view.*">
  4. <mx:Script>
  5. <![CDATA[
  6.    import mx.controls.Alert;
  7.    private function fnOnShareData(event:TextEvent):void {
  8.     Alert.show("event has been use. event.text => " + event.text );
  9.    }
  10.   ]]>
  11. </mx:Script>
  12. <!-- 呼叫我們自定義的元件  並處理它的shareData事件  就像click事件一樣使用 -->
  13. <view:testComponentshareData="fnOnShareData(event)"/>
  14. </mx:Application>

另外,下面這篇文章也很酷:

從零開始編寫一個flex元件。FLEX自定義控制元件。