I am the lead developer at 'Java Swing Compoments' and am extremely passionate about developing UIs. To this day I still blame Logo the turtle for introducing me to programming... I have never looked back! Rhiannon has posted 6 posts at DZone. View Full User Profile

Swing Rater Skinning Tutorial

  • submit to reddit

This simple tutorial will take you through the steps required for transforming a standard Java Swing Components rater to a tucows inspired rater.

 The rater component is extremely flexible and customizing it to look like a row of cows is actually extremely easy.


Step 1: Create an instance of JSCRater

The first step to customizing a rater, would be to create one.

//creates a new instance of JSCRater
JSCRater rater = new JSCRater();

Step 2: Enable selection of half shapes

The rater relies on a RaterModel to determine what type of selection is permitted. The default configuration allows only full shapes to be selected, however for this example we also want to be able to select half shapes. To do so we create a new RaterModel and apply it to the rater.

//creates a new model with 5 shapes that allows the user 
//to select half shapes 
DefaultRaterModel raterModel = new DefaultRaterModel(); 


 Step 3: Change the ShapeProvider used by the rater

The biggest difference between the standard and custom rater would be the shapes used to represent the rating. Luckily the rater has been abstracted away from using stars as ratings and instead relies on a ShapeProvder class to supply it with a closed shape to render. It is the responsibility of the ShapeProvider to provide the rater a shape.

I do not wish to delve into the code required to create the cow shape, as lets be honest there are not many companies who use cows as their logo. The code will be appended at the end for those brave souls who wish to view it.

//creates a new CowShape and assigns it to the rater.
CowShape cowShape = new CowShape();

Step 4: Change the unselected painter

The unselected painter is used to paint the 'empty' area of the shape. To mimic the tucows rater we will fill the 'empty' unselected area with a solid blue color. To do this we will use a SolidColorPainter.

//creates a new unselected painter which will 
//fill the empty areas of the shape blue. 
Color tuCowsBlue = new Color(43,176,245); 
SolidColorPainter unselectedPainter = new SolidColorPainter(tuCowsBlue); rater.setUnselectedPainter(unselectedPainter);

Step 5: Change the selected painter

The selected painter is used to paint the 'filled' area of the shape. Just for fun we will tile a cow print image to represent the selected area. To do this we will use an ImagePainter set to tile.

//creates a new selected painter which will
//tile the filled areas of the shape with cowPrint.
ImagePainter selectedPainter = new ImagePainter(Thread.currentThread().getContextClassLoader().getResourceAsStream("cows.png"));


Step 6: Finishing touches

The last step in the tutorial is to apply some finishing touches to the rater. We will change the border of the rater shape to black, and change the mouse over border to light gray. The last step would be to enable the drawing of a drop shadow. Drawing a drop shadow is an expensive operation and should only be applied to small raters.

//sets the mouse over border color to light gray.
//sets the standard border to black.
//sets the rater to draw a drop shadow. this is expensive on large raters.


if you are reading this you have made it to the end of the tutorial. The source code and awesome runnable jar containing this demo can be found attached below. A webstart demo and additional information regarding the rater can be found at the Java Swing Components site.

javalobby-rater-skin-demo.jar59.99 KB
CowShape.java6.82 KB
Demo.java8.04 KB
Published at DZone with permission of its author, Rhiannon Liebowitz.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)


OrangeBook replied on Sat, 2010/10/09 - 2:43am

This looks like an ad for this product to me...

Andrew McVeigh replied on Sat, 2010/10/09 - 5:07pm in response to: OrangeBook

i think it is, but i for one welcome anything new in the swing space.  great to see new components.

perhaps Rhiannon, you could mention the commercial side earlier in the piece?

great looking components though, really nice.

Rhiannon Liebowitz replied on Sun, 2010/10/10 - 2:25am

I appologise if the article appears misleading implying it is not a commercial component.

In the past, I was contacted to write a tutorial on how to skin the accordion component, this tutorial follows the identical format as the previous tutorial with a nearly identical heading.

If you prefer I would mention that it is a commercial component earlier on, I would be happy to do so.

The reason I wrote this this tutorial was because I decided it would be fun to see if I could emulate the tucows rater, only later did it occur to me to change it into a tutorial. I recommend giving the demo jar a run as it is pretty fun clicking on the cows :-)

I plan on writing a series of custom swing component tip articles next that will have nothing to do with any of my existing components, that will be purely knowledge sharing.

Andrew McVeigh replied on Sun, 2010/10/10 - 3:13pm in response to: Rhiannon Liebowitz

If you prefer I would mention that it is a commercial component earlier on, I would be happy to do so.

I don't mind either way - it would probably help to inform people that it isn't generic swing.

I plan on writing a series of custom swing component tip articles next that will have nothing to do with any of my existing components, that will be purely knowledge sharing.

Good stuff!  Looking fwd to the custom components stuff, and the generic swing tutorials too.

Khent Johnson replied on Fri, 2011/09/02 - 5:42pm

Awesome! This is a superb tutorial which I truly enjoys reading every bit of info that's layout there. I've been using Java Swing Components rater in my few assigned projects though I wasn't aware of this step of changing the rater's skin. I must try it then. Reputation Advocate

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.