FLEX自定义事件

时间：2023-03-09 08:56:00
FLEX自定义事件

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

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

编辑框代码

  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. <mx:Script>
  4. <![CDATA[
  5. import my.DummySelectEvent;
  6. import mx.controls.Alert;
  7. private function init():void
  8. {
  9. DummySelectEvent.dispatcher.addEventListener(DummySelectEvent.SELECTED_DATA_CHANGE,dataChangeListener);
  10. }
  11. private function dataChangeListener(event:DummySelectEvent):void
  12. {
  13. var data = event.data;
  14. //Alert.show(event.data.name);
  15. detailPanel.changeMode(Detail.EDIT_SIMPLE,data);
  16. }
  17. ]]>
  18. </mx:Script>
  19. <mx:HBox x="104" y="126" width="1000">
  20. <ns1:List>
  21. </ns1:List>
  22. <ns1:Detail id="detailPanel" x="104" y="135" widthInit="0" widthAdvanced="600">
  23. </ns1:Detail>
  24. </mx:HBox>
  25. </mx:Application>

列表代码

  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. private var dummyList:ArrayCollection;
  11. private var itemSelected:Boolean = false;
  12. private function initList():void{
  13. dummyList = new ArrayCollection();
  14. for( var i:Number = 0;i<10;i++)
  15. {
  16. var dummy:Dummy = new Dummy();
  17. dummy.name = "name"+i;
  18. dummy.email = "email"+i;
  19. dummy.mobile = "mobile" +i;
  20. dummy.address = "address"+i;
  21. dummy.qq = "qq"+i;
  22. dummy.msn = "msn"+i;
  23. dummyList.addItem(dummy);
  24. }
  25. dataGrid.dataProvider = dummyList;
  26. }
  27. private function itemSelect():void
  28. {
  29. var dataChangeEvent:DummySelectEvent = new DummySelectEvent(dataGrid.selectedItem,DummySelectEvent.SELECTED_DATA_CHANGE);
  30. DummySelectEvent.dispatcher.dispatchEvent(dataChangeEvent);
  31. }
  32. private function deleteItem():void{
  33. Alert.show("确定要删除？");
  34. }
  35. ]]>
  36. </mx:Script>
  37. <!--<mx:Label id="selectedItem" visible="false" data = "{dataGrid.selectedItem}" dataChange="itemSelect()"/>-->
  38. <mx:Spacer height="2">
  39. </mx:Spacer>
  40. <local:ListBar>
  41. </local:ListBar>
  42. <mx:DataGrid id="dataGrid"
  43. x="0" y="0" width="100%" height="100%"
  44. data="{dataGrid.selectedItem}"
  45. dataChange="itemSelect()" >
  46. <mx:columns>
  47. <mx:DataGridColumn headerText="name" dataField="name"/>
  48. <mx:DataGridColumn headerText="email" dataField="email"/>
  49. <mx:DataGridColumn headerText="mobile" dataField="mobile"/>
  50. </mx:columns>
  51. </mx:DataGrid>
  52. <mx:HBox width="100%">
  53. <mx:Button label="删除选中" enabled="{itemSelected}" click="deleteItem()"/>
  54. </mx:HBox>
  55. </mx:Panel>

DummyVO代码

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

自定义事件代码

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

主程序代码

    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. <mx:Script>
    4. <![CDATA[
    5. import my.DummySelectEvent;
    6. import mx.controls.Alert;
    7. private function init():void
    8. {
    9. DummySelectEvent.dispatcher.addEventListener(DummySelectEvent.SELECTED_DATA_CHANGE,dataChangeListener);
    10. }
    11. private function dataChangeListener(event:DummySelectEvent):void
    12. {
    13. var data = event.data;
    14. //Alert.show(event.data.name);
    15. detailPanel.changeMode(Detail.EDIT_SIMPLE,data);
    16. }
    17. ]]>
    18. </mx:Script>
    19. <mx:HBox x="104" y="126" width="1000">
    20. <ns1:List>
    21. </ns1:List>
    22. <ns1:Detail id="detailPanel" x="104" y="135" widthInit="0" widthAdvanced="600">
    23. </ns1:Detail>
    24. </mx:HBox>
    25. </mx:Application>

相关文章