Description #

RatingStars is a typical rating component often seen in web applications. By default the component displays five stars for the user to give ratings. The number of stars can be defined by using the setMaxValue(int) method and by customizing the CSS you can create your own star graphics. The value can be selected by using mouse but keyboard navigation is also supported.

Download and Maven #

Install from Vaadin Directory: : https://vaadin.com/addon/ratingstars

Live demo & sources #

See live demo

Download the sources from https://github.com/tehapo/RatingStars


The RatingStars component extends the AbstractField class of Vaadin framework. This means you have all the basic functionality you have learned to expect from a Vaadin component (setReadOnly, setImmediate, setEnabled, etc). By default the component (as many other Vaadin components) is not immediate so if you want the ValueChangeEvents to be sent to the server immediately on user input, you must call setImmediate(true).

In addition to the methods inherited from AbstractField, the component has also setMaxValue(int) method to set the maximum number of stars and setAnimated(boolean) method to enable or disable animations on the client-side.

The component also supports separate captions for each value. These can be set using one of the overloaded setValueCaption methods.

Customization #

The appearance of the component can be easily customized with your own CSS theme. Main idea behind the component DOM structure is to present partially transparent GIF (or PNG) images of stars in front of a div representing the color of the stars. This also easily allows the displaying of partial (non-integer) values for the component, e.g. 2.5 stars. The shape of the transparent image is of course not limited to star shape so you can create any shapes your want.

CSS class names for the div elements are illustrated in the image above. The class name of the partially transparent star image is v-ratingstars-star and the background bar is v-ratingstars-bar. All the elements of the component are wrapped inside a wrapper div with a class name of v-ratingstars-wrapper.

All you need to define yourself is the background-image, width and height properties for the v-ratingstars-star class and background-image or background-color property for the v-ratingstars-bar class.

Here is the CSS definitions for the built-in large theme.

.v-ratingstars-wrapper-large .v-ratingstars-bar {
	background-image: url(images/star_bg_34x33.gif);
.v-ratingstars-wrapper-large .v-ratingstars-star {
	background-image: url(images/star_34x33.gif);
	width: 34px;
	height: 33px;
2 Attachments
Average (9 Votes)
Great Component. You may want to update the documentation to not tell anymore that keyboard usage is not supported.
Posted on 4/20/10 9:20 AM.
Thanks! You're right, the documentation is a bit outdated. I think I'll rewrite some parts of the documentation later this week.
Posted on 4/21/10 6:47 AM in reply to John Rizzo.