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”.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

4 Responses to Styling the Alert control’s message text

  1. Yann says:

    Man…
    whats code i need to put to turn it on?
    Ex:
    some code=mxmlarchive.mxml

    i have looked out your source and this is an .SWF archive…

    This code is a lye?

  2. Aaron says:

    Hi Peter! You have without a doubt created the best Flex resource on the web.

    Do you know of a way to resize the width of the Alert message’s text? I followed the example shown here to resize the Alert control:

    http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7da0.html#WS2db454920e96a9e51e63e3d11c0bf63b33-7f9d

    After resizing the Alert control, the message text is wider than the Alert control and the text itself hangs over both sides. As usual, an exhaustive web search led me right back here. =D

    • Aaron says:

      I added a few newline characters to the string to break it into shorter lines. It’s an easy fix for literal strings, but in my case the Alert message strings are created from strings of varying length.

      • Aaron says:

        I’ve looked all over and still can’t find a way to set the width of the Alert message text. I went ahead and customized a TitleWindow to better control the layout myself. It’s not hard to do, and I suggest anyone facing the problem of an overflowing Alert message just make there own TitleWindow. It’s a heck of a lot easier than searching for a fix!

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree