FLEX自定义事件

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


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

编辑框代码 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import my.DummySelectEvent;
            import mx.controls.Alert;
            private function init():void
            {
                DummySelectEvent.dispatcher.addEventListener(DummySelectEvent.SELECTED_DATA_CHANGE,dataChangeListener);
            }

            private function dataChangeListener(event:DummySelectEvent):void
            {
                var data = event.data;
                //Alert.show(event.data.name);
                detailPanel.changeMode(Detail.EDIT_SIMPLE,data);
            }
        ]]>
    </mx:Script>

    <mx:HBox x="104" y="126" width="1000">
        <ns1:List>
        </ns1:List>
        <ns1:Detail id="detailPanel" x="104" y="135" widthInit="0" widthAdvanced="600">
        </ns1:Detail>
    </mx:HBox>

</mx:Application>

列表代码 

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%" height="300" xmlns:my="my.*" creationComplete="initList()" xmlns:local="*">
    <mx:Script>
        <![CDATA[
            import my.DummySelectEvent;
            import mx.events.FlexEvent;
            import my.Dummy;
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;

            private var dummyList:ArrayCollection;

            private var itemSelected:Boolean = false;

            private function initList():void{
                dummyList = new ArrayCollection();
                for( var i:Number = 0;i<10;i++)
                {
                    var dummy:Dummy = new Dummy();
                    dummy.name = "name"+i;
                    dummy.email = "email"+i;
                    dummy.mobile = "mobile" +i;
                    dummy.address = "address"+i;
                    dummy.qq = "qq"+i;
                    dummy.msn = "msn"+i;

                    dummyList.addItem(dummy);

                }
                dataGrid.dataProvider = dummyList;
            }

            private function itemSelect():void
            {
                var dataChangeEvent:DummySelectEvent = new DummySelectEvent(dataGrid.selectedItem,DummySelectEvent.SELECTED_DATA_CHANGE);
                DummySelectEvent.dispatcher.dispatchEvent(dataChangeEvent);
            }

            private function deleteItem():void{
                Alert.show("确定要删除？");
            }

        ]]>
    </mx:Script>
    <!--<mx:Label id="selectedItem" visible="false" data = "{dataGrid.selectedItem}" dataChange="itemSelect()"/>-->
    <mx:Spacer height="2">
    </mx:Spacer>
    <local:ListBar>
    </local:ListBar>
    <mx:DataGrid id="dataGrid"
        x="0" y="0" width="100%" height="100%"
        data="{dataGrid.selectedItem}"
        dataChange="itemSelect()" >
        <mx:columns>
            <mx:DataGridColumn headerText="name" dataField="name"/>
            <mx:DataGridColumn headerText="email" dataField="email"/>
            <mx:DataGridColumn headerText="mobile" dataField="mobile"/>
        </mx:columns>
    </mx:DataGrid>
    <mx:HBox width="100%">
        <mx:Button label="删除选中" enabled="{itemSelected}" click="deleteItem()"/>
    </mx:HBox>

</mx:Panel>

DummyVO代码 

package my
{
    [Bindable]
    public class Dummy
    {
        public function Dummy()
        {

        }

        public var name:String;
        public var mobile:String;
        public var email:String;

        public var qq:String;
        public var msn:String;
        public var address:String;

    }
}

自定义事件代码 

package my
{
    import flash.events.Event;
    import flash.events.EventDispatcher;

    public class DummySelectEvent extends Event
    {
        public var data:Object;
        public static var SELECTED_DATA_CHANGE:String = "selectedDataChange";
        public static const dispatcher:EventDispatcher=new EventDispatcher();
        public function DummySelectEvent(data:Object,type:String)
        {
            super(type,true,false);
            this.data = data;
        }

        override public function clone():Event
        {
            return new DummySelectEvent(data,type);
        }
    }
}

主程序代码 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import my.DummySelectEvent;
            import mx.controls.Alert;
            private function init():void
            {
                DummySelectEvent.dispatcher.addEventListener(DummySelectEvent.SELECTED_DATA_CHANGE,dataChangeListener);
            }

            private function dataChangeListener(event:DummySelectEvent):void
            {
                var data = event.data;
                //Alert.show(event.data.name);
                detailPanel.changeMode(Detail.EDIT_SIMPLE,data);
            }
        ]]>
    </mx:Script>

    <mx:HBox x="104" y="126" width="1000">
        <ns1:List>
        </ns1:List>
        <ns1:Detail id="detailPanel" x="104" y="135" widthInit="0" widthAdvanced="600">
        </ns1:Detail>
    </mx:HBox>

</mx:Application>