Flex Examples

Similar to the previous post where we covered a couple of techniques for embedding an icon into a Button control, this post explores embedding an icon into an Alert control. An icon in an Alert control appears to the left of the alert’s message text, but the second example will show how you can easily tweak the code to also add icons to the nested buttons controls within the alert dialog itself. See the full code after the jump.

Download source (ZIP, 2K) | View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/07/21/setting-an-icon-in-an-alert-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        creationComplete="showAlert();"
        backgroundColor="white">

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

            // Embed the error.png image.
            [Bindable]
            [Embed(source='assets/error.png')]
            private var Icon:Class;            

            private var a:Alert;            

            private function showAlert():void {
                var titleText:String = "WARNING";
                var messageText:String = "Are you sure you would like to erase the Internet?\n\nPress OK to continue, or Cancel to abort.";
                /* Display the Alert, show the OK and Cancel buttons,
                    and show an icon represented by the Icon binding. */
                a = Alert.show(messageText, titleText, Alert.OK | Alert.CANCEL, null, doClose, Icon);
            }            

            private function doClose(evt:CloseEvent):void {
                // do nothing.
            }
        ]]>
    </mx:Script>            

    <mx:Button label="Launch Alert" click="showAlert();" />            

</mx:Application>

View source enabled in the following example.

The second example uses the mx_internal namespace to access a couple of internal properties (descriptions taken from the documented source code):

alertForm — The internal AlertForm object that contains the text, icon, and buttons of the Alert control.
buttons — An Array that contains any Buttons appearing in the Alert control.

Since this example uses the mx_internal namespace, you can’t always depend on this behavior to work in future versions of the Flex SDK. Use at your own risk.

Download source (ZIP, 4K) | View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/07/21/setting-an-icon-in-an-alert-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        creationComplete="showAlert();"
        backgroundColor="white" > 

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

            [Bindable]
            [Embed(source='assets/error.png')]
            private var Icon:Class;            

            [Bindable]
            [Embed(source='assets/tick.png')]
            private var TickIcon:Class;            

            [Bindable]
            [Embed(source='assets/cross.png')]
            private var CrossIcon:Class;            

            private var a:Alert;            

            private function showAlert():void {
                /* Set button width so it is large enough to accomodate
                    an icon and default button labels. */
                Alert.buttonWidth = 100;            

                var titleText:String = "WARNING";
                var messageText:String = "Are you sure you would like to erase the Internet?\n\nPress OK to continue, or Cancel to abort.";
                /* Display the Alert, show the OK and Cancel buttons,
                    and show an icon represented by the Icon binding. */
                a = Alert.show(messageText, titleText, Alert.OK | Alert.CANCEL, null, doClose, Icon);            

                /* Get a reference to the Alert control's internal
                    buttons array. */
                var buttonArray:Array = a.mx_internal::alertForm.mx_internal::buttons;            

                /* Set the first button to the TickIcon class, and the
                    second icon to the CrossIcon class. */
                buttonArray[0].setStyle("icon", TickIcon);
                buttonArray[1].setStyle("icon", CrossIcon);            

                progressBar.visible = false;
            }            

            private function doClose(evt:CloseEvent):void {
                if (evt.detail == Alert.OK) {
                    progressBar.visible = true;
                } else if (evt.detail == Alert.CANCEL) {
                    // do nothing.
                }
            }
        ]]>
    </mx:Script>            

    <mx:Button label="Launch Alert"
            click="showAlert();" /> 

    <mx:ProgressBar id="progressBar"
            label="Deleting..."
            indeterminate="true"
            visible="false" />            

</mx:Application>

View source enabled in the following example.