::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!
>
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Alternative FAQ location: https://share.acrobat.com/adc/document.do?docid=942dbdc8-e469-446f-b4cf-1e62079f6847
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com
