Archive for October 28th, 2008

28
Oct
08

Trackless Slider component

The Slider component is fairly easy to style. But as with many of the flex components, I seem to quickly reach the point where I can’t get it to look exactly as I want it to. Rumours say that this will be rectified in version four, but in the meantime there are workarounds and hacks.

I wanted a Slider component with a background of bars growing in height – like a volume slider. Attaching a png with the bars was easy (yes, I know – it can be scaled. But for this project, scaling was not necessary and I couldn’t justify spending hours on gold-plating it). Removing the tracks wasn’t that easy as it can’t be done through a simple style property.

The solution is a custom skin. But as the Slider component uses the track to calculate some of its properties, and places other graphics according to track size and position, it needs to be measurable. I just drew an invisible rectangle. Overriding the methods that calculate width and height will probably be more efficient, but shouldn’t matter, unless you have dozens on screen simultaneously.

Here’s the skin class – use mySlider.setStyle(“trackSkin”, SliderTrackSkinInvisible) to set it.

package no.papirfly.msp.skins
{
    import flash.display.Graphics;

    import mx.core.IFlexDisplayObject;
    import mx.skins.halo.SliderTrackSkin;

    public class SliderTrackSkinInvisible extends SliderTrackSkin implements IFlexDisplayObject
    {

        public function SliderTrackSkinInvisible()
        {
            super();
        }    

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            this.graphics.clear();
            var gr:Graphics = this.graphics;
            gr.beginFill(0x00FF00, 0);
            gr.drawRect(0,0, unscaledWidth, height);
            gr.endFill();
        }
    }
}