Displaying data with spry – Adobe Dreamweaver CC 2014 v.13 User Manual
Page 368
Displaying data with Spry
About Spry data sets
Create a Spry data set
Create a Spry region
Create a Spry repeat region
Create a Spry repeat list region
Note: Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your
page, you cannot add new spry widgets.
About Spry data sets
A Spry data set is fundamentally a JavaScript object that holds a collection of data that you specify. With Dreamweaver you can quickly create this
object and load data from a data source (such as an XML file or HTML file) into the object. The data set results in an array of data in the form of a
standard table containing rows and columns. As you’re creating a Spry data set with Dreamweaver, you can also specify how you want to display
the data on a web page.
You can think of a data set as a virtual holding container whose structure is rows and columns. It exists as a JavaScript object whose information
is only visible when you specify exactly how to display it on the web page. You can display all of the data in this holding container, or you might
choose to display only selected pieces of it.
For complete information on how Spry data sets work, see
For a video overview from the Dreamweaver engineering team about working with Spry data sets, see
.
For a video tutorial on working with Spry data sets, see
.
Create a Spry data set
Create a Spry HTML data set
1. If you are only creating a data set, you do not need to worry about the insertion point. If you are creating a data set and also inserting a
layout, make sure that the insertion point is where you want to insert the layout on the page.
2. Choose Insert > Spry > Spry Data Set.
3. In the Specify Data Source screen, do the following:
Select HTML from the Select Data Type pop-up menu. (It’s selected by default.)
Specify a name for the new data set. The default name is ds1 the first time you create a data set. The data set name can contain
letters, numbers, and underscores, but cannot start with a number.
Specify the HTML elements in your data source that you want Dreamweaver to detect. For example, if you’ve organized your data inside
a div tag, and you want Dreamweaver to detect div tags instead of tables, select Divs from the Detect pop-up menu. The Custom option
lets you type any tag name that you want to detect.
Specify the path to the file that contains your HTML data source. The path can be a relative path to a local file in your site (for example,
data/html_data.html), or an absolute URL to a live web page (using HTTP or HTTPS). You can click the Browse button to navigate to a
local file and select it.
Dreamweaver renders the HTML data source in the Data Selection window, and displays visual markers for the elements that are
eligible as containers for the data set. The element you want to use must already have a unique ID assigned to it. If it doesn’t,
Dreamweaver will display an error message, and you’ll need to go back to the data source file and assign a unique ID. Additionally,
eligible elements in the data source file cannot reside in Spry regions, or contain other data references.
Alternatively you can specify a Design Time Feed as your data source. For more information, see Use a design-time feed.
Select the element for your data container by clicking one of the yellow arrows that appears in the Data Selection window, or by
choosing an ID from the Data Containers pop-up menu.
361