Laying out a Page

For navigation, we will put links in a column on the left of the main area. Both pages will contain the same navigation links. For this purpose, create the file app/controllers/views/fibonacci-sidebar.wtf with the following contents:

<a href='[my url_for -action generate]'>Generate</a>
<br/>
<a href='[my url_for -action help]'>Help</a>

This is not the best HTML for navigation menus but it will do for our purposes. Note the use of the url_for method to generate the links instead of hardcoding to something like /fibonacci/help. Unlike hard-coded links, links generated in this manner will not need to be changed if somewhere down the road we change the URL to be /mathsequences/fibonacci/help.

In addition to the navigation menu, let us add a header as well to brand our fibonacci generator. Create the file app/controllers/views/fibonacci-header.wtf with the following contents:

<div style='padding: 10px;'>
 [my include_image images/_woof/logo.png' style "float: left;"]
 <h2 style='line-height: 3em; margin-left: 160px;'>Fibonacci Generator</h2>
</div>
[my include_image images/_woof/banner_separator.png']

Again, the HTML leaves something to be desired, and we are being lazy in reusing some Woof images for illustrative purposes. The result is shown in the browser below:

Let us now take a step back and look at how Woof! picked up the contents of the files we created. The gory details are available in the Page Generation chapter but here is a short summary.

Woof! divides the displayed Web page into several areas or page sections. Each page section is generated from a template file (actually, this is only one of the ways to generate a page section) and the various generated sections are merged based on a layout file. All sections are of course optional and the layout adjusts automatically for missing sections. The logical page sections, placement in layout etc. are all of course customizable and you can even create your own sections but we will not go into that here. It is expected however, that the default layout will suffice for most purposes.