Setting a title background image fill on a Halo Alert control in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/07/setting-a-title-background-image-fill-on-a-halo-alert-control-in-flex-4/ -->
<s:Application name="Halo_Alert_borderSkin_test3"
        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_clickHandler(evt:MouseEvent):void {
                var a:Alert = Alert.show("The quick brown fox jumps over the lazy dog", "Alert title");
                a.status = mx_internal::VERSION;
            }
        ]]>
    </fx:Script>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <s:Button id="btn"
                label="Launch Alert"
                click="btn_clickHandler(event);" />
    </mx:ApplicationControlBar>
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/07/setting-a-title-background-image-fill-on-a-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>
 
    <!-- drop shadow -->
    <s:Rect left="0" top="0" right="0" bottom="0">
        <s:filters>
            <s:DropShadowFilter blurX="20" blurY="20" alpha="0.32" distance="11" angle="90" knockout="true" />
        </s:filters>
        <s:fill>
            <s:SolidColor color="0" />
        </s:fill>
    </s:Rect>
 
    <!-- 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" alpha="0.6">
       <s:fill>
            <s:BitmapFill source="@Embed('assets/pattern_149.gif')" />
       </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>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/07/setting-a-title-background-image-fill-on-a-halo-alert-control-in-flex-4/ -->
<s:Application name="Halo_Alert_borderSkin3_test"
        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;
 
            private function init():void {
                var alertStyles:CSSStyleDeclaration = StyleManager.getStyleDeclaration("mx.controls.Alert");
                alertStyles.setStyle("borderSkin", CustomPanelBorderSkin);
            }
 
            protected function btn_clickHandler(evt:MouseEvent):void {
                var a:Alert = Alert.show("The quick brown fox jumps over the lazy dog", "Alert title");
                a.status = mx_internal::VERSION;
            }
        ]]>
    </fx:Script>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <s:Button id="btn"
                label="Launch Alert"
                click="btn_clickHandler(event);" />
    </mx:ApplicationControlBar>
 
</s:Application>