Working with Adobe Spry: An Ajax framework

Adobe Spry is an Ajax framework developed for Web designers, making it possible to create a richer experience on an HTML page. Spry is intended to be a way of easily implementing Ajax – designers with entry level HTML, CSS and JavaScript experience should find Spry an easy way to integrate content. Spry differs from other Ajax frameworks because it has been created for designers rather than developers. It is less reliant on server-side technology compared to some other Ajax frameworks; instead it relies on XML, which is easily consumed by Spry’s components with a minimum of fuss.

In its attempt to make the implementation of Spry simple, Adobe has drawn some fire from Web standards adherents with criticism that it makes use of custom HTML attributes.

Adobe released an updated version, Spry 1.5, recently on its Adobe Labs site; this is the sixth release since the original beta last year with new features added for interacting with different kinds of data including:

  • Nested Data Sets
  • JSON Data Sets
  • HTML Data Sets
  • Session Handling
  • Form Submission
  • Paged Data View
  • Rewrite of existing Effects
  • Radio Button Validation Widget
  • Auto Suggest Widget
  • Spry API

The Spry framework contains the following components:

  • Spry Data and Dynamic Region
  • Data Utilities
  • Server Side Utilities
  • Widgets
  • Effects

Spry is a free download from Adobe, included in the download is a multitude of demos, samples, articles and documentation. Documentation is also available online via Adobe’s LiveDocs, there is also a developer centre for Spry where you can find numerous articles already available.

Working With Data

XML Data

Enough talk; let’s put the framework to the test. The first thing that we evaluated was Spry’s ability to handle XML data. We created some sample data in the form of an XML file with the details for the employees of a fictitious municipality. A sample below:

You can see that the data has multiple rows each with the same properties, there’s no DTD (Data Type Definition) required by Spry to interact with XML, which is typically a problem of consuming XML — no standardization. The goal here is to have Spry handle data for us and output that in an HTML page, you nominate the attributes and properties from the data and tell Spry where on the page to display them.

Using a text editor we’ll work on the HTML content. Below is a snippet from between the tags. I’ve imported two .js files, the first uses Google’s open source code to utilize XPath so that we can filter data later on, the second is the Spry data library — it’s dependant on the XPath library which is why the other is declared first.

Next an instance of the Spry XMLDataSet is declared; here we’ve called it dsEmployees. The instantiation requires two parameters: the location of the XML file and an XPath expression that identifies the XML node or nodes that the data is contained within. The XML can also be loaded from a URL. Note that the XPath expression identifies the XML root node then the name of the child node that represents each row of data.

Outputting the Spry data set within the body of the page is simple. Spry dynamic regions are used to display XML data on the page; they update themselves when the data set changes. A dynamic region is declared within a div tag using spry:region, HTML tags then are used as dynamic region containers. The region is an “observer” of the Spry data set, curly braces are used to identify columns from the data set, the spry:repeat tag iterates through the data set displaying all the rows.


{fname} {lname}


Spry has provisions to do master/detail dynamic regions from one or more sets of data. The sample code below uses the same logic within the head tag to declare a Spry data set as above. An onclick event has been added to the repeated table row that links to a Spry XMLDataSet method called setCurrentRow passing the id of the current row as parameter. The second table is surrounded with a div that uses the spry:detailregion to populate the detail portion of the code. Sorting table data by column headings is just as easy.

{fname} {lname}



DepartmentEmailMobile Phone

{fname} {lname}


Leave me a comment and let me hear your opinion. If you’ve got any thoughts, comments or suggestions for things we could add, leave a comment! Also please Subscribe to our RSS for latest tips, tricks and examples on cutting edge stuff.

0 I like it
0 I don't like it