Skinning the track on a Spark HSlider control in Flex 4

The following example shows how you can reskin the track on a Spark HSlider control in Flex 4 by creating a custom HSlider skin and specifying the track skin part’s skinClass style.

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/2010/03/19/skinning-the-track-on-a-spark-hslider-control-in-flex-4/ -->
<s:Application name="Spark_HSlider_track_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/mx">
 
    <s:HSlider id="sldr"
            skinClass="YeHSliderSkin"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

And the custom Spark HSlider skin class, YeHSliderSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/19/skinning-the-track-on-a-spark-hslider-control-in-flex-4/ -->
<s:SparkSkin name="YeHSliderSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        minHeight="11"
        alpha.disabled="0.5">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.HSlider")]
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the skin elements that should not be colorized.
            For slider, 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 {
                useChromeColor = true;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>
 
    <fx:Script>
        <![CDATA[
            override protected function measure():void {
                var thumbPos:Number = thumb.getLayoutBoundsX();
                thumb.setLayoutBoundsPosition(0, thumb.getLayoutBoundsY());
                super.measure();
                thumb.setLayoutBoundsPosition(thumbPos, thumb.getLayoutBoundsY());
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:Component id="dataTip">
            <s:DataRenderer minHeight="24" minWidth="40" y="-34">
                <s:Rect top="0" left="0" right="0" bottom="0">
                    <s:fill>
                        <s:SolidColor color="0x000000" alpha=".9"/>
                    </s:fill>
                    <s:filters>
                        <s:DropShadowFilter angle="90" color="0x999999" distance="3"/>
                    </s:filters>
                </s:Rect>
                <s:Label id="labelDisplay" text="{data}"
                         horizontalCenter="0" verticalCenter="1"
                         left="5" right="5" top="5" bottom="5"
                         textAlign="center" verticalAlign="middle"
                         fontWeight="normal" color="white" fontSize="11">
                </s:Label>
            </s:DataRenderer>
        </fx:Component>
    </fx:Declarations>
 
    <s:Button id="track"
              left="0" right="0" top="0" bottom="0"
              minWidth="33" width="100"
              skinClass="YeHSliderTrackSkin" />
 
    <s:Button id="thumb"
              top="0" bottom="0"
              width="11" height="11"
              skinClass="spark.skins.spark.HSliderThumbSkin" />
 
</s:SparkSkin>

And the custom Spark HSlider track skin class, YeHSliderTrackSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/19/skinning-the-track-on-a-spark-hslider-control-in-flex-4/ -->
<s:SparkSkin name="YeHSliderTrackSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
    <s:states>
        <s:State name="up" />
        <s:State name="down" />
        <s:State name="over" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata> 
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>
 
    <!-- border -->
    <s:Rect left="0" right="0" top="0" bottom="0" radiusX="{hostComponent.height/2}">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" alpha="0.55" />
                <s:GradientEntry color="0xFFFFFF" alpha="0.55" ratio="0.8" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- fill -->
    <s:Rect left="1" right="1" top="1" bottom="1" radiusX="{hostComponent.height/2}">
        <s:fill>
            <s:SolidColor color="0xCACACA" />
        </s:fill>
    </s:Rect>
 
    <!-- hit area -->
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:SolidColor alpha="0"/>
        </s:fill>
    </s:Rect>
 
</s:SparkSkin>

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.

One thought on “Skinning the track on a Spark HSlider control in Flex 4

Comments are closed.