Styling Alert controls in Flex using the StyleManager class and setStyle() methods

The following example shows how you can style a Flex Alert control using the static StyleManager.getStyleDeclaration() method, and the setStyle() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/29/styling-alert-controls-in-flex-using-the-stylemanager-class-and-setstyle-methods/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

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

            private var alert:Alert;
            private var alertCSS:CSSStyleDeclaration;

            private function init():void {
                alertCSS = StyleManager.getStyleDeclaration("Alert");
            }

            private function showAlert(color:Object):void {
                alertCSS.setStyle("modalTransparencyColor", color);
                alertCSS.setStyle("themeColor", color);
                alert = Alert.show("The quick brown fox...");
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Red"
                themeColor="red"
                click="showAlert('red');" />
        <mx:Button label="Orange"
                themeColor="haloOrange"
                click="showAlert('haloOrange');" />
        <mx:Button label="Yellow"
                themeColor="yellow"
                click="showAlert('yellow');" />
        <mx:Button label="Green"
                themeColor="haloGreen"
                click="showAlert('haloGreen');" />
        <mx:Button label="Blue"
                themeColor="haloBlue"
                click="showAlert('haloBlue');" />
    </mx:ApplicationControlBar>

</mx:Application>

View source is enabled in the following example.

3 thoughts on “Styling Alert controls in Flex using the StyleManager class and setStyle() methods

  1. If you are setting background images using truly dynamic runtime CSS capabilities as shown below (as opposed to compiling with mxmlc) this method does not seem to work!

    alertCSS.setStyle(“backgroundImage”, “../images/myImage1.png”); // does not work

    On the other had compiling a swf with the following selector works correctly.

    .headertopcontent {
    backgroundImage: ‘../images/myimages.png’;
    color: #202020;
    }

    Are there any restrictions on what properties the alertCSS object can set? It looks like it can change colors but not manipulate properties that deal with images/urls… Assuming of course the object that is being styled dynamically can handle those properties…

Comments are closed.