Skinning Flex HSLider component. part II

This post is a quick follow up on my last skinning post, since I realized  that I should add some details about the sliderThumb customization.

In order to create our very own sliderThumb UI we created a class that extends SliderThumb (see full code below). But we need to override some method of SliderThumb otherwise the slider won’t be displayed correctly. (e.g. the original triangle thumb will still be visible :s )

In order to remove the legacy thumb there are several tricks.

  1. Reduce the size of the thumb, to make it almost invisible.
  2. Just override the measure() function and set the size to 0*0 

    override protected function measure():void{
                super.measure();
                measuredWidth = 0;
                measuredHeight = 0;
                measuredMinHeight = -1;
                measuredMinWidth = -1;
            }
    

    That ‘s not the best solution since a small glitchy point will remain visible as the thumb. Check below we can see a small ‘blueish’ ball

  3. Apply a transparent skin to the thumb. (Best solution so far)
  4. In the properties of the H/VSlider we can set a thumbSkin and Flex replace the ugly triangle by our image/skin. The trick here is to use a 1 px transparent image as the skin which going to remove the old thumb so we can only see our custom component.

    //in the mxml
    <mx:style>
    		HSlider{
    			thumbSkin: Embed(source="com/GuN/UI/customUIComponent/slider/empty.png");	
    		}
    	</mx:style>
    	
    	<mx:script>
    		< !&#91;CDATA&#91;
    			import com.GuN.UI.customUIComponent.slider.SliderTrack;
    			import com.GuN.UI.customUIComponent.slider.CSpSliderThumb;
    			
    			
    			var arrayValues:Array = &#91;"null","January '08", "February '08", "March '08", "April '08", "May '08", "June '08", "July '08", "August '08",
    										"September '08", "October '08", "November '08", "December '08"&#93;;
    			
    		&#93;&#93;>
    	</mx:script>
    	<mx: Panel x="0" y="0" width="527" height="104" layout="absolute" title="Custom Slider" backgroundColor="#000000">
    		<mx:hslider x="73.5" y="10"
    			id="s"
    			showDataTip="false"
    			values="{arrayValues}"
    			creationComplete="{s.value=1}"
    			snapInterval="1"
    			minimum="1"
    			maximum="{arrayValues.length-1}"
    			liveDragging="true"
    			trackSkin="{SliderTrack}"
    			sliderThumbClass="{CSpSliderThumb}"
    			 width="360"></mx:hslider>
    	</mx:>
    

    Check the result here (once on the page right click to get the src)

Continue reading

Advertisements