Home > Development > blogs
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.
Stay Connected
InsideRIA Atom Feed- InsideRIA Development Atom Feed
InsideRIA Newsletter
↑ Put InsideRIA News on Your Site
Comments
Leave a comment