Flex Examples » HSlider (Spark) http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Creating a custom Spark HSlider thumb in Flex 4 http://blog.flexexamples.com/2010/04/23/creating-a-custom-spark-hslider-thumb-in-flex-4/ http://blog.flexexamples.com/2010/04/23/creating-a-custom-spark-hslider-thumb-in-flex-4/#comments Fri, 23 Apr 2010 19:41:28 +0000 Peter deHaan http://blog.flexexamples.com/?p=2854 The following example shows how you can use a Spark Button control as a thumb for the Spark HSlider control by setting the skinClass style on the thumb skin part in a custom Spark HSlider control skin.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/04/23/creating-a-custom-spark-hslider-thumb-in-flex-4/ --> <s:Application name="Spark_HSlider_thumb_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:controlBarContent> <mx:Form> <mx:FormItem label="red:"> <s:HSlider id="rSl" [...]]]> The following example shows how you can use a Spark Button control as a thumb for the Spark HSlider control by setting the skinClass style on the thumb skin part in a custom Spark HSlider control skin.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/04/23/creating-a-custom-spark-hslider-thumb-in-flex-4/ -->
<s:Application name="Spark_HSlider_thumb_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:controlBarContent>
        <mx:Form>
            <mx:FormItem label="red:">
                <s:HSlider id="rSl"
                        maximum="0xFF"
                        skinClass="skins.CustomHSliderSkin"
                        showDataTip="false"
                        change="setFillColor(rSl.value, gSl.value, bSl.value);" />
            </mx:FormItem>
            <mx:FormItem label="green:">
                <s:HSlider id="gSl"
                        maximum="0xFF"
                        skinClass="skins.CustomHSliderSkin"
                        showDataTip="false"
                        change="setFillColor(rSl.value, gSl.value, bSl.value);" />
            </mx:FormItem>
            <mx:FormItem label="blue:">
                <s:HSlider id="bSl"
                        maximum="0xFF"
                        skinClass="skins.CustomHSliderSkin"
                        showDataTip="false"
                        change="setFillColor(rSl.value, gSl.value, bSl.value);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        #rSl s|Button#track {
            chromeColor: red;
        }
 
        #gSl s|Button#track {
            chromeColor: green;
        }
 
        #bSl s|Button#track {
            chromeColor: blue;
        }
    </fx:Style>
 
    <fx:Script>
        <![CDATA[
            private function setFillColor(r:uint, g:uint, b:uint):void {
                var colour:Number = (r << 16) ^ (g << 8) ^ b;
                solidFill.color = colour;
            }
        ]]>
    </fx:Script>
 
    <s:Rect id="rct"
            left="40" right="40" top="40" bottom="40">
        <s:fill>
            <s:SolidColor id="solidFill" />
        </s:fill>
    </s:Rect>
 
</s:Application>

And the custom Spark HSlider skin, skins/CustomHSliderSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/23/creating-a-custom-spark-hslider-thumb-in-flex-4/ -->
<s:SparkSkin name="CustomHSliderSkin"
        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">
    <!-- states -->
    <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 {
                // Temporarily move the thumb to the left of the Slider so measurement
                // doesn't factor in its x position. This allows resizing the
                // HSlider to less than 100px in width. 
                var thumbPos:Number = thumb.getLayoutBoundsX();
                thumb.setLayoutBoundsPosition(0, thumb.getLayoutBoundsY());
                super.measure();
                thumb.setLayoutBoundsPosition(thumbPos, thumb.getLayoutBoundsY());
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <!--- The tooltip used in the mx.controls.Slider control. 
               To customize the DataTip's appearance, create a custom HSliderSkin class.-->
        <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:DataRenderer>
       </fx:Component>
    </fx:Declarations>
 
    <!--- The default skin class is HSliderTrackSkin. -->
    <s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100"
              skinClass="spark.skins.spark.HSliderTrackSkin" />
 
    <!--- The default skin class is HSliderThumbSkin. -->
    <s:Button id="thumb" top="0" bottom="0" 
              skinClass="spark.skins.spark.ButtonSkin"
              label="{hostComponent.value.toString(16).toUpperCase()}"
              width="40" />
</s:SparkSkin>

View source is enabled in the following example.

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.

 
]]> http://blog.flexexamples.com/2010/04/23/creating-a-custom-spark-hslider-thumb-in-flex-4/feed/ 2 Creating a custom thumb skin on a Spark HSlider control in Flex 4 http://blog.flexexamples.com/2010/04/15/creating-a-custom-thumb-skin-on-a-spark-hslider-control-in-flex-4/ http://blog.flexexamples.com/2010/04/15/creating-a-custom-thumb-skin-on-a-spark-hslider-control-in-flex-4/#comments Thu, 15 Apr 2010 14:16:56 +0000 Peter deHaan http://blog.flexexamples.com/?p=2763 In a previous example, “Creating a custom track skin on a Spark HSlider control in Flex 4″, we saw how you could create a custom track skin on a Spark HSlider control in Flex 4 by setting a custom skin class on the slider’s track skin part.

