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). 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.
  4. Choose your Spry data set from the menu.
  5. If you want to create or change the region defined for an object, select the object and choose one of the following:
    Wrap Selection
    Puts a new region around an object.

    Replace Selection
    Replaces an existing region for an object.

  6. When you click OK, Dreamweaver puts a region placeholder into your page with the text “Content for Spry Region Goes Here.” You can replace this placeholder text with a Spry data object such as a table or repeat list, or with dynamic data from the Bindings panel (Window > Bindings).
    Bindings tab showing dynamic display elements.
    The Bindings panel displays the available data from the data set.

    Note: In the Bindings panel, there are some built-in Spry elements, ds_RowID, ds_CurrentRowID, and ds_RowCount, also listed. Spry uses these to define the row a user clicked in when determining how to update dynamic detail regions.
  7. To replace the placeholder text with a Spry data object (for example, a Spry Table), click the appropriate Spry data object button in the Spry category of the Insert panel.
  8. To replace the placeholder text with dynamic data, use one of the following methods:

    • Drag one or more elements from the Bindings panel on top of the selected text.

    • In Code view, type the code for one or more elements directly. Use this format: {dataset-name::element-name}, as in {ds1::category}. or {dsProducts::desc}. If you are only using one data set in your file, or if you are using data elements from the same data set that you defined for the region, you can omit the data set name and simply write {category} or {desc}.

    Regardless of which method you use to define the contents of your region, the following lines are added to your HTML code:

    <div spry:region="ds1">{name}{category}</div> 
<div spry:region="ds2">{ds1::name}{ds1::descheader}</div>