::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! >
