Monday, April 6, 2009

How to Create Dreamweaver Spry HTML data set?

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.

In Dreamweaver, Create a new HTML file and save it as shipdata.html, in this file copy and past the code below. You will see this is nothing more than a simple page with basic HTML and a table.

<!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>
</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.
  • Insert toolbar
  • Click the Spry Data Set menu item. This brings up the Spry Data Set wizard.
    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.
  • Spry Wizard
  • Click the Browse button for Specify Data File. Select shipdata.html and Spry automatically loads the page and looks for tables 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.
  • Spry Wizard
  • Click the yellow arrow marker next to the table and the Data Preview section will be populated. The populated Data Preview section.
  • Spry Wizard
  • Click Next. This part of the wizard lets you 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.
  • Spry Wizard
  • 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.
  • Spry Wizard
  • 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.
  • 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.

No comments:

Post a Comment