Styling the Flex Alert control

This is a more complex version of my previous example. This time in addition to making the Alert control’s text non-selectable, we use an embedded font for the Alert title, message, buttons, as well as edit the drop shadow, remove the rounded corners, and remove the button skins.

Full code after the jump.

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.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/11/styling-the-flex-alert-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="showAlert()"
        applicationComplete="init()">

    <!-- Used by the ApplicationControlBar control. -->
    <mx:String id="fileName" />
    <mx:String id="fileSize" />

    <!-- Used by the Alert control. -->
    <mx:String id="message">The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.</mx:String>
    <mx:String id="title">The quick brown fox jumped over the lazy dog?</mx:String>

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

            private var a:Alert;

            private function init():void {
                var appInfo:LoaderInfo = Application.application.loaderInfo;
                /* Just grab the filename from the SWF URL. */
                fileName = (appInfo.url).split("/").pop();
                /* Convert bytes to kilobytes. */
                fileSize = (appInfo.bytesTotal / 1024).toFixed(2);
            }

            private function showAlert():void {
                Alert.yesLabel = "Accept";
                Alert.noLabel = "Reject";
                Alert.buttonWidth = 120;

                a = Alert.show(
                        message,
                        title,
                        Alert.NO | Alert.YES
                    );
                /* Make the Alert form's text non-selectable. */
                a.mx_internal::alertForm.mx_internal::textField.selectable = false;
            }
        ]]>
    </mx:Script>

    <mx:Style>
        @font-face{
            src: url("./fonts/base02.ttf");
            fontFamily: "Base02";
        }

        Alert {
            titleStyleName: "alertTitle";
            messageStyleName: "alertMessage";
            buttonStyleName: "alertButton";
            dropShadowEnabled: true;
            shadowDistance: 5;
            shadowDirection: right;
            cornerRadius: 0;
            embedFonts: true;
            fontFamily: Base02;
        }

        .alertTitle {
            letterSpacing: 0;
            fontSize: 14;
            color: red;
        }

        .alertMessage {
            letterSpacing: 0;
            fontSize: 10;
            fontWeight: normal;
            color: black;
        }

        .alertButton {
            letterSpacing: 0;
            fontSize: 11;
            cornerRadius: 10;
            fontWeight: normal;
            textRollOverColor: white;
            color: red;
            skin: ClassReference(null);
        }
    </mx:Style>

    <!-- Display SWF name and file size. -->
    <mx:ApplicationControlBar id="applicationControlBar" dock="true">
        <mx:Label id="info" text="{fileName} ({fileSize}kb)" />
    </mx:ApplicationControlBar>

    <!-- Click to launch Alert control. -->
    <mx:Button label="Launch Alert" click="showAlert()" />

</mx:Application>

View source is enabled in the following application.

I didn’t include the TrueType font in the source code ZIP. If you want to grab that exact font, head over to the creator’s site @ http://www.stereo-type.net/ and download “Base 02″.

Tagged as: @font face, buttonStyleName, messageStyleName, titleStyleName