If we take a look at our example we can see that the Products table and Product image are contained within Spry Regions that are bound to a Spry XML Data Set. When the data changes within the Data Set, both regions automatically update themselves to reflect the new data.

Loading Data
The Spry Data Set is responsible for loading and processing data behind the scenes (see Figure 4). XML is frequently used to transfer data from the server to the client. The XML Data Set in Spry can be used to retrieve this data through the browser via the XMLHTTPRequest object. The XML can be contained in a file or returned from a server-side function call (e.g., PHP, ColdFusion, ASP).

Once the XML data is retrieved it's flattened into a standard record/field format to make it easier for users to bind the data to Spry Regions in the Web page. Spry uses XPath, a W3C standard for describing a set of nodes in XML, to identify the nodes(s) that represent a record of data.

In Figure 5 you can see a sample XML file (products.xml) that represents the products in our table. Using XPath (products/product) we identify the node(s) in the XML file that represent the records of data for our Data Set. Finally, we can see the records and fields in the Spry Data Set once the conversion is complete.

Data Set Declaration
Spry Data Sets are added to your page in two steps. First, you must include the appropriate JavaScript libraries:

Second, create an instance of the Data Set by passing in the location to the XML data and defining the repeating node that represents a record of the data. This code is added to the head of the document.

• Variable reference: Name of the Data Set. Referenced through data bindings or JavaScript.
• Object Instance: Creates an instance of the Data Set object using the "new" keyword.
• XML Data: Pointer to the XML file or server-side function that returns XML.
• XPath: Pointer to the node in the XML file that represents a record of the data.

In the following example we can see how the Spry Region for the Products table is built:

• Spry Region Declaration: Defines an HTML element as a Spry region.
• Data Set Binding: Binds a Spry Region to a Data Set.
• Spry Attributes: Specialized attributes that provide additional functionality such as sorting.
• Spry Data Bindings: Bindings to fields located in the Data Set.
• Repeat Region Declaration: Repeats a Spry Region once for each record in the Data Set.