Getting ready for Spry 1.6

Happy Friday Spry:readers,

As I mentioned before, we are busy finishing Spry 1.6.
I thought I would give a heads-up on what to expect in the next release.

Since pretty early on, we have been criticized for using custom attributes and that turned into “Spry doesn’t follow standards.” Well, that is partially right. Spry Data uses custom attributes, as allowed in XHTML. Spry Effects and Widgets have no such concerns. So we decided to take this release to answer some of those concerns, both with code and with words. This next release will focus on accessibility, standards and things like unobtrusive Spry techniques.

We often hear things like: “My page doesn’t validate”, but find that many users don’t know what that means. So we are going to talk about what validating, standards, eXtensible HTML and custom attributes means, and also try to present the pros and cons of each idea. It’s more of an ‘education’ push rather than a ‘convincing’ push. If users really understand what these things mean, then they can decide what is important.

We worked on what we are calling the Element Selector. This allows page manipulation via CSS Selectors. Those familiar with DOMQuery or jquery might be interested in checking it out. This will allow for unobtrusive Spry pages, allowing Spry attributes and constructors to be attached and fired off from external javascript files. We have always said that making unobtrusive Spry pages is possible; now we offer a tool to make it that much easier.

We are also adding keyboard navigation to the Menu Bar and ensuring consistency between our widgets on the accessibility front.

We will be rounding out our Form Validation widget collection.

But I am not going to give away the whole thing now…
Look for Spry 1.6 in early October.

Speaking of October, back in the previous one, Kin made a Spry Poker Game for the MAX conference in Vegas. Check it out:


It’s been a while…

Hi Spry:fans,

The weeks just zoom by.

The Spry team has been ‘heads down’ on the 1.6 release.

A couple things to note: We (well, our documentation team….) pushed the Spry 1.5 LiveDocs to the site. They are at

One of our Community Experts from Germany has just written an article on using Spry and PHP:

Kin and I have been looking for some new things to do with Spry, pushing the envelope a bit. Yours truely spent some spare cycles making a periodic table using HTML Data sets and some fun CSS. I wrote a case study for it, describing the thinking behind the code. Check it out here:

A short one this time…


Schedule, Widget, Styling and Source

Good morning spry:fans,

This part of the Spry team is back at his post in California, busy with the next Spry release. I wanted to pass along a couple Spry developments here.

First, the Spry team has decided that we wanted to get some more features into the zip before we could really call it gold. To us, a gold or ‘production’ release not only means that is it stable code, but also that the package includes all the big features that users will need to use Spry robustly. Since are working on additional features that will make a more complete release, we decided to hold off on the gold release until we were all happy with the feature set.

So the next version will be Pre-release 1.6 and we are expecting to release at the end of the summer. We will be dealing with HTML fragments, unobtrusive Spry and a slick CSS selector utility.

But in the meantime, we just posted a widget that we couldn’t quite get in for 1.5. We are happy to preview our new Tooltip widget. You can find that and additional links, including the overview doc, on the Preview page:

Also, we have had many questions lately about styling the Menu Bar widget. Towards that, we posted a few more styling samples on the samples page:

Lastly, I just found this toolkit for IE7. It does many things, but mostly, Spry developers finally have a way to View Generated Source for IE7. Of course, I presume that everyone already has Firebug installed for Firefox…


Hi Spry:fans,

It’s been a while. This part of the Spry team is in Europe, splitting time between vacation and visiting Adobe offices and attending user group meetings. I wanted to talk about some Spry 1.5 things, now that it is out in the world.

First, we are happy that we finally got to release our JSON and HTML data sets. That’s a big advance for the data portion of the toolkit. People have been asking for Nested data sets for some time now and we are pleased to get it out there. The effects got a nice boost too, with smoother action and more transitions. Check it out of you haven’t already.

One thing that has come up since the release is Spry 1.5 and Dreamweaver CS3. People are asking how to update Dreamweaver to use Spry 1.5. Let me explain the DW/Spry products and workflow.

First, a note on timing. Dreamweaver CS3 was released with Spry 1.4. This is because the DW team have to ‘lock down’ Dreamweaver well before the April release date. So they had to lock the Spry features this past winter, therefore Spry 1.4. In the meantime, the Spry team continued to work on its next release. It so happened that Spry 1.5 was finished shortly after the DW release date.

The Spry team develops our features as we see the need and in response to customer requests. And having a much shorter release cycle, there may be 3 or 4 releases of Spry between the next release of Dreamweaver. But since Dreamweaver supports Spry, the Dreamweaver team and the Spry team will work together to add Spry features to Dreamweaver in subsequent releases. So Spry will always be ahead of Dreamweaver, feature wise. This may be frustrating to Dreamweaver users but both teams are looking into ways of updating Spry support in DW.

But by taking advantage of Dreamweaver’s extensibility layer, we can do some things to let Dreamweaver keep up in some ways. We can update the Spry source files used in the sites and update the code hinting for new features. To do so…

