A few months ago, I published an article on AJAXCFC. An AJAX implementation developed by Rob Gonda that is driven by Cold Fusion components. No sooner had the ink dried on that piece did Adobe introduce Spry, another AJAX implementation that enables designers to incorporate XML data into their HTML documents using HTML, CSS, and a minimal amount of JavaScript.
Spry offers no real new UI features but it's ease of implementation and ability to accept XML from any source are it's strengths and reason enough for us all to take a look.
Adobe has three fundematal goals built into spry:
Keep it Open - Spry is XML based and server agnostic. The XML can be a static document or a dyanmic page created at run-time via ASP,Cold Fusion, etc. I like this about Spry in that it makes it's API available to developers regardless of server-side implementation.
Make it Easy - Spry is easy to implement and in a few moments, I will take you through the steps required to build a fairly sophistaicted data table with less than 10 lines of Spry related code.
Facilitate innovation - I think the main reason AJAX has been the buzz for the past year is that it made it easy for mainstream Net users to see just how powerful asynchronous data loading can be. The ability to refresh data on a page without having to reload the page offers a huge leap in user experience. Sure this type of thing could be and has been done for years utilizing Flash, but some people don't like plug-ins. Now that we have tools like Spry, the possiblities for web page development are greatly enhanced.
Let's learn a bit about Spry as I walk through an example of a dynamic table. From this example you should get a glimpse of just how easy ot os to implement Spry and how powerful it can be.
First, you need to download the Spry API from the Adobe site. The download files include some examples but most importantly, the download contains the javascript files needed for Spry to work. Open the Includes folder and you will see them:
xpath.js
SpryData.js
SpryXML.js
Basically, these files contain the code that enables Spry to parse the XML that you use as your datasource and return that data to the page.
Next open your XML editor of choice and paste the following code:
Nothing fancy here, just a root node called players and child nodes called person. Each person has subnodes that give specifics relating to each person in our XML tree.
Save this file as team.xml.
Now that you have your XML page created, open your editor and create a new page that we will use to display this information. In the head of the document you need to add the following line :
These two lines make the Spry files available to your page.
Next, paste this line of code:
Here we create a variable named mydata to hold our XML data. The variable is referencing our team.xml document. Notice that we also pass the node information so that Spry can parse the XML; here we indicate the root node - players - and the child node - person. Also note that we set a ColumnType for our homerun element as number. This is done so that our table will sort properly when the Homerun column is clicked. If you do not specify a datatype, Spry will sort the field as a string.
Now that we have a connection to our data, we need to add the code to display it on the page. Paste the following code block inside the body of you page:
Let me explain a few lines of the code. First we create a div : <div spry:region="mydata"> and add another div inside it to display a loading image while our data is being retrieved : <div spry:state="loading"><img src="loader.gif"></div>
Next we create our table to display the data. Notice that inside the table header tag I include this line:
onClick="mydata.sort('fname','toggle');"
This sets up our click handler that will sort our data based on user interaction. Next we create the rows that hold our data returned via Spry. Notice this line:
tr spry:repeat="mydata" onClick="mydata.setCurrentRow('{ds_RowID}');
The spry: repeat acts much like a Dreamweaver repeat region in that it loops through our dataset creating a new row for each record. Also notice the click handler here:
onClick="mydata.setCurrentRow('{ds_RowID}
This sets up a click event that we will use later to display details about an individual record. Each record returned is given a row ID - ds_RowID - and we can reference this attribute to easily display information for a given record. Notice too the way individual data elements are referenced - {fname}. This corresponds to the sub nodes in our XML document.
If you preview the page now, you will see a nice HTML table that displays our data. Click on a column and you can see that data sort accordingly. Pretty neat stuff.
Now we will set up a div to display detail information for an individual record. Paste this code below the table:
This div utilizes the spry : detail tag. It esentially listens for the setCurrentRow method that we fire on the click event in our table. It takes the ds_RowID and displays the information for the row that was clicked.
Preview you page now and you should see something like this: the images I used are in the download for this article.
As you can see, Spry is very powerful and easy to implement. I have been working with Spry off and on now for a few weeks and have been impressed with how easy it is to create complex Ajax apps. I realize that Flash and Flex RIA's can do much more but often the client takes those options off the table. When that happens, Spry is a viable option and a great new tool for your development skillset.
As an aside. I have seen a lot of photo gallery examples that use a static XML document as their datasource. Here is an ASP code snippet that will read a folder's content and create a XML document that Spry can read. This works well when creating a dynamic gallery that updates everytime a new photo is added to the folder.