Spry and Dreamweaver CS3

Hi Spry:fans,

So finally, Dreamweaver CS3 is out the door and users are getting their first glimpse into the Spry support we build it. I thought I would take some time to talk about it and reply to some comments that have come in.

You may have noticed that Spry is prominently featured in this new release. Each leg of Spry is included in Dreamweaver: Effects, Widgets and Data, along with some features that are more subtle.

Spry Effects can be added through the Behaviors panel. Look for the Effects Menu in the Behaviors list. We made changes to DW and Spry to ensure that it will work with the new Spry 1.5 method of calling effects.

Widgets are a great example of the benefits of using Design View for editing widgets. The widgets like Accordion render as they would in a browser, collapsed correctly (notice the rendering difference from earlier versions of DW, where all the panels would be displayed open.) Using the eye icon, you can switch between panel for easy access to the panel content. Default panels can be set in the widget Property Inspectors. The validation widgets allow you to preview and set all the error messages in Design View.

Spry Data support allows users to create XML data sets and can see the data references in the Bindings panel. It’s a great way to preview the data set and allows you to drag and drop data references into Design View. Some common patterns are pre-built for you: Spry lists and tables can easily be added, as well as regions and repeat regions can be added to design view. More subtle are things like: A data reference will be translated (turns blue) when it is inside a spry:region. If the reference is not blue, it serves as a warning that the reference is not within a region. Data set names will be added and removed from the region as data references are added and removed from the region and DW knows when to use the shorthand version and the more formal version. In the tag selector, spry:regions will be noted by a light orange background color.

My favorite enhancements is the code hinting. We made some excellent improvements in this area. Within a tag, type ‘sp’ and you will see the spry attributes hinted. We have introduced dynamic code hinting. DW knows about the data sets and will hint them if you add spry:region=”. In a spry:region, type { and the available data references will be hinted. If 2 data sets are bound to the region, both sets of references will be hinted. Very nice! We also hint for writing data sets and widgets manually, including options. Code coloring makes it easy to see your Spry elements in the code.

Another subtle enhancement is in the way that we define these code hints. Now for the first time, all the Spry hints are contained in a single, extensible XML file. In previous versions, these hints would have had to be added to many files on a per tag basis. Now that they are contained in a single file, we can easily update this file to keep up with the latest Spry code. Users can edit this file as well, if desired.
DWApplication\configuration\CodeHints\SpryCodeHints.xml.

A few have asked about the version of Spry used in DW and how we will update in the future.

The version of Spry in DW CS3 is 1.4 plus a couple forward looking enhancements. As mentioned above, we made sure the effects will work with the 1.5 changes. We also fixed a couple bugs that we found between the release of 1.4 and when we finished DW.

We are working on a mechanism to update the Spry files via an extension or some other method. If you want to manually update the Spry js files that DW copies to the site, they are kept in Dreamweaver application\configuration\Shared\Spry\. BTW, the mechanism that copies the files to the local root folder is also a subtle new feature. There is also an option in the Site Definition that allows you to choose where the Spry files go in the site.

I will discuss other Spry features in more detail in the future.
Hope you like the new version of DW. Spry 1.5 is a few weeks away…

Thanks,
Don

P.S. After I posted this initially, I found this new video that shows many of the features I just discussed.

http://www.adobe.com/designcenter/video_workshop/?id=vid0167