随笔-159  评论-114  文章-7  trackbacks-0
FLEX中给组件添加自定义事件
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="http://www.adobe.com/2006/mxml" height="300">
<!-- 声明本组件将抛出的事件 -->
<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="http://www.adobe.com/2006/mxml" layout="vertical"
 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="http://www.adobe.com/2006/mxml"
     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="http://www.adobe.com/2006/mxml" fontSize="12" xmlns:ns1="*" layout="absolute">
    <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 阅读(518) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。
网站导航:
 
Powered by: 博客园 模板提供：沪江博客 Copyright ©2024 北国狼人的BloG