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>