A few days ago I mentioned that a new release from the Adobe Spry was on the way, and today it landed. Version 1.6.1 is branded as an AIR update, and many of the updates are directly in relation to support for running with AIR, but some pretty darn cool features were added to this release as well. This week I'm going to discuss these changes and show some examples.

I want to start off with the feature that excites me the most. Before I do so, let me give a bit of background on how Spry works for folks who may not be familiar with it. Spry has a reputation for being the AJAX framework for designers. Well, I'm certainly no designer (you should see how I'm dressed now), but I absolutely love Spry. The framework reminds me a lot of what I like about ColdFusion. It is simple and easy to use, and places emphasis on practical, commonly used features.

Spry has many features, but the main thing you will do it is point to remove data sources and, well, load the data. (Duh!) So for example, if I had an XML document that generated a list of people, I could point Spry to it like so:

<script type="text/javascript">
var mydata = new Spry.Data.XMLDataSet("people.cfm","/people/person");
</script>

This basically says - at URL people.cfm, load an XML document and parse it with the XPath /people/person. Spry also supports JSON, TSV, CSV, and even HTML tab sources, but for right now, just imagine a simple XML document. Our XML may look like so:

<people>
<person>
<name>Jacob Camden</name>
<age>6</age>
<gender>boy</gender>
<picture>jacob.jpg</picture>
</person>
<person>
<name>Lynn Camden</name>
<age>4</age>
<gender>girl</gender>
<picture>lynn.jpg</picture>
</person>
<person>
<name>Noah Camden</name>
<age>3</age>
<gender>boy</gender>
<picture>noah.jpg</picture>
</person>

</people>

Where Spry shines is how I would display this XML on my page. Consider the following HTML:

<div spry:region="mydata">

<p>
<table width="500" border="1">
<tr spry:repeat="mydata">
<td>{name}</td>
<td>{age}</td>
<td>{gender}</td>
</tr>
</table>
</p>

</div>

By using two simple marks, spry:region and spry:repeat, the framework will handle all the data loading and all the data writing for me. The use of {xxx} tells Spry to look for an {xxx} value in the XML and replace it with the proper value and the proper row. That's it. One line of JavaScript really.

So I'm not going to go through everything Spry does - obviously it does a lot more. But let me discuss one 1.6.1 feature that specifically relates to what I showed up.

While you can see that it is easy to go from XML (or JSON, or CSV, etc) to HTML, what if you want to be format the data before you display it? For example, sales figures may be look like so: 34093443, but you would like to format them like so: $34,093,443

In the past, this was doable by writing JavaScript to process the data before it was rendered. Not terribly difficult, but a bit of a pain for something so simple. Spry 1.6.1 greatly simplifies this. First I write my function to handle formatting my data:

function FormattedPrice(region, lookupFunc) {
return "$" + parseInt(lookupFunc("{mydata::price}")).toFixed(2);
}

Then in my HTML, I can change an entity like this: {price}, into this: {function::FormattedPrice}. I have access to all the data from within my format function, so I could even do complex changes like checking the locale and using a different currency value.

Support for this new syntax was also added to Spry conditionals as well. Spry conditionals are a simple way of adding basic branching to your HTML. So for example, I could check the age of the person and only display an icon for people over 18. You can see an example of this here.

Read more from Raymond Camden.