Dreamweaver has 2 sets of files: One set of files are the actual Spry files that are used in the browser. It is these files that DW copies to the site folder and are uploaded. There are also a series of ‘design-time’ Spry files that DW uses to work with Spry IN Dreamweaver. These files allow the widgets to render correctly and show the different panels/states. You don’t need to worry about the design-time files. Those will never change.

There are a couple ideas about updating Dreamweaver sites to Spry 1.5.
First, there is updating the Spry files in your site. If you download the Spry 1.5 zip, you can simply copy the new javascript files (and CSS if you need it) to the local root folder and upload the new files and the widgets and data should work as expected.

The second idea is having Dreamweaver copy the Spry 1.5 files to your site when you use Spry components. To do this, we need to update the Spry files in the Dreamweaver configuration folder.

Keep in mind, only the Spry widgets and data that Dreamweaver supports may need updating. Also, not all uses will need or want to update Dreamweaver. If your Spry files are working well and you have no need to update, then no problem.

The Dreamweaver team is working on an extension that will help users update files and copy the new features over to the site. We expect to have that ready for the Spry production release, which will be released this summer. Until then, we are thinking about releasing a simple extension to Labs that would update the Spry source files in Dreamweaver. It would also provide code hints for the new functions and data sets. While we finish this extensions (it takes some testing before we release anything), there are ways to update Dreamweaver to use Spry 1.5 files. For now, it takes a bit of manual file moving.

In short, the Spry files exist in: ‘DW application folder/Configuration/Shared/Spry/’

If you want to update SpryData.js to 1.5, copy the new file and replace the file in DW/configuration/Shared/Spry/Data/

Repeat for the other files you want to update. Spry team member Kin has posted a detailed list of files and instructions on how to update here on the Spry forums:

It’s a wise idea to make a copy of the Shared/Spry folder before hand, in case something goes amiss…

Only the files that currently exist would ever need to be updated.

The Dreamweaver team is however, looking into the idea of providing extensions that will add additional Spry support in DW. This would allow DW to keep with Sprys quicker release schedule. Nothing final on that yet; there are still questions to be answered there…

To be clear: these new files (other than the code hinting) will not add any new functionality to Dreamweaver. It will simply allow DW to copy over new files to your site when you use the features.

Also, DW will detect if you have, say, SpryAccordion.js in your site. If it already exists, it will not copy over the new file. It doesn’t know the file is new. You can just manually copy the new files to your site folder..or, more tediously, delete the Accordion files (or whatever component you are using) from the SpryAssets folder and then insert an accordion onto a new page. DW will then copy the new files to the SpryAssets folder again.

So, more on this later. We have some things in the works that will help with this scenario.

Thanks for reading,


Latest Spry News

Hi Spry:fans,

Quick notes from the Spry world.

First, tomorrow is Spry’s 1 year anniversary on Labs! Thanks to everyone that has joined our Spry community. We appreciate your interest and all the feedback we have gotten over the past year. Spry is better because of it.

Second, the Spry team is busy putting the final touches on the Spry 1.5 Prerelease. We expect it out next week.

Have you seen the Spry LiveDocs?
LiveDocs allow you to post comments and questions that we use to improve the documentation. The idea is that LiveDocs will have documentation that has had time to settle. Features like the new 1.5 stuff will exist on Labs and in the zip. Once those are out for a few months, we will move them to LiveDocs. We also incorporate the suggestions into the next rev. Check them out.

We also now have a Spry Developers Center. Check out the articles there. Let us know if you have ideas for new articles or even if you want to write one yourself!

An example of Spry for those of you with Adobe CS3 products. If you open the Help Pages and do a search, the results are done with Spry!

Due to user demand, the Spry team put out the SpyURLUtils.js file last week or so. Once included on the page, you can set up a variable that gathers either the URL parameters or hashes and populates the var. Now you can easily use them throughout the page. The samples we wrote show how to use them to have a particular Tabbed Panel tab open. This grabs the panel number from the URL and uses it in the constructor. There is also an example of how to specify a specific row for a detail region with Spry Data and URL params. These will be in the Spry 1.5 release and on the Labs site once we go live.

And a final note, at the end of the month, there are going to be a couple Spry seminars in Europe. This humble member of the Spry team will be presenting an overview of Spry. If you can be in Rome on May 29th, or in Milan (Pavia) on May 31st, please come by and check it out.

Next stop: Spry 1.5.



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.

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…


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

Spry Widgets and Tab Index

Hi Spry:fans,

It has been a big week here at Adobe. We announced CS3, so we can finally talk about Spry integration into DW. While I will jump into that topic in more detail later, I just wanted to quickly discuss a point that has been brought up in reference to widgets, accessibility and standards.

We are using tabindex in our widgets, like on the Collapsible Panel and Menu bar, to enable keyboard navigation. It has been pointed out by some that this doesn’t validate as it is an improper use of the attribute.

We are taking the tack of favoring accessibility and usability over validation in this scenario. Both IE and Mozilla-based browsers have implemented the tabindex to work on most page element just for this reason. We feel that this usefulness for accessibility outweighs validation concerns.

Of course, our widgets are set up to also accept tags in the tabs, which will allow it to get focus. Choose either method.

