Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
Super Contributor
JeffLemon
Posts: 440
Registered: ‎01-13-2011
My Device: Playbook
Accepted Solution

Skin slider?

How can I skin the slider component? Does anyone have an example?

 

Thanks!

--------------------------------------------------------------------------------------------------
BlackBerry Apps: Instruments | ARTPAD | Piano | Drums | Xylophone
Please use plain text.
Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: Skin slider?

Here's something:

 

// in main code:

            tone = new Slider();
            tone.setTrackSkin(MySliderTrackSkin);
            tone.setFillSkin(MySliderFillSkin);
            tone.setThumbSkin(MySliderThumbSkin);
            tone.width = 350;
// in file MySliderTrackSkin.as: package { import flash.display.Sprite; import qnx.ui.skins.SkinStates; import qnx.ui.skins.slider.SliderTrackSkin; public class MySliderTrackSkin extends SliderTrackSkin { [Embed(source="slider_track.png", scaleGridTop="23", scaleGridBottom="24", scaleGridLeft="3", scaleGridRight="4")] public var Bitmap_track:Class; override protected function initializeStates():void { super.initializeStates(); var skin1:Sprite = new Bitmap_track(); setSkinState(SkinStates.SELECTED, skin1); setSkinState(SkinStates.UP, skin1); showSkin(skin1); } } } // in file MySliderThumbSkin.as: // (and I don't know why I commented out a line, or // whether it's required to be in or out, but it works // for me when it's out...) package { import flash.display.Bitmap; import flash.display.Sprite; import qnx.ui.skins.SkinStates; import qnx.ui.skins.UISkin; public class MySliderThumbSkin extends UISkin { [Embed(source="slider_knob.png")] public var Bitmap_knob:Class; protected var skin1:Bitmap; override protected function initializeStates():void { //~ super.initializeStates(); skin1 = new Bitmap_knob(); setSkinState(SkinStates.SELECTED, skin1); setSkinState(SkinStates.DISABLED, skin1); setSkinState(SkinStates.DOWN, skin1); setSkinState(SkinStates.UP, skin1); showSkin(skin1); } } } // in file MySliderFillSkin.as: package { import flash.display.Shape; import qnx.ui.skins.SkinStates; import qnx.ui.skins.slider.SliderFillSkin; public class MySliderFillSkin extends SliderFillSkin { override protected function initializeStates():void { super.initializeStates(); var skin1:Shape = new Shape(); setSkinState(SkinStates.DISABLED, skin1); setSkinState(SkinStates.UP, skin1); showSkin(skin1); } } }

 

I believe the "fill" skin was there to essentially produce no fill, turning off the default one.

 

The size of my bitmaps was designed to produce a fairly large knob with a thin track.  To make the clickable area along the track as wide as the knob, I made the track bitmap a 7x47 (tall thin) image, with the visible portion being about five pixels in the middle, and the rest transparent.


Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Please use plain text.