Skinning the Flex 2 Slider component

The skinning capabilities of Flex 2 components has been criticized quite a bit. There are a few articles on devnet that discuss this a bit but I have to say that skinning components really does require some effort.

The problem is that Flex tries to be the framework for everything and of course everyone’s requirement is just slightly different. Flash was always a language for personal expression and a lot of people have the same expectations for Flex (Hardly anyone asks the Java Swing developers for scrollbars that look drastically different from the basic look and feel). To do Flex justice, compare the pain of skinning Flex components to creating a new look-and-feel for the Swing widget set.

Enough philosophy though, here is my first attempt to actually skin the Slider component (Right-click to view source). Couple of points that struck me were:
1) Make sure your components report the correct dimensions to the measurement architecture. I am still fuzzy on that part but the component wasnt working correctly until I added the measure() implementation on the SliderButton class.
2) The slider scrub positions the scrub button at an x of width/2. The width/2 point is also used as the point to set the value the slider reports.
3) This is definitely wrong and I hope the Flex team fixes this: The Slider class puts the highlight track at 1 pixel below the progress track. This definitely needs to be configurable without extending the Slider base class itself.

As always, comments are always welcome.

Author: Arpit Mathur

Arpit Mathur is a Principal Engineer at Comcast Labs where he is currently working on a variety of topics including Machine Learning, Affective Computing, and Blockchain applications. Arpit has also worked extensively on Android and iOS applications, Virtual Reality apps as well as with web technologies like JavaScript, HTML and Ruby on Rails. He also spent a couple of years in the User Experience team as a Creative Technologist. View all posts by Arpit Mathur