I'm trying to create a Context based MenuBar for the top of my application.

What I want is when a user clicks on a Container e.g. a Canvas, the top MenuBar changes. Also, the Events need to be sent back to the Container.

What I've tried without success:
  1. Created a MenuBar in the main Application with the id "contextMenuBar"
  2. Created Canvases with a public variable menuBar:MenuBar and instanciate it.
  3. Assigned an XML dataProvider and event listeners to it.
  4. When the user clicks on the Canvas I set Application.application.contextMenuBar = myMenuBar.


Doing this, the contextMenuBar just doesn't change at all.

I have also tried using addChild(menuBar), this appears to make a copy of the menuBar and I loose the listeners.

CanvasWithMenuBar class
Code:
package com.ab.containers
{
	import mx.containers.Canvas;
	import mx.controls.MenuBar;

	public class CanvasWithMenuBar extends Canvas
	{
		[Inspectable] public var menuBar:MenuBar;
		
		public function CanvasWithMenuBar()
		{
			super();
			menuBar = new MenuBar();			
		}
		
	}
}
Application MXML
Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.ab.containers.*">

	<mx:Script>
		<![CDATA[
			import mx.events.MenuEvent;		
			import com.ab.containers.CanvasWithMenuBar;
			import mx.controls.MenuBar;	
			import mx.controls.Alert;		

			private function init():void
			{
				
				//menu
				
				var menuXML:XML =	<n>
										<n label="menu1" action="action1"/>
										<n label="menu2" action="action2"/>
									</n>;
							
				canvas1.menuBar.dataProvider = menuXML;
				
				//Add listeners
				canvas1.menuBar.addEventListener(MenuEvent.ITEM_CLICK, menuItemClickListener);
			}
			
			public function menuItemClickListener(e:MenuEvent):void
			{
				Alert.show(String(e.item.@action));
			}
			
			private function setContextMenu(e:Event):void
			{
				contextMenuBar = MenuBar(e.currentTarget.menuBar);
			}
							
		]]>
	</mx:Script>

	<ns1:CanvasWithMenuBar x="63" y="174" width="100" height="100" id="canvas1" click="setContextMenu(event)" backgroundColor="#FF0000" useHandCursor="true" buttonMode="true">
	</ns1:CanvasWithMenuBar>
	<mx:MenuBar x="0" y="0" width="100%" id="contextMenuBar"></mx:MenuBar>
	
</mx:Application>

Hopefully this makes sense.

Any Ideas?