Setting the corner radius on a Flex PopUpButton control

PopUpButton

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.

View MXML

<?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.

0 thoughts on “Setting the corner radius on a Flex PopUpButton control”

  1. 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

  3. 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