Creating Spry Elements and Alternate Style Sheets - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 440

Understanding Spry
The Spry framework for AJAX is a JavaScript and CSS code library that enables Web
designers to more easily add advanced functionality to Web pages. AJAX (Asynchronous
JavaScript and XML) is a technique for using various technologies to update Web page
content and targeted pieces of content within a page without visibly refreshing the page
and without browser add-on technologies. Adobe created the Spry framework library to
help Web designers add AJAX into Web pages without having to learn to write the code.
After developing the Spry framework as a stand-alone library, Adobe added a version of
the library to Dreamweaver and created a visual interface to enable designers to integrate
the Spry elements into Web pages. A Spry element is a chunk of prewritten, reusable
code such as a behavior that was written using the Spry framework library and available
in Dreamweaver to add specifi c functionality to Web pages. For example, the Accordion
widget adds a set of collapsible panels to a page. Users who view the page can click a
panel tab to view the content in that panel.
Dreamweaver places Spry elements in three categories. Widgets are page elements
such as the Accordion widget that add interactive components to pages. XML Data
Sources display data from an XML source, which is similar to displaying data from a
database. This lets user input trigger a data update elsewhere in a page without refreshing
the page. Finally, effects are visual enhancements that change elements of a page over
time. For example, the Fade effect causes an image to fade from 100 percent to 0 percent
visibility over time when a page is loaded into the browser window.
In the NextBest Fest site, you will add the Accordion widget and the Shake effect.
Written Communication: Checking the Usefulness of a Spry Element
Before inserting a Spry element into a Web page, take a moment to check that the element
adds needed and useful functionality to the Web site. Also, make sure that the element
complements the look and feel of the site, keeping in mind that you can modify the ele-
ment's styles. Finally, it is also a good idea to gather all of the content required for the
element before you begin to create it.
Adding a Spry Widget to a Web Page
Widgets are reusable, prebuilt page elements that enable user interaction. Dreamweaver
includes the widgets described in Figure 8-1. You can also create widgets yourself using
the Spry framework if you are familiar with AJAX. The Validation Text Field, Validation
Textarea, Validation Checkbox, Validation Select, Validation Password, Validation
Confi rm, and Validation Radio Group widgets are used in data collection and are similar
to the fi elds you used when you created a regular form. You can use these widgets to cre-
ate a Spry form. A major difference between these Spry widgets and their HTML counter-
parts that you used when you created a regular form is that the Spry widgets can check
for validation and can collect information without causing the entire page to refresh.