Style

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”ApplyStyles()”>
<mx:Script>
<![CDATA[
import mx.containers.HBox;
import mx.controls.Spacer;
import mx.controls.Button;
import mx.controls.ComboBox;
import mx.containers.Panel;
import mx.containers.ApplicationControlBar;
public function ApplyStyles():void
{
var ComboBoxData1:Array=new Array("Data One","Data Two","Data Three");
var ComboBoxData2:Array=new Array("Data Four","Data Five","Data Six");
var _ApplicationControlBar:ApplicationControlBar=new ApplicationControlBar();
var _Panel:Panel=new Panel();
var _ComboBox1:ComboBox=new ComboBox();
var _ComboBox2:ComboBox=new ComboBox();
var _Button:Button=new Button();
var _Spacer:Spacer=new Spacer();
var _HBox:HBox=new HBox();

var ButtonStyle:Button=new Button();
var ComboBoxStyle:Button=new Button();
var ApplicationControlBarStyle:Button=new Button();
var PanelStyle:Button=new Button();
var ApplicationStyle:Button=new Button();
//Properties of ApplicationControlBar
_ApplicationControlBar.x=63;
_ApplicationControlBar.y=54;
_ApplicationControlBar.width=710;
//Properties of Button
_Button.label="ChangeStyle";
//Properties of Spacer
_Spacer.width=275;
//Properties of ComboBox
_ComboBox1.dataProvider=ComboBoxData1;
_ComboBox2.dataProvider=ComboBoxData2;
//Properties of Panel
_Panel.x=63;
_Panel.y=126;
_Panel.height=95;
_Panel.width=710;
_Panel.height=319;
_Panel.layout="absolute";
_Panel.title="This is Panel";
//HBox Properties
_HBox.x=83;
_HBox.y=475;
_HBox.height=43;
_HBox.width=710;
//Adding Childs
_ApplicationControlBar.addChild(_Button);
_ApplicationControlBar.addChild(_Spacer);
_ApplicationControlBar.addChild(_ComboBox1);
_ApplicationControlBar.addChild(_ComboBox2);
addChild(_ApplicationControlBar);
addChild(_Panel);
//StyleButtonProperties
ButtonStyle.label="Button";
ComboBoxStyle.label="ComboBox";
PanelStyle.label="Panel";
ApplicationStyle.label="Application";
ApplicationControlBarStyle.label="ACBar";
//Adding Childs inside HBox
_HBox.addChild(ButtonStyle);
_HBox.addChild(ComboBoxStyle);
_HBox.addChild(ApplicationControlBarStyle);
_HBox.addChild(PanelStyle);
_HBox.addChild(ApplicationStyle);
addChild(_HBox);
//Events
ButtonStyle.addEventListener(MouseEvent.CLICK,ButtonStyleChange);
ComboBoxStyle.addEventListener(MouseEvent.CLICK,ComboBoxStyleChange);
ApplicationControlBarStyle.addEventListener(MouseEvent.CLICK,ApplicationControlBarChange);
PanelStyle.addEventListener(MouseEvent.CLICK,PanelChange);
ApplicationStyle.addEventListener(MouseEvent.CLICK,ApplicationChange);

}
public function ButtonStyleChange(event:MouseEvent):void
{
var _ButtonStyle:CSSStyleDeclaration=new CSSStyleDeclaration('_ButtonStyle');
_ButtonStyle.setStyle("cornerRadius", 20);
_ButtonStyle.setStyle("textIndent",8);
_ButtonStyle.setStyle("paddingLeft",7);
_ButtonStyle.setStyle("paddingRight",9);
_ButtonStyle.setStyle("paddingTop",9);
_ButtonStyle.setStyle("paddingBottom",9);
_ButtonStyle.setStyle("letterSpacing", 1);
_ButtonStyle.setStyle("color", 0xffffff);
_ButtonStyle.setStyle("textRollOverColor", 0x990000);
_ButtonStyle.setStyle("textSelectedColor", 0x000000);
_ButtonStyle.setStyle("borderColor",0x000000);
_ButtonStyle.setStyle("themeColor", 0x0066cc);
_ButtonStyle.setStyle("fontFamily","Courier");
_ButtonStyle.setStyle("fontSize",25);
StyleManager.setStyleDeclaration("Button",_ButtonStyle,true);

}
public function ComboBoxStyleChange(event:MouseEvent):void
{
var _ComboStyle:CSSStyleDeclaration=new CSSStyleDeclaration('_Combo1Style');
_ComboStyle.setStyle("cornerRadius",19);
_ComboStyle.setStyle("color", 0xffffff);
_ComboStyle.setStyle("borderColor", 0x000001);
_ComboStyle.setStyle("arrowButtonWidth", 32);
_ComboStyle.setStyle("selectionColor", 0xff0000);
_ComboStyle.setStyle("textSelectedColor", 0xcccc33);
_ComboStyle.setStyle("themeColor", 0x9900ff);
_ComboStyle.setStyle("openDuration", 76);
_ComboStyle.setStyle("closeDuration", 379);
_ComboStyle.setStyle("fontFamily", "Palatino");
_ComboStyle.setStyle("fontSize", 14);
_ComboStyle.setStyle("fontWeight", "normal");
_ComboStyle.setStyle("fontStyle", "italic");
_ComboStyle.setStyle("letterSpacing",1);
StyleManager.setStyleDeclaration("ComboBox",_ComboStyle,true);
}
public function ApplicationControlBarChange(event:MouseEvent):void
{
var _ApplicationControlBarStyle:CSSStyleDeclaration=new CSSStyleDeclaration('_ApplicationControlBarStyle');
_ApplicationControlBarStyle.setStyle("borderStyle","solid");
_ApplicationControlBarStyle.setStyle("borderThickness",3);
_ApplicationControlBarStyle.setStyle("borderColor",0x993300);
_ApplicationControlBarStyle.setStyle("backgroundColor",0x000001)
_ApplicationControlBarStyle.setStyle("cornerRadius",20);
_ApplicationControlBarStyle.setStyle("dropShadowEnabled",true);
_ApplicationControlBarStyle.setStyle("shadowDistance",7);
_ApplicationControlBarStyle.setStyle("shadowDirection","center");
_ApplicationControlBarStyle.setStyle("dropShadowColor",0x000099);
StyleManager.setStyleDeclaration("ApplicationControlBar",_ApplicationControlBarStyle,true);
}
public function PanelChange(event:MouseEvent):void
{
var _PanelStyle:CSSStyleDeclaration=new CSSStyleDeclaration('_PanelStyle');
_PanelStyle.setStyle("borderStyle", "solid");
_PanelStyle.setStyle("borderColor",0x000001);
_PanelStyle.setStyle("borderThickness", 19);
_PanelStyle.setStyle("roundedBottomCorners", true);
_PanelStyle.setStyle("cornerRadius", 25);
_PanelStyle.setStyle("headerHeight",44);;
_PanelStyle.setStyle("backgroundColor", 0xf00099);
_PanelStyle.setStyle("shadowDistance", 18);
StyleManager.setStyleDeclaration("Panel",_PanelStyle,true);
}
public function ApplicationChange(event:MouseEvent):void
{
var _ApplicationStyle:CSSStyleDeclaration=new CSSStyleDeclaration("_ApplicationStyle");
_ApplicationStyle.setStyle("backgroundColor",0x000001);
_ApplicationStyle.setStyle("themeColor",0xffff99);
_ApplicationStyle.setStyle("color",0x0b333c);
StyleManager.setStyleDeclaration("Application",_ApplicationStyle,true);
}

]]>
</mx:Script>

