actionscript 3 - Creating a mobile VSliderSkin for VSlider - with test case and screenshots -
hslider has been optimized mobile, vslider not - can see here:
at same time mobile-themed hsliderskin.as looks pretty simple.
so i've copied file "vsliderskin.as" in simple test project , -
replaced obvious references "hslider" "vslider"
in measure() method swapped "width" <-> "height"
in layoutcontents() swapped "width" <-> "height" , "x" <-> "y"
slideapp.mxml (just add 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 same dir slideapp.as):
//////////////////////////////////////////////////////////////////////////////// // // adobe systems incorporated // copyright 2010 adobe systems incorporated // rights reserved. // // notice: adobe permits use, modify, , distribute file // in accordance terms of 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 vslider controls in mobile applications. * * <p>the base flex implementation creates vslider fixed height * , variable width fixed-size thumb. height of * vslider component increases, vertical dimensions of visible vslider remain * same, , vslider stays vertically centered.</p> * * <p>the thumb , track implementations can customized subclassing * skin class , overriding thumbskinclass, trackskinclass, * and/or datatipclass variables 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 skin class used vslider thumb. * * @langversion 3.0 * @playerversion flash 10 * @playerversion air 2.5 * @productversion flex 4.5 */ protected var thumbskinclass:class; /** * specifies skin class used vslider track. * * @langversion 3.0 * @playerversion flash 10 * @playerversion air 2.5 * @productversion flex 4.5 */ protected var trackskinclass:class; /** * specifies class used 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 , thumb track = new button(); track.setstyle("skinclass", trackskinclass); addchild(track); thumb = new button(); thumb.setstyle("skinclass", thumbskinclass); addchild(thumb); // set class factory datatip datatip = new classfactory(); classfactory(datatip).generator = datatipclass; } /** * @private * hsliderskin width no less width of thumb skin. * hsliderskin height no less greater of heights of * thumb , 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 no smaller larger of thumb or track var calculatedskinwidth:int = math.max(math.max(thumb.getpreferredboundswidth(), track.getpreferredboundswidth()), unscaledwidth); // minimum width no smaller thumb var calculatedskinheight:int = math.max(thumb.getpreferredboundsheight(), unscaledheight); // once know skin height, center thumb , 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 , position setelementsize(thumb, thumb.getpreferredboundswidth(), thumb.getpreferredboundsheight()); // thumb not scale setelementsize(track, track.getpreferredboundswidth(), calculatedskinheight); setelementposition(track, calculatedtrackx, 0); } } }
of course didn't work, close , thumb moves vertically - should:
does please have idea how complete mobile skin?
should create copy of hslidertrackskin.as too? or maybe non-mobile vslidertrackskin.mxml can (ab)used here?
you can create own class customvslider , put inside hslider changed rotation(rotation = 90). it's work great me. hope 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>