Flex Examples
The following example shows how you can set the corner radius on the PopUpButton control in Flex by setting the cornerRadius style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/31/setting-the-corner-radius-on-a-flex-popupbutton-control/ -->
<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>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
How would I do a Flex PopUpButton control with no border? Just the text and arrow and menu below.
p.s. I’m a flex newbie trying to come up to speed fast and so have a lot of flex feeds I’m reading daily. But, I have to say, yours is the best, bar none, with all these examples. Keep up the great work!
Thanks,
Paul
How can you set the cornerRadius of the menu that is popped-up?
Henk,
Try something like the following:
<mx:Style> PopUpButton { popUpStyleName: myCustomPopUpStyleName; } .myCustomPopUpStyleName { borderStyle: solid; dropShadowEnabled: false; cornerRadius: 10; fontWeight: normal; textAlign: left; leftIconGap: 0; } </mx:Style>It *should* work, but I’m not sure how it will handle the rounded corners when you roll your mouse over an item.
Peter