</mx:Application>

Zoom Effect

Coding:

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”hi();” xmlns:ns1=”*”>
<mx:Script>
<![CDATA[

import mx.managers.PopUpManager;
import mx.containers.TitleWindow;
import mx.controls.*;
[Bindable]
public var a:int;
[Bindable]
private var image:Array=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg",
,"10.jpg","11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jpg"];
private var detail:Array=["flower1","flower2","flower3","flower4","flower5","flower6","flower7","flower8","flower9","flower10","flower11","flower12","flower13","flower14","flower15","flower16","flower17","flower18","flower19"]
private var detail1:Array=["50","190","140","100","102","100","120","150","90","140","100","102","100","50","190","140","100","102","100"]

private var sa:title;
private function hi():void
{
sa=new title();
}

private function addNote(event:Event):void
{
var obj:Object=new Object;
PopUpManager.addPopUp(sa,this,true);
PopUpManager.centerPopUp(sa);
var ob:Object=event.currentTarget.instanceIndex;
a=int(ob);
sa.i2.source=image[a];
sa.i3.text=detail[a];
sa.i4.text=detail1[a];
s1.target=sa;
s1.play();
}

]]>
</mx:Script>

<mx:Panel id=”p2″ layout=”absolute”  width=”100%” height=”100%” visible=”true” x=”0″ y=”0″>
<mx:Canvas>
<mx:Tile>
<mx:Repeater id=”r1″ dataProvider=”{image}”>
<mx:Image id=”i1″ source=”{r1.currentItem}”  width=”245″ height=”150″ buttonMode=”true” click=”addNote(event)”  maintainAspectRatio=”false” x=”10″ y=”74″ toolTip=”{detail[r1.currentIndex]}”/>
</mx:Repeater>
</mx:Tile>
</mx:Canvas>
</mx:Panel>
<mx:Sequence id=”s1″>
<mx:Zoom zoomHeightFrom=”1″ zoomHeightTo=”2″ zoomWidthFrom=”1″ zoomWidthTo=”1.5″ duration=”500″/>
</mx:Sequence>
</mx:Application>

