Changing the title bar background fill on a Spark Panel container in Flex Gumbo

The following example shows how you can modify the background fill on a Spark Panel container’s title bar in Flex Gumbo by creating a custom skin and modifying the title bar fill Rect object’s fill property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/02/changing-the-title-bar-background-fill-on-a-spark-panel-container-in-flex-gumbo/ -->
<s:Application name="Spark_Panel_titleBar_fill_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">

    <s:Panel id="panel"
            title="Spark Panel title"
            horizontalCenter="0"
            verticalCenter="0"
            width="320"
            height="240"
            skinClass="skins.CustomPanelSkin">
        <s:TextArea id="textArea"
                initialize="textArea.text = mx_internal::VERSION;"
                left="20" top="20" />
    </s:Panel>

</s:Application>

And the custom skin class, CustomPanelSkin.mxml, is as follows:

View skins/CustomPanelSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/02/changing-the-title-bar-background-fill-on-a-spark-panel-container-in-flex-gumbo/ -->
<s:SparkSkin name="CustomPanelSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        alpha.disabled="0.5">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <fx:Metadata>
        <![CDATA[
            [HostComponent("spark.components.Panel")]
        ]]>
    </fx:Metadata>

    <fx:Script>
        <![CDATA[
            /* 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", "titleField", "contentGroup"];

            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};
        ]]>
    </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:SolidColor color="haloBlue" />
       </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: text -->
    <s:SimpleText id="titleField" lineBreak="explicit"
             left="10" right="4" top="2" height="30"
             verticalAlign="middle" fontWeight="bold" color="white" />

    <s:Group id="contentGroup" left="1" right="1" top="32" bottom="1" />

</s:SparkSkin>

View source is enabled in the following example.