Share on Google+Share on Google+

MenuBar Control in Flex4

Ads
A MenuBar control displays a horizontal bar of menu items. The menu item has a pop-up sub menu(optional). It is a static control. It does not work as a pop-up menu control.

MenuBar control in Flex4:

A MenuBar control displays a horizontal bar of menu items. The menu item has a pop-up sub menu(optional). It is a static control. It does not work as a pop-up menu control. First you will make a XML List for item and call it in a MenuBar control using dataProvider property for providing a data to the MenuBar control. You must define a labelField="@label" property in MenuBar control tag for showing a item value. You can set the icon image for label.
The tag of MenuBar control is <mx:MenuBar>.

Example:

 <?xml version="1.0" encoding="utf-8"?>

<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"

minWidth="955" minHeight="600">

<s:layout>

<s:VerticalLayout/>

</s:layout>

<fx:Script>

<![CDATA[

[Bindable]

[Embed(source="C:/work/bikrant/flex4component/menu/File.png")]

public var topIcon:Class;

[Bindable]

[Embed(source="C:/work/bikrant/flex4component/menu/document.gif")]

public var radioIcon:Class;

[Bindable]

[Embed(source="C:/work/bikrant/flex4component/menu/Save.gif")]

public var top1Icon:Class;

]]>

</fx:Script>

<fx:Declarations>

<fx:XMLList id="menuBarCollection">

<menuitem label="File" icon="topIcon">

<menuitem label="New" />

<menuitem label="Open" />

<menuitem label="Save" icon="top1Icon"/>

<menuitem label="Save as..."/>

<menuitem label="Close"/>

<menuitem label="Print" />

<menuitem label="Quit"/>

</menuitem>

<menuitem label="Edit">

<menuitem label="Undo" />

<menuitem label="Redo" />

<menuitem label="Cut" />

<menuitem label="Copy" />

<menuitem label="Paste"/>

</menuitem>

<menuitem label="Tools">

<menuitem label="BasicToolsSubToolBar">

<menuitem label="SelectMenuItem"/>

<menuitem label="HandMenuItem"/>

<menuitem label="ZoominMenuItem"/>

<menuitem label="ZoomDragMenuItem"/>

</menuitem>

<menuitem label="AnalysisToolsItem"/>

</menuitem>

<menuitem label="Window"/>

<menuitem label="View"/>

<menuitem label="Document" icon="radioIcon"/>

<menuitem label="Help"/>

</fx:XMLList>

</fx:Declarations>

<s:Panel title="MenuBar control Example" width="463" height="259">

<mx:MenuBar

dataProvider="{menuBarCollection}"

labelField="@label"

iconField="@icon"

width="100%"

cornerRadius="5"

textAlign="left"

rollOverColor="#E5DE70"

selectionColor="#48E4F2"

chromeColor="#E5DE70"

color="#241E07"

symbolColor="#050B62"

fontStyle="normal"

fontFamily="verdana"

fontWeight="normal"/>

</s:Panel>

</s:Application>

In this example you can see how we can use a MenuBar control in Flex4.

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Advertisements

Ads

Posted on: May 25, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Advertisement