I-Spry Part 5: Spry 1.2 released. Here's my take on what's new

Note: This blog post is from 2006. Some content may be outdated--though not necessarily. Same with links and subsequent comments from myself or others. Corrections are welcome, in the comments. And I may revise the content as necessary.

(As suggested in the entry's title, this is part of a series I'm doing on Spry. Be sure to check out the other entries.)

First, as always with Spry, you'll want to view the Readme.html, ChangeLog.html, and view the demos ande samples offered on the site. You'll want to also download the zip and run it on your own (in my first posting of this entry, I noted that you couldn't run the "samples" on the adobe site, but that has since been fixed)).

If you're still really new to Spry, I'll recommend you go check out my Spry Compendium, as I identify which of the many docs and other resources are the best ones to focus on to get you started. This entry is directed more to those with experience using Spry (whether you read it today or later after digging into it a little).

New Features

So naturally, what intrigues people most is "what's new". There are several things. Here are the ones I thought are most interesting, in order of my sense of their importance (which may not be the same as anyone else's):

• There is now a very helpful debug feature, which allows developers to see the geneated HTML code for a given Spry dynamic region. I was going to write a blog post today (mentioned it yesterday) to discuss tools that can help with this problem, but now it's just gotten easier with this feature. I'll still write about it later, as it may help users of other Ajax libraries, and there are other facets I was going to discuss that you still need to know. Anyway, you enable this debugging very easily, by setting Spry.Data.Region.debug = true; in Javascript on the page. See more, including live examples, in the resources pointed to below.
• There's a new "widget model" (yoohoo!), which creates a framework for how Adobe will add various widgets in the future. While several are mentioned in the documentation (more on docs below), there is only one new one for now, the accordion. An accordion existed in 1.1, and it's now formally supported, and found in a new widgets directory, so clearly we'll see more in the future. Note that the accordion also supports use of the keyboard up/down arrow to select panel to expand a selected panel, while collapsing the previous one, as shown better in the examples (again, see more and live examples below)
• There's a new spry:state tag to enable offering users messages (or taking other actions) during the various loading states that an httprequest goes through while getting your XML data. See the "Spry Dataset and Dynamic Region Overview" document as well as the RSSreader and "Region States" samples (below) for demos. With the RSSReader, you'll notice (since it collects live data and has a delay) that you get a little message, "loading feed items" while it's fetching. Cool.
• Here's a bonus tip, not new in 1.2, but if you've never noticed that the RSS Reader demo has more than just the static version that reads from the "lorem ipsum" XML files also in the zip, do instead run the index-cfm.html version that's there. Then you get a live versoin, like you see on the spry site's demo link. I'll share more on that later.
• There is a new mechanism to help do good old alternating row processing, using the new ds_EvenOddRow data reference (examples below)
• Another comment: I hoped to point you to a live example on the Adobe site, but for some reason I don't find the /samples code there anywhere. Perhaps there's some concern. Anyway, it's in the download, and there are indeed several other live demos on the site, just not the ones in that one /samples directory, that I can find at least.
• 1.2 also solved a previous incompatibility with apps you may have written using the Prototype library, as Spry was written on a specific build that may have conflicted with what you use. They now clarify that they're running with Prototype 1.5 rc0 and so should be compatible with apps running that build, also
• There is an interesting feature that may appeal to some, called "auto-stripping of the SpryHiddenRegion". See the sample, "Hiding Data References ", below.
• -Of course, there are various other issues and bug fixes

Same Small Package

Happily, the two Adobe Spry javascript files still total less than 100k, and further, from my testing, if you want to update your implementation of Spry (such as for bug fixes) and don't want to take advantage of new features, all you need is the three.js files found in the /includes directory, SpryData.js, SpryXML.js, and xpath.js. Of course, if you want the widgets (accordion) or other new things (or examples, etc.) then you need the rest of the files.

New Documentation

From what I can tell, there are just two new docs, related to the widgets/accordion:

• Accordion Widget Overview - An overview of how to create and style an accordion widget
• Spry Widget Model - A document that describes the Spry widget philosophy. An overview of how they build their widgets

Updated Documentation

While all the docs get various minor updates, the Spry Data Set and Dynamic Region Overview document is most important to review, with its discussions of the new "region states" and "hiding data references" features, as well as updated discussion of observer notifications.

New Examples

As I mentioned above, there are several examples demonstrating the new features, and even some that just show new techniques that are not specific to Spry 1.2. Since the original post of this note (and 1.2), you can now run the samples live on the labs site:

• Hiding Data References - This is an example of how to hide the data references used inside of spry:region and spry:detailregions as the page loads
• Combining Spry Attributes - This sample shows you how you can combine some of the processing instruction attributes to eliminate the need for using extra wrapper elements
• Debugging Generated Region Markup - This sample shows you how to turn on region debugging to see what template code is being processed and what markup is being generated
• Actually, this is really the same example as the previous one, but it shows off both features
• Regions States Sample - This sample shows you how to use region states to specify when markup in dynamic regions should be shown
• Data Set Observer - This sample shows you the two ways you can register observers on a data set
• Even/Odd Row Sample - This sample shows you how to use the built-in {ds_EvenOddRow} data reference to color even and odd rows of a table
• Auto Suggest Sample - An example of using a Spry region and non-destructive filter to create an auto suggest widget
• Zuggest Sample - Very similar to the Auto Suggest Sample above, but the content is styled so that it appears as a set of results like Zuggest
• Accordion Sample - An example of how to style accordions differently on the same page
• Note that it shows several different styles

In particular, notice the new suggest examples, which use a new samples/includes/SpryAutoSuggest.js.

I hope all that helps others exploring the new release.

For more content like this from Charlie Arehart:

• Signup to get his blog posts by email:
• Follow his blog RSS feed
• View the rest of his blog posts
• View his blog posts on the Adobe CF portal

Need more help with problems?

• If you may prefer direct help, rather than digging around here/elsewhere or via comments, he can help via his online consulting services
• See that page for more on how he can help a) over the web, safely and securely, b) usually very quickly, c) teaching you along the way, and d) with satisfaction guaranteed