Create dynamic page regions with Spry

Anadi Misra

What is AJAX, what is it capable of, and what are its benefits, are already known to most of you. However, to sum it up, AJAX stands for a technology involving XML and JavaScript that allows you to create lightweight components in a Web page that can be updated without refreshing the entire page. To work with AJAX, you need to know JavaScript, XML, and DOM (Document Object Model). Spry is one such AJAX framework from Adobe. We look into how to use this framework for components that might be consuming XML data from multiple types of XML sources and how to present this data in an easier way.

Get started with Spry
As is generally the case with such frameworks, getting started with Spry is no rocket science. All you have to do is download the framework and extract it to any location on your hard drive. In Spry, the data set is a JavaScript object. It results in a flattened array of XML data that can be visualized as a standard table containing rows and columns. You create a Spry data set object by using the Spry.Data.XMLDataSet constructor.

The default structure (or schema) of the data set is defined by the XML data source. For example, the following script creates a data set object that reads from the productlist.xml.

The “xpath.js” and “SpryData.js” scripts implement XPath support and the XMLDataSet objects respectively. The method takes two parameters: the name and path of the XML source; and the XPath expression for specifying the node or nodes in XML. Instead of an XML file, you can also provide the URL to anything that returns XML data as the response. This is particularly useful in cases such as reading output from a web service as well.

var dsProducts = new Spry.Data.XMLDataSet("", "edibles/item");

Create dynamic regions
Once you have read the data through this object, things get easier. For example the dynamic region that we talked about is not so hard to code:

Multiple data sets
Now this was a basic example to get you acquainted with how Spry works. Let us move on to getting data from multiple data sets and displaying that in a dynamic region. If we are dealing with a complex set of XML documents, where all XML documents are referenced to a single master document; instead of creating just one XMLDataSet object, you have to create another object that points to a particular column of the master document. Suppose our productlist.xml has a node that pointed to the XML file in which the product itself is defined in detail, here's the code to handle this scenario.

The display creation is as follows:

onclick="dsProducts.setCurrentRow('{ds_RowID}')">

While the first object handles the parent level xml data set, the second, ie dsParts, allows us to obtain data from the individual XML file, that is found in node of the master XML file. The {ds_RowID} is an in-built variable which provides an automatically generated unique ID for each row. Thus, the setCurrentRow() method receives this ID and the current row in data set is changed.

In conclusion
The framework presents a simple way of reading data and displaying it under regions that will take care of updates. The way this has to be done is not overly complicated and even if you do not know DOM in detail, you can still use the framework easily.

Source: PCQuest