I just released the first version my RatingStars component. The component displays customizable number of stars for the user to give ratings and also features some client-side animations.
Any comments and bug reports are more than welcome.
I did some small improvements to the RatingStars component today.
I improved the bundled star images and added support for keyboard focusing and navigation (try changing the focus with tab and selecting a rating with left/right arrow keys and enter).
And of course the component is now packaged to be instantly used in Vaadin 6.2+ projects. Just add the jar file to the WEB-INF/lib directory and (re-)compile the widgetset in your Eclipse.
Feature request: add support for adding descriptions. I remember adding a description on the server-side for the stars, but it never got shown on the client-side.
I’ve juste replaced BlackBeltFactory’s star ranking system with it (to be deployed next week).
I’ve two graphical suggestions. I know that we can provide other pictures easily, but I’m a lazy programmer you know, not a graphic designer…
Yellow Background
I’d put a more aggressive gradient: lighter on the top and darker (more orange probably) in the bottom.
Star outline
I’d put a less aggressive outline. Probably mid-grey or dark yellow instead of black.
Probably something similar to this:
It’s probably pretty easy to do for a graphic designer of your team and everybody would benefit.
Would it be an option for you to collect the great graphical customization done by others for your component, and propose all of them in your jar file?
I’ve a question: how do you remove the box around the stars?
It does not look so good on that page:
Great to hear that you found the component useful!
I have plans to do some work on the component later this week. At least I’m planing to update the documentation and add support for value captions that would be displayed when the user hovers his mouse over the different star values. For example (1 = poor, 2 = decent, 3 = good, 4 = excellent, 5 = superb, etc). Better default graphics could also be nice, but I’m more of a programmer myself too.
The border should be gone if you add the following CSS definition to your theme.
New version 1.3 is now released. Major changes in this version are the ability to add separate captions for all the rating values and an improved demo application. Also did some minor CSS fixes.
Please report if you find any bugs in this new release. And of course any other comments are also welcome.
unfortunately with the current version of the component you cannot remove the value by clicking on the current value. As another way to reset the value you could for example add a
Button component to your application and from its
ClickListener set the value of the
RatingStars component to zero.
Button button = new Button("Reset", new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
myRatingStars.setValue(0);
}
});
Yes, the background color is actually coming from the background image.
The star pattern is actually a transparent “hole” in a white PNG background image on a div element (
.v-ratingstars-star ). A number of these elements are displayed as an overlay on top of a bar (
.v-ratingstars-bar ) representing the actual value by changing its width accordingly (see the image below). The reason for this is to easily enable the component to display partial stars (for example value of 2.5).
Hi Teemu,
I’ve found a “bug” of sorts. I’m using another component (Notifique) which displays a browser type message which the user can click to dismiss.
I’m also using RatingStars. I’ve found that both components “compete” for the Z ordering to be at the top. So when a Notifique component slides over a RatingStar component, the stars show up in the Notifque component.
From a user perspective, the popup (Notifque) ought to be the topmost component the user sees, overlaying all others.
Notifque relies on the Overlay component. Should I raise this issue with you or the developer of Notifique?
after a quick look at the Notifique demo it seems that the Notifique has no z-index defined for the notification popups. My guess is that you could fix the problem by assigning a z-index greater than 1 (which is used by RatingStars) to the notifications in your theme.
I might also later see if the RatingStars could work without the z-indexes by reordering the DOM elements. Although, this could lead to issues with the RatingStars component inside a subwindow.
Gr8 addon. I am trying to bind the value of RatingStars to a property using setPropertyDataSource method. After setting the value, If I retrieve the value from the rating stars field I am getting the right value which means field has been binded to the property. But then it is not reflecting in the UI(empty stars). Only if I use setValue method it is getting reflected in UI.
