TTSite is a Catalyst View that wraps every TT template we use in a header and footer. All of this happens transparently, so we can add some prettiness to our site without writing any CSS or HTML.
TTSite isn't really officially endorsed. It might be okay to use it, but it should be noted that building your own TT base view isn't that hard.
There are a few differences from the standard TT view to be aware of. First, templates are stored in /root/src instead of /root. TTSite keeps its configuration in /root/lib, so that's where you'll want to go if you want to change the look of the site. The configuration is easy to understand—the file called header contains the TT commands that will be added to the header of the page (and so on).
For this application, we need to make a few modifications to the default setup. First, let's remove the default "message" (to display at the top of the page), so we can specify our own from a Controller. To do this, edit /root/lib/config/main, removing the block of code that looks like this:
# set defaults for variables, etc. DEFAULT message = 'There is no message';
Next, we'll edit the template that formats our main content so that it will show us a message if it exists (and an error message if one exists). In /root/lib/site/ layout, add the following lines after the<div id="content"> and before the [% content %] command so that it looks like:
<div id="content"> [% IF error %] <p><span class="error">[% error | html %]</span></p> [% END %] [% IF message %] <p><span class="message">[% message | html %]</span></p> [% END %] [% content %]
This change will allow our Controllers to set messages (or errors) that will display above the content. This means we can skip the step of adding error screens or success screens. For example, after adding an address, we can return the user to the list of addresses and add a message saying Address added successfully!. This is in contrast to the traditional scheme of having an entire page with the message and a link to go back.
Finally, we need to edit /lib/AddressBook/View/HTML.pm and add a line to set the default template extension to .tt2. Simply add the following as a key/value to __PACKAGE__config:
TEMPLATE_EXTENSION => '.tt2',
so that it looks like the following:
__PACKAGE__->config({
INCLUDE_PATH => [
AddressBook->path_to( 'root', 'src' ),
AddressBook->path_to( 'root', 'lib' )
],
TEMPLATE_EXTENSION => '.tt2',
PRE_PROCESS => 'config/main',
WRAPPER => 'site/wrapper',
ERROR => 'error.tt2',
TIMER => 0
});
This will cause Catalyst to automatically pick which template to render, based on the name of the action. For example, the action /person/edit will automatically use the template in root/src/person/edit.tt2, which will save us some typing later on.
That's all we need to get a comfortable View setup, so let's start adding some pages! If there is something that you have not understood in this section, it is a good idea to just proceed further and come back to this later. Most of what we did in this section are tweaks and changes which make things easier for us as we proceed.
The first pages we need to add are an index page and a "Not Found" page. The index page goes in /root/src/index.tt2 and looks like the following:
[% META title = "Welcome to the Address Book" %]
<p>Here you will find All Things Address.</p>
<p>From here, you can:
<ul>
<li>
<a href = "[% c.uri_for_action('/person/list') %]">Look at all people</a>
</li>
<li>
<a href = "[% c.uri_for_action('/person/add') %]">Add a new person</a>
</li>
</ul>
</p>
(This is the template that will get rendered by default when the index method in the root Controller is executed.)
As you can see, TTSite saved us a bit of work here. All we have to do is set the title, and then provide the content. In this case, we're just printing out two links, one to list all people and another to add a new person. Note that instead of specifying URLs directly, we use c.uri_for_action and then the internal name of the action (displayed in the debugging output). This ensures that the URL that's generated will always be correct, even if your application is moved to a different host or subdirectory, or if you change your action from Local to Global, or something similar.
Next, we need a "Not Found" page to be shown to the user when they enter an invalid URL. We'll call this not_found.tt2, and it will live in the same directory as index.tt2:
[% META title = '404 Not Found' %]
<p>We couldn't find the page you were looking for. Maybe you'd like to
<a href = "[% c.uri_for('/') %]">go home</a> instead?
</p>
Now that we have the templates, we need to add some actions in the Root Controller that will show them when appropriate. The code in /lib/AddressBook/ Controller/Root.pm should look like the following (replacing the auto-generated default and index actions, but nothing else):
sub default : Path {
my ( $self, $c ) = @_;
$c->response->status('404'),
$c->stash->{template} = 'not_found.tt2';
}
sub index : Path Args(0) {};
This is the same thing that we did in the last chapter, except in the index action we don't do anything, as TTSite will automatically render index.tt2 when the index action is called. In default, we are displaying the not found.tt2 template for every action that is not matched with any other action Controller.
With that, we're ready to take a first look at our application. Start up the development server using the following command:
$ perl script/addressbook_server.pl -r -d
Then navigate to http://localhost:3000/. The index page should show up like the following:
It is appropriate to get the error that you see in the screenshot, as you do not yet have the people Controller. The View is merely complaining that such an action /person/list doesn't exist. (Remember:<li><a href = "[% c.uri_for_action('/person/list') %]">Look at all people</a></li>).
Then navigate to http://localhost:3000/this/does/not/exist. You should see the error page and be able to click a link to get back to the index page.