eCommerce
Product Rating 
- Class name: (k-rating)
- Version: 1.0
-
jQuery Interactive feature
-
Tapestry Integration
-
Angular Integration
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.
HTML5 Plain Code
-
<fieldset class="k-rating">
-
<legend>Rate this article:</legend>
-
<p><input name="star1" type="radio" value="1" />
-
<input name="star1" type="radio" value="2" />
-
<input name="star1" type="radio" value="3" />
-
<input name="star1" type="radio" value="4" />
-
<input name="star1" type="radio" value="5" /></p>
-
</fieldset>
CSS Code
-
fieldset.k-rating {
-
background: #EEE;
-
padding-bottom: 0.5%;
-
border: none;
-
}
-
fieldset.k-rating legend {
-
float: left;
-
width: 12em;
-
font-size: 0.75em;
-
background: none;
-
}
-
fieldset.k-rating p {
-
float: left;
-
width: 50%;
-
padding-top: 0.3rem;
-
}
-
div.rating-cancel, div.star-rating {
-
overflow: hidden;
-
display: block;
-
float: left;
-
width: 20px;
-
height: 20px;
-
text-indent: -999em;
-
background: transparent;
-
cursor: pointer;
-
}
-
div.rating-cancel, div.rating-cancel a {
-
background: url(../img/k-theme0/delete.png) 0 0 no-repeat;
-
}
-
div.star-rating, div.star-rating a {
-
background: url(../img/k-theme0/stars.png) 0 0 no-repeat;
-
}
-
div.rating-cancel a, div.star-rating a {
-
display: block;
-
width: 15px;
-
height: 100%;
-
background-position: 0 0;
-
border: 0;
-
}
-
div.star-rating-on a {background-position: 0 -53px;}
-
div.star-rating-hover a {background-position: 0 -53px;}
-
/* Read Only CSS */
-
div.star-rating-readonly a {cursor: default !important;}
-
/* Partial Star CSS */
-
div.star-rating {overflow: hidden; background-color: transparent;}
How to apply
-
(function($){
-
'use strict';
-
$(document).ready(function(){
-
if($.fn.rating) {
-
$('fieldset.k-rating input').rating();
-
}
-
});
-
})(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:
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
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" xmlns:p="tapestry:parameter">
-
<body>
-
-
<form t:type="form">
-
-
<t:kawwa2.rating t:criteriaDefinition="criteriaDefinition"
-
t:ratingCriteria="ratingCriteria" />
-
-
<t:submit />
-
</form>
-
-
</body>
-
</html>
Java Implementation
-
package net.atos.kawwaportal.components.test.pages;
-
import java.util.ArrayList;
-
import net.atos.kawwaportal.components.data.ratings.CriteriaDefinitionImpl;
-
import net.atos.kawwaportal.components.data.ratings.OptionDefinition;
-
import net.atos.kawwaportal.components.data.ratings.OptionDefinitionImpl;
-
import net.atos.kawwaportal.components.data.ratings.RatingCriteria;
-
import org.apache.tapestry5.annotations.Persist;
-
import org.apache.tapestry5.annotations.Property;
-
public class Rating {
-
@Property
-
@Persist
-
private CriteriaDefinitionImpl criteriaDefinition;
-
-
@Property
-
@Persist
-
private RatingCriteria ratingCriteria;
-
-
public void setupRender(){
-
-
criteriaDefinition = new CriteriaDefinitionImpl();
-
criteriaDefinition.setOptions(getOptions());
-
criteriaDefinition.setLabel("Avis");
-
criteriaDefinition.setInitialValue("1");
-
criteriaDefinition.setRef("ref1");
-
-
if(ratingCriteria==null){
-
ratingCriteria = new RatingCriteria();
-
ratingCriteria.setLabel("Label");
-
ratingCriteria.setOptionLabel("Really Bad");
-
ratingCriteria.setOptionValue("1");
-
ratingCriteria.setRef("ref1");
-
}
-
}
-
-
public ArrayList<OptionDefinition> getOptions(){
-
ArrayList<OptionDefinition> optionsList1 = new ArrayList<OptionDefinition>();
-
-
OptionDefinitionImpl frontRatingOption11 = new OptionDefinitionImpl();
-
frontRatingOption11.setOptionValue("1");frontRatingOption11.setOptionLabel("Really Bad");
-
optionsList1.add(frontRatingOption11);
-
-
OptionDefinitionImpl frontRatingOption12 = new OptionDefinitionImpl();
-
frontRatingOption12.setOptionValue("2");frontRatingOption12.setOptionLabel("Bad");
-
optionsList1.add(frontRatingOption12);
-
-
OptionDefinitionImpl frontRatingOption13 = new OptionDefinitionImpl();
-
frontRatingOption13.setOptionValue("3");frontRatingOption13.setOptionLabel("Normal");
-
optionsList1.add(frontRatingOption13);
-
-
OptionDefinitionImpl frontRatingOption14 = new OptionDefinitionImpl();
-
frontRatingOption14.setOptionValue("4");frontRatingOption14.setOptionLabel("Good");
-
optionsList1.add(frontRatingOption14);
-
-
OptionDefinitionImpl frontRatingOption15 = new OptionDefinitionImpl();
-
frontRatingOption15.setOptionValue("5");frontRatingOption15.setOptionLabel("Really Good");
-
optionsList1.add(frontRatingOption15);
-
-
return optionsList1;
-
}
-
}
Angular Integration
Create a Rating widget from radio input. It uses the rating jquery plugin.
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
-
<!doctype html>
-
<html ng-app="app">
-
<head>
-
<script src="http://got5.github.io/KAWWA/grunt-scripts/jquery-1.8.3.js"></script>
-
<script src="http://got5.github.io/KAWWA/grunt-scripts/angular.js"></script>
-
<script src="http://got5.github.io/KAWWA/grunt-scripts/jquery.ui.core.js"></script>
-
<script src="http://got5.github.io/KAWWA/grunt-scripts/jquery.ui.widget.js"></script>
-
<script src="http://got5.github.io/KAWWA/grunt-scripts/kawwa-directives-full.js"></script>
-
<script src="script.js"></script>
-
</head>
-
<body>
-
<fieldset class="k-rating">
-
<legend>Rate this article: {{raty}}</legend>
-
<p data-raty data-rating-options="{'value': 'test'}" ng-model="raty">
-
<input name="star1" type="radio" value="1"/>
-
<input name="star1" type="radio" value="2"/>
-
<input name="star1" type="radio" value="3"/>
-
<input name="star1" type="radio" value="4"/>
-
<input name="star1" type="radio" value="5"/>
-
</p>
-
</fieldset>
-
</body>
-
</html>
The JavaScript
-
var module = angular.module('app',['kawwa2']);
-
module.controller('myCtrl',function($scope){
-
$scope.raty = 2;
-
});