Developer

Spry Game

At this year's Adobe WebDU conference in Sydney, Greg Rewis gave a presentation on Spry 1.6, the AJAX framework.

At this year's Adobe WebDU conference in Sydney, Greg Rewis gave a presentation on Spry 1.6, the AJAX framework.

Spry is another JavaScript library designed to make AJAX development easier. As Rewis puts it, it is ideal for "folks who don't dream of the DOM". Fundamentally, it lets you write AJAX with less code.

If you are a fan of Dreamweaver this framework might come in handy, as it is built into the software. Beware though, as Dreamweaver CS3 contains an older version of Spry — 1.4. The latest version is 1.6 which you can download from https://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_spry. You're not restricted to using Dreamweaver with Spry; you have the choice of using any tool you want.

Spry consists of three core libraries: Spry Widgets, Spry Data and Spry Effects.

Spry Widgets

Spry widgets are user interface elements, coded using HTML, CSS and JavaScript. CSS controls the look of the widget, while the JavaScript adds functionality to it. Some of the widgets available are; the Accordion, Spry Menu and Sliding panels. They are fully customisable, so you can play around with the code to create the desired look and behaviour. The CSS and JavaScript code is kept in two external files, which get imported into your widget HTML when you add it to your page in Dreamweaver.

The widgets also support progressive enhancement. They can be accessed through the keyboard; and when JavaScript is turned off the content of the widget is still visible to the user.


Spry Data

Spry allows you to import data, manipulate it in some way and display it to the user. The Spry data set is a JavaScript object you can fill with data from a data source. HTML, XML and JSON are the supported data formats. The data set becomes an array of data, displayed as a regular table, with rows and columns. While Spry regions let you control how the data gets displayed.

The Web standards community wasn't happy with Spry's use of custom attributes for filling pages with data. These attributes are not a part of the standard DTD, causing the W3C validator to break. To combat the problem a custom Spry DTD was developed for these attribues, but problems remain for all browsers apart from Opera. For more information see http://labs.adobe.com/technologies/spry/articles/best_practices/validating_spry.html.

There is however a workaround method, called Unobtrusive Spry to help you. The idea is to keep code such as JavaScript and Spry attributes separate from your markup, in external files.

Spry Effects

The Spry Effects library provides all the different JavaScript effects, such as appear, fade, slide, blind etc. They are contained within the SpryEffects.js. You can apply these visual effects to any HTML element without needing custom tags.

You can also attach your own objects and callback functions to these effects. A number of observer methods let you register your objects and functions to receive event notifications. For example onCancel, onToggle etc.


To learn more about Spry visit — http://labs.adobe.com/technologies/spry/docs.html. There are also some good video tutorials in Dreamweaver CS3 to help you get started with the Spry framework.

Editor's Picks

Free Newsletters, In your Inbox