3 Replies Latest reply on Jan 9, 2011 4:06 PM by Shongrunden

    Flex 4 HSlider Tick Marks?

    -skitch- Level 1

      How would one go about doing this. I have a class extending the Spark HSlider and a skin for it, but what kind of Display Object should I used to display the values for Tick Marks..


      some code below: I figured DataGroup as a possible repeater component, but nothing shows.  Any help being able repeat a set of Lines with X and Y values would be greatly appreciated.





      PlayerSlider.as (Component):

      import mx.collections.ArrayCollection;
          import spark.components.DataGroup;
          import spark.components.HSlider;
          public class PlayerSlider extends HSlider
              public var tickMarks:DataGroup;

              public function PlayerSlider()
              public function set tickValues(value:ArrayCollection):void
                  _tickValues = value;
                  _tickValuesChanged = true;
              public function get tickValues():ArrayCollection { return _tickValues; }
              protected var _tickValues:ArrayCollection;
              protected var _tickValuesChanged:Boolean = false;
               * Adding the prompt text to the label if it's available
              override protected function commitProperties():void
                  if (this._tickValuesChanged)
                      if (tickMarks)
                          tickMarks.dataProvider = tickValues;
                      this._tickValuesChanged = false;
              override protected function partAdded(partName:String, instance:Object):void
                  super.partAdded(partName, instance);
                  if (instance == tickMarks)
                      tickMarks.dataProvider = tickValues;



      PlayerSliderSkin.mxml (SkinClass):

      <?xml version="1.0" encoding="utf-8"?>
      <s:SparkSkin 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" xmlns:mx="library://ns.adobe.com/flex/mx">
          <fx:Metadata>[HostComponent("com.digitalsmiths.util.playerSlider.PlayerSlider")]</fx:Meta data>

          <fx:Script fb:purpose="styling">
              /* 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"];

               * @private
              override public function get colorizeExclusions():Array {return exclusions;}
               * @private
              override protected function initializationComplete():void
                  useChromeColor = true;
               *  @private
              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());
                  thumb.setLayoutBoundsPosition(thumbPos, thumb.getLayoutBoundsY());
              <s:State name="normal" />
              <s:State name="disabled" />
              <!--- 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:SolidColor color="0x000000" alpha=".9"/>
                              <s:DropShadowFilter angle="90" color="0x999999" distance="3"/>
                      <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">

          <!--- The default skin class is HSliderTrackSkin.
          @copy spark.components.supportClasses.TrackBase#track
          @see spark.skins.spark.HSliderTrackSkin -->
          <s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100"
          <!--- The default skin class is HSliderThumbSkin.
          @copy spark.components.supportClasses.TrackBase#thumb
          @see spark.skins.spark.HSliderThumbSkin -->
          <s:Button id="thumb" top="0" bottom="0" width="4" height="11"
          <s:DataGroup id="tickMarks" left="0" right="0" top="0" bottom="0" minWidth="33" width="100">
                                  <s:SolidColorStroke color="0x525254"/>