Rating Widget

Description

The Rating Widget can be used to rate some content by a single mouse click or using a keyboard.

Required Files

SpryRating.js

SpryRating.css

Reference File

SpryRating.html

Sample Files

SpryRatingSample.html

Structure

The widget structure is as follows:

   <widget container>
<star container> ... <star container> <messaage container>
</widget container>

The Rating Widget supports two or more star containers per widget. The number of star containers determines the maximum value of the rated value.

The markup used in this structure can be most any HTML, as long as it follows the rules for nesting.

Using the provided files, the default mark up is:

<span id="rating1" class="ratingContainer">
<span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingRatedMsg">Thanks for your rating!</span> </span>

Constructor

Widget Constructors are small pieces of javascript that activate the markup into the working widget. These scripts must come AFTER the markup on the page, since the markup needs to exist before the constructor fires.

<script type="text/javascript">
var rating1 = new Spry.Widget.Rating("spryrating1");
</script>

Basic Constructor

A basic constructor specifies the name of the widget and identifies the ID of the main markup container. The name of the widget is used to identify the widget for functions and methods.

 <script type="text/javascript"> 
   var widgetname = new Spry.Widget.Rating("id of widget container");   
</script>

Constructor Options

Constructor options allow users to specify certain attributes of the widget.

Constructor options follow the ID parameter, wrapped in curly braces {}. Options are name:value pairs, separated by a colon (:).

 <script type="text/javascript"> 
   var widgetname = new Spry.Widget.Rating("id of widget container",{option1:value, option2:value, option3:"value"});   
 </script>
  

Below are listed all options available for the Rating widget.

Option Definition Default Values
ratingValue Sets the number of stars that will appear as "already rated" when page loads. 0 number
ratingValueElement This option provides an id for an HTML element (this can be: text field, hidden field) whose "value" attribute will be used as initial value when page loads. This HTML element can be udated with the a value comming from the server after rating. - string
afterRating This option provides the Rating widget value after the user makes a rating. currentValue
  • currentValue
  • serverValue
allowMultipleRating Using this option you can leave the widget enabled or read-only after the first rating. true
  • true
  • false
readOnly Sets the widget in read-only mode, where the user can't rate. Only display already collected information. false
  • true
  • false
saveURL

The URL used for saving data on the server. It may contain the placeholder for the rated value, in the form @@ratingValue@@. If no postData option, the data will be sent on GET.

- string
postData

This option allows the user to specify a string containing url encoded form arguments or any value, that will get submitted by POST. It may contain the placeholder for the rated value, in the form @@ratingValue@@. It is always send in conjunction with saveURL. If this option is present, the data will be automatically send by POST.

- string
counter By adding this option you can display the rate value when mouse hover the stars -e.g: a counter like [3.5 / 10]. false
  • true
  • false
rateHandler In this option the user can specify a function to be called when the user makes a rating. If a saveUrl is present, this function will be called after the data has been sent on the server specified in saveURL. - function
enableKeyboardNavigation This option allows to the user to vote using keyboard keys. true
  • true
  • false
moveNextKeyCode This option allows the user to assign a specific key to go to the next star. The value of the option is the keyboard code number. number 39 (left arrow key)
movePrevtKeyCode This option allows the user to assign a specific key to go to the previous star. The value of the option is the keyboard code number. number

37 (right arrow key)

doRatingKeyCode This option allows the users to make a rating by pressing a key. number 13 (Enter key)
starFullClass By adding this option and providing a new class as parameter value, you can override the default CSS class: "ratingFull". ratingFull string
starHalfClass By adding this option and providing a new class as parameter value, you can override the default CSS class: "ratingHalf". ratingHalf string
starEmptyClass By adding this option and providing a new class as parameter value, you can override the default CSS class: "ratingEmpty". ratingEmpty string
starHoverClass By adding this option and providing a new class as parameter value, you can override the default CSS class: "ratingHover." ratingHover string
containerReadOnlyClass By adding this option and providing a new class as parameter value, you can override the default CSS class: "ratingReadOnlyState.". Note that this applied on the widget container and if you change it or the above star classes, you must also change the other rules that uses them, e.g. .ratingReadOnlyState .ratingFull, in the CSS file. ratingReadOnlyState string

 

 <script type="text/javascript"> 
   var rating1 = new Spry.Widget.Rating("rating1",{allowMultipleRating: false, ratingValueElement: 'rating1_val', saveUrl: 'SpryRating.php', postData: 'id=spryrating2&val=@@ratingValue@@', afterRating: 'serverValue'});
 </script>

