FLEX panel header gradient

Question

Does anyone know how to apply a header gradient to a Panel container?
The only info I have found about this is here:
http://stackoverflow.com/questions/1215433
^ And I do not see a solution? I know some of the themes apply gradients to panel headers, but is there a way to do this in CSS?

Answer 1

I am looking at the GraphiteGraphical PanelSkin. I no longer use this theme in my application, BUT, it did produce gradients on the panel headers (as desired).
Here is the PanelSkin definition:
<?xml version="1.0" encoding="utf-8"?>
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2009 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The default skin class for a Spark Panel container.
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false"
    minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
    <fx:Metadata>
        <![CDATA[
        * @copy spark.skins.spark.ApplicationSkin#hostComponent
        [HostComponent("spark.components.Panel")]
        ]]>
    </fx:Metadata>
    <fx:Script fb:purpose="styling">
         * @private
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            if (getStyle("borderVisible") == true)
                border.visible = true;
                background.left = background.top = background.right = background.bottom = 1;
                contents.left = contents.top = contents.right = contents.bottom = 1;
            else
                border.visible = false;
                background.left = background.top = background.right = background.bottom = 0;
                contents.left = contents.top = contents.right = contents.bottom = 0;
            dropShadow.visible = getStyle("dropShadowVisible");
            var cr:Number = getStyle("cornerRadius");
            if (cornerRadius != cr)
                cornerRadius = cr;
                var withControls:Boolean =
                    (currentState == "disabledWithControlBar" ||
                     currentState == "normalWithControlBar");
                dropShadow.tlRadius = cornerRadius;
                dropShadow.trRadius = cornerRadius;
                dropShadow.blRadius = withControls ? cornerRadius : 0;
                dropShadow.brRadius = withControls ? cornerRadius : 0;
                setPartCornerRadii(topMaskRect, withControls);
                setPartCornerRadii(border, withControls);
                setPartCornerRadii(background, withControls);               
            if (bottomMaskRect) setPartCornerRadii(bottomMaskRect, withControls);
            borderStroke.color = getStyle("borderColor");
            borderStroke.alpha = getStyle("borderAlpha");
            backgroundFill.color = getStyle("backgroundColor");
            backgroundFill.alpha = getStyle("backgroundAlpha");
            super.updateDisplayList(unscaledWidth, unscaledHeight);
         * @private
        private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void
            target.topLeftRadiusX = cornerRadius;
            target.topRightRadiusX = cornerRadius;
            target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
            target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
        private var cornerRadius:Number;
    </fx:Script>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalWithControlBar" stateGroups="withControls" />
        <s:State name="disabledWithControlBar" stateGroups="withControls" />
    </s:states>
    <!-- drop shadow can't be hittable so it stays sibling of other graphics -->
    <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.32" distance="11"
                             angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
    <!-- drop shadow can't be hittable so all other graphics go in this group -->
    <s:Group left="0" right="0" top="0" bottom="0">
        <!-- top group mask -->
        <s:Group left="3" top="3" right="3" bottom="3" id="topGroupMask" >
            <s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
                <s:fill>
                    <s:SolidColor alpha="1"/>
                </s:fill>
            </s:Rect>
        </s:Group>
        <!-- bottom group mask -->
        <s:Group left="0" top="0" right="0" bottom="0" id="bottomGroupMask"
                 includeIn="normalWithControlBar, disabledWithControlBar">
            <s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
                <s:fill>
                    <s:SolidColor alpha="1"/>
                 </s:fill>
            </s:Rect>
        </s:Group>
        <!-- layer 1: border -->
        <s:Rect id="border" left="0" right="0" top="0" bottom="0" >
            <s:stroke>
                <s:SolidColorStroke id="borderStroke" weight="1" />
            </s:stroke>
        </s:Rect>
        <!-- layer 2: background fill -->
        <!--- Defines the appearance of the PanelSkin class's background. -->
        <s:Rect id="background" left="1" top="1" right="1" bottom="1">
            <s:fill>
                <!-- Defines the  PanelSkin class's background fill. The default color is 0xFFFFFF. -->
                <s:SolidColor id="backgroundFill" />
            </s:fill>
        </s:Rect>
        <!-- layer 3: contents -->
        <!--- contains the vertical stack of titlebar content and controlbar -->
        <s:Group left="1" right="1" top="1" bottom="1" id="contents">
            <s:layout>
                <s:VerticalLayout gap="0" horizontalAlign="justify" />
            </s:layout>
            <s:Group id="topGroup" mask="{topGroupMask}">
                <!-- layer 0: title bar fill -->
                <s:Rect id="tbFill" left="0" right="0" top="0" bottom="0">
                    <s:fill>
                        <s:LinearGradient rotation="90">
                            <s:GradientEntry color="0x696a69" />
                            <s:GradientEntry color="0x282828" />
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
                <!-- layer 3: text -->
                <!--- Defines the appearance of the PanelSkin class's title bar. -->
                <s:Label id="titleDisplay" maxDisplayedLines="1"
                         left="9" right="3" top="1" bottom="0" minHeight="30"
                         verticalAlign="middle" fontWeight="bold">
                </s:Label>
            </s:Group>
            <!--
            Note: setting the minimum size to 0 here so that changes to the host component's
            size will not be thwarted by this skin part's minimum size.   This is a compromise,
            more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
            -->
            <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
            </s:Group>
            <s:Group id="bottomGroup" minWidth="0" minHeight="0"
                     includeIn="normalWithControlBar, disabledWithControlBar" >
                <s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}">
                    <!-- layer 0: control bar divider line -->
                    <s:Rect left="0" right="0" top="0" height="1" alpha="0.22">
                        <s:fill>
                            <s:SolidColor color="0x000000" />
                        </s:fill>
                    </s:Rect>
                    <!-- layer 1: control bar highlight -->
                    <s:Rect left="0" right="0" top="1" bottom="0">
                        <s:stroke>
                            <s:SolidColorStroke color="0x282828" />
                        </s:stroke>
                    </s:Rect>
                    <!-- layer 2: control bar fill -->
                    <s:Rect left="1" right="1" top="2" bottom="1">
                        <s:fill>
                            <s:SolidColor color="0x696a69" />
                        </s:fill>
                    </s:Rect>
                </s:Group>
                <!-- layer 3: control bar -->
                <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                    <s:layout>
                        <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                    </s:layout>
                </s:Group>
            </s:Group>
        </s:Group>
    </s:Group>
</s:Skin>
^ Where is the gradient being applied to the Panel? I dont really see it?