File Under: Ajax, JavaScript

Build Ajax Components With Spry

Apparently, the pro-developer guiding principles of Macromedia continue to survive under the direction of Adobe. Ever since they acquired Macromedia, Adobe, the company that was previously all about PDFs and PSDs, has been releasing a healthy serving of web tools via Adobe Labs. The Adobe Labs site is quickly becoming a vital meeting place on the web where developers can share ideas and experiment with new technologies.

Adobe’s Flash-meets-Ajax framework lets developers create dynamic interfaces and UI elements. Now they’ve unveiled a preview release of their new Ajax framework, Spry.

In this article, I’ll walk you through making a very simple Spry application. I hesitate to even call it an application, because most of the heavy lifting is done in the framework itself. The code we’ll be writing will look an awful lot like HTML and CSS.

Before we get to examples, let’s look at what Spry is and how it compares to the many other Ajax frameworks out there. If you’d like to know a little more about Ajax, read my article about how to build an Ajax dropdown menu.

What is Spry?

In Adobe’s own words, Spry is “a JavaScript library for web designers that provides functionality that allows designers to build pages that provide a richer experience for their users.” That doubles as a pretty good definition of Ajax, too. To provide a richer user experience, we retrieve fewer entire pages from the server. Instead, Spry and other Ajax frameworks let us insert just the content we need into the current web page. This eliminates full page refreshes and greatly increases browser responsiveness. Spry also offers event and transition effects.

Since Spry is focused on designers and not programmers, it uses special tags inside the HTML. The code looks more like what designers and developers see than hard-core scripters. Web pages end up looking a lot like templates, with content holding places kept by special curly brackets like this: {thingname}. This is the same style used in server-side templating engines.

What does Spry do differently?

Unlike Smarty and its ilk, Spry does not require a hefty programming language, special server software, or an over-paid coder. Instead, the framework reads in XML files with JavaScript. Its built-in functions can also dynamically load single items from the XML file and apply the same CSS already declared in your stylesheet.

As I mentioned before, there are plenty of Ajax frameworks to choose from. Other popular choices include Dojo, Prototype, Yahoo User Interface Library, and Google Web toolkit. These other frameworks are more programming-centric. Spry stuffs most of the JavaScript away in a couple include files. At its very basic level, you only need one simple line of JavaScript to tell Spry which XML files to load.

Your JavaScript knowledge can be next to nil and you can still use Spry. Plus, you won’t have to change the way you code up your pages. If you use Dreamweaver, then using Spry should be as easy as writing simple HTML. And if you’re a hand-coder, there’s no need to move to an editor.

Drawbacks to Spry

Many quickly scolded Adobe for using custom attributes to fill in Spry pages with data. If you need pages to pass XHTML validators, Spry isn’t for you. Similarly, if accessibility is important, the pre-release version of Spry will cause all sorts of headaches. Both of these issues seem to be on Adobe’s radar. Keep in mind this is a very early release, so Adobe wants your feedback. I expect we’ll see many changes in later versions of Spry.

Programmers might not like how much Spry does for them. With a few additions to normal HTML, Spry will not only load data from an XML file, but also respond to user clicks and hovers. This could be a little too “auto-magic” to someone who wants to control the technical aspects of a site. This drawback to super-coders will empower designers.

Lastly, Adobe says Spry works with “all modern browsers.” You should be fine with IE6+, Mozilla-based browsers (such as Firefox) and Safari among others. If you’re looking to support older browsers like Netscape 4 or IE 5, you probably should forego all Ajax frameworks.

Now, if Spry is for you, let’s look at a simple example. We’ll load in an XML file and react to user clicks. All without ever leaving a single web page.

Give Spry a Try

As we’ve seen, Adobe’s pre-release of Spry provides an easy way for designers to dynamically load content onto a page from an XML file. All you have to do is include a couple JavaScript files and write one simple line of code to tell Spry where to find your XML. Then, a few custom attributes can be inserted into any HTML elements.

For our example, I’ve altered one of Adobe’s samples: the Spry Product Demo. For our demo, we’ll use an XML feed of Webmonkey’s latest articles. See the raw feed. And check out the working demo.

