Tom, That's an excellent thought. I'm pretty new to spark skinning. I'll investigate this... hopefully it will be a relatively simple adjustment.
--- In flexcoders@yahoogroups.com, "tkraikit" <tkraikit@...> wrote: > > > 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! > > > > > >