The following example shows how you can [...]]]> In a previous example, “Creating a custom track skin on a Spark HSlider control in Flex 4″, we saw how you could create a custom track skin on a Spark HSlider control in Flex 4 by setting a custom skin class on the slider’s track skin part.

The following example shows how you can create a custom thumb skin on a Spark HSlider control in Flex 4 by setting a custom skin class on the slider’s thumb skin part.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/04/15/creating-a-custom-thumb-skin-on-a-spark-hslider-control-in-flex-4/ -->
<s:Application name="Spark_HSlider_thumb_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:controlBarContent>
        <mx:Form>
            <mx:FormItem label="height:">
                <s:HSlider id="sl" minimum="11" maximum="96" value="11" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:HSlider id="sldr"
            skinClass="skins.CustomHSliderSkin"
            height="{sl.value}"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

And the custom Spark HSlider skin class, skins/CustomHSliderSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/15/creating-a-custom-thumb-skin-on-a-spark-hslider-control-in-flex-4/ -->
<s:SparkSkin name="CustomHSliderSkin"
        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">
    <!-- states -->
    <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 {
                // Temporarily move the thumb to the left of the Slider so measurement
                // doesn't factor in its x position. This allows resizing the
                // HSlider to less than 100px in width.
                var thumbPos:Number = thumb.getLayoutBoundsX();
                thumb.setLayoutBoundsPosition(0, thumb.getLayoutBoundsY());
                super.measure();
                thumb.setLayoutBoundsPosition(thumbPos, thumb.getLayoutBoundsY());
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <!--- The tooltip used in the mx.controls.Slider control. 
        To customize the DataTip's appearance, create a custom HSliderSkin class.-->
        <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="0.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>
 
    <!--- The default skin class is HSliderTrackSkin. -->
    <s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100"
              skinClass="spark.skins.spark.HSliderTrackSkin" />
 
    <!--- The default skin class is HSliderThumbSkin. -->
    <s:Button id="thumb" top="0" bottom="0" width="11" height="11"
              skinClass="skins.CustomHSliderThumbSkin" />
 
</s:SparkSkin>

And the custom Spark HSlider thumb skin class, skins/CustomHSliderThumbSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/15/creating-a-custom-thumb-skin-on-a-spark-hslider-control-in-flex-4/ -->
<s:SparkSkin name=""
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <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>
 
    <!-- drop shadow -->
    <s:Rect left="-2" top="-2" right="-2" bottom="-2" radiusX="8.5" radiusY="8.5">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" alpha="0" />
                <s:GradientEntry color="0x000000" alpha="0" />
                <s:GradientEntry color="0x000000" alpha="0.03"/>
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <s:Rect left="-1" top="-1" right="-1" bottom="-1" radiusX="7.5" radiusY="7.5">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" alpha="0.011" />
                <s:GradientEntry color="0x000000" alpha="0.121" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- border -->
    <s:Rect left="0" right="0" top="0" bottom="0" radiusX="7" radiusY="7">
        <s:fill>
            <s:SolidColor color="0x4F4F4F" />
        </s:fill>
    </s:Rect>
 
    <!-- fill -->
    <s:Rect left="0.5" right="0.5" top="0.5" bottom="0.5" radiusX="6" radiusY="6">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" alpha="0" />
                <s:GradientEntry color="0x000000" alpha="0.33" />
            </s:LinearGradientStroke>
        </s:stroke>
        <s:fill>
            <s:BitmapFill source="@Embed('skins/pattern_143.gif')" fillMode="repeat" />
        </s:fill>
    </s:Rect>
 
    <!-- highlight -->
    <s:Rect left="1" right="1" top="1" bottom="1" radiusX="6" radiusY="6">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" alpha.over="0" alpha.down="0" />
                <s:GradientEntry color="0xFFFFFF" alpha="0" />
                <s:GradientEntry color="0xFFFFFF" alpha="0" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    <s:Rect left="4" top="1" right="4" height="1">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" 
                          color.down="0x939393"
                          alpha.over="0.22" />
        </s:fill>
    </s:Rect>
 
</s:SparkSkin>

View source is enabled in the following example.

Background image pattern copyright of Squidfingers.com.

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.

 
]]> http://blog.flexexamples.com/2010/04/15/creating-a-custom-thumb-skin-on-a-spark-hslider-control-in-flex-4/feed/ 0 Creating a custom track skin on a Spark HSlider control in Flex 4 http://blog.flexexamples.com/2010/04/14/creating-a-custom-track-skin-on-a-spark-hslider-control-in-flex-4/ http://blog.flexexamples.com/2010/04/14/creating-a-custom-track-skin-on-a-spark-hslider-control-in-flex-4/#comments Thu, 15 Apr 2010 05:54:30 +0000 Peter deHaan http://blog.flexexamples.com/?p=2759 The following example shows how you can create a custom track skin on a Spark HSlider control in Flex 4 by setting a custom skin class on the slider’s track skin part.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/04/14/creating-a-custom-track-skin-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:controlBarContent> <mx:Form> <mx:FormItem label="height:"> <s:HSlider id="sl" minimum="11" maximum="96" value="11" /> </mx:FormItem> [...]]]> The following example shows how you can create a custom track skin on a Spark HSlider control in Flex 4 by setting a custom skin class on the slider’s track skin part.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/04/14/creating-a-custom-track-skin-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:controlBarContent>
        <mx:Form>
            <mx:FormItem label="height:">
                <s:HSlider id="sl" minimum="11" maximum="96" value="11" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:HSlider id="sldr"
            skinClass="skins.CustomHSliderSkin"
            height="{sl.value}"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

