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 democowShape code and runnable jar are available here.

Reply to comment | Custom Swing Components for the Java™

I believe what you composed made a ton of sense. However, consider this, what if you added a little content? I mean, I don't want to tell you how to run your blog, however suppose you added a post title that makes people desire more? I mean Reply to comment | Custom Swing Components for the Java™ platform is a little boring. You might look at Yahoo's front page and note how they create post titles to grab viewers to click. You might add a video or a related picture or two to grab readers excited about everything've written. Just my opinion, it might make your posts a little bit more interesting.

The LATEST chatter

  • Halted all development on the twitter client. The application in its incomplete state is available at: http://tinyurl.com/6ktd8xw 6 years 13 weeks ago
  • Java Swing Components is currently undergoing a rebranding exercise to Custom Swing Components. The url however will remain the same. 6 years 36 weeks ago
  • Java Swing Components is proud to announce the release of our rater component. http://www.javaswingcomponents.com/product/rater 6 years 37 weeks ago
  • Java Swing Components is proud to announce the release of our first bundle including a fun demo. http://www.javaswingcomponents.com/products 6 years 42 weeks ago
  • New post: New Component Teaser http://tinyurl.com/35hxfnn 6 years 42 weeks ago

User login

Syndicate

Syndicate content