Removing the default dropshadow from the Halo Alert control in Flex 4

The following example shows how you can remove the default dropshadow from the Halo Alert control (with default Spark skins) in Flex 4 by setting the borderSkin style.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/06/removing-the-default-dropshadow-from-the-halo-alert-control-in-flex-4/ -->
<s:Application name="Halo_Alert_borderSkin_test2"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|Alert {
            borderSkin: ClassReference("skins.CustomPanelBorderSkin");
        }
    </fx:Style>
 
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
 
            protected function btn_click(evt:MouseEvent):void {
                Alert.show("The quick brown fox jumps over the lazy dog.", "Alert title");
            }
        ]]>
    </fx:Script>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <s:Button id="btn"
                label="Show Alert"
                click="btn_click(event);" />
    </mx:ApplicationControlBar>
 
</s:Application>

And the custom border skin class, skins/CustomPanelBorderSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/06/removing-the-default-dropshadow-from-the-halo-alert-control-in-flex-4/ -->
<s:SparkSkin name="CustomPanelBorderSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        implements="mx.core.IRectangularBorder">
 
    <fx:Script>
        <![CDATA[
            import mx.core.EdgeMetrics;
            import mx.core.IUIComponent;
 
            /* Define the skin elements that should not be colorized. 
               For panel, border and title backround are skinned, but the content area and title text are not. */
            static private const exclusions:Array = ["background"];
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
            static private const contentFill:Array = ["bgFill"];
            override public function get contentItems():Array {
                return contentFill
            }
 
            private var _metrics:EdgeMetrics = new EdgeMetrics(1, 32, 1, 1);
            public function get borderMetrics():EdgeMetrics {
                var hasPanelParent:Boolean = isPanel(parent);
                var controlBar:IUIComponent = hasPanelParent ? Object(parent).mx_internal::_controlBar : null;
 
                if (controlBar && controlBar.includeInLayout) {
                    _metrics.bottom = controlBar.getExplicitOrMeasuredHeight() + 1;
                } else {
                    _metrics.bottom = 1;
                }
                return _metrics;
            }
 
            public function get backgroundImageBounds():Rectangle {
                return null;
            }
 
            public function set backgroundImageBounds(value:Rectangle):void {
            }
 
            public function get hasBackgroundImage():Boolean {
                return false;
            }
 
            public function layoutBackgroundImage():void {
            }
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                var em:EdgeMetrics = borderMetrics;
                if (em.bottom > 1) {
                    cbbg.height = em.bottom - 1;
                    cbdiv.bottom = cbbg.height;
                    cbbg.visible = cbdiv.visible = true;
                } else {
                    cbbg.visible = cbdiv.visible = false;
                }
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
 
            private static var panels:Object = {};
 
            private static function isPanel(parent:Object):Boolean {
                var s:String = getQualifiedClassName(parent);
                if (panels[s] == 1) {
                    return true;
                }
                if (panels[s] == 0) {
                    return false;
                }
                if (s == "mx.containers::Panel") {
                    panels[s] == 1;
                    return true;
                }
                var x:XML = describeType(parent);
                var xmllist:XMLList = x.extendsClass.(@type == "mx.containers::Panel");
                if (xmllist.length() == 0) {
                    panels[s] = 0;
                    return false;
                }
                panels[s] = 1;
                return true;
            }
        ]]>
    </fx:Script>
 
    <!-- layer 1: border -->
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
        </s:stroke>
    </s:Rect>
 
    <!-- layer 2: background fill -->
    <s:Rect id="background" left="1" top="1" right="1" bottom="1">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" id="bgFill" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 3: title bar fill -->
    <s:Rect left="1" right="1" top="1" height="30">
       <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xE2E2E2" />
                <s:GradientEntry color="0xD9D9D9" />
            </s:LinearGradient>
       </s:fill>
    </s:Rect>
 
    <!-- layer 4: title bar highlight -->
    <s:Rect left="1" right="1" top="1" height="30">
       <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xEAEAEA" />
                <s:GradientEntry color="0xD9D9D9" />
            </s:LinearGradientStroke>
       </s:stroke>
    </s:Rect>
    <s:Rect left="1" right="1" top="31" height="1">
        <s:fill>
            <s:SolidColor color="0xC0C0C0" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 5: control bar background -->
    <s:Rect id="cbbg" left="1" right="1" bottom="1" height="20">
        <s:fill>
            <s:SolidColor color="0xE8E8E8" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 6: control bar divider line -->
    <s:Rect id="cbdiv" left="1" right="1" bottom="20" height="1">
        <s:fill>
            <s:SolidColor color="0xCDCDCD" />
        </s:fill>
    </s:Rect>
 
</s:SparkSkin>

[GoogleAdsWide]

Or, you could set the borderSkin style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/06/removing-the-default-dropshadow-from-the-halo-alert-control-in-flex-4/ -->
<s:Application name="Halo_Alert_borderSkin_test2"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import skins.CustomPanelBorderSkin;
 
            protected function init():void {
                var alertStyles:CSSStyleDeclaration = StyleManager.getStyleDeclaration("mx.controls.Alert");
                alertStyles.setStyle("borderSkin", CustomPanelBorderSkin);
            }
 
            protected function btn_click(evt:MouseEvent):void {
                Alert.show("The quick brown fox jumps over the lazy dog.", "Alert title");
            }
        ]]>
    </fx:Script>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <s:Button id="btn"
                label="Show Alert"
                click="btn_click(event);" />
    </mx:ApplicationControlBar>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.