Create a spry region – Adobe Dreamweaver CC 2014 v.13 User Manual
Page 373
Do Not Insert HTML
Select this option if you want to create a data set, but do not want Dreamweaver to insert an HTML layout for the data set. The data set becomes
available from the Bindings panel (Window > Bindings), and you can manually drag pieces of the data set to the page.
Even if you create a data set without inserting a layout, you can still insert one of the available HTML layouts at any time. To do so, double-click
the name of the data set in the Bindings panel, click through to the Choose Insert Options screen, select your layout, and click Done.
Note: You can also drag the name of the data set from the Bindings panel to the insertion point on the page. When you do so, the Choose Insert
Options screen opens. Make your layout selection and click Done.
Edit a data set
After you create a Spry data set, you can edit it at any time.
In the Bindings panel (Window > Bindings), double-click the name of your data set, and make your edits.
Note: When you edit a data set, and select a new layout in the Choose Insert Options screen, Dreamweaver does not replace whatever layout is
on the page, but rather inserts a new one.
Use a design-time feed
If you are working with data that is still being developed, you may find it useful to use a design-time feed. For example, if the server developer is
still finalizing the database behind your XML data file, you can use a test version of the file to design your page separately from the database
development.
When you use a design-time feed, Dreamweaver only populates your work environment with data from that feed. References to the data source
that exist in the page code remain references to the real data source you want to use.
1. Begin creating a Spry Data Set (see previous procedures for instructions).
2. In the Specify a Data Source screen, click the Design-time feed link.
3. Click the Browse button to locate the design-time feed and click OK.
About Spry data selectors
When you use Dreamweaver to create a Spry data set, Dreamweaver includes all of the data in a selected container by default. You can refine this
selection by using CSS data selectors. CSS data selectors let you include only a portion of the data from the data source by allowing you to
specify CSS rules that are attached to certain pieces of data. For example, if you specify .product in the Row Selectors text box of the Specify
Data Source screen, Dreamweaver creates a data set that only contains rows with the .product class assigned to them.
You must select the Advance Data Selection option in the Specify Data Source screen for the data selectors boxes to become active. If you enter
data selectors and deselect the option, Dreamweaver retains what you typed in the boxes, but does not use them as filters for the data set.
About dynamic Spry master tables and updating detail regions
One of the most common uses of Spry data sets is to create one or more HTML tables that dynamically update other page data in response to a
user action. For example, if a user selects a product from a list of products in a table, the data set can immediately update data elsewhere on the
page with detailed information about the selected product. With Spry, these updates do not require a page refresh.
These separate page regions are referred to as master and detail regions. Typically, one area on the page (the master region) displays a list of
categorized items (for example, a list of products), and another area of the page (the detail region) displays more information about a selected
record.
Each data set maintains the notion of a current row, and by default, the current row is set to the first row of data in the data set. When a user
makes different selections in a master region (again, taking the example of a list of different products), Spry actually changes the data set’s current
row. Because the detail region is dependent on the master region, any changes that occur from user interaction with the master region (for
example, selecting different products), result in changes to the data displayed in the detail region.
Dreamweaver creates master/detail layouts for you automatically, so that all of the correct associations between master and detail regions are in
place. But if you want to create a dynamic master table on your own, you have the option of preparing it for association with a detail region later.
When you select the Update Detail Regions When Row is Clicked Option (in the Insert Table dialog box), Dreamweaver inserts a spry:setrow tag
inside the tag for the repeating row of your dynamic table. This attribute prepares the table as a master table that has the ability of resetting the
current row of the data set as the user interacts with the table.
For more information on creating master/detail regions by hand, see the Spry Developer Guide at
Create a Spry region
The Spry framework uses two types of regions: one is a Spry Region that wraps around data objects such as tables and repeat lists, and the other
is a Spry Detail Region that is used in conjunction with a master table object to allow dynamic updating of data on a Dreamweaver page.
All Spry data objects must be enclosed in a Spry Region. (If you try to add a Spry data object before adding a Spry region to a page,
Dreamweaver prompts you to add a Spry region.) By default, Spry regions are in HTML div containers. You can add them before you add a table,
366