Tittlewindow:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:TitleWindow backgroundColor=”#920D68″ xmlns:mx=”http://www.adobe.com/2006/mxml” close=”sa();” layout=”absolute” showCloseButton=”true” title=” Details” x=”168″ y=”86″ height=”180″ width=”373″ themeColor=”#0C0F11″ alpha=”1.0″ backgroundAlpha=”1.0″ borderColor=”#0E1A75″ fontFamily=”Georgia” color=”#F1F8F9″ fontWeight=”bold” fontStyle=”italic”>
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.controls.Text;
public function sa():void
{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:Style>

sai {
headerColors: #000000, #d9d9d9;
footerColors: #000000, #c7c7c7;
backgroundColor: #ffff00;
}
</mx:Style>
<mx:Image id=”i2″ width=”156″ height=”105″ x=”10″ y=”10″/>
<mx:Text id=”i3″  x=”248″ y=”14″ width=”83″/>
<mx:Label id=”i0″ y=”14″ width=”54″ text=”Name” left=”186″ fontWeight=”normal” fontFamily=”Verdana” color=”#F8F0F6″/>
<mx:Text id=”i4″  x=”248″ y=”69″ width=”86″/>
<mx:Label id=”i10″ text=”Cost”  x=”186″ y=”69″ fontWeight=”normal” width=”35″ fontFamily=”Verdana” color=”#F9F6F8″/>
</mx:TitleWindow>

Datagrid

Coding:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
<mx:Form id=”frm” x=”50″ y=”60″>
<mx:FormHeading label=”Employee Detail” x=”300″ y=”150″/>
<mx:FormItem label=”Name”>
<mx:TextInput id=”nm”/>
</mx:FormItem>
<mx:FormItem label=”Age”>
<mx:TextInput id=”age”/>
</mx:FormItem>
<mx:FormItem label=”blood group”>
<mx:ComboBox id=”cb”>
<mx:String>O+ve</mx:String>
<mx:String>A+ve</mx:String>
<mx:String>B+ve</mx:String>
<mx:String>AB+ve</mx:String>
<mx:String>A-ve</mx:String>
<mx:String>B-ve</mx:String>
</mx:ComboBox>
</mx:FormItem>
<mx:FormItem label=”Address”>
<mx:TextInput id=”addr”/>
</mx:FormItem>
<mx:FormItem label=”Phoneno”>
<mx:TextInput id=”Pno”/>
</mx:FormItem>
<mx:FormItem label=”City”>
<mx:TextInput id=”cty”/>
</mx:FormItem>
<mx:FormItem label=”Country”>
<mx:TextInput id=”coun”/>
</mx:FormItem>
<mx:Button id=”bt2″ label=”submit” click=”handleAddRow(event)”/>
</mx:Form>
<mx:DataGrid id=”dg” x=”250″ y=”350″ dataProvider=”{dgdp}”>
<mx:columns>
<mx:DataGridColumn  headerText=”Name” dataField=”name”/>
<mx:DataGridColumn  headerText=”Address” dataField=”address”/>
<mx:DataGridColumn  headerText=”City” dataField=”city”/>
</mx:columns>
</mx:DataGrid>
<mx:Script>
<![CDATA[

[Bindable]
private var dgdp:Array;
private function handleAddRow(event:MouseEvent):void
{
dg.dataProvider.addItem(
{
“name”:nm.text,
“address”:addr.text,
“city”:cty.text
}
);
}
/*
private function handleUpdateComplete(e:Event):void
{
var currLen:uint = dg.dataProvider.length;
dg.scrollToIndex(currLen);
} */
]]>
</mx:Script>

</mx:Application>

Using HTTP control

Coding:

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Canvas id=”myCanvas”
height=”200″ width=”200″
borderStyle=”solid”
backgroundColor=”white”>

<mx:LinkButton label=”Search”
x=”10″ y=”30″
click=”navigateToURL(new URLRequest(‘http://www.adobe.com/cfusion/search/index.cfm’))”/>
<mx:Image
height=”50″ width=”50″
x=”100″ y=”10″
source=”@Embed(source=’chairs.jpeg’)”
click=”navigateToURL(new URLRequest(‘http://www.adobe.com/cfusion/search/index.cfm’))”/>

<mx:LinkButton label=”Help”
x=”10″ y=”100″
click=”navigateToURL(new URLRequest(‘http://www.adobe.com/go/gn_supp’))”/>
<mx:Image
height=”50″ width=”50″
x=”100″ y=”75″
source=”@Embed(source=’refregirator.jpeg’)”
click=”navigateToURL(new URLRequest(‘http://www.adobe.com/go/gn_supp’))”/>

<mx:LinkButton label=”Complaints”
x=”10″ y=”170″
click=”navigateToURL(
new URLRequest(‘http://www.adobe.com/go/gn_contact’))”/>
<mx:Image
height=”50″ width=”50″
x=”100″ y=”140″
source=”@Embed(source=’52.jpg’)”
click=”navigateToURL(
new URLRequest(‘http://www.adobe.com/go/gn_contact’))”/>
</mx:Canvas>
</mx:Application>

Mouseover process using linkbutton

Coding:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”  xmlns:MyComp=”*”>
<mx:Script>
<![CDATA[

public function splsong():void
{
can.visible=true;
can1.visible=true;
can2.visible=false;
can3.visible=false;

}
public function splsong1():void
{
can.visible=true;
can1.visible=false;
can2.visible=true;
can3.visible=false;
}
public function splsong2():void
{
can.visible=true;
can1.visible=false;
can2.visible=false;
can3.visible=true;

}
]]>
</mx:Script>

<mx:Canvas id=”songs” height=”450″ width=”639″ x=”24″ y=”10″>

<mx:Canvas id=”can” height=”144″ width=”146″ x=”10″ y=”10″>
<mx:LinkButton x=”13″ y=”21″ label=”DAILY SPECIAL” id=”ds” mouseOver=”splsong();”/>
<mx:LinkButton x=”9″ y=”51″ label=”MONTHLY SPECIAL” id=”ms” mouseOver=”splsong1();”/>
<mx:LinkButton x=”14″ y=”90″ label=”RECENT PLAYLIST” id=”rp” mouseOver=”splsong2();”/>
</mx:Canvas>
<mx:Canvas id=”can1″ x=”164″ y=”42″ width=”104″ height=”129″ visible=”false”>
<mx:LinkButton  label=”SUNDAY” x=”13″ y=”21″/>
<mx:LinkButton label=”MONDAY” x=”10″ y=”51″/>
<mx:LinkButton  label=”TUESDAY” x=”8″ y=”81″/>
</mx:Canvas>
<mx:Canvas id=”can2″ x=”148″ y=”69″ width=”104″ height=”150″ visible=”false”>
<mx:LinkButton label=”JAN” x=”13″ y=”21″/>
<mx:LinkButton label=”MARCH” x=”10″ y=”86″/>
<mx:LinkButton label=”FEB” x=”14″ y=”51″/>
</mx:Canvas>
<mx:Canvas id=”can3″ x=”143″ y=”112″ width=”104″ height=”56″ visible=”false”  >
<mx:LinkButton label=”honey honey” x=”5.5″ y=”10″/>
</mx:Canvas>

</mx:Canvas>

</mx:Application>

Horizontallist

Explanation:

The HorizontalList control displays a horizontal list of items. The HorizontalList control is particularly useful in combination with a custom item renderer for displaying a list of images and other data. For more information about custom item renderers.

Coding:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
        horizontalAlign="center"
        verticalAlign="middle">

    <mx:Image source="{data.thumbnailImage}" />

    <mx:Label text="{data.label}" />

</mx:VBox>

Check Box

Explanation:

The CheckBox control consists of an optional label and a small box that can contain a check mark or not. You can place the optional text label to the left, right, top, or bottom of the CheckBox. When a user clicks a CheckBox control or its associated text, the CheckBox control changes its state from checked to unchecked or from unchecked to checked. CheckBox controls gather a set of true or false values that are not mutually exclusive.

Coding:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

           import mx.controls.Alert;         

           cart.
           private function modifyCart():void
           {
                cartItems.text = "";

                if(milkCB.selected == true) {
                    cartItems.text += "milk" + '\n' ;
                }

                   if(eggsCB.selected == true) {
                    cartItems.text += "eggs" + '\n';
                }

                if(breadCB.selected == true) {
                    cartItems.text +="bread" + '\n';
                }
              }

           // This event handler opens the Alert control.
           private function sendMessage():void
           {
                if(couponCB.selected == true) {
                  Alert.show('You will receive coupons.');
                }
                else {
                    Alert.show('You will not receive any coupons.');
                }
           }
        ]]>
    </mx:Script>

    <mx:Panel title="CheckBox Control Example"
        height="75%" width="75%" layout="horizontal">

        <mx:VBox>
            <mx:CheckBox id="milkCB" label="milk" click="modifyCart()"/>
            <mx:CheckBox id="eggsCB" label="eggs" click="modifyCart()"/>
            <mx:CheckBox id="breadCB" label="bread" click="modifyCart()"/>
        </mx:VBox>

        <mx:VBox>
            <mx:Label text="Items in my cart "/>
            <mx:TextArea id="cartItems" width="300" height="50"/>          <mx:CheckBox id="couponCB" label="Send me coupons for items in my cart"
                click="sendMessage()" selected="true" color="blue"/>
        </mx:VBox>
    </mx:Panel>
</mx:Application>

Spacer

Explanation:

The Spacer control helps you lay out children within a parent container. Although the Spacer control does not draw anything, it does allocate space for itself within its parent container

Coding:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Panel id="panel" title="Spacer Control Example" height="75%" width="75%"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <mx:Text width="100%" color="blue"
            text="The Spacer control pushes the second image to the right edge of the HBox container."/>

        <mx:HBox width="100%">
            <mx:Image source="@Embed('assets/Nokia_6630.png')"/>
            <mx:Spacer width="100%"/>
            <mx:Image source="@Embed('assets/Nokia_6680.png')"/>
        </mx:HBox>

    </mx:Panel>
</mx:Application>

Tab BAR

Explanation:

The TabBar control lets you create a horizontal or vertical group of tab navigation items by defining the labels and data associated with each tab. Use the TabBar control instead of the TabNavigator container to create tabs that, by default, are not associated with multiple views.

Using the TabBar control lets the tabs be directly determined by the data so that you can change the view or views in any way.

Coding:

<?xml version=”1.0″?>
<!– Simple example to demonstrate the TabBar control. –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

    <mx:Script>
        <![CDATA[

            import mx.events.ItemClickEvent;
            import mx.controls.TabBar;

            [Bindable]
            public var STATE_ARRAY:Array = [{label:"Alabama", data:"Montgomery"},
                {label:"Alaska", data:"Juneau"},
                {label:"Arkansas", data:"LittleRock"}
            ];
           
            private function clickEvt(event:ItemClickEvent):void {
                // Access target TabBar control.
                var targetComp:TabBar = TabBar(event.currentTarget);
                forClick.text=”label is: ” + event.label + “, index is: ” +
                    event.index + “, capital is: ” +
                    targetComp.dataProvider[event.index].data;
            }               
       ]]>
    </mx:Script>

    <mx:Panel title=”TabBar Control Example” height=”75%” width=”75%”
        paddingTop=”10″ paddingBottom=”10″ paddingLeft=”10″ paddingRight=”10″>

        <mx:Label width=”100%” color=”blue”
            text=”Select a tab to change the current panel.”/>

        <mx:TabBar itemClick=”clickEvt(event);”>
            <mx:dataProvider>{STATE_ARRAY}</mx:dataProvider>
        </mx:TabBar>

        <mx:TextArea id=”forClick” height=”100%” width=”100%”/>

    </mx:Panel>
</mx:Application>

MenuBar

MenuBar:

A MenuBar control displays the top level of a menu as a horizontal bar of menu items, where each item on the bar can pop up a submenu. The MenuBar control interprets the data provider in the same way as the Menu control, and supports the same events as the Menu control. Unlike the Menu control, a MenuBar control is static; that is, it does not function as a pop-up menu, but is always visible in your application. Because the MenuBar is static, you can define it directly in MXML.

CODE:

<?xml version="1.0"?>
<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>