Deprecated: Function set_magic_quotes_runtime() is deprecated in /home/xeno04/tp.walkersoftware.net/textpattern/lib/txplib_db.php on line 14
Walker Software Weblog: Fun with JSlider: iTunes and Netflix style

Fun with JSlider: iTunes and Netflix style

Jun 11, 04:40 PM

It occurred to me that the rating widget in iTunes (and iPhoto) is basically the same as a JSlider control. So I wrote a SliderUI to make it work.
Shape slider demo screenshot
WebStart demo (Java 1.5+) Download code (.zip)

The ShapeSliderUI class is built to present a series of Shape objects. A primary shape is displayed if the position is included in the set and a secondary shape is displayed if not. The secondary shapes are only displayed if the control is enabled. You could any shape you want, the default primary shape is a star and the secondary shape is a small dot.

For input, it assumes a click on the rightmost two-thirds of a star is a click on that shape, otherwise it is the previous position. This allows the user to select zero shapes. The widget also responds to dragging the mouse in the control area. When the control is focused, the left and right arrow buttons can change the value.

I also made a StrokeShapeSliderUI which is similar but only uses one shape. It uses filled and not filled shapes to denote the value, much like the Netflix website. However to build a replacement for their control would require creating a new model class and adding some more methods to a subclass of JSlider. This because the Netflix widget also displays the type of rating (User, System Average, and Friends Rating) by the color used to fill the shape. It also has an optional button to indicate no interest.

Comments

Added the JNLP mime type to the server. Sorry about that, thought it was there already.

— Adam · Jun 12, 08:39 PM · #

Way cool! I hadn\'t thought of writing a new UI for the Slider, though it makes complete sense.

Richard

— Richard · Aug 9, 03:18 PM · #

Commenting is closed for this article.