Accessibility

Table of Contents

  1. Introduction
  2. Getting started
  3. Exploring your dataset options
  4. Creating HTML data sets with other content

Creating a Spry HTML data set

A basic example

If you haven't done so arleady, please download and unzip the html_dataset_sample.zip sample files. In Dreamweaver, open the file shipdata.html, which is included in the ZIP archive. You will see the file is nothing more than a simple page with basic HTML and a table.

Note: In the code snippet below I've removed a few rows of data to save space.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
 
<body>
 
<table id="shipdata">
    <tr>
        <th>Name</th>
        <th>Class</th>
        <th>Length(m)</th>
        <th>Crew Size</th>
        <th>Combat Kills</th>
    </tr>
    <tr>
        <td>Lady Luck</td>
        <td>Destroyer</td>
        <td>900</td>
        <td>125</td>
        <td>311</td>
    </tr>
<!--(Rows removed...) -->
    <tr>
        <td>Bolt</td>
        <td>Scout</td>
        <td>200</td>
        <td>15</td>
        <td>1</td>
    </tr>
    <tr>
        <td>CordL29</td>
        <td>Destroyer</td>
        <td>900</td>
        <td>125</td>
        <td>174</td>
    </tr>
 
</table>
 
</body>
</html>

Let's pretend that this HTML page represents data for our fleet of planet-conquering space ships. Our intern, Pablos Hyperion Parris, can barely dress himself and certainly can't be trusted to do any programming. He can, however, write basic HTML. We've tasked him to update the HTML page with various stats regarding our fleet. You can open this HTML page and view it in your browser. Since it's just an HTML table there isn't much to it. Let's see if we can make this a bit more interesting?

  1. Within the folder you created for this article, right-click and create a new file named test1.html.
  2. Place your mouse within the <body> tags and click to set the cursor there.

  3. Next, locate the Insert toolbar (see Figure 1). If it isn't visible, go to the Window menu and select Insert. On the toolbar select Spry.

    Locate the Insert toolbar.

    Figure 1. Locate the Insert toolbar.

  4. Click the Spry Data Set menu item. This brings up the Spry Data Set wizard (see Figure 2).

    The Spry Data Set wizard lets you specify a data source.

    Figure 2. The Spry Data Set wizard lets you specify a data source.

    You have quite a few options here, but I'll keep it simple for this first demonstration. Leave the data type as HTML. The Data Set Name is just used to uniquely identify the data that will be displayed on the page. There is no need to change this. Also keep the Detect option at its default, Tables.

  5. Click the Browse button for Specify Data File. Select shipdata.html and Spry automatically loads the page and looks for tables (see Figure 3).

    The wizard automatically looks for tables in the HTML file.

    Figure 3. The wizard automatically looks for tables in the HTML file.

    As you can see, it has found the data from the HTML table and given you a nice preview of the values from each cell.

  6. Click the yellow arrow marker next to the table and the Data Preview section will be populated (see Figure 4).

    The populated Data Preview section.

    Figure 4. The populated Data Preview section.

  7. Click Next. This part of the wizard lets you define the behavior of the data set when it is rendered on the page (see Figure 5).

    Define the behavior of the data set when it is rendered on the page.

    Figure 5. Define the behavior of the data set when it is rendered on the page.

    You don't have to do anything here, but it would be helpful to modify a few settings.

  8. Click the Length(m), Crew_Size, and Combat_Kills columns. For each of these, change the type from string to number. This will aid in sorting the data correctly.
  9. Set Sort Column at the bottom to Name. This will sort the data set by ship name when the data is loaded.

  10. Click Next to the go to the last page of the wizard (see Figure 6).

    Define how the data set will be used on the page.

    Figure 6. Define how the data set will be used on the page.

    This page lets you define how the data set will be used on the page. You have four options and each is explained pretty well. For your first demo, select Insert table, the top-most option, and then click Done. Your HTML page should now look like this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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/SpryData.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.HTMLDataSet("shipdata.html", "shipdata", {sortOnLoad: "Name", sortOrderOnLoad: "ascending"});
ds1.setColumnType("Length(m)", "number");
ds1.setColumnType("Crew_Size", "number");
ds1.setColumnType("Combat_Kills", "number");
//-->
</script>
</head>
<body>
<div spry:region="ds1">
    <table>
        <tr>
            <th spry:sort="Name">Name</th>
            <th spry:sort="Class">Class</th>
            <th spry:sort="Length(m)">Length(m)</th>
            <th spry:sort="Crew_Size">Crew_Size</th>
            <th spry:sort="Combat_Kills">Combat_Kills</th>
        </tr>
        <tr spry:repeat="ds1">
            <td>{Name}</td>
            <td>{Class}</td>
            <td>{ds1::Length(m)}</td>
            <td>{Crew_Size}</td>
            <td>{Combat_Kills}</td>
        </tr>
    </table>
</div>
</body>
</html>

  11. Save the file and open it in your browser.

    The first thing you will notice is that the first ship is Big Bertha. This is proof that Spry was able to load the HTML and then sort it by name.

  12. Now click the headers. You can sort the data both ascending and descending by any column you want.

What's cool about this is that you took a static, simple HTML table and converted it into something much richer. Feel free to edit the table and change items like Crew_Size.

You should also play with adding more data to shipdata.html. If you do, be sure to clear your browser cache.

Note: You may have noticed that Step 2 of the wizard had a Disable Data Caching option. If you had selected this option, the generated Spry code would have included useCache: false, which would have also taken care of the caching issue.

Page 2 of 4
Previous Page
Next Page