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.

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?

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

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.

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