Customize Jifty Page Layout

作者:   發佈於:  

I found myself repeating this whenever I started to put styles to my new Jifty app. Maybe it's necessary to make it easier. Actually not hard, but neither it is a trivial task.

To do this, you'll need to do these two steps:

  1. Write a MyApp::View::Page class
  2. Modify etc/config.yml to enable it

Write a MyApp::View::Page class

This class can be done by inheriting the default Jifty::View::Declare::Page class, and then override the render_page method and optionally override the render_header method. Jifty emits XHTML strict doctype by default. I started to use HTML5 these days, therefore I always override render_header method.

Here's one of my example (gist: 168919). I use a 960 grid system so I added a few class names like container_16, grid_16. That's also the reason I'm overriding the default Page class.

package MyApp::View::Page;
use strict;
use warnings;
use base qw/Jifty::View::Declare::Page/;

use Template::Declare::Tags;
use Jifty::View::Declare::Helpers;

# Let header part emits the new HTML5 prototype.
sub render_header {
    my $self = shift;
    return if $self->done_header;
    outs_raw("<!doctype html>\n<html>\n");
    $self->_render_header($self->_title || Jifty->config->framework('ApplicationName'));
    return '';

sub render_page {
    my $self = shift;

    with(id => "doc"), div {
        # render the CRUD/notify messages at the very top of the page
        # to make it really stand out.

        with(id=>"header"), div {
            with(class => "container_16 clearfix"), div {
                with(class => "grid_16"), div {
                    h1 { hyperlink(label => "Write", url => "/") };
                    # Should define this in MyApp::View

        with(class => "container_16 clearfix", id => "wrapper"), div {
            with(class => "grid_16"), div {
                # These statements are simply copied from the Jifty::View::Page
                no warnings qw( redefine once );
                local *is::title = $self->mk_title_handler();

        with(class => "container_16 clearfix", id => "footer"), div {
            with(class => "grid_16"), div {
                outs_raw "<address>Copyright &copy; 2009 Somebody.</address>";

    # I always put javascript at the end of the page to speed-up page-rendering.

    # This method should returns coderef.
    return sub {};


Modify etc/config.yml.

Add a key: framework.View.PageClass with value MyApp::View::Page. You should be able to find the key View near the end of the generated config.yml

    .... ( other configs)
    TemplateClass: MyApp::View
        PageClass: MyApp::View::Page

I think this is only needed when you're writing Jifty Views with Template::Declare, which is the recommended template system for Jifty these days. Not sure how does it work for mason users.