Making Your Web Pages Spry
Author of this post: Tara MacKay | About Blog Authors »In my recent post about the most exciting new features in Adobe Creative Suite 3, I mentioned Spry for Ajax, found in Dreamweaver. If you’re attuned to Web buzzwords, you might have found this intriguing… or you might have just glazed over it because, truthfully, it sounds scary. But, in fact, the Spry framework for Ajax exists to make complex things less scary for Web designers.
Quickly defined, Ajax is a method for creating dynamic Web features, and stands for Asynchronous JavaScript and XML. It’s become one of the hottest things in Web design because a page doesn’t need to reload for the dynamic interactivity to work—this means things happen more quickly, always a plus on the Web. Spry is Adobe’s special “framework” that allows you to create Ajax features in Dreamweaver without having to learn all the code behind it.
OK, great. So what does it do? Built into Dreamweaver CS3 are assorted Spry “widgets” that you can click to add to your page. These include form validation features and XML data features (snore), but my favorites are the interface widgets.
Thirteen Spry widgets are found in the Insert bar.
The interface widgets allow you to create complex navigation menus, tabbed interfaces, accordion-style interfaces, and collapsible panels. These let you have visible content and hidden content that the user controls. Click a tab and >poof< the hidden content appears without reloading the whole page, and the old content gets hidden. I'll make a tabbed interface now...
One click of the Spry Tabbed Panels button, and this is what I get.
Doesn’t look like much yet, but I can easily add my content to each tabbed area, name the tabs, and style everything by changing the CSS properties that have already been set up for me thanks to the widget. Imagine this as the interface for an entire site, or just as a small promotional section of a larger home page.
I can add more tabs in the Tabbed Panels properties, and adjust the CSS to style everything just how I like it.
Testing this out in a Web browser shows everything working fine. The most significant benefit is the quick loading when I click another tab—only the content the user requests loads, while the rest remains in place, giving users a smooth, dynamic experience.
Speaking of testing, I bet your next question is, “Will this work in most browsers?” Because Ajax is based on JavaScript and XML, it sure will! The only compatibility issue you need to worry about for most Spry widgets is the CSS positioning. Some older browsers can mangle CSS-based content positioning, so be sure to test everything carefully.
May 25th, 2007 at 2:33 am
Great article, very informative overview of the spry framework. I have been putting off taking a look at it but I think this is going to give me the proper push to dive on in.
May 25th, 2007 at 2:20 pm
Cool article. If it’s not too much trouble, would you mind putting up a demo so we can see how this looks?
May 25th, 2007 at 2:59 pm
Glad you guys both liked it. Dustin, I was in your boat for awhile — I kept hearing about Ajax, but until I found how easy it was to use in Dreamweaver, I just put it on the backburner. At first, it didn’t even feel like there were big Dreamweaver changes for CS3 until I looked more closely at Spry. I’m glad to see that Adobe is really on the ball with development for Ajax. You can learn some more about what they’re up to with Spry in the Adobe Labs: http://labs.adobe.com/technologies/spry/
Patrick, there are some cool examples in the Adobe Labs link above, but I really like this demo from ASP.net best: http://ajax.asp.net/ajaxtoolkit/Accordion/Accordion.aspx It gives you a good sense of just how lightning fast this functionality is. Click the links on the dark blue bars to watch how the accordion panels work — this is something you can implement in seconds w/Spry in Dreamweaver.
June 7th, 2007 at 2:41 pm
And some else, come here……
The most interest!…
June 12th, 2007 at 9:59 pm
it’s important to consider accessibility issues when choosing to use these technologies as well.
September 21st, 2007 at 1:19 pm
[...] As we talked about in an earlier post, Spry widgets allow you to create dynamic features with Ajax, like tabbed or accordion-style interfaces. And accordion-style interfaces are perfect for FAQ pages… [...]