Creating a Spry data set

Build a Spry data set in a few easy steps. You can build both HTML and XML data sets.

• View full-size on Adobe TV
• View more videos like this

Requirements

To complete the tasks demonstrated in this tutorial, you need the following software and files:

Adobe Dreamweaver CS4

• Try
• Buy

Sample files

lrvid4047_dw.zip (ZIP, 5.7MB)

Prerequisite knowledge

Basic knowledge of the Dreamweaver interface

Creating a Spry data set

Spry data sets allow you to dynamically display related data throughout your entire website without having to rely on databases or server-side scripting. In this tutorial, you will learn how to build an interactive master detail region by using a Spry HTML data set in Adobe® Dreamweaver® CS4.

Building a Spry data set

Dreamweaver makes building a Spry data set a relatively simple matter. You can build a Spry data set using an interface resembling a wizard that walks you through the process. To build a Spry data set:

1. Open an HTML document containing a calendar of events in Dreamweaver. In this tutorial, you'll be creating a Spry data set from the calendar’s table structure.
2. Go to the Insert panel and scroll to the Spry section. Expand the Spry menu by clicking the arrow.

   

   Figure 1: The Insert panel
3. Choose Spry Data Set. The Spry Data Set wizard opens as a separate window.

   

   Figure 2: The Spry Data Set wizard
4. Choose Select Data Type > HTML.
5. In the Data Set Name box, enter a descriptive name for the data source.

   Tip: When working with multiple data sets, it is strongly recommended that you give your data source a name that relates closely to its content, such as dsCalendar (ds for data source, and Calendar for the calendar information that will be displayed.)

6. Specify a source data file by clicking Browse. The Select Source File dialog box opens and displays your site’s root directory.

   

   Figure 3: Selecting a source file
7. Select the appropriate file from the root directory and click OK. When you select a file, a preview of that file appears in the Data Selection window.
8. If you have multiple elements on the page, you need to select a data source. The data source can be any element on the page that has an ID. A yellow marker indicates which elements can serve as data sources (also called data containers).
9. To select a data container, click the yellow arrow next to the appropriate element. Once you select a data source, the Data Preview window is populated with data from the data source.

   

   Figure 4: Selecting a data container
10. Now you can use advanced data selection, such as class selectors, to filter which elements are brought into the data source. For the purpose of this tutorial, select all data by clicking Next at the bottom of the window. A preview of the data appears in the Data Preview window on the next screen of the wizard. Set Data Options.

Sorting and displaying data

1. You can now sort and change how the data is displayed. To sort data and change the way it’s displayed: Click to select the When column in the Data Preview table. Change the data type of this column from String to Date using the Type menu at the top of the window. Dreamweaver now recognizes all entries in the column as dates and sorts them as such.

   

   Figure 5: Sorting and displaying data
2. Go to Other Options at the bottom of the interface window. Click the Sort Column menu and choose When. Then, select Ascending. The earliest date in the calendar now appears at the top of the column and the latest date at the bottom.

   

   Figure 6: Changing sort criteria
3. Click Next. The Spry Data Set wizard will take you to the next phase of the building process, Choose Insert Options. This step allows you to determine how the data will appear on the web page.

   

   Figure 7: Choosing insert options

   Note:If you choose the Do Not Insert HTML option at the bottom of the Choose Insert Options window, you can go to the Bindings panel later on, take the bindings from the data set, and populate the page with them. Other options available in the interface include Insert Table, Insert Master Detail/Layout, Insert Stacked Containers, and Insert Stacked Containers With Spotlight Area.

4. To preserve interactivity, select Insert Master/Detail Layout.
5. Rather than accepting the default settings, click Set Up. A dialog box opens prompting you to select Master and Detail Columns.

   

   Figure 8: The Insert Master/Detail Layout dialog box
6. The first column is selected as the Master Column by default. To change this column or add additional columns, click the Plus button. Click the When, What, and Where columns to designate them as additional Master Columns.
7. Use the down- and up-facing arrows to change the stacking order. Click the up-facing arrow to move the What column to just after the Thumb column.
8. Repeat Steps 6-7 as needed to adjust the order of the columns to your liking.
9. Click OK to apply your parameters. Click Done and the wizard closes.

You have successfully built a master region. The columns are inserted on your HTML page in the order and format you specified during the set-up process.

Figure 9: Building the master region

Tip: You can now preview the interactivity of your web page. To preview your web page, click Live View. As you click individual thumbnails on the web page, the detailed area to the right of the thumbnails automatically update.

Updating source data

Updating the source file causes any HTML data set based on it to update as well, without any additional input. Thus, a simple edit on an existing table can cause site-wide updates. To update source data:

1. Return to the document containing the original calendar table. Change a few of the dates and then choose File > Save.

   

   Figure 10: Updating source data
2. Return to the HTML page containing the Spry data set based on the calendar.
3. Choose File > Save. A dialog box prompting you to upload any necessary dependent JavaScript or CSS files to your web server appears. Click OK to upload the updated files.
4. Click Live View and scroll down as needed to preview the new dates.

Where to go from here

• Dreamweaver CS4 Help and Support
• Learn Dreamweaver CS4
• Working with Related Documents, by James Williamson
• Using JavaScript, DOM, and Spry code hinting, by James Williamson
• Spry Tooltip and form validation widgets, by James Williamson
• Lynda.com

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the authors