Flex Examples » messageStyleName http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Styling the Alert control’s message text http://blog.flexexamples.com/2008/01/03/styling-the-alert-controls-message-text/ http://blog.flexexamples.com/2008/01/03/styling-the-alert-controls-message-text/#comments Thu, 03 Jan 2008 15:34:35 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/03/styling-the-alert-controls-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: [...]]]> 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”.

 
]]> http://blog.flexexamples.com/2008/01/03/styling-the-alert-controls-message-text/feed/ 4 Styling the Flex Alert control http://blog.flexexamples.com/2007/08/11/styling-the-flex-alert-control/ http://blog.flexexamples.com/2007/08/11/styling-the-flex-alert-control/#comments Sun, 12 Aug 2007 05:15:27 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/11/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.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/08/11/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.

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.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/11/styling-the-flex-alert-control/ -->
<mx:Application name="Alert_style_test"
        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.

Base 02 font by www.stereo-type.net.

 
]]> http://blog.flexexamples.com/2007/08/11/styling-the-flex-alert-control/feed/ 17