KAWWA Markup Pattern Library


eCommerce

Product Rating Component Information

  • Class name: (k-rating)
  • Version: 1.0
  • jQuery jQuery Interactive feature
  • Tapestry Tapestry Integration
  • Angular Angular Integration

Add to list

The Product Rating allows the user to rate for a product, article, etc.

This component is based on radio boxes and must, therefore, appear inside a form tag.

Rate this article:

HTML5 Plain Code

COPY
  1. <fieldset class="k-rating">
  2. 	<legend>Rate this article:</legend>
  3. 	<p><input name="star1" type="radio" value="1" />
  4. 		<input name="star1" type="radio" value="2" />
  5. 		<input name="star1" type="radio" value="3" />
  6. 		<input name="star1" type="radio" value="4" />
  7. 		<input name="star1" type="radio" value="5" /></p>
  8. </fieldset>

CSS Code

COPY
  1. fieldset.k-rating {
  2. 	background: #EEE;
  3. 	padding-bottom: 0.5%;
  4. 	border: none;
  5. }
  6. 	fieldset.k-rating legend {
  7. 		float: left;
  8. 		width: 12em;
  9. 		font-size: 0.75em;
  10. 		background: none;
  11. 	}
  12. 	fieldset.k-rating p {
  13. 		float: left;
  14. 		width: 50%;
  15. 		padding-top: 0.3rem;
  16. 	}
  17. 
                                
  18. div.rating-cancel, div.star-rating {
  19. 	overflow: hidden;
  20. 	display: block;
  21. 	float: left;
  22. 	width: 20px;
  23. 	height: 20px;
  24. 	text-indent: -999em;
  25. 	background: transparent;
  26. 	cursor: pointer;
  27. }
  28. 
                                
  29. 	div.rating-cancel, div.rating-cancel a {
  30. 		background: url(../img/k-theme0/delete.png) 0 0 no-repeat;
  31. 	}
  32. 	div.star-rating, div.star-rating a {
  33. 		background: url(../img/k-theme0/stars.png) 0 0 no-repeat;
  34. 	}
  35. 	div.rating-cancel a, div.star-rating a {
  36. 		display: block;
  37. 		width: 15px;
  38. 		height: 100%;
  39. 		background-position: 0 0;
  40. 		border: 0;
  41. 	}
  42. 	div.star-rating-on a {background-position: 0 -53px;}
  43. 	div.star-rating-hover a {background-position: 0 -53px;}
  44. 
                                
  45. 	/* Read Only CSS */
  46. 	div.star-rating-readonly a {cursor: default !important;}
  47. 
                                
  48. 	/* Partial Star CSS */
  49. 	div.star-rating {overflow: hidden; background-color: transparent;}
  50. 
                                
  51. 
                                

How to apply

COPY
  1. (function($){
  2. 	'use strict';
  3. 
                                
  4. 	$(document).ready(function(){
  5. 		if($.fn.rating) {
  6. 			$('fieldset.k-rating input').rating();
  7. 		}
  8. 	});
  9. })(jQuery);

For more information about how to apply this plugin, its options, events and methods, see the jquery-star-rating-plugin page.

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:

Tapestry Integration

This Component is used to call RadioGgroup displayed as a Star Rating

To use it, call the component with '< t:kawwa2.rating t:ratingCriteria="currentCriteria" t:criteriaDefinition="getCriteriaDefinitionByRatingCriteria(currentCriteria)" t:renderMode="renderMode" />'.

There is parameters to call for the displayingform:

ProductGallery parameters
Name Required Java Type Default Prefix Default Value Description
criteriaDefinition true CriteriaDefinition prop The CriteriaDefinition that will define the criteria displayed as the RadioGroup.
ratingCriteria true RatingCriteria prop The rating you want to be displayed. In case of a form, the value will be setted by the predefined field contained in the criteriaDefinition. In case of rendering, this value will be setted according to the OptionValue field of the ratingCriteria
renderMode false Boolean prop The boolean that will determine if the RadioGroup is fixed or not.

The Template

COPY
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" xmlns:p="tapestry:parameter">
  3. 
                                
  4. 	<body>
  5. 	
  6. 		<form t:type="form">
  7. 		
  8. 			<t:kawwa2.rating t:criteriaDefinition="criteriaDefinition" 
  9. 				t:ratingCriteria="ratingCriteria" />
  10. 			
  11. 			<t:submit />
  12. 		</form>
  13. 		
  14. 	</body>
  15. 
                                
  16. </html>

Java Implementation

