| Template expressions and repeating regions have a special connection. In addition to performing the basic string and mathematical operations covered in the previous sections, Dreamweaver's template engine recognizes two unique expression objects: _document and _repeat. The _document object is used to reference template parameters. Note Because the _document object is implicitly available, it is seldom (if ever) used in the actual coding. In other words, @@(pageName)@@ is the same as @@(_document.pageName)@@.
The _repeat object, on the other hand, has numerous properties that can be used in coding template expressions. One propertyparticularly useful when working with structured data in tablesreturns the numerical index of the current row. The aptly named _index property returns 0 if the template expression is on the first row of the repeating region, 1 if on the second row, 2 if on the third row, and so on. This property is your key to changing the background color of alternating rows in a table. In a static fixed table, different classes are assigned to each row to achieve this effect; dynamic Web applications, on the other hand, accomplish this task with server-side code. In this lesson, you'll see how to do it with template expressions. Note There's no need to create a matching template parameter for _repeat object properties; as part of Dreamweaver's template language, they're built in.
Properties of the _repeat Expression Object Each repeating region on a page is represented in Dreamweaver's template language by a _repeat object. Seven different properties are available within each _repeat object, four of which return usable values: _index returns the numerical index of the current repeating element. _isFirst returns true if the current repeating element is the first in the region. _isLast returns TRue if the current repeating element is the last in the region. _numRows returns the total number of entries in the current repeating region.
The remaining three properties are used to reference related _repeat objects: _nextrecord returns the _repeat object of the repeating element that follows the current one. _prevRecord returns the _repeat object of the repeating element that precedes the current one. _parent returns the _repeat object of the enclosing repeat region when one repeating region is nested inside another.
Standard dot syntax is supported for working with _repeat objects. For example, if you want to discover whether the current repeating element is the second-to-last one, you use this syntax: @@(_nextrecord._isLast)@@. |
1. | In Dreamweaver's Files panel, expand the Templates folder, if necessary. Double-click dean_letter_v2.dwt to open it for editing.
The Capital Fund Participation table is perfectly suited for a repeating region. It's a straightforward assumption that more departments are likely to participate in the fundraising effort and should be listed in the table. CSS classes (.tr1 and .tr2) have already been defined that control the back ground color of the alternating table rows. Before you finish, you'll set up a template expression that switches between these two classes as each new repeating row is added. A bit of prep work is required, however, prior to coding the template expression.
| 2. | Place your cursor in the row for the Pediatrics department. In the Tag Selector, choose <tr.tr1> and press Ctrl+C (Command+C) to copy the row. Place your cursor in the final row of the table (first cell) and press Ctrl+V (Command+V) to paste the copied row. Dreamweaver alerts you that you cannot have two editable regions with the same name; click OK to acknowledge the warning.
 As forewarned by Dreamweaver, you next need to alter the names of the editable regions so that each editable region on the page has a unique name. In addition, you'll also change the specific text and values to more generic placeholders.
| 3. | In the newly pasted row, place your cursor in the editable region labeled pediatricsParticipation and, from the Tag Selector, choose mmtemplate:editable. In the Property inspector, change the current name to deptParticipation. Follow the same procedure to change the name of the other editable region in that row from pediatricsFunds to deptFunds. In the first column of the row, change the text Pediatrics to Department.
Tip I'll leave it up to you whether to change the current values in deptParticipation and deptFunds to some placeholder values. I find that often it's better to leave example content rather than explanatory text. You'll need to add one more editable region to the table row so that the name of the department can also be altered. After that's done, you can wrap the whole row in a repeating region.
| 4. | Select the just-entered text Department and, from the Insert bar's Common category, click Templates: Editable Region. When the New Editable Region dialog box appears, enter deptName in the Name field; click OK. From the Tag Selector, choose <tr.tr1> and then click Templates: Repeating Region. In the New Repeating Region dialog box, enter Depts in the Name field. Click OK when you're done.
 The placement of the repeating region in this table is key. In this scenario, the existing departments will always be present, and one or more departments can be added to the report. The repeating region will always appear in a child page, ready to be usedhowever, you can also delete the initial instance of the repeating region just by clicking the Remove button on the mini user interface. This gives the design tremendous flexibility and allows new rows to be added as needed.
With the repeating region in place, you're ready to add the class-switching template expression.
| 5. | Make sure that the <tr.tr1> tag is still highlighted in the Tag Selector, and switch to Code view. In the <tr> tag, change the attribute to this:
In Design view, the background color of the repeated row disappears. This happens because you replaced the class value with a template expressionand Dreamweaver evaluates template expressions only in child pages, not in templates themselves. So much for what's happening on the surface; let's examine what's going on behind the scenes.
As you can see, a conditional operator is used in the template expression in combination with the _repeat object's _index property. Here's the full expression:
@@(_index % 2 ? 'tr1' : 'tr2')@@
The expression can be translated into words this way: "If the index number of the current repeating row, modulo by 2, is equal to 1 or TRue, set the class attribute to tr2; if it's false, set it to tr1." I'm sure that's all perfectly understandableexcept the part about "modulo." Modulo is a mathematical operation in which the result is just the remainder of one number being divided by another, rather than the whole number and remainder, if any. It's also a very handy way to distinguish between every other number. Here are a few basic modulo equations:
0 modulo 2 = 0 1 modulo 2 = 1 2 modulo 2 = 0 3 modulo 2 = 1
You see the pattern. Every result is either 1 or 0which, in a binary system, evaluates to true or false. Remember that the first part of a conditional statement is evaluatedand if the answer is true, one result is applied; if false, the other result is used. That's exactly what's happening in our template expression.
Tip If you were not using CSS but still wanted to change the background color of the row, your template expression would read as follows: <tr bgcolor="@@(_index % 2 ? '#FFFFCC' : '##CAFFE4')@@">
| 6. | From the main menu, choose File > Save to store the revised template. As usual, click OK to acknowledge Dreamweaver's notice about an editable region within a block-level tag. From the Document toolbar, select File Management > Put.
You'll have a couple of different scenarios to try out in Contribute, but first you need to create a child page based on the just-uploaded template.
| 7. | In Contribute, click New Page. If you had Contribute open while working in Dreamweaver,click Refresh Templates when the New Page dialog box opens. Expand the Templates folder under the Design_Deploy site and select dean_letter_v2. In the Page Title field, enter Test Page and click OK.
If you scroll down to the bottom of the Capital Fund Participation table, the first thing you'll notice is that the row wrapped with the repeating region now has a background colorand, better yet, it's the appropriately colored background. The class is now rendered correctly because the template expression is contained within a child page. Let's see what happens when you add another row.
| 8. | In the mini user interface above the Repeat: Depts region, click Add (+) to create another instance of the repeating region. Press F12 to preview the page in a browser without the template regions.
 As expected, adding another row changes the class of that row. So far, so goodthe table looks as it should with one additional row or two. Further table expansion will continue in alternating colored rows. But what happens if no additional rows beyond the initial layout are required? You'll test that scenario in the next step.
| 9. | Place your cursor in any of the editable regions in the row last added, and click the Remove () button twice in the mini user interface.
The first click of Remove deletes the bottom row because it's currently active. After that row is removed, the next row above it becomes activeand clicking Remove again deletes that row. Now, only the original departments are displayed and all the scenarios are shown to work.
| 10. | Continue testing until you're satisfied. When you're done, click Cancel. Confirm that you want to delete the new page, by clicking Yes when prompted by Contribute.
Feel free to try replacement values for the placeholders on the page. When previewed and published, the format from static values through repeating region should appear seamless.
|
|
