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 now. 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 and footer as well. We will use the former to brand our fibonacci generator and the latter to ensure the great man keeps his numbers. We will style these later, but for the moment we just supply the text.

Create the header file app/controllers/views/fibonacci-header.wtf with the following contents:

<h2 style='color: #808080'>Fibonacci Generator</h2>

Then the footer file app/controllers/views/fibonacci-footer.wtf:

<p>Fibonacci sequence (c) 1202 Leonardo Bonacci </p>

The result is shown in the browser below:

That does not look like much of a visual improvement. Well, we have not gotten there yet. We first need to explain page sections.

Page sections

The question arises as to why we created additional files for the header and the navigation links when it would have been much easier to just modify our original fibonacci-generate-main content file. The purpose behind using separate files is that it provides a logical structure to the web page and an easy means for defining sections that are shared amongst multiple web pages. So in our simple example, if you navigate to the Help page, you will find it has also picked up the new header and navigation sections.

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.