Share on Google+Share on Google+

PopUpMenuButton Control in Flex4

Advertisement
The PopUpMenuButton control is a MX component. It is a pop-up Button control. It contains two buttons. First one is small button contains a icon and other is main button.

PopUpMenuButton Control in Flex4:

The PopUpMenuButton control is a  MX component. It  is a pop-up Button control. It contains two buttons. First one is small button contains a icon and other is main button. When you click a small icon button you will see a PopUpMenu control. You can select an item from the pop-up menu the main button of the PopUpMenuButton control changes to show the label of the selected item. This changes happen by MenuEvent.CHANGE event and MouseEvent.ITEM_CLICK event. You can provide the data to the PopUpMenuButton control using dataProvider property and XML. The tag of PopUpMenuButton control is <mx:PopUpMenuButton>.

In this example you can see how we use PopUPMenuButton Control.

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

<fx:Script>

<![CDATA[

import mx.controls.Menu;

import mx.events.MenuEvent;

public function itemClickHandler(event:MenuEvent):void {

event.currentTarget.label="File: " + event.label;

}

]]>

</fx:Script>

<fx:Declarations>

<fx:XML format="e4x" id="menuData">

<root>

<menuitem label="New"/>

<menuitem label="Open"/>

<menuitem label="Save"/>

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

<menuitem label="Close"/>

<menuitem label="Print"/>

<menuitem label="Quit"/>

</root>

</fx:XML>

</fx:Declarations>

<s:Panel title="PopUpMenuButton control Example" height="246" width="264" contentBackgroundColor="#000000">

<s:VGroup x="2" y="6" horizontalAlign="center" height="50">

<s:Label text="Select Item from PopUpMenuButton Control"/>

<mx:PopUpMenuButton id="popmbtn"

dataProvider="{menuData}"

labelField="@label"

showRoot="false"

itemClick="itemClickHandler(event);"

width="117"

color="#FFFFFF"

cornerRadius="10"

chromeColor="#000000"

fontFamily="verdana"

textRollOverColor="#000000"

symbolColor="#FFFFFF"/>

</s:VGroup>

</s:Panel>

</s:Application>

Output:

Running Application:

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


Download this code

Advertisements

Posted on: May 26, 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.