Using Dreamweaver Template Expressions
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Using Template Expressions
Dreamweaver MX introduced several extremely powerful template features, including optional regions, repeating regions, and nested templates. Although more obscure than these high-profile options, the new template expressions feature offers a great deal of flexibility and power. You can even use template expressions as the base for a linear navigation system, as you'll see in this section.
In essence, a template expression is a variable or parameter established in the template that can be set independently in each template-derived document or instance. There are several types of template parameters: boolean (true/false), text, number, color, or URL. When entered into the template, the TemplateParam tag is used:
<!-- TemplateParam name="saleURL" type="URL" value="../sale/special.htm" --> <!-- TemplateParam name="onsale" type="boolean" value="true" -->
If entered by hand, TemplateParam code should be placed in the <head> section. The user interface for creating template parameters is somewhat hidden. This type of code is also generated whenever an editable attribute is created.
After the template parameter is set up, we can place references to the parameter, known as template expressions, anywhere in the page. Template expressions are written in two ways:
As a comment:
<!-- TemplateExpr: expr = "onsale"-->
As a parenthetical:
@@(onsale)@@
The two formats are interchangeable; I typically use the parenthetical format for two reasons. First, it's shorter and quicker to write. Second, it has the advantage of displaying in the Design view with its own symbol, as seen in Figure 1. This symbol can be seen only when Invisible Elements is turned on.
)
Figure 1 Template expressions should be hand-coded or entered through the
Property inspector; use the parenthetical syntax to display a special template
expressions symbol.
When Dreamweaver makes an instance of a template that contains a template expression, the code syntax changes. The TemplateParam tag becomes an InstanceParam tag:
<!-- InstanceParam name="saleURL" type="URL" value="sale/special.htm" --> <!-- InstanceParam name="onsale" type="boolean" value="true" -->
Any template expressions that are embedded in the template are displayed with their current values in the code. For example, a link using the saleURL parameter would look like this:
<a href="sale/special.htm">On Sale Now!</a>
To change the parameter's value, choose Modify > Template Properties. The Template Properties dialog box (see Figure 2) contains a list of all the template parameters in the current page. Select any entry and alter the fields that follow as needed. Most of the template parameter types (text, number, and URL) use text fields. Boolean type parameters use a check box to show or not show the parameter; color type parameters offer a color picker.
)
Figure 2 We must make all modifications to template parameters through the
Template Properties dialog box. Changes we make by hand are not recognized until
the Template Properties dialog box is opened.
Preparing the Template
The strategy described in this section for creating navigation links using template parameters and expressions relies on files with sequentially numbered names, such as tutorial1.htm, tutorial2.htm, and so on. After the basic naming scheme has been established, the template is ready to be prepared. Here's how the process works:
A template parameter is inserted into the template <head> section either by hand or by creating an editable attribute. This parameter holds the number in the filename sequence of the current page.
Evaluated template expressions, based on the template parameter, are entered as href values in the Previous and Next links.
In the template-derived document, the template parameter is updated to reflect the instance's filename number. For example, the parameter for tutorial5.htm would be 5.
Although steps 1 and 2 only need to be performed one per template, step 3 is performed for each instance of the template that is created. However, because each instance needs custom attention anyway to add individual content, changing the template parameter value is not really an onerous burden.
The following procedure assumes that you are familiar with templates in general and have, for the sake of discussion, created a template with both Previous and Next links (either text or graphics). Best practice dictates that the navigation links in this technique would be placed in a locked, noneditable region. That's because you want to keep the navigation constant after all, although it's possible to insert them into an editable region.
Entering the Template Parameter
As mentioned earlier, template parameters are either entered by hand or by using Dreamweaver's editable attribute user interface. If the template parameter is entered manually, place this code in the <head> section:
<!-- TemplateParam name="currentFile" type="number" value="1" -->
This code creates a template parameter named baseLink with a default value of 1. To create the same code via Dreamweaver's point-and-click interface, follow these steps:
From the Tag Selector, choose the <a> tag surrounding the Previous text or button.
Select Modify > Templates > Make Attribute Editable.
In the Editable Tag Attributes dialog box (see Figure 3), select Add (+) and then enter an attribute name, such as thefilenum.
The attribute name is used for setup purposes. Naturally, you want to select an attribute name that browsers will ignore rather than a real attribute.
Figure 3 All modifications to template parameters must be made through the
Template Properties dialog box. Changes made by hand are not recognized until
the Template Properties dialog box opens.Make sure that Make Attribute Editable is selected.
In the Label field, enter the name that you want the template parameter being established to have.
In this example, I'm using currentFile as the template parameter name.
From the drop-down list, choose Number as the attribute type.
In the Default field, enter a number. This number should be an integer for easy calculation; in this example, I entered the number 1.
)
Figure 3After you click OK, Dreamweaver writes the template parameter code seen previously:
<!-- TemplateParam name="currentFile" type="number" value="1" -->
Dreamweaver also includes the dummy attribute created in the <a> tag:
thefilenum="@@(currentFile)@@"
You're free at this point to delete the false attribute and its value; the important code—the template parameter—remains in the document regardless of whether the attribute is removed.
Automating the Link Creation
In this next step, the previously established template parameter is added to each of the navigation links in slightly different formulas. One of the most powerful aspects of template expressions is that they are evaluated at design time. Numerous types of operations, including mathematical, string, and binary, are available for use. This example combines both math and string concatenation to create links to both the previous and next pages in the sequence.
Here are the steps necessary for inserting a template expression as a navigation link:
On the template page, select the Next button or text link.
In the Property inspector, enter code similar to the following in the Link field:
@@('template' + (currentFile + 1) + '.htm')@@In this example, the sequential files are all within the same folder and named template1.htm, template2.htm, and so on. My template parameter, defined in the previous section, is called currentFile. Note that single rather than double quotes are used; this is done because the entire template expression is enclosed in quotes in the <a> tag:
<a href="@@('template' + (currentFile + 1) + '.htm')@@">NEXT</a>Select the Previous button to perform a similar operation.
In the Link field, enter code like this:
@@('template' + (currentFile - 1) + '.htm')@@For the Previous link, instead of adding a number to the base value, as was done for the Next link, one is subtracted.
TIP
Want to make your navigation really slick? Use Dreamweaver MX's optional region feature to hide the Previous link if the template parameter was set to 1; in that circumstance, there is no previous page. Likewise, if you know the number of the final page in the series, wrap an optional region around the Next link to hide it when the template parameter is equal to the last value.
Setting the Instance Parameter
Now that the template work is done, all that is left is to set the parameter for each instance. Although it might sound burdensome, it's a fairly straightforward operation that you can accomplish right after the file is created from the template.
NOTE
Be sure to save your template before proceeding to the next series of steps. If you have already created one or more instances, update the files as requested by Dreamweaver after the save.
Select Modify > Template Properties.
In the Template Properties dialog box, choose the parameter set up in the template.
In our example, the parameter would be currentFile.
In the text field, insert the number that matches the value in the filename of the current page.
For example, if the file is template23.htm, enter 23.
After you close the Template Properties dialog box, check the code. Where the template expressions were inserted in the Next and Previous links, the fully resolved filenames appear. With a value of 23 for the parameter, the code will be similar to this:
Previous - Next
If the links are not being formed correctly, check to make sure that you defined the template parameter as a number.