Slider Track and Thumb Skinning

This example derives from a couple questions.  The first was how to create a Slider track with sort of a blue pearl look, a permanent ‘highlight’ in the middle, and corresponding changes to the look of the data tooltip.  The second question pertained to using a custom Path to draw a new Slider thumb shape.  Combining these two requests provides an opportunity to explore skinning an existing Spark component.

Each component documents its default skin skin class, which in turn defines skin parts and their associated classes.  Create new MXML Skin classes as copies of the default skin classes.  This provides a baseline class for modifying the skin.  Change the skin class references to point to the custom skins and you’re in business.

I’m not sure what a light blue pearl theme should look like, so I tried something with a radial gradient in tandem with chromeColor (set via styling).  To illustrate using a Path for the thumb, I chose a simple triangular shape.  I might replace this with something using a combination of lines and quad. Beziers in a future modification.

This screenshot contrasts the default and custom skin.

Dragging the top slider adjusts the height of the custom skinned slider so you may view how the skin varies with slider height.

View demo.

View source.

Natural Cubic Spline in MXML

I originally placed the natural cubic spline (refer to this TechNote) in Degrafa as a utility.  It was not practical to draw the spline as it could only be plotted with small line segments.  With the first version of the spline->Bezier utility near completion,  it is now possible to efficiently draw cartesian splines (y as a function of x, not x,y as functions of t) in the Degrafa pipeline.  Parametric splines (x,y as functions of t) are to be addressed in the future.

The following screenshot illustrates a preview of the upcoming NaturalCubicSpline class,

Natural Cubic Spline Drawn in Degrafa
Natural Cubic Spline Drawn in Degrafa

The MXML for this spline is

<NaturalCubicSpline id="cubicSpline" graphicsTarget="{[splineLayer]}"
data="104,299 166,168 217,236 307,225 370,142 440,299 506,309" >
 <SolidStroke weight="2" color="#0000FF"/>

That’s all it will take to draw a natural cubic spline in Degrafa! For applications where the data points naturally describe a Cartesian function (i.e. curves that don’t loop back over themselves), the natural cubic spline is an attractive interpolation and drawing method.  I can see some application in charting and scientific visualization applications.  If it proves valuable, I’ll work on extending the spline->Bezier utility to parameteric splines.  That would enable efficient drawing of Camull-Rom and parameteric cubic splines, for example.

More to come …