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

by Peter deHaan on November 4, 2009

in HScrollBar (Spark), List (Spark), Scroller (Spark), VScrollBar (Spark), beta2

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 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 SDK in Flex Builder 3".

<?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.

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.

Tagged as: Gumbo, horizontalScrollBar, horizontalScrollPolicy, scroller, skinClass, verticalScrollPolicy

{ 6 comments… read them below or add one }

1 Steve Lombardi November 5, 2009 at 6:27 am

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

2 Peter deHaan November 5, 2009 at 7:08 am

@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

3 Peter deHaan November 5, 2009 at 7:22 am: Clarified and expanded at “Applying styles to specific Spark List controls in Flex 4″.

Peter

4 vlad November 8, 2009 at 10:50 am

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?

5 Peter deHaan November 8, 2009 at 11:50 am

@vlad,

To set the skin class using ActionScript, try this:

list.scroller.horizontalScrollBar.setStyle("skinClass", TrackThumbOnlyHSBSkin);

Peter

6 Peter deHaan November 8, 2009 at 12:17 pm

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

M	T	W	T	F	S	S
« Oct
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

Pages

Recent Posts

Archives

But wait, there’s more…

Flex 4 SDK Nightly Builds

Flex SDK Commits

Advertising

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

Pages

Recent Posts

Archives

Blogroll

But wait, there’s more…

Flex 4 SDK Nightly Builds

Flex SDK Commits

Advertising