Rater Skinning Tutorial

This simple tutorial will take you through the steps required for transforming a standard Custom 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();
raterModel.setSelection(Selection.HALVES);
raterModel.setNumShapes(5);
rater.setRaterModel(raterModel);

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();
rater.setShapeProvider(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"));
selectedPainter.setTile(true);
rater.setSelectedPainter(selectedPainter);

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.
rater.setMouseOverBorderColor(Color.LIGHT_GRAY);
//sets the standard border to black.
rater.setBorderColor(Color.BLACK);
//sets the rater to draw a drop shadow. this is expensive on large raters.
rater.setDrawShadow(true);

Congratulations

Congratulations for making it to the end of the tutorial, the demo is actually alot of fun and is worth a run. The demo ,  cowShape code and runnable jar are available here.