Search Flex Components Free

Custom Search

March 24, 2008

Setting the corner radius on a Flex PopUpButton control





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


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

layout="vertical"

verticalAlign="top"

backgroundColor="white">



<mx:Style>

PopUpButton {

popUpStyleName: myCustomPopUpStyleName;

}



.myCustomPopUpStyleName {

fontWeight: normal;

textAlign: left;

leftIconGap: 0;

}

</mx:Style>



<mx:Script>

<![CDATA[

import mx.controls.Menu;



private function init():void {

var menu:Menu = new Menu();

menu.dataProvider = arr;

popUpButton.popUp = menu;

}



private function resizePopUp():void {

popUpButton.popUp.width = popUpButton.width;

}

]]>

</mx:Script>



<mx:Array id="arr">

<mx:Object label="Alert" />

<mx:Object label="Button" />

<mx:Object label="ButtonBar" />

<mx:Object type="separator" />

<mx:Object label="CheckBox" />

<mx:Object label="ColorPicker" />

<mx:Object label="ComboBox" />

</mx:Array>



<mx:ApplicationControlBar dock="true">

<mx:Form styleName="plain">

<mx:FormItem label="cornerRadius:">

<mx:HSlider id="slider"

minimum="0"

maximum="{popUpButton.height / 2}"

value="0"

liveDragging="true"

snapInterval="1"

tickInterval="1" />

</mx:FormItem>

</mx:Form>

</mx:ApplicationControlBar>



<mx:PopUpButton id="popUpButton"

label="Please select an item..."

cornerRadius="{slider.value}"

arrowButtonWidth="{popUpButton.height}"

openAlways="true"

initialize="init();"

creationComplete="resizePopUp();" />



</mx:Application>



Related Flex Tutorials