DM 171: Spry Using Dreamweaver CS3

Ajax → Spry → Dreamweaver CS3

Ajax (Asynchronous JavaScript and XML) is a technology that has become popular on web sites. Ajax can present your data in a more sophisticated way than the general HTML page; it allows the look and/or contents of the page to change without the need to reload the page. Spry is an Ajax “framework” that Adobe has developed for the non-technically inclined designers among us. Dreamweaver CS3 has integrated the Spry framework into the application so that it is even easier to deploy.

  1. What is the Spry framework? Adobe Labs has a site to explain it. You will find links along the left side of the page to demos and samples which give examples of Spry in action. There are also links to documentation and the online development community. It is a good idea to follow their Download v1.6 link to get the entire documentation package as well as the Dreamweaver Spry Updater. You will need a free account to do this.

  2. What can the Spry framework do in the real world? Visit the Adobe Labs Spry Showcase and view some examples.

  3. Dreamweaver Help menu with Manage Extentions highlighted Use Dreamweaver menu Help > Manage Extensions… to update the version of Spry that Dreamweaver uses. The Spry framework is regularly updated to improve its functionality with all browsers. This is a reminder to use Spry carefully and do lots of testing to make sure your pages work or at least degrade gracefully on older browsers.
    Dreamweaver Spry Updater Icon
  4. Create a page with overall formatting to your taste. Use menu Insert > Spry or use the Spry toolbar to insert one of the Spry widgets. In the menu, widgets are the last four; on the toolbar, the widgets are the group of four to the right. The middle group are form validation widgets and the five on the left (or top) are used with XML data sets.

    Dreamweaver inserts code several places into your HTML and adds some files to your site.
    1. Head section – Dreamweaver inserts links to Javascript libraries and CSS files that it installs in the folder “SpryAssets” which it creates at the root level of your site. Another reason why carefully defining your site is so important. You may move or modify the styles, the link to the Javascript library has to remain.
    2. Body section – Dreamweaver installs the basic HTML structure for your widget of choice, usually composed with divs. Dreamweaver gives a tab to click on in Design mode for the widget; when you click on it, the properties inspector will give you some options to choose for the widget.
    3. Just before the closing body tag – Dreamweaver writes a script container (<script></script>) with several lines of Javascript coding to initialize the widget you are utilizing. You can write Javascript arguments here to control the functionality of your widget.

  5. Populate your widget with some contents and view it with your browser.

  6. If you wish, play with Spry effects which are found in the behaviors panel.

The Spry framework for Ajax gives the visual designer some of the tools formerly only used by coding types; run through the demos and samples and see what your imagination creates.