Setting a custom horizontal scroll bar skin on a Spark List control in Flex 4

The following example shows how you can apply a custom horizontal scroll bar skin on the Spark List control in Flex 4 by setting the skinClass style.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/04/setting-a-custom-horizontal-scroll-bar-skin-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_HScrollBar_skinClass_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|List s|Scroller {
            horizontalScrollPolicy: on;
            verticalScrollPolicy: on;
        }
 
        s|List s|HScrollBar {
            skinClass: ClassReference("skins.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 the custom Spark HScrollBar skin class, skins/TrackThumbOnlyHSBSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/04/setting-a-custom-horizontal-scroll-bar-skin-on-a-spark-list-control-in-flex-4/ -->
<s:SparkSkin name="TrackThumbOnlyHSBSkin"
        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>

View source is enabled in the following example.

[GoogleAdsWide]

Or, you can set the horizontalScrollPolicy, verticalScrollPolicy, and skinClass styles using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/04/setting-a-custom-horizontal-scroll-bar-skin-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_HScrollBar_skinClass_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">
 
    <fx:Script>
        <![CDATA[
            import mx.core.ScrollPolicy;
            import skins.TrackThumbOnlyHSBSkin;
 
            private function init():void {
                list.scroller.setStyle("horizontalScrollPolicy", ScrollPolicy.ON);
                list.scroller.setStyle("verticalScrollPolicy", ScrollPolicy.ON);
 
                list.scroller.horizontalScrollBar.setStyle("skinClass", TrackThumbOnlyHSBSkin);
            }
        ]]>
    </fx:Script>
 
    <s:List id="list"
            width="100" height="100"
            horizontalCenter="0" verticalCenter="0"
            creationComplete="init();">
        <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>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

8 thoughts on “Setting a custom horizontal scroll bar skin on a Spark List control in Flex 4

  1. How can I target a specific list with that CSS instead of all lists?

    I tried 2. I can’t target a specific List:
    .choiceList s|HScrollBar {
    skinClass: ClassReference(“skins.FoodHScrollbar”);
    }
    Does not work

    1. @Steve Lombardi,

      Good question. There are a couple of ways to selectively apply styles based on the styleName property or the component’s id property.

      (1) Apply the styles to ALL instances of s|List:

      s|List s|HScrollBar {
          skinClass: ClassReference("skins.TrackThumbOnlyHSBSkin");
      }

      (2) Apply the styles to all instances of s|List with a styleName property of “listHSBStyles”:

      s|List.listHSBStyles s|HScrollBar {
          skinClass: ClassReference("skins.TrackThumbOnlyHSBSkin");
      }

      (3) Apply the styles to all instances of s|List with an id property of “list1″:

      s|List#list1 s|HScrollBar {
          skinClass: ClassReference("skins.TrackThumbOnlyHSBSkin");
      }

      So, depending on whether “choiceLists” is a styleName property (you’d want to use solution #2) or an id property (you’d want to use solution #3), you have a couple options.

      Peter

  2. Hello! Could you help me.
    I’m trying ty make a skin for Scroller.
    And I don’t understand how correctly link from Scroller skin to VScrollBar skin or HScrollBar skin?
    I don’t understand how to use “verticalScrollBar” property of scroller or it skin.
    There are no good examples or articles for that.
    I found how to style VScrollBar with CSS ans ClassReferance and how to make custom skin with Catalist for VScrollBar.
    But how exactly link VScrollBar skin to Scroller skin?

    1. Or, if you’re doing this in MXML, I’d create a custom Scroller skin and just set the skinClass style on the VScrollBar and HScrollBar controls:

      <?xml version="1.0" encoding="utf-8"?>
      <s:SparkSkin name="CustomScrollerSkin"
              xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark">
       
          <fx:Metadata>
              <![CDATA[
                  [HostComponent("spark.components.Scroller")]
              ]]>
          </fx:Metadata>
       
          <fx:Script>
              <![CDATA[
                  override public function beginHighlightBitmapCapture():void {
                      super.beginHighlightBitmapCapture();
                      graphics.beginFill(0);
                      graphics.drawRect(0, 0, width, height);
                      graphics.endFill();
                  }
       
                  override public function endHighlightBitmapCapture():void {
                      super.endHighlightBitmapCapture();
                      graphics.clear();
                  }
              ]]>
          </fx:Script>
       
          <!--- Determines whether the vertical ScrollBar is visible in the ScrollerSkin. -->
          <s:VScrollBar id="verticalScrollBar"
                  skinClass="skins.CustomVScrollBarSkin"
                  visible="false" />
       
          <!--- Determines whether the horizontal ScrollBar is visible in the ScrollerSkin. -->
          <s:HScrollBar id="horizontalScrollBar"
                  skinClass="skins.CustomHScrollBarSkin"
                  visible="false" />
       
      </s:SparkSkin>

      Peter

Comments are closed.