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

In a previous example, “Setting a background image fill on a Halo Alert control in Flex 4”, we saw how you could can a repeating background image fill on a Halo Alert control (with default Spark skin) in Flex 4 by setting the borderSkin style.

The following example shows how you can set the title bar background image fill on a Halo Alert control (with default Spark skin) 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/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>

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

<?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>

Or, you can also set the borderSkin style globally ActionScript, as seen in the following example:

<?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>

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.

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

Comments are closed.