And the custom Spark HSlider skin class, skins/CustomHSliderSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/14/creating-a-custom-track-skin-on-a-spark-hslider-control-in-flex-4/ -->
<s:SparkSkin name="CustomHSliderSkin"
        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">
    <!-- states -->
    <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 {
                // Temporarily move the thumb to the left of the Slider so measurement
                // doesn't factor in its x position. This allows resizing the
                // HSlider to less than 100px in width.
                var thumbPos:Number = thumb.getLayoutBoundsX();
                thumb.setLayoutBoundsPosition(0, thumb.getLayoutBoundsY());
                super.measure();
                thumb.setLayoutBoundsPosition(thumbPos, thumb.getLayoutBoundsY());
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <!--- The tooltip used in the mx.controls.Slider control. To customize the DataTip's appearance, create a custom HSliderSkin class.-->
        <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="0.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>
 
    <!--- The default skin class is HSliderTrackSkin. -->
    <s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100"
              skinClass="skins.CustomHSliderTrackSkin" />
 
    <!--- The default skin class is HSliderThumbSkin. -->
    <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, skins/CustomHSliderTrackSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/14/creating-a-custom-track-skin-on-a-spark-hslider-control-in-flex-4/ -->
<s:SparkSkin name="CustomHSliderTrackSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
    <!-- states -->
    <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="3" bottom="3" radiusX="2" radiusY="2" height="5">
        <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="4" bottom="4" radiusX="2" radiusY="2">
        <s:fill>
            <s:BitmapFill source="@Embed('skins/pattern_143.gif')" fillMode="repeat" />
        </s:fill>
    </s:Rect>
 
    <!-- shadow -->
    <s:Rect left="2" right="2" top="4" height="1">
        <s:fill>
            <s:SolidColor color="0x9E9E9E" />
        </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>

View source is enabled in the following example.

Background image pattern copyright of Squidfingers.com.

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.

 
]]> http://blog.flexexamples.com/2010/04/14/creating-a-custom-track-skin-on-a-spark-hslider-control-in-flex-4/feed/ 2 Preventing the user from clicking the track on a Spark HSlider control in Flex 4 http://blog.flexexamples.com/2010/03/31/preventing-the-user-from-clicking-the-track-on-a-spark-hslider-control-in-flex-4/ http://blog.flexexamples.com/2010/03/31/preventing-the-user-from-clicking-the-track-on-a-spark-hslider-control-in-flex-4/#comments Wed, 31 Mar 2010 22:46:34 +0000 Peter deHaan http://blog.flexexamples.com/?p=2665 The following example shows how you can toggle whether a user is allowed to click on a Spark HSlider control’s track in Flex 4 by setting the Boolean mouseEnabled property on the HSlider controls track skin part.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/03/31/preventing-the-user-from-clicking-the-track-on-a-spark-hslider-control-in-flex-4/ --> <s:Application name="Spark_HSlider_track_mouseEnabled_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:controlBarContent> <mx:Form> <mx:FormItem label="track.mouseEnabled:"> <s:CheckBox id="chckBx" [...]]]> The following example shows how you can toggle whether a user is allowed to click on a Spark HSlider control’s track in Flex 4 by setting the Boolean mouseEnabled property on the HSlider controls track skin part.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/31/preventing-the-user-from-clicking-the-track-on-a-spark-hslider-control-in-flex-4/ -->
<s:Application name="Spark_HSlider_track_mouseEnabled_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:controlBarContent>
        <mx:Form>
            <mx:FormItem label="track.mouseEnabled:">
                <s:CheckBox id="chckBx" selected="true" change="chckBx_changeHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function chckBx_changeHandler(evt:Event):void {
                sl.track.mouseEnabled = chckBx.selected;
            }
        ]]>
    </fx:Script>
 
    <s:HSlider id="sl"
            horizontalCenter="0" verticalCenter="0" />
 
