[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, links and indeed comments from others may be outdated--though not necessarily. Corrections are welcome, in the comments. I may revise the content if 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.

For more like this:

Comments
Hi Charlie. I've been working with Spry for a bit now, and there's one question that I simply cannot find the answer to: What's the purpose of the SpryXML.js file that comes with the framework? None of the docs or samples mention it (that I can find), and I haven't included it anywhere, yet seemingly still have all the features of the framework. Any ideas?
# Posted By Dave Carabetta | 8/11/06 11:00 AM
Hey, Dave. Happy to help. There is indeed mention of it, in the readme.html. IT says, "SpryXML.js - function file for handling XML formatting. Only required for certain sample files." That would explain why you are finding you've gotten away without it. One example that uses it, indeed the only one I could find in the install directory, was samples\DataSetExplorer.html. It's the one that explores an xml file/feed to show you what it contains. It calls the Spry.XML.getSchema() method, which is in there.

You may say, "goodness, Charlie, how do you know/remember all that stuff", but actually I just used good tools. :-) Are you familiar with AgentRansack? It's a great (free) tool for quickly and easily searching all the files in a directory (much better than Windows Explorer or the extended find features in CF Studio/HS+ and still better than that in DWMX of CFE, I think). I blogged about it at:

http://www.tipicalch...
# Posted By Charlie Arehart | 8/11/06 7:05 PM
Hi Charlie. I begun working with SPRY recently. It's so powerful but I'm having problems to sort numbers. I'm using SetColumnType function to set it to number, but it doesen't works. Do you now where my mistake may be?

Other problem i have is the regional settings, because here in Spain we use different currency settings so . . . can you help me?

Thanks in advanced

Regards!
# Posted By Gustavo Castillo | 12/14/09 6:41 AM
Wow, sorry Gustavo, but I've not worked with Spry since writing about it those 3+ years ago. You may want to ask that question on the Spry forums, at http://labs.adobe.co...

If you've tried that, another route is to ask Ray Camden instead (coldfusionjedi.com). He's continued blogging and writing about Spry right up to earlier this year. I'm sure you could find a blog entry on Spry where you could offer your questions as a comment (search for spry on his site to find one). Or he even welcomes direct questions at http://www.coldfusio...

But I'd suggest you make sure someone can't answer on the forums, first. You can also find many other Spry resources in a listing of them I kept (updating until 207) at http://www.carehart....

Hope that helps.
# Posted By Charlie Arehart | 12/14/09 10:53 AM
Copyright ©2019 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