Writing page templates

Now that we have the most easily navigable site in Fibonacci's world, let us pretty up the interface (ok, perhaps the end result will not be so good looking, but we want to illustrate a marginally more sophisticated view template). Instead of displaying the generated sequence as a list, we will display it in tabular form along with the index of each number in the sequence. We will also shade alternate rows in the table. In the next section, we will write this using the Woof! Pure CSS commands but here we do it explicitly as the purpose is to give a flavor for WTF syntax.

Here is the modified template in app/controllers/views/fibonacci-generate-main.wtf:

% my variable seq
<p>
 The first [llength $seq] numbers in the 
 Fibonacci sequence are shown below:</p>
<table>
% set index 0
% foreach number $seq {
<tr style='background-color: [expr {$index & 1 ? "#cccccc" : "white"}];'>
 <td style='padding: 5px;'>[incr index]</td>
 <td style='padding: 5px;'>$number</td>
</tr>
% }
</table>
<p>
 <a href='[request url]'>Show first [incr index] in sequence</a>
</p>

The main thing to note about this template is that lines beginning with the % character are treated as Tcl code. In the above template, the foreach loop encloses the HTML for a single row in the table and each iteration of the loop adds one row to the output. The result looks like this: