Operation Manual

439
USING DREAMWEAVER
Building Spry pages visually
Last updated 3/28/2012
Displaying data with Spry
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 www.adobe.com/go/learn_dw_sdg_sprydataset_en.
For a video overview from the Dreamweaver engineering team about working with Spry data sets, see
www.adobe.com/go/dw10datasets.
For a video tutorial on working with Spry data sets, see www.adobe.com/go/lrvid4047_dw.
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.
Color to change Relevant CSS rule Relevant property to change
Background color of widget
in valid state
.confirmValidState input,
input.confirmValidState
background-color: #B8F5B1;
Background color of widget
in invalid state
input.confirmRequiredState,
.confirmRequiredState input,
input.confirmInvalidState,
.confirmInvalidState input
background-color: #FF9F9F;
Background color of widget
in focus
.confirmFocusState input,
input.confirmFocusState
background-color: #FFFFCC;