The Largest Repository of ColdFusion Knowledge in The World for More Than 12 Years

ColdFusion on Ulitzer

Subscribe to ColdFusion on Ulitzer: eMailAlertsEmail Alerts newslettersWeekly Newsletters
Get ColdFusion on Ulitzer: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn

CFDJ Authors: AppDynamics Blog, Michael Kopp, Tad Anderson, Bob Gourley, Jayaram Krishnaswamy

Related Topics: RIA Developer's Journal, ColdFusion on Ulitzer

RIA & Ajax: Article

Simplifying AJAX with the Spry Framework

Delivering great experiences while fitting the workflows and skill sets of both designers & developers

Over the past year the Dreamweaver product design and development team have been out on the road talking to Web designers and developers (Web pros) about the prospect of using AJAX to build more engaging and interactive Web pages and applications. While many Web pros were excited by what could be built, we also heard big concerns both about how to get started and how to integrate new AJAX frameworks into existing workflows.

  •  Takeaway: The technology is a means to an end. What resonates with Web pros is the ability to offer their customers richer and more engaging experiences. Top of mind is the ability to incorporate new technology into existing workflows.

    We took this to heart and set out to create a framework that leverages AJAX to deliver great experiences while fitting the workflows and skill sets of both designers and developers. The Spry framework for AJAX was developed with the following objectives:

  • Keep it open: Spry works with all HTML editors, including Dreamweaver. Anyone can download it off Adobe Labs to start building high-performing interactive Web pages and applications. No proprietary tags or server-side code needed.
  • Make it easy to use: Spry uses the same technologies that you already know to build Web pages (HTML, CSS, and JavaScript). Include a couple of JavaScript libraries with your page and you are ready to go. Create and style dynamic regions and interactive widgets using the same techniques as any other HTML elements on your page.
  • Enable innovation: At the end of the day Spry is about delivering richer experiences for your customers. Spry provides a lightweight yet powerful model for adding data, interactivity, and rich UI widgets into your Web pages while putting you in complete control of the design.
Who Is It For?
Spry was built for both Web designers and developers. Before we built the framework we created a profile of the typical user for Spry. This profile helped us define our guiding principles.
  • Works in Web production. Focused on the Web UI and x(HTML) production.
  • Expert with x(HTML) and CSS.
  • Familiar with JavaScript and the DOM.
  • Cares about the quality of the code.
  • Wants to create next-generation Web pages.
Guiding Principles
  • Keep the framework familiar, lightweight and transparent.
  • Keep the "framework" to a minimum (page-centric).
  • Don't obscure the code.
  • Make it feel like a natural extension to HTML.
  • Integrate well with other technologies.
Enable a better designer-developer workflow
  • Promote separation of design from data/content.
  • Support "design-time XML."
  • A framework easily leveraged within design-time tools (Figure 1)
Next-Generation Web UI OK
So what do we mean by more engaging and interactive Web pages? To get a first-hand experience you can check out some of the sample pages that have been built using Spry at Adobe Labs

In the course of this article we're going to look at one page in detail and explore the code that was used to generate it.

Some of the characteristics of Spry-enabled Web pages include:

  • Single page experience.
  • Seamless interactivity/more responsive.
  • Use of transitions and effects.
  • More sophisticated UI elements.
The Spry Framework
Spry is a client-side framework in the form of JavaScript libraries that you can easily add to your new and existing Web pages. Spry is server- and tool-agnostic. You can use it with Dreamweaver or your HTML editor of choice. Just a few lines of code can produce powerful results. More importantly, it should all look familiar. You should be able to jump in and be productive right away. Spry does the heavy lifting.

The Spry JavaScript libraries host three modules (see Figure 2).

Spry Data
Data is accessed and displayed using Spry Data Sets and Regions. The Spry Data Set is a JavaScript object that is responsible for loading and managing (e.g., sort, filter) data. The Data Set base class is architected so that multiple flavors can be built to access data from different sources (see Figure 3).

Spry Regions
A Spry dynamic Region is an area on a Web page that's bound to a Data Set. When a Data Set is modified (e.g., loading data off the server, filtering, sorting), the Spry Region is updated to reflect the new data. A Spry Region can be created for any HTML block element such as a <div> or a <p> tag.

More Stories By Paul Gubbay

Paul Gubbay is a director of engineering at Macromedia. Previously, Paul held the role of CEO at CyberSage Software, where he spent several years building the vision and infrastructure of the company. Under Paul's guidance, CyberSage focused on emerging technologies such as XML, Java, and Macromedia Flash to deliver leading edge product offerings.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.