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.