Detecting when the Flex PopUpButton control is opened or closed

The following example shows how you can detect when the Flex PopUpButton control is opened or closed by listening for the open or close event.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/18/detecting-when-the-flex-popupbutton-control-is-opened-or-closed/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        PopUpButton {
            popUpStyleName: myCustomPopUpStyleName;
        }

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

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import mx.controls.Menu;
            import mx.controls.Alert;
            import mx.events.DropdownEvent;
            import mx.utils.ObjectUtil;

            [Bindable]
            private var menu:Menu;

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

            private function popUpButton_open(evt:DropdownEvent):void {
                arrColl.addItem(evt);
            }

            private function popUpButton_close(evt:DropdownEvent):void {
                arrColl.addItem(evt);
            }

            private function dataGrid_itemClick(evt:ListEvent):void {
                var obj:DropdownEvent = evt.currentTarget.selectedItem;
                var str:String = "(empty string)";
                if (obj.triggerEvent) {
                    str = obj.triggerEvent.toString();
                }
                Alert.show(str, "triggerEvent:");
            }
        ]]>
    </mx:Script>

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

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:PopUpButton id="popUpButton"
                label="Select a control..."
                popUp="{menu}"
                initialize="init();"
                open="popUpButton_open(event);"
                close="popUpButton_close(event);" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            variableRowHeight="true"
            width="100%"
            height="100%"
            itemClick="dataGrid_itemClick(event);">
        <mx:columns>
            <mx:DataGridColumn dataField="type"
                    width="100" />
            <mx:DataGridColumn dataField="triggerEvent"
                    itemRenderer="mx.controls.Label"
                    wordWrap="true" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.