</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.

 
]]> http://blog.flexexamples.com/2010/03/31/preventing-the-user-from-clicking-the-track-on-a-spark-hslider-control-in-flex-4/feed/ 1 Setting the thumb color based on the current value of a Spark HSlider control in Flex 4 http://blog.flexexamples.com/2010/03/19/setting-the-thumb-color-based-on-the-current-value-of-a-spark-hslider-control-in-flex-4/ http://blog.flexexamples.com/2010/03/19/setting-the-thumb-color-based-on-the-current-value-of-a-spark-hslider-control-in-flex-4/#comments Fri, 19 Mar 2010 19:28:54 +0000 Peter deHaan http://blog.flexexamples.com/?p=2615 The following example shows how you can set the thumb color on a Spark HSlider control in Flex 4 by listening for the change and valueCommit events and setting the chromeColor style on the thumb skin part.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/03/19/setting-the-thumb-color-based-on-the-current-value-of-a-spark-hslider-control-in-flex-4/ --> <s:Application name="Spark_HSlider_thumb_chromeColor_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:controlBarContent> <s:Button label="Set value" click="sldr.value = [...]]]> The following example shows how you can set the thumb color on a Spark HSlider control in Flex 4 by listening for the change and valueCommit events and setting the chromeColor style on the thumb skin part.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/setting-the-thumb-color-based-on-the-current-value-of-a-spark-hslider-control-in-flex-4/ -->
<s:Application name="Spark_HSlider_thumb_chromeColor_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:controlBarContent>
        <s:Button label="Set value"
                click="sldr.value = int(Math.random() * sldr.maximum);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function sldr_changeHandler(evt:Event):void {
                var clr:Object = "red";
                if (sldr.value >= 8) {
                    clr = "haloGreen";
                } else if (sldr.value >= 6) {
                    clr = "yellow";
                }
                sldr.thumb.setStyle("chromeColor", clr);
            }
        ]]>
    </fx:Script>
 
    <s:HSlider id="sldr"
            horizontalCenter="0" verticalCenter="0"
            creationComplete="sldr_changeHandler(event);"
            change="sldr_changeHandler(event);"
            valueCommit="sldr_changeHandler(event);"/>
 
</s:Application>

View source is enabled in the following example.

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.

 
]]> http://blog.flexexamples.com/2010/03/19/setting-the-thumb-color-based-on-the-current-value-of-a-spark-hslider-control-in-flex-4/feed/ 0 Skinning the track on a Spark HSlider control in Flex 4 http://blog.flexexamples.com/2010/03/19/skinning-the-track-on-a-spark-hslider-control-in-flex-4/ http://blog.flexexamples.com/2010/03/19/skinning-the-track-on-a-spark-hslider-control-in-flex-4/#comments Fri, 19 Mar 2010 15:39:15 +0000 Peter deHaan http://blog.flexexamples.com/?p=2612 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.

