2

I have a menubar and a custom component in my main application in Flex. On clicking a menu item in the menubar, I need a custom event to be raised which could be listened by the custom component as well. Or it can be the menu event also, raised when selecting one of the menu items. How can i accomplish this?

If I am not wrong the menu item click event will propagate from the menubar to the application (in bubbling phase) and won't go the custom component which is its sibling.

Example Code:

 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx"
                       xmlns:code="http://code.google.com/p/flexlib/" >

 <fx:Script>
    <![CDATA[


                    protected function menuBar_itemClickHandler(event:MenuEvent):void
                    {
                            if(event.item.@label=='New File'){
                               //I dont want to write code like
                              // mainTab.someProperty= someproperty
                              //Instead if this event or other custom event 
                              //be raised which could be listened by the custom
                              //component and the listener could be written in the
                              //component itself
                             }
                    }

            ]]>
</fx:Script>

 <mx:MenuBar id="menuBar"
            labelField="@label"
            showRoot="false"
            width="100%" height="4%"
            horizontalCenter="0" verticalCenter="0"
            itemClick="menuBar_itemClickHandler(event)">

    <mx:dataProvider>
        <fx:XML>
            <root>
                <parent label="File">
                                            <node label="New File" />
                    <node label="Load" />
                    <node label="Save" />
                    <node label="Exit" />

                </parent>
                            </root>
                    </fx:XML>
    </mx:dataProvider>
</mx:MenuBar>
    <code:MDICanvas width="100%" height="95%">

       <!-- MY CUSTOM COMPONENT -->

   <local:MainTab id="mainTab" width="100%" height="100%" />

    </code:MDICanvas>
 </s:Application>
Arun
  • 187
  • 11
  • I think this is the right way to accomplish it. – Jarno Lahtinen Jun 03 '12 at 12:42
  • If they are siblings and exist within the same scope, can you get the reference of the MenuBar and addEventListener() on it? – bradj Jul 15 '12 at 14:48
  • Events can only travel up/down of parent-child hierarchy. It cannot go to a sibling. There are 2 workarounds- 1) Hold reference of either component in other and addEventListener in that component. 2) addEventListener in parent component of both(here it is Application). – Asad Apr 16 '13 at 09:59

1 Answers1

0

Use application frameworks such as parsley , swiz , robot legs ...to accomplish this easily. You can listen and propagate events in any scope.

santosh1220
  • 107
  • 7