All Over Software Jobs: [flexcoders] hSlider Thumb Skin positions incorrectly

Thursday, December 15, 2011

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>

</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>

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


<s:Button id="track" left="0" right="0" width="11" height="11"
tabEnabled="false"
skinClass="spark.skins.spark.HSliderTrackSkin" />


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


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