Creating a mobile VSliderSkin for VSlider - with test case and screenshots

Question

HSlider has been optimized for mobile, but VSlider not - as you can see here:

At the same time the mobile-themed HSliderSkin.as looks pretty simple.

So I've copied that file to a "VSliderSkin.as" in my very simple test project and -

1. replaced the obvious references to "HSlider" by "VSlider"

2. in the measure() method swapped "width" <-> "height"

3. in the layoutContents() swapped "width" <-> "height" and "x" <-> "y"

SlideApp.mxml (just add to a blank Flex mobile project):

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    applicationDPI="160">

    <s:VSlider
        skinClass="VSliderSkin"
        horizontalCenter="0"
        height="80%" />

    <s:HSlider
        skinClass="spark.skins.mobile.HSliderSkin"
        width="100%"
        bottom="10" />

</s:Application>

VSliderSkin.as (put into the same dir as the SlideApp.as):

////////////////////////////////////////////////////////////////////////////////
//
//  ADOBE SYSTEMS INCORPORATED
//  Copyright 2010 Adobe Systems Incorporated
//  All Rights Reserved.
//
//  NOTICE: Adobe permits you to use, modify, and distribute this file
//  in accordance with the terms of the license agreement accompanying it.
//
////////////////////////////////////////////////////////////////////////////////