Recall that javascript is case sensitive.

Notifications

Notification Description
onPreRate

The rating wigdet has just been used (via mouse or keyboard).

No other data will be passed to the observers.

onPostRate

The rating widget has finished all processing required (including sendind data to a server, aclling a user function, updating its value).

No other data will be passed to the observers.

onServerUpdate

The server request to compute the new value for the Rating widget completed succesfuly and holds the new value.

An object that describes the load request will be passed to all observers. This object contains the following properties:

  • xhRequest
    • The native XMLHttpRequest object used to load the data
  • method
    • A string with the value of "GET" or "POST"
  • url
    • The saveURL constructor parameter, used for saving data on a server.
  • postData
    • postData constructor parameter, if specified.
onServerError

The server request to compute the new value for the Rating widget failed.

An object that describes the load request will be passed to all observers. This object contains the following properties:

  • xhRequest
    • The native XMLHttpRequest object used to load the data
  • method
    • A string with the value of "GET" or "POST"
  • url
    • The saveURL constructor parameter, used for saving data on a server.
  • postData
    • postData constructor parameter, if specified.

Rating Widget Methods

addObserver

Adds an observer to the region. As with other components within Spry, the observer can be either an object or a function callback.

Format

widgetName.addObserver(observer);

Example

<script language="JavaScript" type="text/javascript">
   // Create an rating widget and bind it to the element with
   // the id of "firstRating".

   var rating1 = new Spry.Widget.Rating("firstRating");

   // Add a function as an observer of the widget.

   function myObserverFunc(notificationType, notifier, data)
   {
      if (notificationType == "onServerUpdate")
         alert("onServertUpdate fired!");
   }

   rating1.addObserver(myObserverFunc);

   // Add an object as an observer of the widget.

   var obs = new Object;
   obs.onServerUpdate = function(notifier, data) { alert("onServerUpdate was fired!"); };
   rating1.addObserver(obs);
</script>

removeObserver

Removes the specified observer from the widget's list of observers. The same observer function or object that was used for the addObserver() call must be used in a call to removeObserver().

Format

widgetName.removeObserver(observer);

Example

<script language="JavaScript" type="text/javascript">
   // Create a Rating widget and bind it to the element with
   // the id of "firstRating".

   var rating1 = new Spry.Widget.Rating("firstRating");

   // Add a function as an observer of the widget.

   function myObserverFunc(notificationType, notifier, data)
   {
      if (notificationType == "onServerUpdate")
         alert("onServerUpdate fired!");
   }

   rating1.addObserver(myObserverFunc);

   // Add an object as an observer of the widget.

   var obs = new Object;
   obs.onServerUpdate = function(notifier, data) { alert("onServerUpdate was fired!"); };
   rating1.addObserver(obs);

   ...

   // Remove the observers that were added.

  rating1.removeObserver(myObserverFunc);
  rating1.removeObserver(obs);
  </script>

disableNotifications

Disables the notification of observers.

Format

widgetName.disableNotifications();

Example

<a href="#" onclick="rating1.disableNotifications(); return false;">Disable Notifications</a>

enableNotifications

Enables observer notifications.

Notifications are enabled by default within an HTML Panel.

Format

widgetName.enableNotifications();

Example

<a href="#" onclick="rating1.enableNotifications(); return false;">Enable Notifications</a>

getState

Get the widget current state; possible values:

Format

widgetName.getState();

Example

 <a href="#" onclick="alert(spryrating1.getState()); return false;">Get current state</a> 

setState

Set the state of the widget. See getState() for possible options.

Format

widgetName.setState(newState);

Example

 <a href="#" onclick="rating1.setState('readonly'); return false;">Set state</a> 

getValue

Get the widget current value. This can be:

Format

widgetName.getValue();

Example

 <a href="#" onclick="alert(rating1.getValue()); return false;">Get current value</a> 

setValue

Set the widget value. newValue must be a float number between 0 and the number of stars in the wigdet. This method is also used when the user actually makes a rating.

Format

widgetName.setValue(newValue);

Example

 <a href="#" onclick="rating1.setValue(2); return false;">Set a value of 2</a> 

removeMessage

Removes a message from the widget. By default, error messages such as when the widhet is read-only and user tries to rate, or the thank you message after rating, remain on screen, next to the widget. If you want to delete them you can use this method.

Format

widgetName.removeMessage(className, timeout);

Example

 <a href="#" onclick="rating1.removeMessage('ratingReadOnlyErrState',1000); return false;">Remove error message</a>

Copyright © 2007. Adobe Systems Incorporated.
All rights reserved.