Creating a Spry HTML data set
Created
26 January 2009
Requirements
Prerequisite knowledge
Basic HTML knowledge and familiarity with the Dreamweaver workspace, site management, and building websites.
User level
Intermediate
Required products
- Dreamweaver (Download trial)
Sample files
- html_dataset_sample.zip (5 KB)
The Adobe Spry framework has made Ajax easy and approachable for non-developers. It is, by far, one of the simplest ways to take data, load it via Ajax, and display it on a web page. As easy as Spry makes it, there are still times when the actual creation of the data may be a bit difficult. The person creating the website may not know how to create XML or how to write the SQL to get the data. But what if you could leverage your existing HTML knowledge to use the common table as your data source? Or any other simple HTML? The Spry HTML data set lets you create a data set from any structured HTML. To make it even easier, Dreamweaver provides a simple way to use Spry as this article demonstrates.
Note: Before starting, please be sure you have a website defined in Dreamweaver and then download the sample files that accompany this article. Unzip the files into a new folder. You can name this anything you want, but I used the name dwarticlehtml.
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?
- Within the folder you created for this article, right-click and create a new file named test1.html.
- Place your mouse within the
<body>tags and click to set the cursor there. - 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.
- Click the Spry Data Set menu item. This brings up the Spry Data Set wizard (see Figure 2).
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.
- Click the Browse button for Specify Data File. Select shipdata.html and Spry automatically loads the page and looks for tables (see Figure 3).
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.
- Click the yellow arrow marker next to the table and the Data Preview section will be populated (see Figure 4).
- 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).
You don't have to do anything here, but it would be helpful to modify a few settings.
- 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.
- Set Sort Column at the bottom to Name. This will sort the data set by ship name when the data is loaded.
- Click Next to the go to the last page of the wizard (see Figure 6).
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>
- 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.
- 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.
A more advanced example
This example explores some of the options you may need when working with HTML data sets. Check out a new HTML table (again, stripped down a bit from the version you downloaded); this table is a modified version of the previous list of space ships and is included in the file shipdata2.html:
<!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>
<td>Lady Luck</td>
<td>Destroyer</td>
<td>900</td>
<td>125</td>
<td>311</td>
</tr>
<tr class="destroyed">
<td>Crimson Falcon</td>
<td>Destroyer</td>
<td>900</td>
<td>150</td>
<td>210</td>
</tr>
<tr>
<td>Winged Glory</td>
<td>Battlestar</td>
<td>1200</td>
<td>250</td>
<td>290</td>
</tr>
<tr class="destroyed">
<td>Silent Death</td>
<td>Scout</td>
<td>200</td>
<td>15</td>
<td>6</td>
</tr>
<!--(Rows removed...) -->
</table>
</body>
</html>
Note that the first row of the table is not a header row. Note also that some rows have a class applied, destroyed. This represents ships that were lost in combat duty. Let's build a new version of the Ajax application that will only display destroyed ships and correctly handle the lack of a proper header.
- Within Dreamweaver create a new file named test2.html.
- Place your cursor between the two body tags and then click Spry Data Set in the Insert menu.
- This time select shipdata2.html in the Browse section. Select the table in the Data Selection portion. Then select the check box next to Advanced data selection.
At this point, all the rows of the table should show up in Data Preview. You want to filter the results to those with the destroyed class applied.
- In the Row Selectors field, change tr to tr.destroyed (see Figure 7). As soon as you click off of this field, the preview should update to just those ships that were marked destroyed.
- Click Next. Under Other Options, clear the check box Use first row as header. This lets Spry know that the first row isn't a header row.
You can then optionally choose to sort, but you will need to sort by column0. Spry will name each column columnX where x is the number of the column minus one. (So the first column is column0, the second column is column1, and so one [see Figure 8]. Yes, 0-based indexes are a bit crazy, but what do you do?) You can also apply the number type to column2, column3, and column4. Lastly, let's go ahead and disable data caching as mentioned earlier.
- Click Next and select Insert table again and then click Done.
There is no need to display the complete HTML here (you can find all the completed files within a completed subfolder of the ZIP archive) but I will point out this line:
var ds1 = new Spry.Data.HTMLDataSet("shipdata2.html", "shipdata", {firstRowAsHeaders: false, useCache: false, tableModeEnabled: false, sortOnLoad: "column0", sortOrderOnLoad: "ascending", rowSelector: "tr.destroyed", dataSelector: "td"});
This is the line that sets up the Spry data set. Note that you have more information here as you supplied more options while stepping through the wizard. Also note the generated HTML code for the headers:
<th spry:sort="column0">Column0</th>
<th spry:sort="column1">Column1</th>
<th spry:sort="column2">Column2</th>
<th spry:sort="column3">Column3</th>
<th spry:sort="column4">Column4</th>
You can easily edit this to show a correct header value:
<th spry:sort="column0">Name</th>
<th spry:sort="column1">Class</th>
<th spry:sort="column2">Length(m)</th>
<th spry:sort="column3">Crew Size</th>
<th spry:sort="column4">Combat Kills</th>
Note, however, that although the values inside the TH tags were changed, I did not change the value specified to the spry:sort attribute. This needs to remain as is in order for Spry to recognize which columns you are sorting.
Note: In case you are curious, the Spry HTML data set constructor also has options for specifying custom column names when the actual data set doesn't provide it.
Creating HTML data sets with other content
So far you've only looked at using tables for Spry HTML data sets. Although this works easily enough, it is not the only type of content that can be converted into a data set. Spry can try to turn other types of content into data sets as well, including DIV, SPAN, UL and other tags. Check out the following simple example using an unordered list. I've created yet another simple HTML page that will serve as your data: captaindata.html. It contains a list of captains:
<!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>
<ul id="captains">
<li>Picard</li>
<li>Kirk</li>
<li>Camden</li>
<li>Stroz</li>
<li>Sharp</li>
<li>Solo</li>
<li>Reynolds</li>
<li>Adama</li>
</ul>
</body>
</html>
There isn't anything too special about this HTML code, but do note that I used an ID for the unordered lists. If you decide to use non-tabular data for your data set, an ID or class value must be specified. Outside of that, though, the list is simply a set of names.
- Create a new file in Dreamweaver, test3.html, and as before, place your cursor between the body tags and click the Spry Data Set button on the Insert menu.
- In the Browse menu, select captaindata.html and switch the Detect option to Lists. It should pick up the unordered list, but when you select it, the preview isn't rendered correctly (see Figure 9).
You need to give Spry a bit more help in determining how to present the data.
- Select Advanced data selection again and in Row Selectors enter li. This tells Spry to use the
LItag to represent a row. Now the preview should correctly show the list of names (see Figure 10).
- Click Next. In the next panel, rename column0 to Captains and set Sort Column to Captains (see Figure 11).
- Click Next, select Insert table once again, and click Done. Your page is now complete!
Now whenever new data is entered into the list, you can display it on your page automatically and in alphabetical order.
Where to go from here
In this article, I've covered Spry HTML data sets and demonstrated how easy Dreamweaver makes it to use them. For people who are not comfortable with Ajax, Dreamweaver CS4 really goes a long way to make it as painless as possible.
If you feel a bit more comfortable to look under the hood, refer to the official Spry docs for the HTML data set and be sure to check out the main Spry site in Adobe Labs. Spry is a great framework that I've used for a few years now and I can definitely recommend giving it a closer look.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License
More Like This
- Integrating Flash content with the HTML environment
- Customizable starter designs for beginners
- Adding database-driven shipping charge functionality to an online store
- Applying design to Spry widgets
- Building a photo album with the Spry framework
- Creating dynamic tables with the Spry framework
- Creating user-defined functions for ColdFusion 8 in Dreamweaver CS4
- Beginner's guide to databases
- Building a subscribe/unsubscribe app in PHP with Dreamweaver CS3
- Creating custom server behaviors and Dreamweaver extensions
Tutorials and samples |
| 04/23/2012 | Resolution/Compatibility/liquid layout |
|---|---|
| 04/20/2012 | using local/testing server with cs5 inserting images look fine in the split screen but do not show |
| 04/18/2012 | Ap Div help |
| 04/23/2012 | Updating |
