zoukankan      html  css  js  c++  java
  • FLEX自定义事件

    有时候我们需要让两个组件之间实现联动,并且在其中传递数据,自定义事件机制可以帮助我们比较优雅的实现这种需要. 


    下面的例子,是打算实现一个列表和一个编辑框的联动. 

    编辑框代码 

    Xml代码  收藏代码
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" creationComplete="init()">  
    3.   
    4.     <mx:Script>  
    5.         <![CDATA[ 
    6.             import my.DummySelectEvent; 
    7.             import mx.controls.Alert; 
    8.             private function init():void 
    9.             { 
    10.                 DummySelectEvent.dispatcher.addEventListener(DummySelectEvent.SELECTED_DATA_CHANGE,dataChangeListener); 
    11.             } 
    12.              
    13.             private function dataChangeListener(event:DummySelectEvent):void 
    14.             { 
    15.                 var data = event.data; 
    16.                 //Alert.show(event.data.name); 
    17.                 detailPanel.changeMode(Detail.EDIT_SIMPLE,data); 
    18.             } 
    19.         ]]>  
    20.     </mx:Script>  
    21.       
    22.     <mx:HBox x="104" y="126" width="1000">  
    23.         <ns1:List>  
    24.         </ns1:List>  
    25.         <ns1:Detail id="detailPanel" x="104" y="135" widthInit="0" widthAdvanced="600">  
    26.         </ns1:Detail>  
    27.     </mx:HBox>  
    28.       
    29. </mx:Application>  


    列表代码 

    Xml代码  收藏代码
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%" height="300" xmlns:my="my.*" creationComplete="initList()" xmlns:local="*">  
    3.     <mx:Script>  
    4.         <![CDATA[ 
    5.             import my.DummySelectEvent; 
    6.             import mx.events.FlexEvent; 
    7.             import my.Dummy; 
    8.             import mx.collections.ArrayCollection; 
    9.             import mx.controls.Alert; 
    10.              
    11.             private var dummyList:ArrayCollection; 
    12.              
    13.             private var itemSelected:Boolean = false; 
    14.              
    15.             private function initList():void{ 
    16.                 dummyList = new ArrayCollection(); 
    17.                 for( var i:Number = 0;i<10;i++) 
    18.                 { 
    19.                     var dummy:Dummy = new Dummy(); 
    20.                     dummy.name = "name"+i; 
    21.                     dummy.email = "email"+i; 
    22.                     dummy.mobile = "mobile" +i; 
    23.                     dummy.address = "address"+i; 
    24.                     dummy.qq = "qq"+i; 
    25.                     dummy.msn = "msn"+i; 
    26.                      
    27.                     dummyList.addItem(dummy); 
    28.                      
    29.                 } 
    30.                 dataGrid.dataProvider = dummyList; 
    31.             } 
    32.              
    33.             private function itemSelect():void 
    34.             { 
    35.                 var dataChangeEvent:DummySelectEvent = new DummySelectEvent(dataGrid.selectedItem,DummySelectEvent.SELECTED_DATA_CHANGE); 
    36.                 DummySelectEvent.dispatcher.dispatchEvent(dataChangeEvent); 
    37.             } 
    38.              
    39.             private function deleteItem():void{ 
    40.                 Alert.show("确定要删除?"); 
    41.             } 
    42.              
    43.         ]]>  
    44.     </mx:Script>  
    45.     <!--<mx:Label id="selectedItem" visible="false" data = "{dataGrid.selectedItem}" dataChange="itemSelect()"/>-->  
    46.     <mx:Spacer height="2">  
    47.     </mx:Spacer>  
    48.     <local:ListBar>  
    49.     </local:ListBar>  
    50.     <mx:DataGrid id="dataGrid"   
    51.         x="0" y="0" width="100%" height="100%"  
    52.         data="{dataGrid.selectedItem}"  
    53.         dataChange="itemSelect()" >  
    54.         <mx:columns>  
    55.             <mx:DataGridColumn headerText="name" dataField="name"/>  
    56.             <mx:DataGridColumn headerText="email" dataField="email"/>  
    57.             <mx:DataGridColumn headerText="mobile" dataField="mobile"/>  
    58.         </mx:columns>  
    59.     </mx:DataGrid>  
    60.     <mx:HBox width="100%">  
    61.         <mx:Button label="删除选中" enabled="{itemSelected}" click="deleteItem()"/>  
    62.     </mx:HBox>  
    63.       
    64. </mx:Panel>  


    DummyVO代码 

    Java代码  收藏代码
    1. package my  
    2. {  
    3.     [Bindable]  
    4.     public class Dummy  
    5.     {  
    6.         public function Dummy()  
    7.         {  
    8.               
    9.         }  
    10.           
    11.         public var name:String;  
    12.         public var mobile:String;  
    13.         public var email:String;  
    14.           
    15.         public var qq:String;  
    16.         public var msn:String;  
    17.         public var address:String;  
    18.           
    19.     }  
    20. }  


    自定义事件代码 

    Java代码  收藏代码
    1. package my  
    2. {  
    3.     import flash.events.Event;  
    4.     import flash.events.EventDispatcher;  
    5.       
    6.     public class DummySelectEvent extends Event  
    7.     {  
    8.         public var data:Object;  
    9.         public static var SELECTED_DATA_CHANGE:String = "selectedDataChange";  
    10.         public static const dispatcher:EventDispatcher=new EventDispatcher();  
    11.         public function DummySelectEvent(data:Object,type:String)  
    12.         {  
    13.             super(type,true,false);  
    14.             this.data = data;     
    15.         }  
    16.           
    17.         override public function clone():Event  
    18.         {  
    19.             return new DummySelectEvent(data,type);  
    20.         }  
    21.     }  
    22. }  


    主程序代码 

    Xml代码  收藏代码
      1. <?xml version="1.0" encoding="utf-8"?>  
      2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" creationComplete="init()">  
      3.   
      4.     <mx:Script>  
      5.         <![CDATA[ 
      6.             import my.DummySelectEvent; 
      7.             import mx.controls.Alert; 
      8.             private function init():void 
      9.             { 
      10.                 DummySelectEvent.dispatcher.addEventListener(DummySelectEvent.SELECTED_DATA_CHANGE,dataChangeListener); 
      11.             } 
      12.              
      13.             private function dataChangeListener(event:DummySelectEvent):void 
      14.             { 
      15.                 var data = event.data; 
      16.                 //Alert.show(event.data.name); 
      17.                 detailPanel.changeMode(Detail.EDIT_SIMPLE,data); 
      18.             } 
      19.         ]]>  
      20.     </mx:Script>  
      21.       
      22.     <mx:HBox x="104" y="126" width="1000">  
      23.         <ns1:List>  
      24.         </ns1:List>  
      25.         <ns1:Detail id="detailPanel" x="104" y="135" widthInit="0" widthAdvanced="600">  
      26.         </ns1:Detail>  
      27.     </mx:HBox>  
      28.       
      29. </mx:Application>  
  • 相关阅读:
    最大子数组问题(分治策略实现)
    Solving the Detached Many-to-Many Problem with the Entity Framework
    Working With Entity Framework Detached Objects
    Attaching detached POCO to EF DbContext
    如何获取qq空间最近访问人列表
    Health Monitoring in ASP.NET 2.0
    problem with displaying the markers on Google maps
    WebMatrix Database.Open… Close() and Dispose()
    Accessing and Updating Data in ASP.NET: Retrieving XML Data with XmlDataSource Control
    Create web setup project that has crystal reports and sql script run manually on client system
  • 原文地址:https://www.cnblogs.com/BoyeeStudio/p/3168669.html
Copyright © 2011-2022 走看看