Creating semi-transparent PopUpButton pop up menus in Flex

<?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; backgroundAlpha: 0.4; backgroundColor: white; borderStyle: solid; } </mx:Style> <mx:Script> <![CDATA[ import mx.controls.Menu; private var menu:Menu; private function init():void { menu = new Menu(); menu.labelField = "@label"; menu.dataProvider = xmlList; popUpButton.popUp = menu; menu.width = popUpButton.width; } ]]> </mx:Script> <mx:XMLList id="xmlList"> <node label="Alert" /> <node label="Button" /> <node label="ButtonBar" /> <node label="CheckBox" /> <node label="ColorPicker" /> <node label="ComboBox" /> </mx:XMLList> <mx:ApplicationControlBar dock="true"> <mx:PopUpButton id="popUpButton" label="Please select an item..." openAlways="true" creationComplete="init();" /> </mx:ApplicationControlBar> <mx:VBox backgroundAlpha="0.5" backgroundColor="haloSilver" width="100%" height="100%" /> </mx:Application>

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>

Using a DataGrid control as a pop up in the 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; } </mx:Style> <mx:Array id="arr"> <mx:Object label="Alert" packageName="mx.controls" /> <mx:Object label="Button" packageName="mx.controls" /> <mx:Object label="ButtonBar" packageName="mx.controls" /> <mx:Object label="CheckBox" packageName="mx.controls" /> <mx:Object label="ColorPicker" packageName="mx.controls" /> </mx:Array> <mx:PopUpButton id="popUpButton" label="Click to open..." openAlways="true"> <mx:popUp> <mx:DataGrid dataProvider="{arr}" draggableColumns="false" rowCount="4" width="300"> <mx:columns> <mx:DataGridColumn dataField="label" headerText="Label:" /> <mx:DataGridColumn dataField="packageName" headerText="Package name:" /> </mx:columns> </mx:DataGrid> </mx:popUp> </mx:PopUpButton> </mx:Application>