Spry

Spry XML data set basic overview

A Spry XML data set is fundamentally a JavaScript object. With a few snippets of code in your web page, you can create this object and load data from an XML source into the object when the user opens the page in a browser. The data set results in a flattened array of XML data that creates a standard table containing rows and columns.

For example, suppose you have an XML source file, cafetownsend.xml, that contains the following information:

<?xml version="1.0" encoding="UTF-8"?>
<specials>
	<menu_item id="1">
		<item>Summer Salad</item>
		<description>organic butter lettuce with apples, blood oranges, gorgonzola, and raspberry vinaigrette.</description>
		<price>7</price>
	</menu_item>	
	<menu_item id="2">	
		<item>Thai Noodle Salad</item>
		<description>lightly sauteed in sesame oil with baby bok choi, portobello mushrooms, and scallions.</description>
		<price>8</price>
	</menu_item>	
	<menu_item id="3">
		<item>Grilled Pacific Salmon</item>
		<description>served with new potatoes, diced beets, Italian parlsey, and lemon zest.</description>
		<price>16</price>
	</menu_item>
</specials>

Using XPath in your web page to indicate the data you’re interested in (in this example, the specials/menu_item node of the XML file), the data set flattens the XML data into an array of objects (rows) and properties (columns), represented by the following table.

@id

item

description

price

1

Summer salad

organic butter lettuce with apples, blood oranges, gorgonzola, and raspberry vinaigrette.

7

2

Thai Noodle Salad

lightly sauteed in sesame oil with baby bok choi, portobello mushrooms, and scallions.

8

3

Grilled Pacific Salmon

served with new potatoes, diced beets, Italian parsley, and lemon zest.

16

The data set contains a row for each menu item and the following columns: @id, item, description, and price. The columns represent the child nodes of the specials/menu_item node in the XML, plus any attributes contained in the menu_item tag, or in any of the child tags of the menu_item tag.

You create a Spry XML data set object by using XPath in the Spry.Data.XMLDataSet constructor. The XPath defines the default structure of the data set. For example, if you use XPath to select a repeating XML node that includes three child nodes, the data set will have a row for each repeating node, and a column for each of the three child nodes. (If any of the repeating nodes or child nodes contain attributes, the data set also creates a column for each attribute.)

If you do not specify an XPath, the XML data set will not load any data.

The following example creates a Spry data set called dsSpecials, and loads data from an XML file called cafetownsend.xml:

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Spry Example</title>
	<!--Link the Spry libraries-->
	<script type="text/javascript" src="includes/xpath.js"></script>
	<script type="text/javascript" src="includes/SpryData.js"></script>
	<!--Create a data set object-->
	<script type="text/javascript">
		var dsSpecials = new Spry.Data.XMLDataSet("data/cafetownsend.xml", "specials/menu_item");
	</script>
</head>
. . .
<body>
</body>
Note: The examples in this document are for reading purposes only and not intended for execution. For working samples, see the demos folder in the Spry folder on Adobe Labs.

In the example, the first script tag links an open-source XPath library to the page where you’ll eventually display XML data. The XPath library allows for the specification of a more complex XPath when you create a data set:

<script type="text/javascript" src="includes/xpath.js"></script>

The second script block links the Spry data library file, SpryData.js, which is stored in a folder called includes on the server:

<script type="text/javascript" src="includes/SpryData.js"></script>

The Spry data library depends on the XPath library, so it’s important that you always link the XPath library first.

The third script block contains the statement that creates the dsSpecials data set. The cafetownsend.xml XML source file is stored in a folder called data on the server:

var dsSpecials = new Spry.Data.XMLDataSet("data/cafetownsend.xml", "specials/menu_item");
Note: Remember that JavaScript and XML are case-sensitive languages, so it's important that you make sure that the scripts and column names you specify are capitalized (or not capitalized) appropriately.

In JavaScript the new operator is used to create objects. The Spry.Data.XMLDataSet method is a constructor in the Spry data library that creates new Spry data set objects. The constructor takes two parameters: the source of the data ("data/cafetownsend.xml", in this case, a URL relative to the HTML page) and an XPath expression that specifies the node or nodes in the XML to supply the data ("specials/menu_item").

You can also specify an absolute URL as the source of the XML data, as follows:

var dsSpecials = new Spry.Data.XMLDataSet("http://www.somesite.com/somefolder/cafetownsend.xml", "specials/menu_item");
Note: The URL you decide to use (whether absolute or relative) is subject to the browser’s security model, which means that you can only load data from an XML source that is on the same server domain as the HTML page you’re linking from. You can avoid this limitation by providing a cross-domain service script. For more information, consult your server administrator.

In the preceding example, the constructor creates a new dsSpecials Spry data set object. The data set obtains data from the specials/menu_item node (specified by XPath) in the cafetownsend.xml XML file and converts the data to a flattened array of objects and properties, similar to the rows and columns of a table. (For an example of the table, see the beginning of this section.)

Each data set maintains the notion of a current row. By default, the current row is set to the first row in the data set. Later, you can change the current row programmatically by calling the setCurrentRow() method on the data set object.

Note: The data set contains no data after you've created it with the new JavaScript operator. To load data into the dataset immediately, call the data set's loadData() method, which executes a request to load the XML data. Spry regions and detail regions do this automatically for the data sets they depend on, but if you are not using one of these regions, call the loadData() method manually in your page code. This loading is asynchronous, so the data might still be unavailable if you try to access it immediately after calling loadData().

Example

<script type="text/javascript">
	var dsSpecials = new Spry.Data.XMLDataSet (....);
	dsSpecials.loadData();
</script>