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>