<?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 [...]]]> 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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.

 
]]> http://blog.flexexamples.com/2010/03/19/skinning-the-track-on-a-spark-hslider-control-in-flex-4/feed/ 1 Setting live dragging on a Spark HSlider control in Flex 4 http://blog.flexexamples.com/2009/06/07/setting-live-dragging-on-a-spark-hslider-control-in-flex-4/ http://blog.flexexamples.com/2009/06/07/setting-live-dragging-on-a-spark-hslider-control-in-flex-4/#comments Mon, 08 Jun 2009 06:59:45 +0000 Peter deHaan http://blog.flexexamples.com/2009/06/07/setting-live-dragging-on-a-spark-hslider-control-in-flex-4/ The following example shows how you can set live dragging on a Spark HSlider control in Flex Gumbo by setting the liveDragging style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/07/setting-live-dragging-on-a-spark-hslider-control-in-flex-4/ --> <s:Application name="Spark_HSlider_liveDragging_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"> <mx:ApplicationControlBar width="100%" cornerRadius="0"> <s:CheckBox id="checkBox" label="liveDragging" /> </mx:ApplicationControlBar> <s:VGroup horizontalCenter="0" verticalCenter="0"> <s:HSlider id="slider" minimum="0" maximum="10000" liveDragging="{checkBox.selected}" /> <s:SimpleText text="{slider.value}" /> [...]]]> The following example shows how you can set live dragging on a Spark HSlider control in Flex Gumbo by setting the liveDragging style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/06/07/setting-live-dragging-on-a-spark-hslider-control-in-flex-4/ -->
<s:Application name="Spark_HSlider_liveDragging_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">

    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <s:CheckBox id="checkBox" label="liveDragging" />
    </mx:ApplicationControlBar>

    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:HSlider id="slider"
                minimum="0"
                maximum="10000"
                liveDragging="{checkBox.selected}" />
        <s:SimpleText text="{slider.value}" />
    </s:VGroup>

</s:Application>

View source is enabled in the following example.

You can also set the liveDragging style in an external .CSS file or <fx:Style/> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/07/setting-live-dragging-on-a-spark-hslider-control-in-flex-4/ -->
<s:Application name="Spark_HSlider_liveDragging_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|Slider {
            liveDragging: true;
        }
    </fx:Style>

    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:HSlider id="slider"
                minimum="0"
                maximum="10000" />
        <s:SimpleText text="{slider.value}" />
    </s:VGroup>

</s:Application>

Or, you can set the liveDragging style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/07/setting-live-dragging-on-a-spark-hslider-control-in-flex-4/ -->
<s:Application name="Spark_HSlider_liveDragging_text"
        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[
            private function checkBox_change(evt:Event):void {
                slider.setStyle("liveDragging", checkBox.selected);
            }
        ]]>
    </fx:Script>

    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <s:CheckBox id="checkBox"
                label="liveDragging"
                change="checkBox_change(event);" />
    </mx:ApplicationControlBar>

    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:HSlider id="slider"
                minimum="0"
                maximum="10000" />
        <s:SimpleText text="{slider.value}" />
    </s:VGroup>

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

 
]]> http://blog.flexexamples.com/2009/06/07/setting-live-dragging-on-a-spark-hslider-control-in-flex-4/feed/ 0 Setting the slide duration on a Spark HSlider control in Flex 4 http://blog.flexexamples.com/2009/05/28/setting-the-slide-duration-on-a-spark-hslider-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/05/28/setting-the-slide-duration-on-a-spark-hslider-control-in-flex-gumbo/#comments Fri, 29 May 2009 06:59:41 +0000 Peter deHaan http://blog.flexexamples.com/2009/05/28/setting-the-slide-duration-on-a-spark-hslider-control-in-flex-gumbo/ The following example shows how you can set the slide duration on a Spark HSlider control in Flex 4 by setting the slideDuration style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/05/28/setting-the-slide-duration-on-a-spark-hslider-control-in-flex-gumbo/ --> <s:Application name="Spark_HSlider_slideDuration_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"> <mx:ApplicationControlBar width="100%" cornerRadius="0"> <mx:Form styleName="plain"> <mx:FormItem label="slideDuration:"> <s:NumericStepper id="numericStepper" minimum="0" maximum="10000" value="8000" valueInterval="100" /> [...]]]> The following example shows how you can set the slide duration on a Spark HSlider control in Flex 4 by setting the slideDuration 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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/05/28/setting-the-slide-duration-on-a-spark-hslider-control-in-flex-gumbo/ -->
<s:Application name="Spark_HSlider_slideDuration_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">

    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="slideDuration:">
                <s:NumericStepper id="numericStepper"
                        minimum="0"
                        maximum="10000"
                        value="8000"
                        valueInterval="100" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <s:HSlider id="slider"
            liveDragging="true"
            slideDuration="{numericStepper.value}"
            horizontalCenter="0"
            verticalCenter="0"
            left="20"
            right="20" />

