Setting a control bar background image fill on a Halo Panel control in Flex 4

The following example shows how you can set the control bar background image fill on a Halo Panel 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/08/setting-a-control-bar-background-image-fill-on-a-halo-panel-control-in-flex-4/ -->
<s:Application name="Halo_Panel_borderSkin_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">
 
    <mx:Panel id="panel"
            borderSkin="skins.CustomPanelBorderSkin"
            width="80%" height="80%"
            horizontalCenter="0" verticalCenter="0">
        <s:List id="list" labelField="fontName" width="100%" height="100%">
            <s:dataProvider>
                <s:ArrayList source="{Font.enumerateFonts(true)}" />
            </s:dataProvider>
        </s:List>
        <mx:ControlBar width="100%" height="60">
            <s:Group width="100%">
                <s:SimpleText id="lbl"
                        text="The quick brown fox jumps over the lazy dog"
                        fontFamily="{list.selectedItem.fontName}"
                        fontSize="32"
                        maxDisplayedLines="1"
                        width="100%" />
            </s:Group>
        </mx:ControlBar>
    </mx:Panel>
 
</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/08/setting-a-control-bar-background-image-fill-on-a-halo-panel-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">
       <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" alpha="0.6">
        <s:fill>
            <s:BitmapFill source="@Embed('assets/pattern_149.gif')" />
        </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 can set the borderSkin style globally using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/08/setting-a-control-bar-background-image-fill-on-a-halo-panel-control-in-flex-4/ -->
<s:Application name="Halo_Panel_borderSkin_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 skins.CustomPanelBorderSkin;
 
            private function init():void {
                var panelStyles:CSSStyleDeclaration = StyleManager.getStyleDeclaration("mx.containers.Panel");
                panelStyles.setStyle("borderSkin", CustomPanelBorderSkin);
            }
        ]]>
    </fx:Script>
 
    <mx:Panel id="panel"
            borderSkin="skins.CustomPanelBorderSkin"
            width="80%" height="80%"
            horizontalCenter="0" verticalCenter="0">
        <s:List id="list" labelField="fontName" width="100%" height="100%">
            <s:dataProvider>
                <s:ArrayList source="{Font.enumerateFonts(true)}" />
            </s:dataProvider>
        </s:List>
        <mx:ControlBar width="100%" height="60">
            <s:Group width="100%">
                <s:SimpleText id="lbl"
                        text="The quick brown fox jumps over the lazy dog"
                        fontFamily="{list.selectedItem.fontName}"
                        fontSize="32"
                        maxDisplayedLines="1"
                        width="100%" />
            </s:Group>
        </mx:ControlBar>
    </mx:Panel>
 
</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.

2 thoughts on “Setting a control bar background image fill on a Halo Panel control in Flex 4

  1. “Sorry, this blog is terrible at eating HTML comments.
    If you’re pasting any HTML/XML/MXML code, you need to convert your characters to > .”

    Can’t you do a simple string replace ???

    1. @Anonymous,

      I don’t know. Possibly. It’s just what WordPress and/or my WP theme (Thesis) do by default.
      But if I did change the behavior, I wouldn’t be able to put links or do basic HTML formatting in my comments. Plus, it takes about 2 seconds to paste code into Notepad and do a search/replace for ‘<‘ and ‘>’ characters.

      Peter

Comments are closed.