03
Jan
08

Styling the Alert control’s message text

The following example shows how you can customize the appearance of the message text in an Alert control in Flex by setting the messageStyleName style:

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-message-text/ -->
<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;
        }

        @font-face {
            src: local("Comic Sans MS");
            fontFamily: myComicSansMS;
            fontWeight: bold;
        }

        Alert {
            messageStyleName: myCustomMessageStyleName;
        }

        .myCustomMessageStyleName {
            color: haloOrange;
            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);
            }
        ]]>
    </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.

As you can see, setting the font family and font size on the Alert control’s message also caused the styles to be changed in the title bar, which is why we embedded both the normal and bold fonts into the application. If you want to override the styles in the title area, see “Styling the Alert control’s title bar”.


0 Responses to “Styling the Alert control's message text”


  1. No Comments

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".