Click on a story name, and you’ll see its description appear on the right. Though there are only three stories, we could add as many as we want. Our code would still show all of the story names on the left and a description of the first (or the selected story) to the right.

There are three important tasks that the code accomplishes:

  1. Include the Spry code and choose a data source
  2. List the story names
  3. Show the description of the selected story

The fist step is to plug in Spry code and point to a data source:

<script type="text/javascript" src="http://www.wired.com/images/archivepath.js"></script>

 <script type="text/javascript" src="http://www.wired.com/images/archivepryData.js"></script>



 <script type="text/javascript">

 <!--

 var dsStories = new Spry.Data.XMLDataSet("stories.xml", "stories/story")

 -->

</script>

The Spry code is in the file SpryData.js. Before that, we also include xpath.js because Spry needs XPath to lookup specific items from our XML file. XPath is a simple way, used by other XML-related technologies like XSL, to retrieve data in a way that mimics Unix paths.

The Spry.Data.XMLDataSet loads our data source. As an argument, the function receives an XML file and an XPath. The path we give it, stories/story, tells XPath to look at the root level (named stories) and find every story below it.

This is all the JavaScript you need to write to get the functionality of the demo.

Next, we list the story names:

<div id="storylist">

 <ul spryregion="dsStories" spryrepeatchildren="dsStories">



 <li onclick="dsStories.setCurrentRow('{ds_RowID}');" spryhover="itemhover" spryselect="itemselected">{name}</li>

 </ul>

</div>

Here, we have an unordered list within a single list item. In the attributes to the ul tag, we’ve identified the spryregion (set to the name of our DataSet, dsStories) and told Spry to repeat through that DataSet with spryrepeatchildren="dsStories".

Then, inside the list item, we set CSS classes for spryhover and spryselect. This allows us to use our normal stylesheet to determine how to show our list items when they are hovered over and selected. Also inside the list item, we set the onclick event (a standard JavaScript event) to set the current row. Spry will loop through and create a list item for each of the stories in our XML file. So, each <li> tag will have an onclick event that tells Spry which item we have selected.

If you have Firefox, you can highlight our list of stories, right-click (Ctrl-click for the fellow Macheads with one-button mouses), and choose “View Selection Source.” This will show the code as it looks after Spry has created all the three list items. You’ll also notice that between the starting and ending <li> tag is a story name. This is created by the template code, {name}.

Finally, we show the description of the selected story:

<div id="storydescription" sprydetailregion="dsStories">

 <b>{name}</b>



 {desc}



 <a href="{storylink}">Read this article</a>.

 </div>



</div>

This code simply shows the detail of the selected item. If nothing is selected, it shows the first item in the list. This logic is all determined by Spry, which is informed of the selected story from our onclick events.

The rest of driven by the template code, which displays the {name}, {desc} (description), and {storylink} (the URL of the story).

The biggest job that Spry does is grab the data from the XML file and place it on the page with limited direction from us. The CSS we loaded from a separate stylesheet determines how our page looks, including the connecting blue boxes.

Adobe has limited the amount of JavaScript we have to write and, therefore, there is little programming crowding in on our HTML code. The juicy stuff goes on behind the scenes. Even the browser-specific code (for example, IE usually won’t listen to hover styles on non-links) is stuck away where we don’t have to worry about it.

Of course, there is only so much that can be done with Spry in its current state, though Adobe has a pretty impressive demo section. Remember, this is a pre-release version of Spry. Expect Adobe to make significant improvements, such as the addition of user interface elements. This is similar to the way that the Yahoo UI Library blossomed.

If you’re looking for a challenge, there are still a number of ways to improve upon the demo we created. Try adding a few more stories to the XML file and see them automatically incorporated into the stories list. Add more elements to each story (such as a date field or thumbnail image), or do something with the unused category element in our current XML feed.

And if you’re feeling really spry, dig into the DataSet documentation to see what else you can do.

Whatever you create with Spry, let us know!



Did you love this article? Did you hate it? Think you can do better? Send us your Feedback. Feedback submitted here will be considered for publication on Webmonkey or Wired News, so if you don’t want us to print your comments, please say so in your email.