[ KAWWA PORTAL ] Components : Product Rating

HTML5 Plain Code

COPY

```
<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

COPY

```
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

COPY

```
(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:

ProductGallery parameters
Name	Required	Java Type	Default Prefix	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

<!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

COPY

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.

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

```
<!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

COPY

var module = angular.module('app',['kawwa2']);

module.controller('myCtrl',function($scope){

```
    $scope.raty = 2;
```
```
});
```

KAWWA Markup Pattern Library

eCommerce

Product Rating

HTML5 Plain Code

CSS Code

How to apply

IE Backward Compatibility

Tapestry Integration

The Template

Java Implementation

Angular Integration

The Template

The JavaScript

Download List (0)

Dependencies:

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce