Cover Story

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 http://labs.adobe.com/technologies/spry/demos/index.html.

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.