home > articles >

Adobe Dreamweaver CS3 Spry Framework Intregration   July 05, 2007

Adobe has released Dreamweaver CS3. This release has some beneficial features that will increase your web development productivity. One of the major features is the integration of the Spy Framework. When building your fast, scalable, ColdFusion Web applications, you can use Adobe Dreamweaver CS3 to implement the Spry framework, which allows you to build the following Asynchronous JavaScript and XML widgets:

• Accordian
• Autosuggest
• Checkbox Validation
• Collapsible panel
• Menubar
• Radio Validation
• Select Validation
• Sliding Panels
• Tab Panels
• Textarea Validation
• Text field Validation

First, go to labs.adobe.com to download the Spry Framework files. As of this writing, the Spry Framework for Ajax pre-release 1.5 is in the far right hand column. After you have downloaded the files, copy the folder to your working directory, and call it something like "SpryAssets". Locate the widgets folder, and copy the folders of the widgets you would like to use into your new "SpryAssets" folder. Now, your environment is set up, and you are ready to begin to utilize this powerful library of widgets. If you find yourself with questions or need additional assistance with the Spry Framework set up then go to "Help" and select "Spry Framework Help". This comprehensive help file covers how to set up and use the Spry Framework widgets.

Secondly, to use a widget go to the insert tab bar within Adobe Dreamweaver CS3 and click on the "Spry" tab. After you click on the icon widget of your choice, some div code will automatically insert into your XHTML document. The new div contains an ID and a Class for each widget. In addition, the JavaScript file reference contains the code to make the widget work. Now, you can customize the content for the interface element. For example, if you chose the Spry insert bar icon for the horizontal menu you will need to enter the metadata that will contain the navigational elements. For instance, your navigation may contain the following links: "Home", "Products", and "Solutions". After you have this set up, then you will need to customize your CSS file.

Finally, to customize your new widget to match the look and feel of your web site, you can modify the CSS file. For example, you can change font styles, add borders, background colors, increase or decrease width, and more. The CSS file contains comments for each div. The widget is completely customizable, so you can make it look that way you want. If you have knowledge of CSS, you will find this process straightforward.

In closing, this article covers the basics of how to get started using the Spry framework built into the new Adobe Dreamweaver CS3 release. If you have ever done Ajax programming from scratch, you will see that the Spry Framework is easy to implement. The new intuitive interface that the insert bar offers makes the process seamless. This is definitely is a key feature in the new release to increase productivity within your web site projects. This feature guides you to not re-invent the wheel, and focus on getting your interface elements designed and customized for your ColdFusion Web Application projects. One thing is for sure, if you want to implemented Spry widgets into your projects, you will need to follow these three steps: download the Spry Framework files, use the insert bar, and customize the CSS.