Walker Software Weblog

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.

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.

When I was giving some of my dialogs a facelift, I decided I really wanted my label and text boxes aligned to the text’s baseline. It really helps give an app a polished look. I remember seeing a blog about baseline alignment in soon-to-be-release-jre and in matisse. But I need them now. Granted my method is not very accurate on all platforms but it 1) looks better than the default alignment, 2) was quick to implement(don’t have to spend time fiddling with each control in gui builder), and 3) available now.

(Continued)