Skins Question

Question

I have worked in flex 3 for a while and I am trying to wrap my head around skins. I see how they work but my question is, how do you configure the skin in the mxml component that is using it? For example:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    skinClass="com.company.components.skins.GradientSkin">
How do i pass params to that skin to tell it what color the gradient should be? Also my skin defines the content area group which from what I can tell replaces teh padLeft,padRight etc. How would I specify in the application what the padding is? I don't want to put that in the skin class as hard coded because I cannot reuse it then.
Any thoughts on how I am looking at this incorrectly or what I can do to paramatize my skin cleanly? Thanks.

Answer 1

This was what I was looking for. I am 98% of the way there now. I implemented as you suggested but I still am not getting it right.
I removed almost all the code to make this as simple as possible. I just wanted to get a gradient on the applications background. Here is what I have.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    skinClass="com.ericsson.components.skins.GradientSkin"
    width="100%" height="100%">
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        s:Application
            skinGradientRotation:90;
            skinGradientStartColor:#000000;
            skinGradientEndColor:#FFFFFF;
    </fx:Style>
</s:Application>
And the skin
<?xml version="1.0" encoding="utf-8"?>
<s:Skin 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:Metadata>
        <![CDATA[
            [HostComponent("spark.components.Application")]
        ]]>
    </fx:Metadata>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    <!-- fill -->
    <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:LinearGradient rotation="{hostComponent.getStyle('skinGradientRotation')}">
                <s:GradientEntry color="{hostComponent.getStyle('skinGradientStartColor')}" />
                <s:GradientEntry color="{hostComponent.getStyle('skinGradientEndColor')}" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    <s:Group id="contentGroup"/>
</s:Skin>
I even added a trace of the rotation value and its comming back as undefined. So I think I'm not quite linking the css right.
Any ideas? Also I plan to use HostComponent("mx.core.UIComponent") so its reusable for other classes. Is that legitamite to use the baseclass?
Thanks for all your help.