Create Dynamic Page Regions with Spry

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(" to a xml page>", "edibles/item");

Javascript events are served by the XML Dataset object by querying the XML document and returning results to update the region firing the event in a Web page

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.