Js] Spry Framework - Ajax the easy way

March 5, 2007 - 16:14 UTC - Tags: AJAX Spry XML A colleague of mine pointed me to the Spry Framework from Adobe. It's an elegant AJAX framework with a template/taglibs-like syntax. The framework basically consists of four javascript files. These files contains classes that makes implementing Ajax really simple. You can dynamically load data or add effects to your site.

Consider the following XML:

<employees>
<employee id="1">
<name>John Doe</name>
<picture>images/john.jpg</picture>
</employee>
<employee id="2">
<name>Joe Smith</name>
<picture>images/joe.jpg</picture>
</employee>
<employee id="3">
<name>Jane Smith</name>
<picture>images/jane.jpg</picture>
</employee>
</employees>

This XML would be easy to loop through and build some HTML with javascript, but why write boiler plate code? Spry is so much more elegant. With Spry, you only declare the XML-location, what data you want as the result and one or more templates for displaying the data.

For this simple example we only need to include two of the Spry javascript files:

<script type="text/javascript" src="js/xpath.js"></script>
<script type="text/javascript" src="js/SpryData.js"></script>

Next we create a dataset:

<script type="text/javascript">
var dsEmployees = new Spry.Data.XMLDataSet("employee.xml", "employees/employee");
</script>

In the line above I define a dataset with relative url "employee.xml" (in a real application this would be the url of a dynamic xml from php or ruby or whatever), and I say that I want the the employee-elements (employees/employee is xpath) as the data. This will allow me to iterate over the employee-elements.

I can now set up a template:

<div spry:region="dsEmployees">
  <div class="employee" spry:repeat="dsEmployees">
    <img src="{picture}">
    <span>Name:</span>{name}
    <a href="employee/{@id}">More information</a>
  </div>
</div>

Spry will now iterate over the dataset and create one div for each employee with a picture, name and a link. The html-element with spry:repeat and it's children will be repeated once for each employee. The curly bracket syntax names elements in the XML. Attribute names start with an @, while other elements are referenced only by name. As an example {picture} references the <picture>-element and {@id} references the id-attribute of the person. Pretty nifty if you ask me.

A demo is available here: Demo. Look at the size of the HTML...

To load a new xml, you can do the following:

dsEmployees.setURL("employees2.xml");
dsEmployees.loadData()

Currently the support for nested XML-elements is somewhat limited, but this will be improved in the 1.5 version of the framework as far as I understand.

Take a look here for some great examples: http://labs.adobe.com/technologies/spry/