Alert control

The Alert control is part of the MX component set. There is no Spark equivalent.

All Flex components can call the static show() method of the Alert class to open a modal dialog box that contains a message and an optional title, buttons, and icons. The following example shows an Alert control pop-up dialog box:

The Alert control closes when you select a button in the control, or press the Escape key.

The Alert.show() method has the following syntax:

public static show( 
    text:String,  
    title:String=null,  
    flags:uint=mx.controls.Alert.OK,  
    parent:Sprite=null,  
    clickListener:Function=null,  
    iconClass:Class=null,  
    defaultButton:uint=mx.controls.Alert.OK 
):Alert

This method returns an Alert control object.

The following table describes the arguments of the show() method:

Argument

Description

text

(Required) Specifies the text message displayed in the dialog box.

title

Specifies the dialog box title. If omitted, displays a blank title bar.

flags

Specifies the buttons to display in the dialog box. The options are as follows:

mx.controls.Alert.OK — OK button

mx.controls.Alert.YES — Yes button

mx.controls.Alert.NO — No button

mx.controls.Alert.CANCEL — Cancel button

Each option is a bit value and can be combined with other options by using the pipe '|' operator. The buttons appear in the order listed here regardless of the order specified in your code. The default value is mx.controls.Alert.OK.

parent

The parent object of the Alert control.

clickListener

Specifies the listener for click events from the buttons.

The event object passed to this handler is an instance of the CloseEvent class. The event object contains the detail field, which is set to the button flag that was clicked (mx.controls.Alert.OK, mx.controls.Alert.CANCEL, mx.controls.Alert.YES, or mx.controls.Alert.NO).

iconClass

Specifies an icon to display to the left of the message text in the dialog box.

defaultButton

Specifies the default button by using one of the valid values for the flags argument. This is the button that is selected when the user presses the Enter key. The default value is Alert.OK.

Pressing the Escape key triggers the Cancel or No button.

To use the Alert control, you first import the Alert class into your application, then call the show() method, as the following example shows:

<?xml version="1.0"?>
<!-- controls\alert\AlertSimple.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
        ]]>
    </fx:Script>
    <s:VGroup>
        <s:TextInput id="myInput" 
                      width="150" 
                      text=""/>
        <s:Button id="myButton" 
                   label="Copy Text" 
                   click="myText.text = myInput.text;
            Alert.show('Text Copied!', 'Alert Box', mx.controls.Alert.OK);"/>
        <s:TextInput id="myText"/> 
    </s:VGroup>

</s:Application>

The executing SWF file for the previous example is shown below:

In this example, selecting the Button control copies text from the TextInput control to the TextArea control, and displays the Alert control.

You can also define an event listener for the Button control, as the following example shows:

<?xml version="1.0"?>
<!-- controls\alert\AlertSimpleEvent.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">

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

            private function alertListener():void {
                myText.text = myInput.text;
                Alert.show("Text Copied!", "Alert Box", Alert.OK);
            }
        ]]>
    </fx:Script>
    <s:VGroup>
        <s:TextInput id="myInput" 
                      width="150" 
                      text=""/>
        <s:Button id="myButton" 
                   label="Copy Text" 
                   click="alertListener();"/>
        <s:TextInput id="myText"/> 
    </s:VGroup>

</s:Application>

The executing SWF file for the previous example is shown below:

Note: After the show() method creates the dialog box, Flex continues processing of your application; it does not wait for the user to close the dialog box.

Sizing the Alert control

The Alert control automatically sizes itself to fit its text, buttons, and icon. You can explicitly size an Alert control by using the Alert object returned from the show() method, as the following example shows:

<?xml version="1.0"?>
<!-- controls\alert\AlertSize.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">

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

            // Define variable to hold the Alert object. 
            public var myAlert:Alert;

            private function openAlert():void {
                myAlert = Alert.show("Copy Text?", "Alert", 
                    Alert.OK    | Alert.CANCEL);
                // Set the height and width of the Alert control.
                myAlert.height=250;
                myAlert.width=250;
            }
        ]]>
    </fx:Script>
    <s:VGroup>
        <s:TextInput id="myInput" 
                      width="150" 
                      text=""/>
        <s:Button id="myButton" 
                   label="Copy Text" 
                   click="openAlert();"/>
        <s:TextInput id="myText"/>
    </s:VGroup>

</s:Application>

The executing SWF file for the previous example is shown below:

In this example, you set the height and width properties of the Alert object to explicitly size the control.

Using event listeners with the Alert control

The next example adds an event listener to the Alert control dialog box. An event listener lets you perform processing when the user selects a button of the Alert control. The event object passed to the event listener is of type CloseEvent.

In the next example, you only copy the text when the user selects the OK button in the Alert control:

<?xml version="1.0"?>
<!-- controls\alert\AlertEvent.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">

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

            private function alertListener(eventObj:CloseEvent):void {
                // Check to see if the OK button was pressed.
                if (eventObj.detail==Alert.OK) {
                    myText.text = myInput.text; 
                }
            }
        ]]>
    </fx:Script>
    
    <s:VGroup>
        <s:TextInput id="myInput" 
            width="150" 
            text="" />
        <s:Button id="myButton" 
            label="Copy Text" 
            click='Alert.show("Copy Text?", "Alert",
            Alert.OK | Alert.CANCEL, this,
            alertListener, null, Alert.OK);'/>
        <s:TextInput id="myText"/>
    </s:VGroup>
</s:Application>

The executing SWF file for the previous example is shown below:

In this example, you define an event listener for the Alert control. Within the body of the event listener, you determine which button was pressed by examining the detail property of the event object. The event object is an instance of the CloseEvent class. If the user pressed the OK button, copy the text. If the user pressed any other button, or pressed the Escape key, do not copy the text.

Specifying an Alert control icon

You can include an icon in the Alert control that appears to the left of the Alert control text. This example modifies the example from the previous section to add the Embed metadata tag to import the icon. For more information on importing resources, see Using ActionScript.

<?xml version="1.0"?>
<!-- controls\alert\AlertIcon.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.CloseEvent;
            
            [Embed(source="assets/alertIcon.jpg")] 
            [Bindable]
            public var iconSymbol:Class; 

            private function alertListener(eventObj:CloseEvent):void {
                // Check to see if the OK button was pressed.
                if (eventObj.detail==Alert.OK) {
                    myText.text = myInput.text; 
                }
            }
        ]]>
    </fx:Script>
    <s:VGroup>
        <s:TextInput id="myInput" 
                      width="150" 
                      text=""/>
        <s:Button id="myButton" 
                   label="Copy Text"
                   click='Alert.show("Copy Text?", "Alert",
            Alert.OK | Alert.CANCEL, this,
                alertListener, iconSymbol,  Alert.OK );'/>
        <s:TextInput id="myText"/>
    </s:VGroup>

</s:Application>

The executing SWF file for the previous example is shown below: