Star Rating Made Easy
Hey guys. Since this is my first blog, i don’t even know that the subject I’m going to write on is even bloggable. But here I go.
As part of my responsibility in a recent project, I was asked to implement a taglib that could allow a user to rate his likeness for a movie using a rating scale that could use customised images for the rating scale. Most of us have seen such a a rating scale. A typical example would be such a scale.
For this purpose, I created a tag library which had two tags named “resource” and “rating”. The tags are used as follows:
[java]
<html>
<head>
<title>Welcome to Grails</title>
<meta name="layout" content="main" />
<script type="text/javascript" src="${resource(dir:’js’, file:’jquery-1.4.4.js’)}"></script>
</head>
<body>
<igui:resources />
<igui:rating units=’20’
id="1"
backgroundImage="${resource(dir:’images’,file:’combinedStar.png’)}"
overImage="${resource(dir:’images’,file:’star.png’)}"
outImage="${resource(dir:’images’,file:’star-outline.png’)}"
controller=’dummy’
action=’dummy’
rating=’5’/>
</body>
</html>
[/java]
The first tag <igui:resources> imports the necessary CSS stylesheets and javascript files needed. The second tag <igui:rating> is the real deal actually. This injects the actual HTML code into the page which is used to render the rating scale. The following options are available in this tag:
- id: The ID of the object to be modified which is passed to the appropriate controller and action
- dynamic: Specifies whether the scale responds to user input, i.e. send the rating to the appropriate action. Defaults to false.
- units: Specifies total number of units out of which the rating is based
- rating: Specifies the current rating of the scale
- controller:Specifies the required controller
- action: Specifies the appropriate action
- overImage: Image to be displayed on mouse hover
- outImage: Image to be displayed when mouse moves out of the rating scale
On clicking on the rating scale, an AJAX call is sent to the appropriate controller and action which updates the rating of the object. This rating is immediately visible on the page without refreshing any page.
Work is still going on and I hope that when it is finished, we’ll have much more options and a more versatile taglib. Till then, take care.
Ron
roni[at]intelligrape[dot]com
