PopUpMenuButton Control in Flex4


 

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.

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

0

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

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

<mx:PopUpMenuButton id="popmbtn"

1

dataProvider="{menuData}"

labelField="@label"

showRoot="false"

2

itemClick="itemClickHandler(event);"

width="117"

color="#FFFFFF"

3

cornerRadius="10"

chromeColor="#000000"

fontFamily="verdana"

4

textRollOverColor="#000000"

symbolColor="#FFFFFF"/>

</s:VGroup>

5

</s:Panel>

</s:Application>

Output:

6

Running Application:

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


Download this code

Ads