Swing Rater Skinning Tutorial
Swing Rater Skinning Tutorial
Join the DZone community and get the full member experience.Join For Free
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(); 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);
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.
Opinions expressed by DZone contributors are their own.