Home >
In my previous post, I talked about the 1.6.1 release of Adobe Spry. Today I'm going to continue the discussion with a look at one of the new features of 1.6.1 - the Rating widget.
Before I begin, let me give a brief description of how widgets work in Spry, as I think they are pretty elegant and tend to degrade well. First off, every widget (and Spry includes tabs, accordions, panels, and other widgets) consists of one JavaScript and one CSS file. So to use a particular widget on a page, you would begin by including these files.
The next step is to actually lay out the HTML behind your widget. Depending on what you are doing, the HTML will change. But the important thing here is that normal HTML is used to "set up" the widget.
The last step is to simply enable the widget. This is done with one line of JavaScript. Here is a complete example for a tabbed based widget.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Spry Tabbbed Panels</title>
<link href="/sprycss/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="/spryjs/SpryTabbedPanels.js"></script>
</head>
<body>
<p></p>
<div class="TabbedPanels" id="tp1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 3</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 4</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Tab 1 Content</div>
<div class="TabbedPanelsContent">Tab 2 Content</div>
<div class="TabbedPanelsContent">Tab 3 Content</div>
<div class="TabbedPanelsContent">Tab 4 Content</div>
</div>
</div>
<script language="JavaScript" type="text/javascript">
var tp1 = new Spry.Widget.TabbedPanels("tp1");
</script>
</body>
</html>
As you can see, a mixture of DIV/UL/LI tags are used for the tabs. If JavaScript is disabled, or if a search engine comes in to, the content can still be easily read.
So with that in mind, let's take a look at the Rating widget. As you can guess, the rating widget allows you to rate content. A typical use case is to select from 1-5 stars with 5 stars being the best. A long set of examples may be found here.
Spry's rating widget comes with quite a few options. Obviously you can default a rating (useful if the user has previously rated the content), but you can also tweak the UI. Don't like stars? Change them to frogs. You can disable multiple rating, and even disable rating completely (for nicely styled, but static ratings). What's really nice is that you can easily configure the rating to post to the server. This allows for storing the rating as soon as the user has made a selection.
For more information about the widget, see the full documentation. If you are using the widget already in production, please post a comment with your URL.
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
The rating widget sounds like a good idea. I have previously implemented the same on a online dating site using ajax.
I spent some time to get that widget working and have a few comments:
1. In the sample code provided in the documentation, there seems to be an error: '@@rw_Rating@@' has to be replaced by '@@ratingValue@@'. The JavaScript code checks for '@@ratingValue@@'.
2. Setting the initial value is currently only possible by running code on the server, i.e. PHP.
3. What's missing is the display of the ratings done so far, e.g. "4.75 of 12 votes".
Otherwise the sode seems to be a good starting point, but it takes time to implement additional functionality.
scannerprincess - you should really post your fixes to the Spry Forums (http://forums.adobe.com/community/labs/spry). And - of course, any server side tech would work, especially ColdFusion. ;)