It looks like you're in a mobile app but trying to base your skin off of the desktop HSliderThumb skin. Have you looked at using the mobile theme's skin as your starting point instead?
-- Tom --- In flexcoders@yahoogroups.com, "stldvd" <stldvd@...> wrote: > > ::bump:: > > Anyone? > > --- In flexcoders@yahoogroups.com, "stldvd" <stldvd@> wrote: > > > > Hi All, > > > > I'm trying to skin the thumb of an hSlider component. Problems: > > 1) the thumb is resized to be pixelated and grainy. > > 2) Its position is incorrect. Instead of the new button being cleanly > > bisected by the track, it is just below the track, tangential to it. And > > (presumably because its registration point is at upper left) when I slide > > it all the way to the right, it goes off the end of the track until its > > left edge is at the track's right edge. This also messes up calculations > > for the hSlider.value property. Here's code for the entire test project: > > //HSliderTest.mxml: > > <?xml version="1.0" encoding="utf-8"?> > > <s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"; > > > > xmlns:s="library://ns.adobe.com/flex/spark" > > firstView="views.HSliderTestHomeView" applicationDPI="160"> > > <fx:Declarations> > > <!-- Place non-visual elements (e.g., services, value objects) > > here --> > > </fx:Declarations> > > </s:ViewNavigatorApplication> > > > > //SliderSkin.mxml. Only modified the <s:Button tag at the end: > > <?xml version="1.0" encoding="utf-8"?> > > <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"; > > xmlns:s="library://ns.adobe.com/flex/spark" > > xmlns:fb="http://ns.adobe.com/flashbuilder/2009"; minHeight="11" > > alpha.disabled="0.5"> > > > > <fx:Metadata> > > <![CDATA[ > > /** > > * @copy spark.skins.spark.ApplicationSkin#hostComponent > > */ > > [HostComponent("spark.components.HSlider")] > > > > ]]> > > </fx:Metadata> > > > > <fx:Script fb:purpose="styling"> > > /* Define the skin elements that should not be colorized. > > For slider, the skin itself is colorized but the individual > > parts are not. */ > > > > static private const exclusions:Array = ["track", "thumb"]; > > > > /** > > * @private > > */ > > override public function get colorizeExclusions():Array {return > > exclusions;} > > > > /** > > * @private > > */ > > override protected function initializationComplete():void > > { > > useChromeColor = true; > > super.initializationComplete(); > > } > > </fx:Script> > > > > <fx:Script> > > /** > > * @private > > */ > > override protected function measure() : void > > { > > // Temporarily move the thumb to the left of the Slider so > > measurement > > // doesn't factor in its x position. This allows resizing the > > // HSlider to less than 100px in width. > > var thumbPos:Number = thumb.getLayoutBoundsX(); > > thumb.setLayoutBoundsPosition(0, thumb.getLayoutBoundsY()); > > super.measure(); > > thumb.setLayoutBoundsPosition(thumbPos, > > thumb.getLayoutBoundsY()); > > } > > </fx:Script> > > > > <s:states> > > <s:State name="normal" /> > > <s:State name="disabled" /> > > </s:states> > > > > <fx:Declarations> > > <!--- The tooltip used in the mx.controls.Slider control. > > To customize the DataTip's appearance, create a custom > > HSliderSkin class.--> > > <fx:Component id="dataTip"> > > <s:DataRenderer minHeight="24" minWidth="40" y="-34"> > > <s:Rect top="0" left="0" right="0" bottom="0"> > > <s:fill> > > <s:SolidColor color="0x000000" alpha=".9"/> > > </s:fill> > > <s:filters> > > <s:DropShadowFilter angle="90" color="0x999999" > > distance="3"/> > > </s:filters> > > </s:Rect> > > <s:Label id="labelDisplay" text="{data}" > > horizontalCenter="0" verticalCenter="1" > > left="5" right="5" top="5" bottom="5" > > textAlign="center" verticalAlign="middle" > > fontWeight="normal" color="white" fontSize="11"> > > </s:Label> > > </s:DataRenderer> > > </fx:Component> > > </fx:Declarations> > > > > <!--- The default skin class is HSliderTrackSkin. > > @copy spark.components.supportClasses.TrackBase#track > > @see spark.skins.spark.HSliderTrackSkin --> > > <s:Button id="track" left="0" right="0" width="11" height="11" > > tabEnabled="false" > > skinClass="spark.skins.spark.HSliderTrackSkin" /> > > > > <!--- The default skin class is HSliderThumbSkin. > > @copy spark.components.supportClasses.TrackBase#thumb > > @see spark.skins.spark.HSliderThumbSkin --> > > <s:Button id="thumb" top="0" bottom="0" height="11" width="11" > > tabEnabled="false" skinClass="skins.SliderThumbSkin" /> > > </s:SparkSkin> > > > > //SliderThumbSkin.mxml > > > > <?xml version="1.0" encoding="utf-8"?> > > <s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"; > > xmlns:s="library://ns.adobe.com/flex/spark" > > > > xmlns:fb="http://ns.adobe.com/flashbuilder/2009"; > > minWidth="21" > > minHeight="21" > > alpha.disabled="0.5"> > > > > <fx:Metadata> > > <![CDATA[ > > /** > > * @copy spark.skins.spark.ApplicationSkin#hostComponent > > */ > > [HostComponent("spark.components.Button")] > > ]]> > > </fx:Metadata> > > > > <!-- states --> > > <s:states> > > <s:State name="up" /> > > <s:State name="over" /> > > <s:State name="down" /> > > <s:State name="disabled" /> > > </s:states> > > <s:Image source.up="assets/PurpleOnlyCircle60x60.png" > > source.over="assets/PurpleOnlyCircle60x60.png" > > source.down="assets/PurpleOnlyCircle60x60.png" > > source.disabled="assets/PurpleOnlyCircle60x60.png" > > width="60" > > height="60"/> > > </s:SparkButtonSkin> > > > > Can anyone can see why this doesn't display correctly? > > > > Thanks! > > >
