Detecting when the main button on the Flex PopUpButton control has been clicked

The following example shows how you can detect when the main button on the PopUpButton control has been clicked by listening for the click event.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/04/detecting-when-the-main-button-on-the-flex-popupbutton-control-has-been-clicked/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        PopUpButton {
            pop-up-style-name: myCustomPopUpStyleName;
        }

        .myCustomPopUpStyleName {
            fontWeight: normal;
            textAlign: left;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.Menu;

            [Bindable]
            private var menu:Menu;

            private function popUpButton_initialize():void {
                menu = new Menu();
                menu.dataProvider = arr;
            }

            private function popUpButton_click():void {
                Alert.show("You clicked me, now what?");
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Alert" />
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object label="CheckBox" />
        <mx:Object label="ColorPicker" />
        <mx:Object label="ComboBox" />
    </mx:Array>

    <mx:PopUpButton id="popUpButton"
            label="Please select an item"
            popUp="{menu}"
            initialize="popUpButton_initialize();"
            click="popUpButton_click();" />

</mx:Application>

View source is enabled in the following example.