DMX Template Repeating Regions and Tables

Just what are the differences between Repeating Regions and Repeating Tables as related to Dreamweaver Templates and while yer at it, why not provide some examples, will ya!?

The tutorial available at dwfaq.com relating to the basics of Repeating Regions (http://www.dwfaq.com/tutorials/basics/repeatregions.asp) is a grand example/explanation of Dreamweaver MX Repeating Regions.

Similarly, the tutorial at Macromedia DevNet relating to the basics of Repeating Tables (http://www.macromedia.com/devnet/mx/dreamweaver/articles/dw_templates.html) is a grand example/explanation of Dreamweaver MX Repeating Tables.

However, neither tutorial goes into many of the reasons why you would want to use a repeating region instead of a standard editable region, or a repeating table.

Using the Repeating Table Object allows you to create a repeating table as you would with any other table but also to define the row number that is to be the repeating row element of the table. When you create a Repeating Table on your page, Dreamweaver MX makes each cell of the repeating row contain an editable region, but does not allow you to define the name of each of these editable regions. When inserting the repeating table, you are also not allowed to define accessibility items for the repeating table. These are pretty serious drawbacks to the repeating region interface, in our opinion.

Repeating Table code:
< table width="600" border="1" cellspacing="0" cellpadding="5">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>

<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>

< /table>

In this example, the only row in the table is defined as a repeating row. DMX's MUI (mini-user interface) for this region will allow you to specify how many times this row should be repeated on the respective child pages. Also note that *each* cell within the repeating row has been made into a separate editable region.

Repeating Regions are useful for providing a method of repeating content that is not contained within a table, or is contained within a table that you don't want to be a default repeating table (in other words, you'd like more control over the structure of the region than DMX allows with a Repeating Table Region). With this in mind, if accessibility and control are your concerns, it is best to custom build your own repeating table using the table, repeating and editable region objects instead of the repeating table object. You could even use a repeating region to define a pseudo repeating column if you do it carefully!

Repeating Region Code:
< !-- TemplateBeginRepeat name="RR_Data" -->Repeating Data

Sample 1:

This sample uses a repeating region for an unordered list. The advantage of doing it this way is that a Contribute user can reorder, add and remove editable list items while the template author retains control of the area for styling/layout reasons.

Create a new html template using the File » New... dialog.
Using code view, add the code in the Sample 1 Code listing to the body of this new template.

Sample 1 Code: Simple Repeating Region
<ul>
<li>Repeating List Item @@(_index+1)@@</li>
</ul>
Save the template as RRSample1.dwt
Create a new page from this template and save it as RRSample1.htm
Use the repeating region MUI to add/remove and change the order of the repeating rows (add as many as you like and change the content of each editable area to see the true effects of the MUI controls.)

Screenshot Sample 1 Template

NOTE: In the screenshots you would normally see an @@ icon where there is an ?= icon which represents a template expression. I've used our template expression extension to change this. More information on this extension can be read here.

Screenshot Sample 1 Child (Instance)

Sidenotes for Sample 1:
A. What's that @@(_index+1)@@ part do? This is a template expression that displays a value from 1 to the number of repeated list elements (the value of _index, i.e., the repeat, is incremented by 1 because the count (_index) starts at 0 just like a variable in JavaScript.
B. When saving the template, a warning is displayed by Dreamweaver MX that indicates that the repeating region is inside a block level element such as P and advises against it (see Screenshot Error 1). This is true in some cases but in this instance, we don't want the user to be able to edit out the list item and mess up the formatting. So for this sample, it is a nuisance message.

Screenshot Error 1

Figure 1: Screenshot of Dreamweaver warning message

Sample 2:

This sample uses a repeating region to create a pseudo ordered list element on the template driven page. The advantage to doing it this way is that you have total control as the template author over the list's CSS without having to worry too much about cross-browser/platform idiosyncrasies.

Create a new html template using the File » New... dialog.
Using code view, add the code in the Sample 2 Code listing to the body of this new template.

Sample 2 Code: Simple Repeating Region
<p>
@@(_index+1)@@ Artificial List Item)<br>
</p>
Save the template as RRSample2.dwt
Create a new page from this template and save it as RRSample2.htm
Use the repeating region MUI to add/remove and change the order of the repeating rows (Add as many as you like and change the content of each editable area to see the true effects of the MUI elements.)

Screenshot Sample 2 Template

Screenshot Sample 2 Child (Instance)

Sidenotes for Sample 2:
A. The same sidenotes apply as outlined for Sample 1 above.

Sample 3:

This sample uses the table, repeating region and editable region objects to build a complex repeating table which does wonderful things, from scratch.

Create a new html template using the File » New... dialog.
Using code view, add the code in the Sample 3 Code listing to the body of this new template.

Sample 3 Code: Simple Repeating Region
<table width="600" border="1" cellspacing="0" cellpadding="5">
<tr valign="top">
<th nowrap>Row #</th>

<th nowrap>Header @@(_index+1)@@</th>

</tr>

<tr>
<td align="center" valign="top">@@(_index+1)@@</td>

<td>Add Content</td>

</tr>

</table>
Save the template as RRSample3.dwt
Create a new page from this template and save it as RRSample3.htm
Use the repeating region MUI to add/remove and change the order of the repeating rows (add as many as you like and change the content of each editable area to see the true effects of the MUI elements.)

Screenshot Sample 3 Template

Screenshot Sample 3 Child (Instance)

Sidenotes for Sample 3:
A. The same sidenotes apply as outlined for Sample 1 above.
B. An example of a complex repeating region/table combination is available at Macromedia as a Technote (http://www.macromedia.com/go/16317).

Truly, both the repeating region and repeating table have their uses in template development. With the introduction of Macromedia Contribute into the product stable, these template elements are even more important to your development process. It's up to you how you apply each of these template elements to your project, if at all. Our goal here was to try to provide information related to the differences between the two elements and some possible uses of each, that goes beyond that which was discussed within our book.

Downloads:

Working files for you to download are available here: RepeatRegions.zip.