Accessibility

Table of Contents

  1. Introduction
  2. A basic example
  3. A dynamic example

Creating a Spry XML data set

A basic example

Let's start by looking at some sample XML data that you will be using for your Spry data sets. In Dreamweaver, open the file jedilist.xml, which is part of the sample files that accompany this article. Here is a snippet of the XML code with a few rows removed to save space:

<?xml version="1.0" encoding="UTF-8"?>
<jedis>
<jedi>
<name>Raymond Camden</name>
<age>35</age>
<alignment>dark</alignment>
</jedi>
<jedi>
<name>Scott Stroz</name>
<age>40</age>
<alignment>light</alignment>
</jedi>
<jedi>
<name>Todd Sharp</name>
<age>32</age>
<alignment>light</alignment>
</jedi>
<jedi>
<name>Scott Pinkston</name>
<age>36</age>
<alignment>dark</alignment>
</jedi>
</jedis>

The XML file contains a list of Jedis. Each Jedi has a name, age, and alignment (dark or light; the dark ones are the fun ones). XML is structured data. Note that each person begins with a <jedi> tag and end with </jedi>. Each name is wrapped with a <name> tag, and so on. It is critical that the XML you use be well formed. Although HTML can be a bit forgiving, XML is very strict about how you structure the file. Next, create a new file in Dreamweaver.

  1. Right-click inside the folder you created and select New File. Name your new file test.html. Double-click the file to open it in Dreamweaver.
  2. Place your cursor after the <body> tag. Ok, now for the fun part.

  3. On the Insert menu, select Data > Spry Data Set. This opens the window shown in Figure 1.

    The default window for inserting a Spry Data Set.

    Figure 1. The default window for inserting a Spry Data Set.

  4. By default Dreamweaver will want to create an HTML data set. Simply switch the Data Type to XML.

  5. Click the Browse button to tell Dreamweaver where to find your data file. Select jedilist.xml from your site folder. Dreamweaver will read the file and display a tree-style view of your XML data (see Figure 2).

    Dreamweaver has parsed in the XML and understands the basic structure of your data.

    Figure 2. Dreamweaver has parsed in the XML and understands the basic structure of your data.

  6. Ok, now note the data preview. Although it looks kind of right, it only seems to see one row of data. That's because the Row element selected above is "jedis", not "jedi". Remember, you wrapped the entire XML file in the jedis tag, but each individual jedi was wrapped in a jedi tag. Figure 3 shows what happens when you select the jedi node.

    Now Dreamweaver knows how to list out your data from the XML file.

    Figure 3. Now Dreamweaver knows how to list out your data from the XML file.

    Dreamweaver has recognized that the jedi tag wraps each individual row of data. The preview confirms this. Click Next.

  7. If you stepped through Creating an HTML data set, then this part of the wizard should be familiar. Here you can tell Spry how to treat each column.

    This is a purely optional step, but it helps with sorting if you tell Spry when columns aren't basic string types. Your data is rather simple. Only the age column is numeric. So go ahead and select the age column and select Number from the Type drop-down menu. Next, set the Sort column (towards the bottom) to Name. This will sort the XML data by the name column.

    Specifying settings for the columns and sorting.

    Figure 4. Specifying settings for the columns and sorting.

  8. Click next to the go to the last step. Under insert options, select Insert Table and click the Done button.

Your HTML page should look like this:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="../SpryAssets/xpath.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.XMLDataSet("jedilist.xml",
"jedis/jedi", {sortOnLoad: "name", sortOrderOnLoad:
"ascending"});
ds1.setColumnType("age", "number");
//-->
</script>
</head>
 
<body>
<div spry:region="ds1">
    <table>
        <tr>
            <th spry:sort="name">Name</th>
            <th spry:sort="age">Age</th>
            <th spry:sort="alignment">Alignment</th>
        </tr>
        <tr spry:repeat="ds1">
            <td>{name}</td>
            <td>{age}</td>
            <td>{alignment}</td>
        </tr>
    </table>
</div>
</body>
</html>

If you open your browser to this file, you can now see the XML data has been dynamically loaded into the HTML. The data was sorted automatically by the name, but you can actually click the header of each column and sort the data any way you like.

Page 2 of 3
Previous Page
Next Page