Detecting when an Alert control is closed in Flex

The following example shows how you can detect when a Flex Alert control is closed by listening for the close event by specifying the closeHandler parameter in the static Alert.show() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/01/detecting-when-an-alert-control-is-closed-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

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

            private var alert:Alert;

            private function init():void {
                Alert.buttonWidth = 100;
                Alert.yesLabel += " (" + Alert.YES + ")";
                Alert.noLabel += " (" + Alert.NO + ")";
                Alert.okLabel += " (" + Alert.OK + ")";
                Alert.cancelLabel += " (" + Alert.CANCEL + ")";
            }

            private function showAlert():void {
                var flags:uint = 0;
                if (yesCheckBox.selected) flags += Alert.YES;
                if (noCheckBox.selected) flags += Alert.NO;
                if (okCheckBox.selected) flags += Alert.OK;
                if (cancelCheckBox.selected) flags += Alert.CANCEL;
                if (nonModalCheckBox.selected) flags += Alert.NONMODAL;
                alert = Alert.show("The quick brown fox jumped over the lazy dog.",
                                    "title",
                                    flags,
                                    null,
                                    alert_close);
            }

            private function alert_close(evt:CloseEvent):void {
                arrColl.addItem(evt);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Show alert"
                click="showAlert();" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            itemRenderer="mx.controls.Label"
            width="100%"
            height="100%" />

    <mx:HBox width="100%">
        <mx:CheckBox id="yesCheckBox"
                label="Alert.YES"
                width="20%" />
        <mx:CheckBox id="noCheckBox"
                label="Alert.NO"
                width="20%" />
        <mx:CheckBox id="okCheckBox"
                label="Alert.OK"
                width="20%" />
        <mx:CheckBox id="cancelCheckBox"
                label="Alert.CANCEL"
                width="20%" />
        <mx:CheckBox id="nonModalCheckBox"
                label="Alert.NONMODAL"
                width="20%" />
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.

For another example, see “Detecting which button a user pressed to dismiss an Alert dialog”.

3 thoughts on “Detecting when an Alert control is closed in Flex

  1. is it possible to make the text in the Alert scrollable? Sometimes when I try and display a stack trace in an Alert the text goes outside of the Alert window.

  2. My title window has some validation. Errors are displayed in alerts. I want to close my title window on Esc key. The alerts are closed on Esc by default as well. So when I press Esc to close the alert my title window is closed as well. I know I am missing something with events propagation sequence.
    The question is: how can I catch that the ESC was pressed for alert?

Comments are closed.