rating stars widget

[jbeckerjnana]

I need a widget for show "rating stars" in a SmartClient DynamicDialog. This sort of thing is becoming fairly common for rating threads in forums, songs in playlists, etc. The underlying functionality would be quite similar to a slider, but I can't see an easy way to make the SmartClient slider do this. In the simplest version, clicking on a star would fill in that star and all stars to the left, while clearing any to the right. Any suggestions on how to approach this making the best use of SmartCient built-in features?

Jeff

[Isomorphic]

Hi Jeff,
This is an interesting request actually - you might want to add a post in the Wishlist forum for a built in Rating type component.

However - yes - this should be easy to build using existing SmartClient functionality.
I would suggest you define a subclass of HLayout as your ratings component, and have it show Img components as members for each of the stars. You'll need to create media for the stars, and set the src property of the Img components as appropriate.
You'll also want to add methods to set and retrieve the value of the rating component (which will also update the src of the star images).

I threw this together in a quick example, feel free to use this as a starting point. Also remember to refer to the reference docs if there's anything in here that isn't obvious

// Define a new subclass of HLayout
isc.defineClass("RatingCanvas", "HLayout");

// Modify this subclass to show clickable stars and have ability to set and retrieve
// the current "value"
isc.RatingCanvas.addProperties({
    // default value (zero)
    value:0,

    height:20,

    // source for selected / unselected stars
    // ** Note: You'll have to create this media. I was assuming 16/16px images
    //    If you leave these unaltered, your media should go into the appropriate
    //    skin directory, under images\RatingsCanvas\
    starURL:"[SKIN]/RatingsCanvas/star.jpg"
    selectedStarURL:"[SKIN]/RatingsCanvas/selected_star.jpg",
    starWidth:16, starHeight:16,

    // initWidget - fired when instances are created. Override this to create our 
    // star images
    initWidget: function () {
        // always call the superclass initWidget() implementation 
        this.Super("initWidget", arguments);

        // create star images
        var stars = [];
        for (var i = 0; i < 5; i++) {
            stars[i] = isc.Img.create({
                src:this.value > i ? this.selectedStarURL : this.starURL,
                cursor:"hand",
                width:this.starWidth, height:this.starHeight,
                layoutAlign:"center",
                click:"this.parentElement.setValue(" + (i+1) + ");",
                autoDraw:false,
            })
        }
        this.addMembers(stars);
    },
    
    
    // setValue - a method to set the value
    setValue : function (newValue) {
        this.value = newValue;
        // Update the star images.
        for (var i = 0; i < 5; i++) {
            this.members[i].setSrc(newValue > i ? this.selectedStarURL : this.starURL);
        }
    },
    
    // getValue - returns this.value
    getValue : function () {
        return this.value;
    }
    
})

// ------------------------------------

// Actually test it!
isc.RatingCanvas.create({
    ID:'rating',
    value:3
});

isc.IButton.create({
    top:100, title:"showValue", click:"isc.warn('Rating:' + rating.getValue())"
})

Let us know if you have further questions

Thanks
Isomorphic Software

[tinu_ji]

It has been close to 5 years since the original request for a clickable Star Rating widget was made. Given how popular this widget is on the internet, I am surprised that it has still not made it into the smart-gwt widget set. Any clue on what happened to this request & if any progress was made on incorporating it as a standard Smart GWT widget? There is a gwt rate it widget available but it obviously does not have data binding capabilities. Given that there is nothing standard in smart GWT, is it safe to try to use the rateit widget insode a list grid cell?

http://sites.google.com/site/gwtcomponents/rateit