package {
    import flash.display.BlendMode;

    import mx.core.ClassFactory;
    import mx.core.IFactory;

    import spark.components.Button;
    import spark.components.VSlider;
    import spark.skins.mobile.HSliderThumbSkin;
    import spark.skins.mobile.HSliderTrackSkin;
    import spark.skins.mobile.supportClasses.HSliderDataTip;
    import spark.skins.mobile.supportClasses.MobileSkin;

    /**
     *  ActionScript-based skin for VSlider controls in mobile applications.
     * 
     *  <p>The base Flex implementation creates an VSlider with fixed height
     *  and variable width with a fixed-size thumb. As the height of the
     *  VSlider component increases, the vertical dimensions of the visible VSlider remain
     *  the same, and the VSlider stays vertically centered.</p>
     * 
     *  <p>The thumb and track implementations can be customized by subclassing
     *  this skin class and overriding the thumbSkinClass, trackSkinClass,
     *  and/or dataTipClass variables as necessary.</p>
     * 
     *  @langversion 3.0
     *  @playerversion Flash 10
     *  @playerversion AIR 2.5 
     *  @productversion Flex 4.5
     */
    public class VSliderSkin extends MobileSkin
    {    
        //--------------------------------------------------------------------------
        //
        //  Constructor
        //
        //--------------------------------------------------------------------------

        /**
         *  Constructor.
         * 
         *  @langversion 3.0
         *  @playerversion Flash 10
         *  @playerversion AIR 2.5 
         *  @productversion Flex 4.5
         * 
         */    
        public function VSliderSkin()
        {
            super();

            thumbSkinClass = HSliderThumbSkin;
            trackSkinClass = HSliderTrackSkin;
            dataTipClass = spark.skins.mobile.supportClasses.HSliderDataTip;

            blendMode = BlendMode.LAYER;
        }

        //--------------------------------------------------------------------------
        //
        //  Properties
        //
        //--------------------------------------------------------------------------

        /** 
         *  @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        public var hostComponent:VSlider;

        //--------------------------------------------------------------------------
        //
        //  Skin parts 
        //
        //--------------------------------------------------------------------------

        /**
         *  VSlider track skin part
         *
         *  @langversion 3.0
         *  @playerversion Flash 10
         *  @playerversion AIR 2.5 
         *  @productversion Flex 4.5
         */    
        public var track:Button;

        /**
         *  VSlider thumb skin part
         * 
         *  @langversion 3.0
         *  @playerversion Flash 10
         *  @playerversion AIR 2.5 
         *  @productversion Flex 4.5
         */    
        public var thumb:Button;

        /**
         *  VSlider dataTip class factory
         * 
         *  @langversion 3.0
         *  @playerversion Flash 10
         *  @playerversion AIR 2.5 
         *  @productversion Flex 4.5
         */    
        public var dataTip:IFactory;

        //--------------------------------------------------------------------------
        //
        //  Variables
        //
        //--------------------------------------------------------------------------

        /**
         *  Specifies the skin class that will be used for the VSlider thumb.
         * 
         *  @langversion 3.0
         *  @playerversion Flash 10
         *  @playerversion AIR 2.5 
         *  @productversion Flex 4.5 
         */    
        protected var thumbSkinClass:Class;

        /**
         *  Specifies the skin class that will be used for the VSlider track.
         * 
         *  @langversion 3.0
         *  @playerversion Flash 10
         *  @playerversion AIR 2.5 
         *  @productversion Flex 4.5 
         */    
        protected var trackSkinClass:Class;

        /**
         *  Specifies the class that will be used for the VSlider datatip.
         * 
         *  @langversion 3.0
         *  @playerversion Flash 10
         *  @playerversion AIR 2.5 
         *  @productversion Flex 4.5 
         */    
        protected var dataTipClass:Class;

        //--------------------------------------------------------------------------
        //
        //  Overridden methods
        //
        //--------------------------------------------------------------------------

        /**
         *  @private 
         */ 
        override protected function commitCurrentState():void
        {
            if (currentState == "disabled")
                alpha = 0.5;
            else if (currentState == "normal")
                alpha = 1;
        }    

        /**
         *  @private 
         */ 
        override protected function createChildren():void
        {
            // Create our skin parts: track and thumb
            track = new Button();
            track.setStyle("skinClass", trackSkinClass);
            addChild(track);

            thumb = new Button();
            thumb.setStyle("skinClass", thumbSkinClass);
            addChild(thumb);

            // Set up the class factory for the dataTip
            dataTip = new ClassFactory();
            ClassFactory(dataTip).generator = dataTipClass;
        }

        /**
         *  @private 
         *  The HSliderSkin width will be no less than the width of the thumb skin.
         *  The HSliderSkin height will be no less than the greater of the heights of
         *  the thumb and track skins.
         */ 
        override protected function measure():void
        {
            measuredHeight = track.getPreferredBoundsHeight();
            measuredWidth = Math.max(track.getPreferredBoundsWidth(), thumb.getPreferredBoundsWidth());

            measuredMinWidth = Math.max(track.getPreferredBoundsWidth(), thumb.getPreferredBoundsWidth());
            measuredMinHeight = thumb.getPreferredBoundsHeight();
        }

        /**
         *  @private
         */ 
        override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.layoutContents(unscaledWidth, unscaledHeight);

            // minimum height is no smaller than the larger of the thumb or track
            var calculatedSkinWidth:int = Math.max(Math.max(thumb.getPreferredBoundsWidth(), track.getPreferredBoundsWidth()),
                unscaledWidth);

            // minimum width is no smaller than the thumb
            var calculatedSkinHeight:int = Math.max(thumb.getPreferredBoundsHeight(),
                unscaledHeight);

            // once we know the skin height, center the thumb and track
            thumb.x = Math.max(Math.round((calculatedSkinWidth - thumb.getPreferredBoundsWidth()) / 2), 0);
            var calculatedTrackX:int = Math.max(Math.round((calculatedSkinWidth - track.getPreferredBoundsWidth()) / 2), 0);

            // size and position
            setElementSize(thumb, thumb.getPreferredBoundsWidth(), thumb.getPreferredBoundsHeight()); // thumb does NOT scale
            setElementSize(track, track.getPreferredBoundsWidth(), calculatedSkinHeight);
            setElementPosition(track, calculatedTrackX, 0);
        }
    }
}

Of course that didn't work, but is very close and the thumb moves vertically - as it should:

Does anybody please have an idea how to complete my mobile skin?

Should I create a copy of the HSliderTrackSkin.as too? Or maybe the non-mobile VSliderTrackSkin.mxml can be (ab)used here?

Answer 1

You can create you own class like a CustomVSlider and put inside HSlider with changed rotation(rotation = 90). It's work great for me. Hope this help you.

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
applicationDPI="160">

<s:HSlider
    skinClass="spark.skins.mobile.HSliderSkin"
    height="100%" left="50"
    top="100" rotation="90"/>

<s:HSlider
    skinClass="spark.skins.mobile.HSliderSkin"
    width="100%"
    top="300" />
</s:Application>