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.

       

      Thanks,

      Skitch

       

      PlayerSlider.as (Component):

      import mx.collections.ArrayCollection;
         
          import spark.components.DataGroup;
          import spark.components.HSlider;
         
          public class PlayerSlider extends HSlider
          {
              [SkinPart(required="false")]
              public var tickMarks:DataGroup;

              public function PlayerSlider()
              {
                  super();
              }
             
              [Bindable]       
              public function set tickValues(value:ArrayCollection):void
              {
                  _tickValues = value;
                  _tickValuesChanged = true;
                  invalidateProperties();
              }
              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
              {
                  super.commitProperties();
                 
                  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;
                  super.initializationComplete();
              }
          </fx:Script>
         
          <fx:Script>
              /**
               *  @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());
                  super.measure();
                  thumb.setLayoutBoundsPosition(thumbPos, thumb.getLayoutBoundsY());
              }
          </fx:Script>
         
          <s:states>
              <s:State name="normal" />
              <s:State name="disabled" />
          </s:states>
         
          <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:Label>
                  </s:DataRenderer>
             </fx:Component>
          </fx:Declarations>

          <!--- 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"
                    skinClass="styling.skinClasses.sliders.track.HSliderTrackSkin"/>
         
          <!--- 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"
                    skinClass="styling.skinClasses.sliders.thumb.HSliderThumbSkin"/>
         
          <s:DataGroup id="tickMarks" left="0" right="0" top="0" bottom="0" minWidth="33" width="100">
              <s:layout>
                  <s:BasicLayout/>
              </s:layout>
              <s:itemRenderer>
                  <fx:Component>
                      <s:ItemRenderer>
                          <s:Line
                              height="100%">
                              <s:stroke>
                                  <s:SolidColorStroke color="0x525254"/>
                              </s:stroke>
                          </s:Line>
                      </s:ItemRenderer>
                  </fx:Component>
              </s:itemRenderer>
          </s:DataGroup>
      </s:SparkSkin>