Replace horizontal scroll in a spark list?

Question

I've gotten myself confused...
1. I create a new component based on Spark List, "MyList.mxml"
2. I open it, and in design view I say "create copy of skin"
3. I open ListSkin1.mxml.
I want to replace the scroll bar with a custom skinned one. I am not sure where to do this...
1. I create a new component based on HScrollBar "MyScrollbar.mxml"
Now what?  Where so I specify in the List component -- or its skin -- do I specify the new scroll bar?

Answer 1

OK, this is a little crude, but seems to work (and was a lot less complex than I initially thought). My main app looks like this:
<?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"
               xmlns:mx="library://ns.adobe.com/flex/halo">
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        s|List s|Scroller {
            horizontalScrollPolicy: on;
            verticalScrollPolicy: on;
        s|List s|HScrollBar {
            skinClass: ClassReference("TrackThumbOnlyHSBSkin");
    </fx:Style>
    <s:List id="list" width="100" height="100" horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="The quick brown fox jumps over the lazy dog" />
                <fx:Object label="One" />
                <fx:Object label="Two" />
                <fx:Object label="Three" />
                <fx:Object label="Four" />
                <fx:Object label="Five" />
                <fx:Object label="Six" />
                <fx:Object label="Seven" />
                <fx:Object label="Eight" />
                <fx:Object label="Nine" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
</s:Application>
And my custom HScrollBar skin, TrackThumbOnlyHSBSkin.mxml, is as follows:
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minWidth="35" minHeight="15"
             alpha.disabled="0.5" alpha.inactive="0.5">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="inactive" />
    </s:states>
    <fx:Metadata>
        <![CDATA[
        [HostComponent("spark.components.HScrollBar")]
        ]]>
    </fx:Metadata>
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the skin elements that should not be colorized.
            For scroll bar, the skin itself is colorized but the individual parts are not. */
            static private const exclusions:Array = ["track", "thumb"];
            override public function get colorizeExclusions():Array {
                return exclusions;
            override protected function initializationComplete():void {
                useBaseColor = true;
                super.initializationComplete();
        ]]>
    </fx:Script>
    <!--- Defines the skin class for the HScrollBarSkin's track. The default skin class is HScrollBarTrackSkin. -->
    <s:Button id="track" left="0" right="0" width="54"
              focusEnabled="false"
              skinClass="spark.skins.spark.HScrollBarTrackSkin"
              baseColor="haloGreen"/>
    <!--- Defines the skin class for the HScrollBarSkin's thumb. The default skin class is HScrollBarThumbSkin. -->
    <s:Button id="thumb"
              focusEnabled="false" visible.inactive="false"
              skinClass="spark.skins.spark.HScrollBarThumbSkin"
              baseColor="haloBlue"/>
</s:SparkSkin>
So I was wrong. I didnt need a custom List skin, or Scroller skin... just the one custom HScrollBar skin (and presumably a custom VScrollBar skin -- and possibly more skins depending on how custom you want the scrollbar left/right top/bottom buttons and/or thumb/track skins).
Peter