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 -
replaced the obvious references to "HSlider" by "VSlider"
in the measure() method swapped "width" <-> "height"
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?
