Styling the Alert control’s status message

The following example shows how you can customize the appearance of the status message in an Alert control in Flex by setting the statusStyleName style and status property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/03/styling-the-alert-controls-status-message/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Style>
        @font-face {
            src: local("Comic Sans MS");
            fontFamily: myComicSansMS;
            fontWeight: normal;
        }

        Alert {
            statusStyleName: myCustomStatusStyleName;
        }

        .myCustomStatusStyleName {
            color: red;
            fontFamily: myComicSansMS;
            fontSize: 10;
            fontWeight: normal;
        }
    </mx:Style>

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

            private var alert:Alert;

            private function init():void {
                var myMessage:String = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\\nDonec tincidunt sollicitudin sem.";
                var myTitle:String = "The quick brown fox jumped over the lazy dog";
                alert = Alert.show(myMessage, myTitle);
                alert.status = "status message";
            }
        ]]>
    </mx:Script>

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

</mx:Application>

View source is enabled in the following example.

Tagged as: status, statusStyleName