MenuBar control in Flex

February 22, 2012

Freelance Flash Developer India Flex Developer Mobile app developer Php developer India

MenuBar control is a horizontal bar of menu items which opens submenu. The submenu will be open until the user selects on other menu item, selects a submenu item,  or clicks outside the menubar area.

Here in this example I provide data for MenuBar control using  <mx:XMLList> tag.

Flex menubar code:-

<mx:MenuBar id=”myMenuBar” labelField=”@label” width=”950″ color=”#060606″ height=”30″
     itemClick=”itemClickHandler(event)” borderColor=”#1D48E8″ horizontalCenter=”0″ themeColor=”#FFFFFF”>
         <mx:XMLList>
            <menuitem label=”first”>
                <menuitem label=”first1″   />
                <menuitem type=”separator” />
                <menuitem label=”first2″/>
                 <menuitem type=”separator” />
                <menuitem label=”first3″/>
                 <menuitem type=”separator” />
                <menuitem label=”first4″/>
            </menuitem>
            <menuitem label=”second”>
                <menuitem label=”second1″ />
                <menuitem type=”separator”/>
                <menuitem label=”second2″/>
                <menuitem type=”separator”/>
                <menuitem label=”second3″/>
                <menuitem type=”separator”/>
                <menuitem label=”second4″/>
            </menuitem>
            <menuitem label=”third”>
                <menuitem label=”third1″ />
                <menuitem type=”separator”/>
                <menuitem label=”third2″/>
                <menuitem type=”separator”/>
                <menuitem label=”third3″/>
                <menuitem type=”separator”/>
                <menuitem label=”third4″/>
            </menuitem>
        </mx:XMLList>
</mx:MenuBar>

Import the MenuEvent in the event class and Alert control from controls.

import mx.events.MenuEvent;
import mx.controls.Alert;

We can get the Index of the selected MenuBar item using myMenuBar.selectedIndex.toString() where myMenuBar is the id of the MenuBar.and Index of the selected submenu by event.index.toString() .

 <mx:Script>
<![CDATA[
import mx.events.MenuEvent; 
import mx.controls.Alert;

private function itemClickHandler(event:MenuEvent) : void
{
     Alert.show(“selected index: ” + myMenuBar.selectedIndex.toString() +
child index: ” + event.index.toString());

}

I appreciate if you like this post, feel free to comment, forward, RT

flex menubar, flex menu control, flex menu example, menu bar in flex, flex menu bar, how to make menu bar in flex.
flex developer India, developers in India, India web development, hire India, web developer


Loading XML in Flash AS3

January 16, 2012

1. Create the xml file, as shown below
2. In the flash file drag a datagrid component from the components panel.
3. Create new instance of the URLLoader class which loads the xml file.
4. xml file is passed to the url inside the URLRequest object.
5. Then add an addEventListener to know when the xml file is completely loaded, we register a COMPLETE event and have it call a function.
In the function we access loaded data through URLLoader ‘s data property.and assign this to XML object.
difference between XMLList and array is that in XMLList length()  is a property.
6. Populate any data driven component including a data grid we have to create an instance of a DataProvider class .
Each time the loop runs xml data is added inside of the griddata provider using addItem({name:value})shorthand notation to create a generic object, name value pairs seperated by a “: ” this data is then set to the datagrid. Freelance flash  developer Bangalore

Loading XML in Flash AS3 code goes here:

var imagesXML:XML;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest(“picts.xml”));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(evt:Event):void
{
imagesXML = new XML(xmlLoader.data);
var componentProvider:DataProvider = new DataProvider();
for(var i:uint = 0; i < imagesXML.animal.length(); i++)
{
componentProvider.addItem({name:imagesXML.animal.name[i],description:imagesXML.animal.description[i]});
}
grid.dataProvider = componentProvider;

}
grid here is the instance name of datagrid component on stage. Make sure flash has imported
import fl.data.DataProvider;

The xml file is as follows:

<animals>
<animal>
<name>bunny</name>
<photo>small/bunny.gif</photo>
<description>bunnies are cute</description></animal>
<animal>
<name>dogy</name>
<photo>small/dogy.jpg</photo>
<description>dogies are lovely</description></animal>
<animal>
<name>elephant</name>
<photo>small/elephant.png</photo>
<description>elephant is big</description></animal>
<animal>
<name>frog</name>
<photo>small/frog2.jpg</photo>
<description>frog is green</description></animal>
<animal>
<name>butterfly</name>
<photo>small/butterfly-6.gif</photo>
<description>butterflies are colorful</description></animal>
<animal>
<name>kitten</name>
<photo>small/kitty.gif</photo>
<description>kittys are cute</description></animal>

</animals>

Did you like this post? Please give me a boost, Appreciate your valuable comments, and constructive criticism :-).