Operation Manual

447
USING DREAMWEAVER
Building Spry pages visually
Last updated 3/28/2012
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
www.adobe.com/go/learn_dw_sdg_masterdetail_en.
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, add them automatically when you insert a table or repeat list, or you can wrap
them around existing tables or repeat list objects.
If you are adding a detail region, typically you add the master table object first and select the Update Detail Regions
option (see
“Dynamic Table layout” on page 443). The only value that is different and specific for a detail region is the
Type option in the Insert Spry Region dialog box.
1 Select Insert > Spry > Spry Region.
You can also click the Spry Region button in the Spry category in the Insert panel.
2 For the object container, select the <div> or <span> option. The default is to use a <div> container.
3 Choose one of the following options:
• To create a Spry Region, select Region (the default) as the type of region to insert.
• To create a Spry Detail Region, select the Detail Region option. You would only use a detail region if you want to
bind dynamic data that updates as data in another Spry region changes.
Important: You need to insert a detail region in a different <div> from the master table region. You might need to use
Code view to place the insertion point precisely.