Detecting which button a user pressed to dismiss an Alert dialog

In the previous post we looked at creating and displaying a basic, bare[ly usable], Alert dialog. Now we’ll look at how to determine which button a user pressed to dismiss the dialog.

Again, the example isn’t overly complex, or amazing, but it shows how you can build some basic logic into an application where you can commit or reject an action based on a user’s feedback.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/07/18/detecting-which-button-a-user-pressed-to-dismiss-an-alert-dialog/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private var alert:Alert;

            private function showAlert():void {
                var text:String = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.nntHello World";
                var title:String = "This is the title of the Alert window";

                alert = Alert.show(text, title, Alert.YES | Alert.NO);
                alert.addEventListener(CloseEvent.CLOSE, alert_close);

                message.text = "";
            }

            private function alert_close(evt:CloseEvent):void {
                switch (evt.detail) {
                    case Alert.CANCEL:
                        message.text = "You pressed `" + Alert.cancelLabel + "`.";
                        break;
                    case Alert.NO:
                        message.text = "You pressed `" + Alert.noLabel + "`.";
                        break;
                    case Alert.OK:
                        message.text = "You pressed `" + Alert.okLabel + "`.";
                        break;
                    case Alert.YES:
                        message.text = "You pressed `" + Alert.yesLabel + "`.";
                        break;
                }
            }
        ]]>
    </mx:Script>

    <mx:Button label="Alert.show()" click="showAlert();" />
    <mx:Label id="message" />

</mx:Application>

View source is enabled in the following example.

Instead of manually adding an event listener for the close event, you could also specify the closeHandler argument in the Alert.show() method, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/07/18/detecting-which-button-a-user-pressed-to-dismiss-an-alert-dialog/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private var alert:Alert;

            private function showAlert():void {
                var text:String = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.nntHello World";
                var title:String = "This is the title of the Alert window";

                alert = Alert.show(text, title, Alert.YES | Alert.NO, null, alert_close);

                message.text = "";
            }

            private function alert_close(evt:CloseEvent):void {
                switch (evt.detail) {
                    case Alert.CANCEL:
                        message.text = "You pressed `" + Alert.cancelLabel + "`.";
                        break;
                    case Alert.NO:
                        message.text = "You pressed `" + Alert.noLabel + "`.";
                        break;
                    case Alert.OK:
                        message.text = "You pressed `" + Alert.okLabel + "`.";
                        break;
                    case Alert.YES:
                        message.text = "You pressed `" + Alert.yesLabel + "`.";
                        break;
                }
            }
        ]]>
    </mx:Script>

    <mx:Button label="Alert.show()" click="showAlert();" />
    <mx:Label id="message" />

</mx:Application>

View source is enabled in the following example.