</s:Application>

View source is enabled in the following example.

You can also set the slideDuration style in an external .CSS file or <Style/> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/28/setting-the-slide-duration-on-a-spark-hslider-control-in-flex-gumbo/ -->
<s:Application name="Spark_HSlider_slideDuration_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|HSlider {
            slideDuration: 8000;
        }
    </fx:Style>

    <s:HSlider id="slider"
            liveDragging="true"
            horizontalCenter="0"
            verticalCenter="0"
            left="20"
            right="20" />

</s:Application>

Or, you can set the slideDuration style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/28/setting-the-slide-duration-on-a-spark-hslider-control-in-flex-gumbo/ -->
<s:Application name="Spark_HSlider_slideDuration_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[
            private function numericStepper_change(evt:Event):void {
                slider.setStyle("slideDuration", numericStepper.value);
            }
        ]]>
    </fx:Script>

    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="slideDuration:">
                <s:NumericStepper id="numericStepper"
                        minimum="0"
                        maximum="10000"
                        value="200"
                        valueInterval="100"
                        change="numericStepper_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <s:HSlider id="slider"
            liveDragging="true"
            horizontalCenter="0"
            verticalCenter="0"
            left="20"
            right="20" />

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

 
]]> http://blog.flexexamples.com/2009/05/28/setting-the-slide-duration-on-a-spark-hslider-control-in-flex-gumbo/feed/ 2 Styling the data tip on a Spark HSlider control in Flex 4 http://blog.flexexamples.com/2009/05/18/styling-the-data-tip-on-a-spark-hslider-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/05/18/styling-the-data-tip-on-a-spark-hslider-control-in-flex-gumbo/#comments Tue, 19 May 2009 06:59:53 +0000 Peter deHaan http://blog.flexexamples.com/2009/05/18/styling-the-data-tip-on-a-spark-hslider-control-in-flex-gumbo/ The following example shows how you can style the data tip on a Spark HSlider control in Flex 4 by creating a custom skin and setting the skinClass style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/05/18/styling-the-data-tip-on-a-spark-hslider-control-in-flex-gumbo/ --> <s:Application name="Spark_HSlider_skinClass_dataTip_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">   <s:HSlider id="slider" skinClass="skins.CustomHSliderSkin" horizontalCenter="0" verticalCenter="0" />   </s:Application> [...]]]> The following example shows how you can style the data tip on a Spark HSlider control in Flex 4 by creating a custom skin and 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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/05/18/styling-the-data-tip-on-a-spark-hslider-control-in-flex-gumbo/ -->
<s:Application name="Spark_HSlider_skinClass_dataTip_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">
 
    <s:HSlider id="slider"
            skinClass="skins.CustomHSliderSkin"
            horizontalCenter="0"
            verticalCenter="0" />
 
</s:Application>

