Create a Panel skin (Spark) with a background fill color I can pass as a parameter

Question

I'm trying to create a Panel skin (Spark) with a background fill color I can pass as a parameter. (See in bold:)

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin name="CustomPanelSkin"
               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">

     <s:states>
         <s:State name="normal" />
         <s:State name="disabled" />
         <s:State name="normalWithControlBar" stateGroups="withControls" />
         <s:State name="disabledWithControlBar" stateGroups="withControls" />
     </s:states>

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

     <s:Group left="0" right="0" top="0" bottom="0">
         <s:Rect left="0" right="0" top="0" bottom="0" radiusX="12" radiusY="12">
               <s:fill>
                   <s:SolidColor color="#184c81" />
               </s:fill>
         </s:Rect>

         <s:Group id="contents" left="1" right="1" top="1" bottom="1">
               <s:layout>
                   <s:VerticalLayout gap="0" horizontalAlign="justify" />
               </s:layout>

               <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
               </s:Group>
         </s:Group>
     </s:Group>
</s:SparkSkin>

From what I read I should create a subclass, but there is not much material on the subject. I would later on want to use this skin in many Panel controls I have in my application.

Answer 1

Base Panel skin has background color implementation using css styles. You can set it using action script:

panel.setStyle("backgroundColor", 0x184c81);

Also you can control skin components when you have a reference to it in the host component. Read Implementing the partAdded() and partRemoved() methods for skinnable components for Spark components