MenuBar Control in Flex4


 

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.

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

0

<menuitem label="Print" />

<menuitem label="Quit"/>

</menuitem>

1

<menuitem label="Edit">

<menuitem label="Undo" />

<menuitem label="Redo" />

2

<menuitem label="Cut" />

<menuitem label="Copy" />

<menuitem label="Paste"/>

3

</menuitem>

<menuitem label="Tools">

<menuitem label="BasicToolsSubToolBar">

4

<menuitem label="SelectMenuItem"/>

<menuitem label="HandMenuItem"/>

<menuitem label="ZoominMenuItem"/>

5

<menuitem label="ZoomDragMenuItem"/>

</menuitem>

<menuitem label="AnalysisToolsItem"/>

6

</menuitem>

<menuitem label="Window"/>

<menuitem label="View"/>

7

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

<menuitem label="Help"/>

</fx:XMLList>

8

</fx:Declarations>

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

<mx:MenuBar

9

dataProvider="{menuBarCollection}"

labelField="@label"

iconField="@icon"

0

width="100%"

cornerRadius="5"

textAlign="left"

1

rollOverColor="#E5DE70"

selectionColor="#48E4F2"

chromeColor="#E5DE70"

2

color="#241E07"

symbolColor="#050B62"

fontStyle="normal"

3

fontFamily="verdana"

fontWeight="normal"/>

</s:Panel>

4

</s:Application>

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

Output:

5

Running Application:

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

Download this code

6

Ads