Flex Examples » #track 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 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 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 the base color on the Spark HScrollBar control in Flex 4 http://blog.flexexamples.com/2009/03/14/setting-the-base-color-on-the-fxhscrollbar-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/03/14/setting-the-base-color-on-the-fxhscrollbar-control-in-flex-gumbo/#comments Sat, 14 Mar 2009 14:44:40 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/14/setting-the-base-color-on-the-fxhscrollbar-control-in-flex-gumbo/ The following example shows how you can style the base color on the Flex 4 Spark HScrollBar control’s thumb, track, increment button, and/or decrement button by setting the baseColor style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/03/14/setting-the-base-color-on-the-fxhscrollbar-control-in-flex-gumbo/ --> <s:Application name="Spark_HScrollBar_baseColor_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:controlBarContent> <mx:Form> <mx:FormItem label="baseColor:"> <mx:ColorPicker id="colorPicker" selectedColor="#CCCCCC" /> [...]]]> The following example shows how you can style the base color on the Flex 4 Spark HScrollBar control’s thumb, track, increment button, and/or decrement button by setting the baseColor 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/03/14/setting-the-base-color-on-the-fxhscrollbar-control-in-flex-gumbo/ -->
<s:Application name="Spark_HScrollBar_baseColor_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:controlBarContent>
        <mx:Form>
            <mx:FormItem label="baseColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="#CCCCCC" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:HScrollBar id="scrollBar"
                baseColor="{colorPicker.selectedColor}" />
    </s:VGroup>
 
</s:Application>

View source is enabled in the following example.

You can also set the baseColor 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/14/setting-the-base-color-on-the-fxhscrollbar-control-in-flex-gumbo/ -->
<s:Application name="Spark_HScrollBar_baseColor_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|HScrollBar {
            baseColor: haloBlue;
        }
    </fx:Style>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:HScrollBar id="scrollBar" />
    </s:VGroup>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/14/setting-the-base-color-on-the-fxhscrollbar-control-in-flex-gumbo/ -->
<s:Application name="Spark_HScrollBar_baseColor_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:controlBarContent>
        <mx:Form>
            <mx:FormItem label="baseColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="#CCCCCC"
                        change="colorPicker_change(event);"/>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function colorPicker_change(evt:ColorPickerEvent):void {
               scrollBar.setStyle("baseColor", evt.color);
            }
        ]]>
    </fx:Script>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:HScrollBar id="scrollBar" />
    </s:VGroup>
 
</s:Application>

Finally, if you wanted to set the baseColor style on the Spark HScrollBar thumb, track, increment button, and/or decrement button individually, you could either create a custom Spark HScrollBar skin and set the baseColor styles in the new skin, or you could style the #thumb, #track, #incrementButton, and/or #decrementButton selectors directly, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/14/setting-the-base-color-on-the-fxhscrollbar-control-in-flex-gumbo/ -->
<s:Application name="Spark_HScrollBar_baseColor_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|HScrollBar #decrementButton {
            baseColor: red;
        }
        s|HScrollBar #incrementButton {
            baseColor: haloGreen;
        }
        s|HScrollBar #track {
            baseColor: haloBlue;
        }
        s|HScrollBar #thumb {
            baseColor: haloOrange;
        }
    </fx:Style>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:HScrollBar id="scrollBar" />
    </s:VGroup>
 
</s:Application>

View source is enabled in the following example.

Due to popular request, here is the “same” example in a more ActionScript-friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/14/setting-the-base-color-on-the-fxhscrollbar-control-in-flex-gumbo/ -->
<s:Application name="Spark_HScrollBar_baseColor_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"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import spark.components.HScrollBar;
            import spark.components.VGroup;
 
            private const scrollBar:HScrollBar = new HScrollBar();
 
            private function init():void {
                var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration("spark.components.HScrollBar");
                cssObj.setStyle("baseColor", "haloBlue");
 
                var vGr:VGroup = new VGroup();
                vGr.horizontalCenter = 0;
                vGr.verticalCenter = 0;
                vGr.addElement(scrollBar);
                addElement(vGr);
            }
        ]]>
    </fx:Script>
 
</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/14/setting-the-base-color-on-the-fxhscrollbar-control-in-flex-gumbo/feed/ 5 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