In the current tutorial you will come to know about PopUp Button control of Flex. The PopUpButton consists of a main button and smaller buttons, which is called pop-up button. The main button is called control button. The examples will help you to learn PopUpButton more effectively

PopUpButton in Flex :

The PopUpButton in Flex consists of a main button and  smaller buttons, which is called pop-up button. The main button is called control button.

When we click a pop-up button opens a second control called the pop-up control. After selecting any pop-up button, the button control closes the pop-up control. 

We can use this control for displaying the Flex control as the pop-up control. PopUpButton is a subclass of Button class and it inherits all the method, properties of this class.

<mx:PopUpButton> tag is used to decalare a PopUpButton. We can put an id for reference of this control as it could be required in any other part of the file or in the ActionScript file.

POP UP Button in Flex Example: 

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>

<![CDATA[

import mx.controls.*;

import mx.events.*;

private var pop:Menu;

public function initMenu():void{

pop=new Menu();

var dp:Object=[{label:"Sun"},{label:"Adobe"},{label:"Mozilla"}]

pop.dataProvider=dp;

pop.selectedIndex=0;

pop.addEventListener("itemClick",itemClickHandler);

popUp.popUp=pop;

}

public function itemClickHandler(event:MenuEvent):void{

var msg:String=event.item.label;

if(event.index==0){

disp.text=String("JavaFx :"+msg);

popUp.label=String("JavaFx :"+msg);

}

if(event.index==1){

disp.text=String("Flex :"+msg);

popUp.label=String("Flex :"+msg);

}

if(event.index==2){

disp.text=String("XUL :"+msg);

popUp.label=String("XUL :"+msg);

}

popUp.close();

pop.selectedIndex=event.index;

}

]]>

</mx:Script>

<mx:Panel title="PopUpButton Example" horizontalCenter="10" verticalCenter="10" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">

<mx:Text text="Click any one button from the below PopUpButton"/>

<mx:PopUpButton id="popUp" label="RIA" creationComplete="initMenu()" />

<mx:Spacer height="20"/>

<mx:TextInput id="disp"/>

</mx:Panel>

</mx:Application>

Output:

Related Tags for PopUp Button in Flex: