Flex 4 disptaching custom event from custom component

Question

This is similar to the question asked here. I am dispatching custom event "ShopEvent" but i am getting error "Type Coercion failed: cannot convert flash.events::Event@81ecb79 to com.events.ShopEvent"

Note: Error is thrown from the parent custom component (3rd code snippet), I have added more details there

This is my custom event. See the first constant, I copy pasted the event name in custom components.

package com.events
{
    import flash.events.Event;

    public class ShopEvent extends Event
    {

        public static var MENU_SELECTED:String = "menuSelected";
        public static var SUBMENU_SELECTED:String = "submenuSelected";
        public static var ITEM_SELECTED:String = "itemSelected";
        public static var NAV_NEXT:String = "navNext";
        public static var NAV_PREVIOUS:String = "navPrevious";
        public static var NAV_LAST:String = "navLast";
        public static var NAV_FIRST:String = "navFirst";
        public static var CLOSE:String = "close";

        public var menuIdx:int;
        //public var menuType:String;
        public var menuId:int;
        public var menuName:String;
        public var itemId:int;
        public function ShopEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);
        }
    }
}

Custom component. Check the metadata tags. The event registered correctly

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="72" height="82"
         mouseChildren="false"
         creationComplete="init()"
         click="onClick()"
         buttonMode="true">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center"/>
    </s:layout>
    <fx:Script>
        <![CDATA[
            import com.events.ShopEvent;

            import mx.controls.Image;
            public var menuId:int;

            [Bindable]
            public var menuText:String;
            [Bindable]
            public var bmp:Bitmap;

            private function init():void{
                //img.addChild(bmp);
            }
            private function onClick():void{
                var e:ShopEvent = new ShopEvent(ShopEvent.MENU_SELECTED);
                e.menuId = menuId;
                e.menuName = menuText;
                dispatchEvent(e);
            }

        ]]>

    </fx:Script>
    <fx:Metadata>
        [Event(name="menuSelected", type="com.events.ShopEvent")]
    </fx:Metadata>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Label text="{menuText}" fontWeight="bold" fontSize="12" width="44"/>
    <mx:Image id = "img" width="57" height="47" source="{bmp}"/>

</s:Group>

Parent custom component. This is parent component of above custom component. It listens to the menuSelected event and it simply routes the event to the listeneres. Check the meatadata tags. Event registration is properly done.

However, the error is coming at

           menus[i].addEventListener( ShopEvent.MENU_SELECTED,function(e:ShopEvent):void{dispatchEvent(e);});

with my knowledge, I dont see any problem in the code. Is there anything wrong in it?

Update

Surprisingly, if I create a "new" instance of shopwevent will solve the problem, but sadly, I need to close all the properties of the event object. I hope this is not a limitation of flex.

                menus[i].addEventListener( ShopEvent.MENU_SELECTED,function(e:ShopEvent):void{dispatchEvent(new ShopEvent(ShopEvent.MENU_SELECTED));});

Complete code

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         width="720" height="605"
         creationComplete="init()" xmlns:shop="UI.shop.*" xmlns:hasu="UI.shop.hasu.*"
         >
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Metadata>
        [Event(name="navNext", type="com.events.ShopEvent")]
        [Event(name="navPrevious", type="com.events.ShopEvent")]
        [Event(name="menuSelected", type="com.events.ShopEvent")]
        [Event(name="submenuSelected", type="com.events.ShopEvent")]
        [Event(name="itemSelected", type="com.events.ShopEvent")]
        [Event(name="close", type="com.events.ShopEvent")]
    </fx:Metadata>

    <fx:Script>
        <![CDATA[
            import com.events.ShopEvent;

            private const MAX_SLOTS:int = 6;

            public var menus:Vector.<ShopMenuItemView>;
            public var itemSlots:Vector.<ShopItemSlotView> = new Vector.<ShopItemSlotView>(MAX_SLOTS);

            private function init():void{
                trace("BEGIN:UI.shop.hasu.ShopView.init");
                initSlots();
            }

            private function initSlots():void{

                for (var i:int = 0;i<itemSlots.length;i++){
                     var slot:ShopItemSlotView = new ShopItemSlotView();
                    itemSlots[i] = slot; 
                    itemSlotsContainer.addElement(slot);
                }
            }

            public function initMenus():void{
                trace("BEGIN:UI.shop.hasu.ShopView.initMenus");
                for (var i:int = 0;i < menus.length;i++){
                    menuContainer.addElement(menus[i]);
                    menus[i].addEventListener(ShopEvent.MENU_SELECTED,function(e:ShopEvent):void{dispatchEvent(e);});
                    //menus[i].addEventListener( ShopEvent.MENU_SELECTED,function(e:ShopEvent):void{dispatchEvent(new ShopEvent(ShopEvent.MENU_SELECTED));});
                }
            }



        ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout />
    </s:layout>
    <s:VGroup name="top">
        <hasu:ShopPlayerAttributesView id="attribsComp"/>
        <s:Group id="menuContainer" name="menus">
            <s:layout>
                <s:HorizontalLayout />
            </s:layout>
        </s:Group>
    </s:VGroup>
    <s:Group>
        <s:layout>
            <s:HorizontalLayout />
        </s:layout>
        <s:Button label="&lt;" />
        <s:Group id = "itemSlotsContainer" name="items">
            <s:layout>
                <s:TileLayout requestedColumnCount="3" requestedRowCount="3"/>
            </s:layout>
        </s:Group>
        <s:Button label="&gt;" />
    </s:Group>
</s:Group>

Answer 1

You must overwrite clone() method for custom event classes. Events could be cloned several times during propagation.

Answer 2

Jack's answer is correct. It is given in the flex documentation.

You are required to override the Event.clone() method in your subclass. The clone() method returns a cloned copy of the event object by setting the type property and any new properties in the clone. Typically, you define the clone() method to return an event instance created with the new operator.

For full details read Working with events under creating subclass from the event section

A good place to understand the custom events for new flex/as3 developers to read Dispatching the custom events

Note: the links are pointing to Flex 4.6 documentation but the custom events part is not version dependent (only mxml part may different for flex 3 and prior versions)

Answer 3

you must return new Constructor of the event class like:

return new ShopEvent(type,...); //in the clone() method;

The clone() method returns a cloned copy of the event object by setting the type property and any new properties in the clone. Typically, you define the clone() method to return an event instance created with the new operator.

Answer 4

The event you are dispatching is from type flash.events.Event and the event that your listener is expecting for is from type: com.events.ShopEvent.

This is simply what the error message means.