While tabindex will fail current W3C validation, the standards are catching up. Note that Tab Index is discussed in W3C specs, including the WAI-ARIA:

The Spry team will be discussing standards and accessibility more in the near future.

P.S. Note on the 1.5 Preview: We just added the Effects Migration doc that explains the changes that will be required to go from 1.4 to 1.5.

Spry 1.5 preview is live!

Hi Spry:fans,

I am pleased to announce that we just pushed the Spry 1.5 preview to Labs. This is a sneak peak at some of the new functionality that will be available in the Spry 1.5 release. There is no new zip today. That will not be ready for a while yet, but we wanted to show you what we are up to.

This is an opportunity for the community to see major new features and to provide feedback. We want to make sure that our thinking matches your thinking in the way we implement complex new features, like Nested Data Sets.
The preview materials can be found at
So, today, we are happy to present, finally:

Nested Data Sets – You can access data in nested XML structures. This lets you make the nested lists. We also have a way to do advanced flattening. This takes the nested information and flattens it into the main data set. We want your feedback on our implementation of this.

JSON Data Sets – Per your requests, use JSON data as your source.

HTML Data Sets – My favorite new feature: use HTML tables or other HTML structures as data sources. This will go a long way towards javascript degradation and search engine optimization.

Session Handling – We created a method for detecting session timeouts during the XMLHTTPRequest. Samples for different server models show how to handle the reply.

Form Submission – Samples on how to do form submission via the XMLHTTPRequest.

Paging Data sets – We made some good enhancements to the Spry Pager.

Effects rewrite – As noted in my previous post, we changed the way effects work. Check out the new methodology. No need to change your code yet, but I wrote a document talking about how to change over to the new code.

Radio Button Validation Widget – Cristian whipped this one up in response to use requests this week!

Auto Suggest Widget – Our first data/widget hybrid, set up a suggest text field with data set suggesting.

Spry API – Finally! It’s pretty close to final, but we need to get it out to you all.

Plus a couple more items for you…
Let us know what you think.

Some changes in Spry 1.5

Good morning, spry:fans,

I wanted to talk about one of the changes we are making for Spry 1.5. This is just some information so that you will be better prepared for Spry 1.5. In my previous post, I mentioned the March preview- May release timetable. We are still on track for that. JSON support is now working and we also have some samples on form submission and session handling ready to go.

I wanted to give a brief overview of the changes we made for Spry Effects. For those that upgrade to 1.5, this change will impact existing pages with effects. The changes that will need to be made are simple and straightforward, and we will have a document specifically outlining the changes that will need to be made.

The main idea is that we changed from using functions to using classes to enable the effects. This mirrors how widgets work today.

For instance, in Spry 1.5, a basic effect will now look like:

<a href="#" onclick="theEffect.start();">Start Effect</a>
<div id="effectMe">The content to effect</div>
var theEffect = new Spry.Effect.Fade("effectMe",{duration:500, from:’100%’, to:"0%’});

We have also changed some Effect names to be more straightforward. For instance, “AppearFade” is now “Fade”.

We are also including some wrapper functions that will still run the old versions, but these will take a small change to the code to enable, but less so than moving the functions to objects.

An example:
<a href="#" onclick="Spry.Effect.Shake("theElement");">Start Effect</a>
would be:
<a href="#" onclick="Spry.Effect.DoShake("theElement");">Start Effect</a>

where we added ‘Do’ to the effect name. Then they will work as normal.

This was done for consistency reasons. Now all effects, single and cluster, work the same way. It also was done so that clustering was easier to control, with stopping and toggling being smoother.

And now it fully supports the observer notification model we use for Spry Data.

We think that this change will make using Effects easier in the future. We are always reticent to force changes to existing pages, but in this case, we think it’s worth it.

And of course, if your page is working properly and you don’t want to upgrade, then no changes need to be made!

So that is it for this time. Just some Spry foreshadowing.
We should have the preview up in a few weeks.


Where’s Spry 1.5?

Hi spry:fans,

Thought I would pass along an update on where we are with the next version of Spry. We have some really good stuff in the works.

Kin has been working on the hornet’s nest that is nested data sets. It’s almost done. As we went through different use cases, it confirmed our fears that it was a beast and there are many ways to slay the beast, each with its pros and cons.

A small ‘ferinstance’: Because of the way we flatten, generating something like:

  • Artist 1
    • album
    • album
    • album
  • Artist 2
    • album
    • album

is very different in a data set way of thinking than:

Artist 1 album
Artist 1 album
Artist 1 album
Artist 2 album
Artist 2 album
Artist 2 album

What happens when you sort the ‘album’ column? It depends on how you break up the data. Right now, we are using the idea of Spry.Data.NestedDataSet which is a derived from a standard data set. We also have this idea of a ‘join’, or advanced flattening, where columns from the nested XML are appended to the parent data set.

The point is, there are many issues that needed to be solved for this to work in most (I hesitate to say ‘all’) scenarios. We will have good documentation when this comes out and samples as well. I will discuss it here before and after we release it.

Continue reading…