RatingStars component

John2 · April 23, 2010, 2:46pm

Unfortunately, it does not.
That definition in my .css gets overriden by yours as this fireBug picture shows:

Teemu · April 23, 2010, 2:56pm

Ah, sorry, didn’t test that CSS myself. But at least with adding “!important” to the CSS it should work, although didn’t test that either.

.v-ratingstars-wrapper {
    border: none !important;
}

John2 · April 23, 2010, 4:16pm

Good idea; it works. Thank you very much.
John.

Teemu · May 7, 2010, 3:45pm

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.

RatingStars @ Vaadin Directory

Live demo

Sketch1 · March 5, 2012, 5:38pm

Hello,

Great add-on. Thanks for the effort!

Is it possible for users to remove a previously rated item? IE. by clicking on the last start to set it back to zero?

Hope my question makes sense

Thanks in advance

Sketch

Teemu · March 6, 2012, 7:17am

Hi,

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);
    }
});

Anthony10 · March 6, 2012, 10:48am

Teemu,
Firstly thanks for producing such a cool and useful addon. Really, really like it!

I’ve got a question though- how do I set the background to be transparent?

I’ve tried this in CSS:


/* Removed the border on the RatingStars component */
.v-ratingstars-wrapper {
	border: none !important;
	background:transparent !important;
}

Which removes the border, but not the background. Is the background coming from the image backgrounds?

Thanks in advance,
Anthony

Teemu · March 6, 2012, 11:10am

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).

So basically you need to provide your own star background image to change the background color. For more detailed explanation, see this wiki page:

https://vaadin.com/web/teemu/wiki/-/wiki/Main/RatingStars

Sketch1 · March 6, 2012, 2:35pm

Thanks for the feedback

Anthony10 · March 18, 2012, 1:37pm

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?

Regards,
Anthony

Teemu · March 19, 2012, 9:04am

Hi Anthony,

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.

Teemu

prem3 · September 12, 2013, 5:35am

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.

Please help.

-Prem

Ngan · July 17, 2014, 4:55pm

hey Teemu, I used your addon for a web application, and i have some problems with choosing the rating on mobile devices

Can you look over this question and see what is a possible fix for the problem?
http://stackoverflow.com/questions/24791086/ratingstars-addon-setvaluecaption-doesnt-work-on-ios?noredirect=1#comment38485894_24791086

Teemu · August 11, 2014, 11:05am

Hi,
unfortunately my add-on really was never tested on mobile devices. I try to find some time to take a look at mobile support for the RatingStars add-on, but really cannot give you any promises of when I can fix the issue.

Teemu

Adrian42 · January 4, 2015, 11:28pm

Hi Ngan,

Thanks for great component.

I have however small problem with it - not looked at details in the code why yet but thought of asking first.
I am adding this component to table using custom extension of DefaultFieldFactory.
In that method I create this component as:

RatingStars ratingStars = new RatingStars();
ratingStars.setMaxValue(10);
ratingStars.setStyleName(“tiny”);
ratingStars.setImmediate(true);

The table itself is connected to SqlContainer.

If I don’t put this code the data read from DB is not reflected in the component at all:

Item item = container.getItem(itemId);
Property property = item.getItemProperty(propertyId);
if (property != null && property.getValue() != null) {
ratingStars.setValue((Double) property.getValue());
}

After doing that - the initial display of the component in the table basically doubles the
original and correct value, so eg I have in DB value 3 - it displays 6 stars, for value 1 - displays 2 so fo so on …
If I hover over the cell containing the rating star - it moves to the cursor and when navigating out of the
cell / component - it suddenly displays correct value - not doubled.

Would you have any idea for the reason behind it ?

Many thanks,
Adrian

Andy104 · January 13, 2016, 11:22am

Hello! Thanks for your great component!
But why i can’t set value 0 after then i already set value 5, for example?

Manish27 · March 31, 2016, 10:40am

Can this be start information be stored in mysql so that everytime if someone clicks on star averaging of star values must be poped up?

Manish39 · February 15, 2017, 11:10pm

Hi Teemu,
Our company is using your add on Rating Stars. Unfortunately a lot of customers are not able to add their feedback responses when using iPhone/iPad. I tried to debug the problem and what I found is that valueChangeListener is never called when using iPhone. Whereas when clicking on the stars from desktop or another mobile device does call the listener and so the value can be recorded. Can you please look into this?

Teemu · February 25, 2017, 1:11pm

Unfortunately I currently don’t have time to maintain this add-on. But if someone wants to work on this issue, I’m happy to review a pull request.

bonprix · September 28, 2017, 2:44pm

Hello, Teemu, I am Vagharshak from bonprix in Germany. We are using Your RatingStars addon and are very happy. Currently we have a new feature requirement, which is no supported by the addon currently: we want have the possibility to rate “back” to 0 stars, after rating is already done on the bar. We want to implement this following way: if, say, the bar currenty is set to 3 stars, clicking on the 3-rd star would set rating bar to zero (all start deactivated). And generally, each click on the current maximal star X would “reset” the rating bar. Would You like to have this feature in Your master branch? If yes, we would fork and implement the feature in the fork. Afterwards You could integrate the feature into the master. Thanks and best

Regars, VB