Creating a Spry XML data set
Content
Created
2 March 2009
Requirements
Prerequisite knowledge
Basic HTML and XML knowledge and familiarity with the Dreamweaver workspace, site management, and building websites.
User level
Intermediate
Required products
- Dreamweaver CS4 (Download trial)
- ColdFusion 8 (Download trial)
Sample files
- xml_dataset_sample.zip (3 KB)
In Creating an HTML data set, I demonstrated how easy HTML data sets are to use in Dreamweaver CS4. HTML data sets are tables, or other structured bits of HTML, that Spry can load via Ajax. Once loaded, this data can be sliced and diced (that is, sorted, filtered, and more) in a variety of ways, making it rather easy to develop dynamic Ajax applications without needing any knowledge of JavaScript or server-side technology.
In this article I'll introduce XML data sets. I'll demonstrate that using XML data sets is as easy as using HTML data sets in Dreamweaver CS4. I'll also discuss how you can use ColdFusion to dynamically create the XML used by Spry.
Note: Before you begin, 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; I used the name dwarticlexml. You will also need to have ColdFusion 8 installed and running with the site used in Dreamweaver. Be sure you install the example applications with ColdFusion as the database used for this tutorial's dynamic example will use them. For more information about defining a site, refer to Setting up a Dreamweaver site in Dreamweaver Help. For help with ColdFusion, read Setting up a ColdFusion development environment.
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.
- 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.
- Place your cursor after the
<body>tag. Ok, now for the fun part. - On the Insert menu, select Data > Spry Data Set. This opens the window shown in Figure 1.
- By default Dreamweaver will want to create an HTML data set. Simply switch the Data Type to XML.
- 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).
- 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
jedistag, but each individualjediwas wrapped in ajeditag. Figure 3 shows what happens when you select the jedi node.
Dreamweaver has recognized that the jedi tag wraps each individual row of data. The preview confirms this. Click Next.
- 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.
- 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.
A dynamic example
In the previous example, I demonstrated Spry working with an XML file that is hard coded on the file system. For people without a proper application server like ColdFusion, this manual solution may be the only solution they have. But if you do have ColdFusion installed, then why not use the power of CFML to help you create dynamic XML to be used within your Spry applications? Let's look at how you can use ColdFusion to generate XML.
Note: For help with setting up a ColdFusion application server, read Setting up a ColdFusion development environment.
- Create a new file named artdata.cfm. Open it and remove the default HTML that Dreamweaver put into the file.
- Select the Server Behaviours tab in Dreamweaver. You'll see a list of items that you may, or may not, have to complete to tell Dreamweaver about your local ColdFusion installation. This should be a pretty simple set of tasks and will only need to be done once. If your Server Behaviours panel looks like the one in Figure 5, you are all set.
- As item 6 says in the Server Behaviors panel, click the + button and choose Recordset. This opens a panel where you can configure a database query. For the name, use Art. For the database, select cfartgallery. The table should already be set as APP.ART (see Figure 6). Leave columns as All and click OK.
Dreamweaver will insert the following query into your template.
<cfquery name="Art"
datasource="cfartgallery">
SELECT *
FROM APP.ART
</cfquery>
- Now you need to generate XML from this data. You don't have enough time to do a full explanation of the code below. Also note that there are multiple ways to generate XML within ColdFusion. Your code will simply create an XML document from the query and serve it to the user. Copy and paste the following code to the file, after the query.
<cfxml variable="xml">
<art>
<cfoutput query="art">
<piece>
<name>#artname#</name>
<description>#description#</description>
<price>#price#</price>
<image>#largeimage#</image>
</piece>
</cfoutput>
</art>
</cfxml>
<cfcontent type="text/xml" reset="true"><cfoutput>#xml#</cfoutput>
The <cfxml> tag is used to create an XML document from text inside it. I wrap the outer portion of my XML with the <art> tag. Next I loop over the query using <cfoutput>. I wrap each record with <piece> tags and then output a few of the columns. (Note that the <cfsavecontent> tag could have been used instead of <cfxml>. ColdFusion provides many ways to solve common problems!)
- Save the file and open it in your browser. You should see generated XML from the art information in the database. I selected to output the name, price, and largeimage columns from the table. I could have chosen other columns as well. What you select from the database and how you output it in XML is really up to your application.
Ok, so now you have ColdFusion generating XML from the database. Even if you aren't a ColdFusion developer (not yet anyway), I hope you can appreciate how simple it was to create the XML dynamically.
Note: To find out how to generate XML easily from ColdFusion queries (and other forms of data), refer to my project, toXML. This is a simple ColdFusion Component (CFC) that handles the grunt work of creating XML.
Next, you want to get it into an Ajax-based application.
- Create a new file in Dreamweaver and name in test2.html.
- Click right after the body tag.
- On the Insert menu, select Spry Data Set. Switch the type to XML and select artdata.cfm. As with the previous example, Dreamweaver can parse the XML, but you have to actually click the piece item to let Dreamweaver know what part of the XML represents a row. Your screen should resemble Figure 7.
- Click Next. Once again you have the option to tell Dreamweaver how to treat the data. Select the price column and set the type to number. Under Sort Column, set the value to Name. Click Next.
- In the previous example you told Dreamweaver to insert a table. This time you are going to get a bit fancy and create a master/detail layout—select this option (it's the second one), and then click Setup.
What this option screen represents is how the page will determine what is shown in the master list versus what is shown in the detail (see Figure 8). Dreamweaver used the first column, name, for the master list. This means your page will create a list of names. You can then click that name to get a detail of the other columns: description, price, and image. You can choose to modify this, but the defaults are actually rather good, so for now, just click OK. Click Done and Dreamweaver inserts the code onto the page.
- Before you view the page, you need to make one quick change. You included the image of the art piece on the page, but it would be nice to show the actual picture instead of just the file name. Find the following snippet in the file:
<div class="DetailColumn">{image}</div>
...and change it to:
<div class="DetailColumn"><img src="/cfdocs/images/artgallery/{image}"></div>
This creates a dynamic image based on the data that Spry loads in from the XML.
- To finish, save the file and view it in your browser.
Note that you can now click and browse the art pieces—all without writing one line of JavaScript! (Well, obviously some JavaScript was involved, but Dreamweaver wrote it for you!)
Note: In addition to HTML and XML, Spry also supports TSV and CSV data sets. These are tab- and comma-separated files. Although not common, if you have data in that format you can make use of it in Spry. Spry also supports JSON. JSON is probably the best way to create data for Ajax-based applications as it tends to have the smallest size footprint. Dreamweaver doesn't support easy creation of JSON-based data sets; however, once you get more comfortable with it you should definitely look into it. ColdFusion 8 added native support for generating JSON.
Where to go from here
In this article, I demonstrated how easy Dreamweaver makes it to work with Spry. For people uncomfortable with JavaScript, Dreamweaver CS4 goes a long way to making it as easy as a mouse-click to develop Ajax applications. To learn more, check out the Spry Technology Center and the Spry site on Adobe Labs.
More Like This
- Styling and inserting a Spry Menu Bar 2.0 widget with the Adobe Widget Browser
- Using the Adobe Widget Browser
- Beginner's guide to databases
- Managing multiple subscriptions in PHP
- Building a subscribe/unsubscribe app in PHP with Dreamweaver CS3
- XSL overview
- Which server-side technology should I choose?
- Creating master and detail ColdFusion pages
- Creating user-defined functions for ColdFusion 8 in Dreamweaver CS4
- Creating a ColdFusion upload page in Dreamweaver CS4
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 |
