[Looking for Charlie's main web site?]

I-Spry 8: Spry 1.3 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.
Exactly one month after releasing Spry 1.2, the Adobe Spry team has responded to user feedback and also slipped in some new features in a new 1.3 preview release.

As part of my ongoing series on Spry, here's my take on what's new. The primary new feature set is "Spry Effects, for introducing animations and color effects to your pages." While it may sound like just eye candy, there are some useful things. More on that below.

There is also an interesting new 2-selects related demo (more below) and various new features to existing things, like new methods to manipulate the accordion, fixes to various aspects of the Ajax (SpryData.js) functionality, as well as support for new setup/finish callbacks for the effects. See the site/docs for more on those. Here, I want to highlight the 2-selects related demo and a brief discussion of the effects.

Nifty 2-selects related demo

One thing that's easily missed (not highlighted anywhere) which may appeal especially to CF developers is a new 2-selects-related demo, though they call it a "master detail" demo instead. It shows how to make 2 selects relates data between 2 datasets. The code is remarkably easy, as explained in the one paragraph there and shown in the few lines of code which you can see doing a "view source" there. Again, this is the beauty of Spry: those few lines of code in the browser are indeed all that you need to write, and all that the browser needs to execute.

For those new to Spry, note that the data can come from any file of XML data or template that generates it, as requested in a line of Javascript (the only javascript code you need to write on the page):

I'll also remind those new to Spry to check out all the entries in this series on Spry, as well as my Spry Compendium of resources to help get you started.

The new effect library

The Spry Effects are the following:

  • Appear/Fade Makes an element appear or fade away
  • Highlight Flashes a color as the background of an element
  • BlindUp/BlindDown Simulates a window blind, up or down, where the contents of the affected elements stay in place
  • SlideUp/SlideDown Simulates a window blind, where the contents of the affected element scroll accordingly
  • Grow/Shrink Increases/reduces the size of the element
  • Shake Moves the element slightly to the left, then to the right, repeatedly
  • Squish Reduces the element to its top-left corner and disappears

Some will find more value in various aspects than others. Let's keep in mind that the focus for Spry is on non-technical HTML developers, to ease access to not just Ajax-style development but also the DHTML-based (CSS, Javascript, and HTML) visual components that often go along with those. A key point is that these changes in screen appearance happen without a browser refresh. An interesting point they make is the following:

As with previously-released Spry datasets and their accompanying widgets, we designed Spry effects to be easy to implement on the page while letting the framework do the real work. No new tags or strange syntaxes are required. Designers with a rudimentary understanding of JavaScript can easily implement any of these effects. More advanced users can combine base effects to create more complex and sophisticated effects.

The following shows an example of a basic effect :

onClick="Spry.Effect.AppearFade('target',{duration: 1000,from: 0,to: 100, toggle: true;});"

You can apply an effect to almost any page element, and the code is easy to understand and edit. With the trio of Spry framework features--datasets, widgets, and effects--Adobe hopes to provide designers and developers the tools they need to easily create Ajax-enabled pages.

Why Is Adobe Re-inventing the wheel on effects? Why not just use an existing library?

Sure, there are other libraries that do more, but at least Adobe is working to add more and more. In fact, some may wonder why they are bothering to create their own when there are those other packages. They now specifically address the question of why they don't just integrate with some existing library, like Scriptaculous, and instead are using them as a model while keeping focused on their own vision.

All that said, I could even see CFML folks taking ready advantage of things like the blind, shrink/grow, slide, and squish, such as to add online help on a page that appears and disappears. Again, sure, if you know how to do CSS and/or javascript yourself, you can do it yourself.

I must admit that when shown on this combo page, I'm left wondering how the slide and blind differ from each other (and even the accordion). :-) If you view the demo that works with images instead, the difference becomes more apparent.

The effects are enabled in a new .js file (SpryEffects.js), but beyond that and 3 others it's still quite a light-weight framework.

Other Comments

Note that they indicate in the readme that they've removed the docs from the download, and they are available now only online. Still, it seems most of it has just moved to an articles directory, and there are of course still the reamdme, changelog, and other HTML files in the download.

Finally, they do clarify (frequently) that this is pre-release software, so jump on board and be a part of making it happen--but have patience that things will change as they learn and evolve the product.

I-Spry Part 7: You can now run the Adobe Spry samples live on the labs site

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.
Here's some good news: you can now run the Spry samples directly from the labs web site. Sure, the "demos" (versus "samples") have always been available there, but when 1.2 was released I pointed out in my entry on it that sadly you couldn't run the "samples" there.

(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.)

Instead, you had to download the product to run them, which seemed a shame. As easy as it might be, I could see some people wanting to be able to point demos out to others, for instance, without expecting them to download it. I'm happy to report that this has now been fixed.

Check 'em all out.

I-Spry Part 6: Don't Miss the Spry RSS Reader demo--it's "for real"!

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.
Have you by any chance tried the RSS Reader demo app in the Spry download, and kind of yawned because it seems to be static and not "real"?

The problem is that in the download, the Readme.html points to the file demos/rssreader/index.html. Sadly, that one just reads a static XML file that simulates an RSS feed (showing "lorem ipsum" or "greeked" text).

But if you've run the demo on the labs.adobe.com site, you will have seen a "real" RSS feed. What gives?

(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.)

Gotcha 1: There are really 3 demo files to choose from

Here's the situation: in that demos/rssreader/ directory, there are actually 3 different files available to be run: index.html, index-cfm.html, and index-php.html. The latter two will get real, live RSS feeds. But again, the readme.html doesn't point to them, so you may miss them.

OK, so now you know they're there. Do check them out. As I'll explain in a moment, they hold a key to one problem CFML folks often want to solve when working with Spry. Here are a couple other gotchas.

Gotcha 2: You need to run them on intended servers

If you do run them, note that you have to put them on the respective kinds of servers (index-cfm.html on a CFML server, or index-php.html on a PHP server).

Under the covers, the pages make a request to the named RSS feed by way of CFML or PHP code running on your server, and then send the resulting XML down to the client.

How they get around Javascript/browser security restrictions for requesting XML from other servers

This approach is indeed the way that you get around the Javascript/browser security limitation that would otherwise preclude the client making an httprequest to a server other than the one that sent the HTML page. (In the CFML version, it ultimately calls on a CFM page that does a CFHTTP on the client's behalf.)

If you're wanting to grab some XML from a server other than the one serving your Spry HTML page, and you've found that it doesn't work, this is the challenge and indeed the solution you need. See the demo source for more. Here is another example.

Gotcha 3: You can't request them via the file system

One other gotcha in running the CFM and PHP versions of the HTML pages: you have to request them via a web server. In other words, you can't just open them via the file system (as you can with most Spry demos), but must load them via a URL like http://yourhost/.... Why is that? Because the index-cfm.html page makes its request for that CFM page as (for example):

var dsCategories = new Spry.Data.XMLDataSet("data/feeds.cfm", "feeds/feed/category", { distinctOnLoad: true, sortOnLoad: "category" });

That then causes the browser to try to request the data/feeds.cfm file in the same manner in which the enclosing index-cfm.html was requested. And we all know you can't request a CFM page using the file system!

Gotcha 4: The Labs page demo runs index.html, but it's really the index-php.html

Adding to the confusion in all this, if you run the demo on the adobe labs site, clicking on the link in the RSSreader demo link in the readme.html there, it works "as expected" (real RSS feeds) even though it's pointing at demos/rssreader/index.html. Why does it work there, you may wonder?

Well, if you do a view source of that page there, you see that it's doing the PHP approach. What they've really done is renamed the PHP version to index.html, so that a "real" example shows when people run it there. I can see why they did, but I can also see it confusing some trying to connect all these dots. (Let's not give them grief for not running the CFM version!)

Gotcha 5: Some feeds fail when run from downloaded code, but working on the labs site

One last comment, and it's really separate from the main points above. When I run the page that serves the "real" feed, on my localhost, I notice that several of them fail (they get the error, "failed to load feed items", using the new spry:state tag).

But the version on the adobe live site works fine. I don't know if the difference is their running the PHP version, and my running the CFML one. Or perhaps they've updated what's running there?

When I analyze the HTTP streams coming in on the "failed" feeds, they are indeed receiving expected RSS XML.

Anyway, I leave that for your consideration.

Just don't miss these demos!

Anyway, the main point is that they're just not listed in the readme, so I fear most will miss them. I did, for some time. Hope this helps.

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.
Spry 1.2 has been released. I've done some digging and want to share some other observations beyond what's in the change log.

(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:

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.

I-Spry Part 4: Help. Spry/Ajax isn't working: problems due to unexpected server results

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 you begin exploring Spry, or indeed any Ajax solution, there's going to be a point when you'll be stumped with something just not working, and no amount of eyeballing the CFML or HTML source will help...because the problem is between the browser and the server--in the http stream. In this entry, I want to share some common problems and solutions. In the next entry, I'll discuss tools to help solve that problem. This is vital stuff.

(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.)

Problems Due to CFML Debugging Being Turned On

While most Spry examples show simply opening XML files, most CFML folks will be inclined to try to generate the XML via CFML. Nothing wrong with that. In fact, I'll have a future entry on some tips there.

But if you do decide to try to generate the XML from CFML, you need to be very careful: Spry apps (and indeed many Ajax apps) expect XML--and only XML--to be received in response to their httprequest. A very common problem/mistake is to leave your CFML debugging turned on. You may even look at your page and say "it IS returning XML", but it's not. It's the XML PLUS the debugging output. And what's that written in? HTML!


The simple solution is either to turn off debugging in the requested CFML page or its application.cfm/cfc, using:

<CFSETTING ShowDebugOutput="no">
or turning it off server-wide in the CF/BD server Admin console.

Problems Due to text/HTML mimetype Being Returned

Another common stumper, depending on how you try to return your XML from CFML, is that while you're trying to send XML, the CFML engine is doing something that you never perhaps noticed. What have we always genereated (for the most part) from CFML pages? Why, HTML, of course.

Well, under the covers, web servers (and app servers like CF/BD) happen to also set what's called the "mime type" for the generated page, and by default they create it to be "text/html". The problem is that a client (like Spry/Ajax) that's expecting XML may balk at that header/mime type.


The solution may be to set the correct mime type in the requested template or its application.cfm/cfc. You can do that with:

<cfcontent type="text/xml">
. You may even find that it's useful to add the RESET="yes" attribute to that tag, which aborts any previous output generated prior to the tag. I'll share as well that sometimes CFSILENT and CFPROCESSINGDIRECTIVE can be helpful to manage whitespace.

I said above that the problem may depend "on how you try to return your XML from CFML", and that the CFCONTENT "may be" the solution. The thing is that you may also find you can return your XML from CFML in ways that automatically handle that detail, such as using CFFunction's ReturnType="xml", which has changed as of 7.02. More on that later (or in the meantime see other entries in my Spry compendium).

Problems Due to Errors in CFML Page Sending XML

Continuing from the above, think also of what happens if you're requesting a CFML page (that's supposed to be returning XML) and instead there's an error in the page. What does CF (and BD) return? By default, it's the traditional runtime error page. Well, think about it: what's that written in? It's HTML, again! We never think about it in normal CFML coding, because we just see the error in the browser and read the words and go a-debuggin'.

But the code reading the result of the XMLHttpRequest in Spry (and in many Ajax solutions) is not as smart as us. If it's expecting XML, and your error causes it to get HTML, it will be totally stumped.


The reasonable solution would seem to be to setup your server/application to use CFML error handling (CFERROR, CFTRY/CFCATCH) so that you catch the error and send back a message in XML. But that's not as obvious as it may seem. First, your Spry client is going to be witten so that the Spry.Data.XMLDataSet expects not just ANY XML but XML in a specific nested structure of specific element names. It will not be trivial to package up an error in a format useful to the client.

This is an area where the Spry framework itself could help us. Since the focus for now is on developers of simple static HTML, and indeed on reading simple static XML, it's something that I don't expect would be a high priority for the Spry team. I haven't investigated this with them, though, and will welcome any correction of miunderstanding/misstatement.

The problem of generating "spry-client-specific XML" is still more challenging if you try to setup this error handling in your application.cfm/cfc using CFERROR, but you have pages that are both general-purpose CFML templates browsed by browsers, and those meant to serve up XML. You may want to separate the XML files into their own directory, so as to handle them (and the debugging issue above), separately from the traditional CFML pages. Otherwise, you would need to detect whether the client is not a regular browser, but think about it, how will you know if the client is "not a regular browser"?

All these issues above are not really a new problem. We faced the same challenges some years ago in the "old" days of generating WAP/WML pages from CFML (WML was a way of creating web pages for phones, using an XML-compliant language to layout content for phones). I wrote of many of these same issues in a chapter I did in the book, Professional WAP in 2000.

I should add, as well, that the subject of CFML error handling (CFERROR, CFTRY/CFCATCH, and more) is a topic worthy of multiple blog entries. Instead, I'll point you to a series of CFDJ articles I did on the topic:

Problems due to web server error messages

Similar to the issues of CFML error messages above, think also of the implication of general web server messages. Even if your Spry request asks for a static file (really, any file) from the server which, due to some error (like not existing) would would lead the web server to respond with an error. It's likely that, again, the web server will respond with an error message also formatted in HTML.


There are different solutions for web server error message handling, but it's beyond the scope of this discussion. I'll just raise the issue for you to consider. I can even foresee web servers perhaps getting smart about detecting the browser type and trying to return a particular type of error, but as was discussed above, this may always be problematic.

A Better Debugging Tool

With all the problems above, and still more, which can cause the server to respond with something that your Spry/Ajax client didn't expect, the better idea is for you to be armed with a tool to help you observe the communicaitons stream between your browser and the server. That's a very important point, which I will save for a later post.

I-Spry Part 3: Some easy mistakes (I hope you will now avoid)

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 I explore Spry, one of the first demos I tried to write from scratch--rather than use code from an existing demo--was an experience that taught me a couple of lessons I now want to share with others.

(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.)

Make sure you understand your XML

I made a mistake of trying to eyeball an XML file's layout to determine the nesting needed to create the XPath value for the XMLDataset constructor. Oops.

[If you're new to Spry, I've likely just gotten way over your head! This entry is for those already checking it Spry. Newcomers should leave right now and go check out the "bolded" resources I point to in my Spry compendium for that sort of help....Go on. I'm serious! You won't appreciate the rest otherwise! :-)]

I was looking at an RSS stream that looked like this (abbreviated):

<?xml version="1.0" encoding="utf-8"?><br>
   <rss version="2.0"><br>
      <title>Blog entry 1</title><br>

So I thought that the "rss" element was outermost and the rest, including my desired "title", were all children, so I set the xpath to be rss/title. And I got no generated output from Spry. Doh! It should have been rss/channel/title.

Here's a tip: open the desired XML file with some tool that shows you the XML in a nested tree structure. Perhaps easiest, you can just open the file using IE or Firefox (as of 1.5), which will show it using a special stylesheet that renders the XML in a nested structure.

Of course, if the destination you try to open doesn't respond with pure XML, you won't even be able to open it effectively with such tools, which will tell you that you have another problem (like forgetting to turn off debugging if generating XML from CFML, or forgetting to cause the CFML page to change the mime type to text/xml. More on both of those mistakes in a later entry).

Don't use spry:region on Table tag

Interested in creating an HTML table? OK, no noise please from the CSS crowd. Some of us old-timers are slow to the party or just don't gravitate to it for quick testing.

Anyway, I mistakenly assumed that if I wanted to create a table of multiple rows that I would just add the spry:region tag to the Table tag. I figured that since I would naturally want the spry:repeat on the TR tags, I should put the enclosing spry:region on the enclosing TABLE tag. Wrong! Should have RTFM.

Ok, I did. I just missed that. It clearly says in 2 of the key introductory articles that TABLE tags are one of many on which you are not to use spry:region. More important, the excellent Dynamic Table Tutorial also clearly shows how it's to be done.

You want to wrap the table, in a DIV for instance, and put the spry:region there. If you don't, you don't get an error. You just don't get any of the content you expected to be dynamically generated (which could appear to be a blank page or portion, depending on what you're doing).

Don't mistake spry:repeatchildren for spry:repeat

Similarly, I made another mistake when I copied a line of code to do the repeat, and I used code from an example that used spry:repeatchildren, rather than spry:repeat. Doh!

The Spry Data Set and Dynamic Region Overview says it best in describing the two:

One allows you to repeat an element and all of its content for each row in a given data set (spry:repeat), and another that allows you to repeat all of the children of a given element for each row in a given data set (spry:repeatchildren)

I have lots of other tasty tidbits to share, but they're more general than these related to me trying to write code from scratch.

I-Spry Part 2:Considering Spry as a CFML developer

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.
In this 2nd part of a series I'm starting on Spry, I've heard or seen various discussions about Spry from some CFML developers, who see the code and/or demos creating dynamic tables and ask, "couldn't I just have done that in CFML?" Well, sure, you could, but think outside the box.

(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.)

Spry is a client-side tool, first and foremost

Spry is a client-side tool, so on one level it's supposed to appeal to non-CFML developers, who don't have CFML (or PHP, ASP.NET or J2EE) to generate their HTML dynamically.

Spry is about processing XML received

More important, though, even for we CFML developers, you need to think beyond "just creating dynamic tables": the real goal of Spry is to process XML being sent to the client.

Consider, for instance, the situation where you don't control the XML being generated. Perhaps it's coming from an RSS feed or some other xml-generating product on your server (or on some other server, that perhaps you proxy on the spry request's behalf--more on that later, or in the Spry docs).

The point is that you may not then be able to (or want to bother) creating the display in CFML, leaving it instead to Spry to handle.

Spry is about more than "generating dynamic tables"

And Spry can certainly do much more than just create tables. It can create virtually any HTML code based on the data received. Tables are just a simple example most can grasp. We're already starting to see many other and more interesting examples.

Spry is about detecting and responding to page content and source data changes

Still more important, the real value in Spry--and it's true Ajax raison d'ĂȘtre (reason for being) is to do automatic regeneration of content based on changes to the source XML data or other selections on the page, which can include asynchronous communication on the client's behalf back to the server.

That's where things like the dynamic regeneration of regions (which change when the dataset their bound to changes) and master/detail "data references" (where data in one region changes based on selections in another region)really makes things different than "static" HTML you could build "dynamically" in CFML (or other web app platforms).

As I say in my Spry compendium discussed in my previous post, do take the time to learn more from the many available resources, especially the 2 key 30+page documents from Adobe. You'll get a whole new appreciation for what Spry can do for you.

Even so, do look for more posts here as I share some of the other common tips and traps I've hit as I (and others) have explored Spry.

Beyond those comments on looking at Spry as a CFML developer (comparing and contrasting how we might do things one way or the other), there are also a few other comments on why you should be interested in Spry.

Spry is about reducing bandwidth

Those who were around when Flash came out will recall that a big part of its advantages was that it permitted redesign of pages so that rather than transmit the entire page on each "request", the Flash client just requested the data needed to fill a given area of a page.

The same is true with Spry (and Ajax in general). If you can change an interface to retrieve just the needed data (rather than the full weight of an entire HTML page), that can make a big difference in performance and cost savings (hey, someone has to pay for that bandwidth in sending HTML from a server).

Spry is about reducing Javascript complexity

Going back to the first point, all this power comes in a package of tags that dramatically reduce the complexity of the coding needed to enable all these (and more) features. It's possible to create powerful interfaces and interactions with no (or just a tiny amount of) Javascript.

Sure, as we create more advanced interfaces, we may need to understand and use more Javascript. The good news is that both built-in and community-generated demos will help show the way in the near term, and in the long term I'll bet that more work from Adobe in the Spry framework itself will help make still more powerful interfaces just as easy and low in Javascript coding.

Spry is about reducing Browser Interoperability hassles

If you've looked at doing Ajax, you may or may not have had a hassle dealing with whether your code will work on one browser or another. Sure, most Ajax frameworks also try to hide that complexity, but just know that Spry does as well, which is a good thing if you have to deal with supporting different browsers.

There is even an approach to graceful degregation, or what Adobe calls "Progressive Enhancement", discussed at the end of Adobe's great 35-page article, Spry Data Set and Dynamic Region Overview, leveraging something called Hijax methodology.

Admittedly, if the browser doesn't support Javascript at all, that's a separate challenge and a bummer. The challenge of detecting and handling when JS is disabled is not really new to Ajax at all, and I'll leave that to the reader to research or for others (or a later entry here) to elaborate on.

I-Spry Part 1: A compendium of Spry resources for CFML developers

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 the first of a multi-part series I'd like to do on Spry (Adobe's Ajax framework), I've just put together a Spry Resource Compendium. As more and more CFML developers become enamored of Spry, or hear others extolling it, they may benefit from knowing about several available resources to help you get started. Some you may find more readily than others.

(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.)

I've gathered together several of them, both to save you the work of trying to find them and more important to help you avoid missing key ones, especially ones that focus on CFML-related aspects.

Check it out, at:


I'll try to keep it up to date with new community resources as they're offered, but of course some of the Adobe-provided compendium resources (pointed to on my page) will ultimately become the best place to find resources in the future. For now, I'm just trying to help while there are scattered resources. Drop me a note if you see something I should add.

Copyright ©2021 Charlie Arehart
Carehart Logo
BlogCFC was created by Raymond Camden. This blog is running version 5.005.
(Want to validate the html in this page?)

Managed Hosting Services provided by
Managed Dedicated Hosting