COPY
  1. package net.atos.kawwaportal.components.test.pages;
  2. 
                                
  3. import java.util.ArrayList;
  4. 
                                
  5. import net.atos.kawwaportal.components.data.ratings.CriteriaDefinitionImpl;
  6. import net.atos.kawwaportal.components.data.ratings.OptionDefinition;
  7. import net.atos.kawwaportal.components.data.ratings.OptionDefinitionImpl;
  8. import net.atos.kawwaportal.components.data.ratings.RatingCriteria;
  9. 
                                
  10. import org.apache.tapestry5.annotations.Persist;
  11. import org.apache.tapestry5.annotations.Property;
  12. 
                                
  13. public class Rating {
  14. 
                                
  15. 	@Property
  16. 	@Persist
  17. 	private CriteriaDefinitionImpl criteriaDefinition;
  18. 	
  19. 	@Property
  20. 	@Persist
  21. 	private RatingCriteria ratingCriteria;
  22. 	
  23. 	public void setupRender(){
  24. 		
  25. 		criteriaDefinition = new CriteriaDefinitionImpl();
  26. 		criteriaDefinition.setOptions(getOptions());
  27. 		criteriaDefinition.setLabel("Avis");
  28. 		criteriaDefinition.setInitialValue("1");
  29. 		criteriaDefinition.setRef("ref1");
  30. 		
  31. 		if(ratingCriteria==null){
  32. 			ratingCriteria = new RatingCriteria();
  33. 			ratingCriteria.setLabel("Label");
  34. 			ratingCriteria.setOptionLabel("Really Bad");
  35. 			ratingCriteria.setOptionValue("1");
  36. 			ratingCriteria.setRef("ref1");
  37. 		}
  38. 	}
  39. 	
  40. 	public ArrayList<OptionDefinition> getOptions(){
  41. 		ArrayList<OptionDefinition> optionsList1 = new ArrayList<OptionDefinition>();
  42. 		
  43. 		OptionDefinitionImpl frontRatingOption11 = new OptionDefinitionImpl();
  44. 		frontRatingOption11.setOptionValue("1");frontRatingOption11.setOptionLabel("Really Bad");
  45. 		optionsList1.add(frontRatingOption11);
  46. 		
  47. 		OptionDefinitionImpl frontRatingOption12 = new OptionDefinitionImpl();
  48. 		frontRatingOption12.setOptionValue("2");frontRatingOption12.setOptionLabel("Bad");
  49. 		optionsList1.add(frontRatingOption12);
  50. 		
  51. 		OptionDefinitionImpl frontRatingOption13 = new OptionDefinitionImpl();
  52. 		frontRatingOption13.setOptionValue("3");frontRatingOption13.setOptionLabel("Normal");
  53. 		optionsList1.add(frontRatingOption13);
  54. 		
  55. 		OptionDefinitionImpl frontRatingOption14 = new OptionDefinitionImpl();
  56. 		frontRatingOption14.setOptionValue("4");frontRatingOption14.setOptionLabel("Good");
  57. 		optionsList1.add(frontRatingOption14);
  58. 		
  59. 		OptionDefinitionImpl frontRatingOption15 = new OptionDefinitionImpl();
  60. 		frontRatingOption15.setOptionValue("5");frontRatingOption15.setOptionLabel("Really Good");
  61. 		optionsList1.add(frontRatingOption15);
  62. 		
  63. 		return optionsList1;
  64. 	}
  65. }

Angular Integration

Create a Rating widget from radio input. It uses the rating jquery plugin.

Raty parameters
Name Required Java Type Description
ngModel true Number Assignable angular rating to data-bind to.
ratingOptions false Object allows you to overload the rating jquery plugin

The Template

COPY
  1. <!doctype html>
  2. <html ng-app="app">
  3. <head>
  4.     <script src="http://got5.github.io/KAWWA/grunt-scripts/jquery-1.8.3.js"></script>
  5.     <script src="http://got5.github.io/KAWWA/grunt-scripts/angular.js"></script>
  6.     <script src="http://got5.github.io/KAWWA/grunt-scripts/jquery.ui.core.js"></script>
  7.     <script src="http://got5.github.io/KAWWA/grunt-scripts/jquery.ui.widget.js"></script>
  8.     <script src="http://got5.github.io/KAWWA/grunt-scripts/kawwa-directives-full.js"></script>
  9.     <script src="script.js"></script>
  10. </head>
  11. <body>
  12. <fieldset class="k-rating">
  13.     <legend>Rate this article: {{raty}}</legend>
  14.     <p data-raty data-rating-options="{'value': 'test'}" ng-model="raty">
  15.         <input name="star1" type="radio" value="1"/>
  16.         <input name="star1" type="radio" value="2"/>
  17.         <input name="star1" type="radio" value="3"/>
  18.         <input name="star1" type="radio" value="4"/>
  19.         <input name="star1" type="radio" value="5"/>
  20.     </p>
  21. </fieldset>
  22. </body>
  23. </html>

The JavaScript

COPY
  1. var module = angular.module('app',['kawwa2']);
  2. module.controller('myCtrl',function($scope){
  3. 
                                
  4.     $scope.raty = 2;
  5. 
                                
  6. });

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce