Dreamweaver Article

Introducing the Adobe Spry framework for Ajax

One of the best new features in Adobe Dreamweaver CS3 is the Spry framework for AJAX. Spry is a Javascript library of components and behaviors that enable web designers and developers to quickly and cleanly add rich interactive functionality to web sites and applications. I have created a series of interactive Adobe Captivate simulations that will help you get started using Spry in Dreamweaver CS3. These simulate the Dreamweaver web development environment and require you to participate as if you were actually in Dreamweaver.

Requirements

To complete this tutorial you will need to install the following software:

Dreamweaver CS3

• Try
• Buy

Note: If you click any of the links below and the page doesn't load, the browser window may already be open and hiding behind this browser window. The simulations require you to enter text in text fields as if you are in Dreamweaver. If you have already completed the text entry boxes and press back in the playback controls, these text fields will already be filled in.

About the Spry framework

This tutorial introduces you to the Spry framework. The Spry framework is a JavaScript library that provides web designers with the ability to build web pages that offer richer experiences to their site visitors. With Spry, you can use HTML, CSS, and a minimal amount of JavaScript to incorporate XML data into your HTML documents, create widgets such as accordions and menu bars, and add different kinds of effects to various page elements. The Spry framework is designed so that markup is simple and easy to use for those who have basic knowledge of HTML, CSS, and JavaScript.

• Play the simulation: About the Spry framework

Working with Spry Widgets

The Spry framework supports a set of reusable widgets written in standard HTML, CSS, and JavaScript. A Spry widget is a page element that provides a richer user experience by enabling user interaction. You can easily insert these widgets—the code is HTML and CSS at its simplest—and then style the widget. The behaviors in the framework include functionality that lets users show or hide content on the page, change the appearance (such as color) of the page, interact with menu items, and much more.

• Play the simulation: Working with Spry Widgets

About the Tabbed Panels Widget

A Tabbed Panels Widget is a set of panels that can store content in a compact space. Site viewers hide or reveal the content stored in the Tabbed Panels by clicking the tab of the panel they want to access. The panels of the widget open accordingly as the visitor clicks different tabs.

• Play the simulation: About the Tabbed Panels Widget

About Spry Data Sets

With the Spry framework, you can insert data objects to enable users to interact with a page quickly and dynamically from a browser window. For example, you can insert a sortable table that users can rearrange, or include a Spry dynamic table object that triggers a data update elsewhere on the page without requiring a full-page refresh.

• Play the simulation: About Spry Data Sets

Creating Simple Spry Data Tables

One of the most common uses of Spry data sets is to create one or more HTML tables. In this tutorial you will learn how to create a simple Spry Data table, set a sort able column, and define CSS styles for two table elements.

• Play the simulation: Creating Simple Spry Data Tables

Inserting the Accordion Widget

One of the great advantages Spry has to offer is the ability to create dynamic regions that will automatically update other page data in response to a user action. For example, if you select a product in one table on a page, Dreamweaver can immediately update data somewhere else in your page with detailed specifications about that product without requiring a full-page refresh. These are referred to as master and detail dynamic regions.

• Play the simulation: Inserting the Accordion Widget

Creating a Spry repeat list region

You can add repeat lists to display your data as an ordered list, an unordered (bulleted) list, a definition list, or a drop-down list. In this tutorial you will learn how to create a Spry repeating list using an unordered (bulleted) list.

• Play the simulation: Creating a Spry repeat list region

About the Collapsible Panel Widget

A Collapsible Panel Widget is a panel that can store content in a compact space. Users hide or reveal the content stored in the Collapsible Panel by clicking the tab of the widget. In this sample page you will insert a Spry Collapsible Panel Widget that will hold secondary information about the fictitious Aquo Drink company.

• Play the simulation: About the Collapsible Panel Widget

Validating a form with Spry

Using Spry form validation widgets, you can check the contents of specified form fields to ensure that the user has entered the correct type of data.

• Play the simulation: Validating a form with Spry

Adding Spry Effects

Spry effects are visual enhancements that you can apply to almost any element on an HTML page using JavaScript. Effects are often used to highlight information, create animated transitions, or alter a page element visually for a duration of time. You can apply effects to HTML elements without needing additional custom tags. Effects can alter an element's opacity, scale, position, and styling properties such as background color. You can create interesting visual effects by combining two or more properties. Because these effects are Spry-based, when a user clicks an object with an effect, only the object is dynamically updated.

• Play the simulation: Adding Spry Effects

About the author