Spry * Create a Spry XML data set

Open a new or existing HTML page.

Make sure that you’ve linked the Spry data library files to the page. For more information, see Prepare your files.

Locate the XML source for the data set.

For example, you might want to use an XML file called cafetownsend.xml located in a folder called data in the site’s root folder:

data/cafetownsend.xml

You could also specify a URL to an XML file, as follows:

http://www.somesite.com/somefolder/cafetownsend.xml

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.

Because you’ll need to specify the repeating XML node that supplies data to the data set, make sure you understand the structure of the XML before you create the data set.

In the following example, the cafetownsend.xml file consists of a parent node called specials that contains a repeating child node called menu_item.

<?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>

To create the data set, insert the following script block after the script tags importing the library:

<script type="text/javascript">
	var datasetName = new Spry.Data.XMLDataSet("XMLsource", "XPathToRepeatingChildNode");
</script>

In the Cafe Townsend example, you create a data set with the following statement:

var dsSpecials = new Spry.Data.XMLDataSet("data/cafetownsend.xml", "specials/menu_item");

The statement creates a new data set called dsSpecials that retrieves data from the specials/menu_item node in the specified XML file. The data set has a row for each menu item and the following columns: @id, item, description, and price that the following table represents.

@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

You can also specify a 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");

The completed example code might look as follows:

<head>
...
<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/SpryData.js"></script>
<script type="text/javascript">
	var dsSpecials = new Spry.Data.XMLDataSet("data/cafetownsend.xml", "specials/menu_item");
</script>
...
</head>

(Optional) If the values in your data set include numbers (as in this example), reset the column types for the columns that contain those numerical values. This becomes important later if you want to sort data.

To set column types, add the setColumnType () data set method to the head tag of your document, after you’ve created the data set, as follows (in bold):

<script type="text/javascript">	
	var dsSpecials = new Spry.Data.XMLDataSet("data/cafetownsend.xml", "specials/menu_item"); 	
	dsSpecials.setColumnType("price", "number");
</script>

In the example, the expression calls the setColumnType method on the dsSpecials data set object, which you’ve already defined. The setColumnType method takes two parameters: the name of the data set column to retype ("price") and the desired data type ("number").

For more information, see Let users sort data.