The custom skin class, skins/CustomHSliderSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/18/styling-the-data-tip-on-a-spark-hslider-control-in-flex-gumbo/ -->
<s:SparkSkin name="CustomHSliderSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        minHeight="11" alpha.disabled="0.5">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
    <![CDATA[
        [HostComponent("spark.components.HSlider")]
    ]]>
    </fx:Metadata>
 
    <fx:Script>
        /* 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 measure() : void {
            // Temporarily move the thumb to the left of the Slider so measurement
            // doesn't factor in its x position. This allows resizing the
            // HSlider to less than 100px in width.
            var thumbPos:Number = thumb.getLayoutBoundsX();
            thumb.setLayoutBoundsPosition(0, thumb.getLayoutBoundsY());
            super.measure();
            thumb.setLayoutBoundsPosition(thumbPos, thumb.getLayoutBoundsY());
        }
    </fx:Script>
 
    <fx:Declarations>
        <!--- Defines the appearance of the the Slider's DataTip. To customize the DataTip's appearance, create a custom HSliderSkin class. -->
        <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="haloBlue" alpha="0.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="black" fontSize="16" />
            </s:DataRenderer>
        </fx:Component>
    </fx:Declarations>
 
    <!--- Defines the skin class for the HSliderSkin's track. The default skin class is HSliderTrackSkin. -->
    <s:Button id="track"
            skinClass="spark.skins.spark.HSliderTrackSkin"
            left="0" right="0" top="0" bottom="0"
            minWidth="33" width="100" />
 
    <!--- Defines the skin class for the HSliderSkin's thumb. The default skin class is HSliderThumbSkin. -->
    <s:Button id="thumb"
            skinClass="spark.skins.spark.HSliderThumbSkin"
            top="0" bottom="0"
            width="11" height="11" />
 
</s:SparkSkin>

View source is enabled in the following example.

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.

 
]]> http://blog.flexexamples.com/2009/05/18/styling-the-data-tip-on-a-spark-hslider-control-in-flex-gumbo/feed/ 14 Setting the chrome color on the Spark HSlider control in Flex 4 http://blog.flexexamples.com/2009/03/12/setting-the-base-color-on-the-fxhslider-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/03/12/setting-the-base-color-on-the-fxhslider-control-in-flex-gumbo/#comments Fri, 13 Mar 2009 05:06:21 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/12/setting-the-base-color-on-the-fxhslider-control-in-flex-gumbo/ The following example shows how you can style the base color on the Spark HSlider control’s thumb and track in Flex 4 by setting the chromeColor style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/03/12/setting-the-base-color-on-the-fxhslider-control-in-flex-gumbo/ --> <s:Application name="Spark_HSlider_chromeColor_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:controlBarContent> <mx:Form> <mx:FormItem label="chromeColor:"> <mx:ColorPicker id="clrPckr" selectedColor="red" /> </mx:FormItem> </mx:Form> </s:controlBarContent>   <s:HSlider id="slider" chromeColor="{clrPckr.selectedColor}" horizontalCenter="0" [...]]]> The following example shows how you can style the base color on the Spark HSlider control’s thumb and track in Flex 4 by setting the chromeColor style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/03/12/setting-the-base-color-on-the-fxhslider-control-in-flex-gumbo/ -->
<s:Application name="Spark_HSlider_chromeColor_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:controlBarContent>
        <mx:Form>
            <mx:FormItem label="chromeColor:">
                <mx:ColorPicker id="clrPckr" selectedColor="red" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:HSlider id="slider"
            chromeColor="{clrPckr.selectedColor}"
            horizontalCenter="0" verticalCenter="0"/>
 
</s:Application>

You can also set the chromeColor style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/12/setting-the-base-color-on-the-fxhslider-control-in-flex-gumbo/ -->
<s:Application name="Spark_HSlider_chromeColor_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|HSlider {
            chromeColor: haloOrange;
        }
    </fx:Style>
 
    <s:HSlider id="slider"
            horizontalCenter="0" verticalCenter="0"/>
 
</s:Application>

Or, you can set the chromeColor style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/12/setting-the-base-color-on-the-fxhslider-control-in-flex-gumbo/ -->
<s:Application name="Spark_HSlider_chromeColor_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:controlBarContent>
        <mx:Form>
            <mx:FormItem label="chromeColor:">
                <mx:ColorPicker id="clrPckr"
                        selectedColor="red"
                        change="clrPckr_changeHandler(event);"/>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function clrPckr_changeHandler(evt:ColorPickerEvent):void {
                slider.setStyle("chromeColor", evt.color);
            }
        ]]>
    </fx:Script>
 
    <s:HSlider id="slider"
            horizontalCenter="0" verticalCenter="0"/>
 
</s:Application>

Finally, if you wanted to set the chromeColor style on the Spark HSlider thumb and/or track individually, you could either create a custom Spark HSlider skin and set the chromeColor styles in the new skin, or you could style the #thumb and/or #track selectors directly, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/12/setting-the-base-color-on-the-fxhslider-control-in-flex-gumbo/ -->
<s:Application name="Spark_HSlider_chromeColor_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|HSlider #thumb {
            chromeColor: haloBlue;
        }
 
        s|HSlider #track {
            chromeColor: haloGreen;
        }
    </fx:Style>
 
    <s:HSlider id="slider"
            horizontalCenter="0" verticalCenter="0"/>
 
</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.

 
]]> http://blog.flexexamples.com/2009/03/12/setting-the-base-color-on-the-fxhslider-control-in-flex-gumbo/feed/ 0