I have a MenuBar which contains general menu items like File, View, Tools ,Help.
I have sub items in each of those menuitems.
The problem is that i want to open the 'File' menu automatically when i press Alt+f key.
I could capture the keyevents on the view.
But how to open the File Menu of the MenuBar (what is the function that needs to be called from MenuBar Class to popup those sub menuitems) ?
I have searched for some information on google .. but cudnt find.
or else if u have any better solution or example ..plz do post it.
<root>
<menuitem label="File">
<menuitem label="New" enabled="false"/>
<menuitem label="Open.." enabled="false"/>
<menuitem label="Save" enabled="false"/>
<menuitem label="Restore" enabled="false"/>
<menuitem label="Print" enabled="true"/>
<menuitem type="seperator" enabled="false"/>
<menuitem label="Exit" enabled="true"/>
</menuitem>
<menuitem label="View" accesskey="v">
<menuitem label="Zoom In" enabled="true" maxValue="200"/>
<menuitem label="Zoom Out" enabled="true" maxValue="25"/>
</menuitem>
<menuitem label="Tools" enabled="false">
<menuitem label="item1" enabled="false"/>
<menuitem label="item2" enabled="false"/>
</menuitem>
</root>
Thanks in advance :)
Sriss
To open a menu at its position :
var fileMenu:Menu = mnuBar.getMenuAt(0);
pnt : Point = new Point(mnuBar.x,mnuBar.y + mnuBar.height);
pnt = localToGlobal(pnt);
fileMenu.show(pnt.x,pnt.y);
I solved it :)
var fileMenu:Menu = myMenuBar.getMenuAt(0);
fileMenu.show();
It works, but now the problem is .. the submenu is popping out at (0,0) location of the application not at the file Menu item ..!!!
It's a fake Menu!
A better way to do it is:
e.preventDefault(); // will play against pressed ESC, too
menuBar.setFocus();
menuBar.dispatchEvent(new KeyboardEvent(KeyboardEvent.KEY_DOWN, false, false, 0, Keyboard.RIGHT));
Related
How can I develop a 2 level horizontal menu in flex 3? I want a sub menu to appear when you mouse over the 1st level.
The Menu control has this functionality built in. Here's Adobe's online documentation with some examples for you to check out.
Example:
<?xml version="1.0"?>
<!-- menus/SimpleMenuControl.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
<![CDATA[
// Import the Menu control.
import mx.controls.Menu;
// Create and display the Menu control.
private function createAndShow():void {
var myMenu:Menu = Menu.createMenu(null, myMenuData, false);
myMenu.labelField="#label";
myMenu.show(10, 10);
}
]]>
</mx:Script>
<!-- Define the menu data. -->
<mx:XML format="e4x" id="myMenuData">
<root>
<menuitem label="MenuItem A" >
<menuitem label="SubMenuItem A-1" enabled="false"/>
<menuitem label="SubMenuItem A-2"/>
</menuitem>
<menuitem label="MenuItem B" type="check" toggled="true"/>
<menuitem label="MenuItem C" type="check" toggled="false"/>
<menuitem type="separator"/>
<menuitem label="MenuItem D" >
<menuitem label="SubMenuItem D-1" type="radio"
groupName="one"/>
<menuitem label="SubMenuItem D-2" type="radio"
groupName="one" toggled="true"/>
<menuitem label="SubMenuItem D-3" type="radio"
groupName="one"/>
</menuitem>
</root>
</mx:XML>
<mx:VBox>
<!-- Define a Button control to open the menu -->
<mx:Button id="myButton"
label="Open Menu"
click="createAndShow();"/>
</mx:VBox>
</mx:Application>
Having this code in a flex3 project worked (note the enabled property on the sixth item):
<mx:XMLList id="items">
<menuitem label="file">
<menuitem label="file.new" data="New"/>
<menuitem label="file.saveAs" data="SaveAs"/>
<menuitem label="file.open" data="Open"/>
<menuitem label="file.close" data="Close"/>
</menuitem>
<menuitem label="business">
<menuitem label="business.add" data="AddBusiness"/>
<menuitem label="business.delete" enabled="{someproperty.selected}" data="DeleteBusiness"/>
</menuitem>
<menuitem label="help">
<menuitem label="help.about" data="About" />
</menuitem>
</mx:XMLList>
However fx:XMLList can't handle binding in that way. This code gives a compilation error:
<fx:XMLList id="items">
<menuitem label="file">
<menuitem label="file.new" data="New"/>
<menuitem label="file.saveAs" data="SaveAs"/>
<menuitem label="file.open" data="Open"/>
<menuitem label="file.close" data="Close"/>
</menuitem>
<menuitem label="business">
<menuitem label="business.add" data="AddBusiness"/>
<menuitem label="business.delete" enabled="{someproperty.selected}" data="DeleteBusiness"/>
</menuitem>
<menuitem label="help">
<menuitem label="help.about" data="About" />
</menuitem>
</fx:XMLList>
1120: Access of undefined property items.
I suppose you are compiling your project in strict mode and that you are using the items XMLList directly as dataProvider for some component (at least it was the only way I've found to reproduce the problem), like this:
<s:List>
<s:dataProvider>
<s:XMLListCollection>
<fx:XMLList id="items">
<menuitem label="file">
<menuitem label="file.new" data="New"/>
<menuitem label="file.saveAs" data="SaveAs"/>
<menuitem label="file.open" data="Open"/>
<menuitem label="file.close" data="Close"/>
</menuitem>
<menuitem label="business">
<menuitem label="business.add" data="AddBusiness"/>
<menuitem label="business.delete" enabled="{someproperty.selected}" data="DeleteBusiness"/>
</menuitem>
<menuitem label="help">
<menuitem label="help.about" data="About"/>
</menuitem>
</fx:XMLList>
</s:XMLListCollection>
</s:dataProvider>
</s:List>
This reproduces the same error (#1120) you mentioned. In order to fix this, you have to declare the XMLList prior to its container (in the example it's a List), in the <fx:Declarations> block. This way you are assuring that the items reference will exist before the container is created, which is what strict mode verifies during compilation.
<fx:Declarations>
<fx:XMLList id="items">
<menuitem label="file">
<menuitem label="file.new" data="New"/>
<menuitem label="file.saveAs" data="SaveAs"/>
<menuitem label="file.open" data="Open"/>
<menuitem label="file.close" data="Close"/>
</menuitem>
<menuitem label="business">
<menuitem label="business.add" data="AddBusiness"/>
<menuitem label="business.delete" enabled="{someproperty.selected}" data="DeleteBusiness"/>
</menuitem>
<menuitem label="help">
<menuitem label="help.about" data="About"/>
</menuitem>
</fx:XMLList>
</fx:Declarations>
<s:List>
<s:dataProvider>
<s:XMLListCollection source="{ items }"/>
</s:dataProvider>
</s:List>
Update: This will also generate the #1120 error if you don't have the compiler's strict mode option enabled. Just declare the XMLList in the <fx:Declarations> block and it should work fine.
I am trying to create a menu bar with the following items: File, Database, Navigate, Window. However, I am getting an error which I do not understand: Could not resolve <mx:XMLList> to a component implementation. Can anyone explain the error to me? My code is as follows:
`
<mx:XMLList id="topLevelMenu">
<menuitem label="File" />
<menuitem label="Database"/>
<menuitem label="Navigate"/>
<menuitem label="Window" />
</mx:XMLList>
<mx:MenuBar width="100%" height="20" labelField="#label" id="mainMenuBar" dataProvider="{topLevelMenu}" />`
I googled for it and found a lot problems which generate this error message. None of them seemed to fit my case. When is this error generated?
The error means, basically, that the compiler can't find a component.
In this case, XMLList is not in the mx namespace. You didn't show the code where you import namespaces, but I assume you're using the default.
I suggest creating your XMLList in ActionScript, not MXML. I believe something like this should work:
public var topLevelMenu : XML = <menuItems>
<menuitem label="File" />
<menuitem label="Database"/>
<menuitem label="Navigate"/>
<menuitem label="Window" />
</menuItems>;
Then somewhere, perhaps in a creationComplete Handler you can change this into an XMLList
var myList : XMLList = topLevelMenu.menuitem
This code is written in the browser and untested.
can any one help me regarding the events related to menubar sub items,
here is some code iam working with
<menuitem label="Home"/>
<menuitem label="AboutUs"/>
<menuitem label="CoursesOffered">
<menuitem label="UG">
<menuitem label="CSE"/>
<menuitem label="EEE"/>
<menuitem label="ECE"/>
<menuitem label="IT"/>
<menuitem label="MECH"/>
<menuitem label="CIVIL"/>
</menuitem>
<menuitem label="PG">
<menuitem label="CSE"/>
<menuitem label="ECE"/>
<menuitem label="MCA"/>
</menuitem>
</menuitem>
<menuitem label="Departments">
<menuitem label="CSE" >
<menuitem label="HOD" />
<menuitem label="Staff" />
<menuitem label="DeparmentGallary"/>
</menuitem>
<menuitem label="ECE">
<menuitem label="HOD"/>
<menuitem label="Staff" />
<menuitem label="DeparmentGallary"/>
</menuitem>
<menuitem label="EEE">
<menuitem label="HOD"/>
<menuitem label="Staff" />
<menuitem label="DeparmentGallary" />
</menuitem>
<menuitem label="IT">
<menuitem label="HOD"/>
<menuitem label="Staff"/>
<menuitem label="DeparmentGallary"/>
</menuitem>
<menuitem label="MECH">
<menuitem label="HOD"/>
<menuitem label="Staff"/>
<menuitem label="DeparmentGallary"/>
</menuitem>
<menuitem label="CIVIL">
<menuitem label="HOD"/>
<menuitem label="Staff"/>
<menuitem label="DeparmentGallary"/>
</menuitem>
<menuitem label="SH"/>
</menuitem>
<menuitem label="ExaminationSection"/>
<menuitem label="TrainingAndPlacement"/>
<menuitem label="Alumni"/>
<menuitem label="ContactUs"/>
i want to handle events wen particular subitem is clicked
for example ,if submnu item hod of cse is clicked it should go to the particular mxml page ,and if hod of ece is clicked it shold goto other page
how do i differentiate each page of particular deparment
how do select that particulasr item of that particular submenu itm
if any one knows plz help meeeeeeee...................?????
The easiest way is to add an id attribute to any menu item that is a leaf and store those id values in static constant fields in the corresponding class.
public static const None:Number = 0;
public static const CSE_HOD:Number = 12;
public static const CSE_STAFF:Number = 13;
//and so on
in the dataProvider
<menuitem label="CSE" id="0">
<menuitem label="HOD" id="12"/>
<menuitem label="Staff" id="13"/>
</menuitem>
<menuitem label="ECE" id="0">
and the itemClick event handler of the MenuBar
switch(Number(menuEvent.item.#id))
{
case CSE_HOD:
//deal with cse hod here
break;
case CSE_STAFF:
//deal with cse staff here
break;
//and so on
default:break; //switch defaults for non leaf menu items like CSE etc
}
i need to fire separate method for individual menu item clicked ,so that individual item can handle separate method.
and i need know what all the properties are available in menu item like type="radio".
<mx:MenuBar id="jj" labelField="#label" itemClick="MenuItemClick(event)" x="23" y="228">
<mx:XMLList>
<menuitem label="File">
<menuitem label="New" type="radio"/>
<menuitem label="Open" data="Openfile" type="Check" />
<menuitem label="Save" />
<menuitem label="Exist"/>
</menuitem>
</mx:XMLList>
</mx:MenuBar>
Can you give any link or example for menubar control?
Thanks
Example from Adobe Flex docs MenuBar
Only three types allowed: check, radio, or separator.
<?xml version="1.0"?>
<!-- Simple example to demonstrate the MenuBar control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initCollections();" >
<mx:Script>
<![CDATA[
import mx.events.MenuEvent;
import mx.controls.Alert;
import mx.collections.*;
[Bindable]
public var menuBarCollection:XMLListCollection;
private var menubarXML:XMLList =
<>
<menuitem label="Menu1" data="top">
<menuitem label="MenuItem 1-A" data="1A"/>
<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>
</>;
// Event handler to initialize the MenuBar control.
private function initCollections():void {
menuBarCollection = new XMLListCollection(menubarXML);
}
// 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");
}
}
]]>
</mx:Script>
<mx:Panel title="MenuBar Control Example" height="75%" width="75%"
paddingTop="10" paddingLeft="10">
<mx:Label width="100%" color="blue"
text="Select a menu item."/>
<mx:MenuBar labelField="#label" itemClick="menuHandler(event);"
dataProvider="{menuBarCollection}" />
</mx:Panel>
</mx:Application>
Also bookmark this page Language Reference.
Vineth,
You are unable to add individual event handlers for menu items unless you dynamically create the menu bar and the sub items. This is more pain than it's worth, so I would recommend using the itemCLick handler as stated above and use a switch to determine what methods to fire. For example:
switch( event.item.#data ){
case "3A":
doSomething();
break;
case "3A":
doSomethingElse();
break;
defualt:
doDefault();
break;
}
Note: this is building off of zdmytriv answer