Menubar load modules for each sub-menu

Question

I am creating an application using the MENUBAR but cannot get a module to open when a sub-menu is clicked. I have stripped my app down to bare bones to eliminate other factors. The menubar has several main options, such as, Button1, Button2, Button3 and then each has a sub-menu dropdown. If Button1 has Button1Sub1 and Button1Sub2 dropdowns I want to have a different module launch when either of the sub-menus are clicked.
I have been successful in using ModuleManager to open a particular module referencing the creationComplete="moduleLoadHandler()" but not by selecting a menu item from the menubar. My application needs to be as user-friendly and Windows-like as possible. There are many different modules which need to be loaded and unloaded.
I have attached a screenshot image of my project tree and circled the ActionModule.swf file to show its location.
I have attached my code below:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="creationHandler();" >
    <mx:Script>
        <![CDATA[
            import mx.controls.menuClasses.IMenuBarItemRenderer;
            import mx.controls.MenuBar;
            import mx.controls.menuClasses.MenuBarItem;
            import mx.controls.Alert;
import mx.modules.Module;
import mx.events.ModuleEvent;
import mx.modules.ModuleManager;
import mx.modules.IModuleInfo;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.events.FlexEvent;
import mx.events.MenuEvent;
            import mx.collections.*;
            public var _moduleInfo:IModuleInfo;
            [Bindable]
            public var menuBarCollection:XMLListCollection;
            private var menubarXML:XMLList =
                <>
                    <menuitem label="Menu1" data="top">
                        <menuitem label="MenuItem 1-A" data="1A" itemClick="moduleLoadHandler()"/>
                        <menuitem label="MenuItem 1-B" data="1B"/>
                    </menuitem>
                    <menuitem label="Menu2" data="top">
                        <menuitem label="MenuItem 2-A" type="check"  data="2A"/>
                        <menuitem type="separator"/>
                        <menuitem label="MenuItem 2-B" >
                            <menuitem label="SubMenuItem 3-A" type="radio"
                                groupName="one" data="3A"/>
                            <menuitem label="SubMenuItem 3-B" type="radio"
                                groupName="one" data="3B"/>
                        </menuitem>
                    </menuitem>
                    <menuitem label="Menu3" data="top">
                        <menuitem label="MenuItem 3-A" data="3A"/>
                        <menuitem label="MenuItem 3-B" data="3B"/>
                    </menuitem>
                    <menuitem label="Menu4" data="top">
                        <menuitem label="MenuItem 4-A" data="4A"/>
                        <menuitem label="MenuItem 4-B" data="4B"/>
                    </menuitem>                                       
                </>;
            private function creationHandler():void{
menuBarCollection = new XMLListCollection(menubarXML);
private function moduleLoadHandler(event:ModuleEvent ):void{
canvas.addChild( _moduleInfo.factory.create() as Module );
_moduleInfo = ModuleManager.getModule('ActionModule.swf');
_moduleInfo.addEventListener(ModuleEvent.READY, moduleLoadHandler);
_moduleInfo.load();
            // Event handler for the MenuBar control's itemClick event.
            private function menuHandler(event:MenuEvent):void  {
                // Don't open the Alert for a menu bar item that
                // opens a popup submenu.
                //if (event.item.@data != "top") {
                //    Alert.show("Label: " + event.item.@label + "\n" +
                //        "Data: " + event.item.@data, "Clicked menu item");
            private function onTopSelection(event:MenuEvent):void{
                var mb:MenuBar=event.target as MenuBar;
                var selectedIndex:int=mb.selectedIndex;
                for (var i:int=0;i<mb.menuBarItems.length;i++){
                    if(i==selectedIndex){
                        (mb.menuBarItems[i] as MenuBarItem).setStyle("fontWeight","bold");                   
                    else{
                        (mb.menuBarItems[i] as MenuBarItem).setStyle("fontWeight","normal");                           
         ]]>
    </mx:Script>
    <mx:Canvas id="canvas" height="75%" width="75%"
        paddingTop="10" paddingLeft="10">
        <mx:MenuBar labelField="@label" itemClick="menuHandler(event);" dataProvider="{menuBarCollection}" change="onTopSelection(event)" />
    </mx:Canvas>
</mx:Application>

Answer 1

Hi,
   I am also doing the same way, but ended up with some issues.
I have a Main Application with a menu Bar on Top and Rest of the area occupied by a ModuleLoader.
First I set the URL to login module, on successful login I initialize my menu Bar based on User role and load a new module, it contains only a SuperTabNavigator.
On click of an item in my Application Menu, I add a Custom Componenet built on Canvas (Named MyCanMod , this contains a Module loader and a progress bar in it , I have attached the code) as a tab to the tab navigator.
On menu item click, I take the data of my menu item and set that as the URL of my Module Loader inside the Custom canvas. Then it is added as a tab to my tab navigator.
      private function openItem(event:MenuEvent):void
var myModule:MyCanMod = new MyCanMod();                tabNav.addChild(myModule);
                tabNav.selectedChild = myModule;
                myModule.label = event.item.@label;
                myModule.icon = document_icon;
                myModule.urlParam = event.item.@module;
urlParam is a bined to the module Loader url in my Custom componenet.
All works fine.  I am not unloading any modules and all the module loader are set to current domain.
When the user logs out and logs back with out refreshing the browser I get Type Error or some time null Object error and it is random. If I refresh the browser and login back, every thing is fine.
I do have reference for IDragManager,HistoryManager,PopUpManager,RemoteObject in main application.
I am not concerned about unloading modules now, but then on Tab close event I unloaded the module, and that did not solve the problem.
I get an error like
TypeError: Error #1034: Type Coercion failed: cannot convert flexlib.controls::PromptingTextInput@6152a851 to flexlib.controls.PromptingTextInput.
            at mx.core::UIComponent/createReferenceOnParentDocument()
            at mx.core::Container/createComponentFromDescriptor()
            at mx.core::Container/createComponentsFromDescriptors()
            at mx.core::Container/createChildren()
            at mx.core::UIComponent/initialize()
            at mx.core::Container/initialize()
            at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()
            at mx.core::Container/http://www.adobe.com/2006/flex/mx/internal::childAdded()
            at mx.core::Container/addChildAt()
            at mx.core::Container/addChild()
Any help is appreciated; I am really struck with it, please help.