Well here’s a complete example using Template Toolkit ( CSS.pm )….

use strict;
use warnings;

{
    package CSS;
    use base 'Squatting';
    use Template;
    
    
    BEGIN {
        our %CONFIG = (
            
            docroot  => './www',    # Continuity htdocs
            static   => '/static',  # Our unique prefix/folder under above
            
            pre_render => {
                
                # CSS profile
                css => {
                    tt   => 'css.tt',       # CSS template 
                    file => 'static.css',   # Name of static file to build
                    v    => {               # template variables
                        colour => 'red',
                    },
                },
                
                # Other pre render template profile...
                # js     => { ... },
                # jquery => { ... },
                
            },

            TT => {
                object   => Template->new( INCLUDE_PATH => './tt' ),
                postfix  => '.tt',
                site_tit => 'Static CSS demo',
            },
        );
    }
    
    # static file handling
    sub continue {
        my $app = shift;
        $app->next::method(
            docroot => $CSS::CONFIG{ docroot },
            staticp => sub { 
                $_[0]->url =~ m/\.(jpg|jpeg|gif|png|css|ico|js|swf)$/ 
            },
            @_
        );
    }
    
    # pre-render stuff
    # for eg. lets build the CSS file on startup as ./www/static/static.css
    my $tt = $CSS::CONFIG{ TT }->{ object };
    my $prefix = $CSS::CONFIG{ docroot } . $CSS::CONFIG{ static } . '/';
    for my $key ( keys %{  $CSS::CONFIG{ pre_render } } ) {
        
        my $render = $CSS::CONFIG{ pre_render }->{ $key };
        
        open my $fh, '>',  $prefix . $render->{ file }
            or die "Unable to write to $render->{file}: $!";

        $tt->process( $render->{ tt }, $render->{ v }, $fh )
            or die "Help!\n";

        close $fh;   
    }

}


{ 
    package CSS::Controllers;
    use Squatting ':controllers';
    
    our @C = (
        C(
            Home => [ '/' ],
            get   => sub { 
                my ( $self ) = @_;
                $self->render( 'home' );
            },
        ),
    );
}


{
    package CSS::Views;
    use Squatting ':views';

    our @V = (

        V(
            'tt',
            tt => $CSS::CONFIG{ TT }->{ object },

            layout => sub {
                my ( $self, $v, $body ) = @_;
                my $tt = $self->{ tt };
                $v->{ site_tit } = $CSS::CONFIG{ TT }->{ site_tit };
                $v->{ body     } = $body;

                my $output;
                $tt->process( 'layout'. $CSS::CONFIG{ TT }->{ postfix }, 
                               $v, \$output)
                    or return view_error( $tt->error );
                return $output;
            },

            _ => sub {
                my ( $self, $v ) = @_;
                my $tt = $self->{ tt };
                $v->{ R } = \&R;
                $v->{ Static } = $CSS::CONFIG{ static };

                my $output;
                $tt->process( $self->{template} . 
                              $CSS::CONFIG{ TT }->{ postfix }, 
                              $v, \$output) 
                    or return view_error( $tt->error );
                return $output;
            },
        ),
    );

    sub view_error {
        my ( $error ) = shift;
        warn $error;
        return "<pre>" . $error . "</pre>\n";   # should HTML encode
    }    
}

1;

$CSS::CONFIG{ pre_render } contains all the profiles to pre-render on. You just need to name a profile and tell it what template (tt), what static filename should be (file) & provide variables for the rendering (v)….

        # CSS profile
        css => {
            tt   => 'css.tt',         # CSS template 
            file => 'static.css',    # Name of static file to build
            v    => {                 # template variables
                colour => 'red',
            },
        },

So above renders css.tt to ./www/static/static.css

Here is an example css.tt

h1 { color: [% colour %]; }

And to make things complete here the other templates (all in ./tt folder)….

# layout.tt
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>[% site_tit %]</title>
  <link rel="stylesheet" href="[% Static %]/static.css" type="text/css" />
</head>

<body>
[% body %]
</body>
</html>

# home.tt
<h1>This should be red</h1>

And if all works fine then you will see “This should be red” in red

/I3az/

NB. This example should only be used with single occurrence of your App running with Squatting::On::Continuity. For multiple occurrences then ideally you need to take care when writing to static file (ie. only write when changed or need locking or have unique static files for each occurrence).

body {
	background: url( /images/some_image.gif );
}

What we want this to be is otherwise it won’t find that image file in your static folder…

body {
	background: url( [% Static %]/images/some_image.gif );
}

This means we need to process a CSS template through a Squatting view (see Caveat).

Here’s one way we can do this…..

# Controller code.....
    C( 
        CSS => [ '/css' ],
        get => sub { 
            my $self = shift; 
            $self->headers->{'Content-Type'} = 'text/css'; 
            $self->render( '_app_css' );
        },
    ),

“_app_css.tt” is now your CSS template. The prefixed “_” in the $self->render stops it processing the layout view around it. The layout.tt should now have this line…

    <link rel="stylesheet" href="[% R('CSS') %]" type="text/css" media="screen" title="Demo" />

So when rendered to browser the HTML will look like this…..

    <link rel="stylesheet" href="/css" type="text/css" media="screen" title="Demo" />

So “/css” will call the CSS controller and render the template “_app_css.tt”.

And so Bob’s your Aunty

/I3az/

Caveat: And its a big caveat…. while its nice and could be very useful in lots of cases to serve up dynamic CSS, it is generally going to be a lot better to keep it as a static file and let Apache serve it up and gain all the cache benefits associated with this.

Two possible workarounds are….

• Build static file from TT file. This could even be done when Squatting app is first started. Alternatively look at TT tpage & ttree to do this process manually
• Put caching routines into your CSS View (eg. pre-build rendering, return 304 HTTP code).

NB.: Replace CSS with Javascript in everything above. Everything equally applies.

References

• Using Template Toolkit With Squatting

I use Template Toolkit quite a bit so here’s a boilerplate for using TT with Squatting…..

use strict;
use warnings;

{
    package App;
    use base 'Squatting';

    BEGIN {
        our %CONFIG = (
            TT => {
                config   => { INCLUDE_PATH => '.' },
                postfix  => '.tt',
                site_tit => 'TT loves Squatting!',
            }
        );

    }
}

{
    package App::Controllers;
    use Squatting ':controllers';

    our @C = (

        C(
            Home => [ '/' ],
            get  => sub {
                my ( $self )  = @_;
                my $v         = $self->v;
                $v->{ tit }   = 'welcome to my homepage';
                $self->render( 'home' );
            },
        ),
        
        C(
            Page => [ '/path/to/page' ],
            get  => sub {
                my ( $self ) = @_;
                my $v        = $self->v;
                $v->{ tit  } = 'here is another page!';
                $v->{ list } = [ 'one', 'two', 'three' ];
                $self->render( 'page' );
            },
        ),

    );
}

{
    package App::Views;
    use Squatting ':views';
    use Template;

    our @V = (

        V(
            'html',
            tt => Template->new( $App::CONFIG{ TT }->{ config } ),

            layout => sub {
                my ( $self, $v, $body ) = @_;
                my $tt = $self->{ tt };
                $v->{ site_tit } = $App::CONFIG{ TT }->{ site_tit };
                $v->{ body     } = $body;
                
                my $output;
                $tt->process( 'layout'. $App::CONFIG{ TT }->{ postfix }, $v, \$output)
                    or return view_error( $tt->error );
                return $output;
            },

            _ => sub {
                my ( $self, $v ) = @_;
                my $tt = $self->{ tt };
                $v->{ R } = \&R;
                
                my $output;
                $tt->process( $self->{template} . $App::CONFIG{ TT }->{ postfix }, $v, \$output) 
                    or return view_error( $tt->error );
                return $output;
            }

        ),
    );
    
    sub view_error {
        my ( $error ) = shift;
        warn $error;
        return "<pre>" . $error . "</pre>\n";   # really need to HTML encode $error here
    }
}

1;

And here are the templates….

layout.tt

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>[% site_tit %]</title>
</head>
<body>
[% body %]
</body>
</html>

home.tt

<h1>Hello.. [% tit %]</h1>

<a href="[% R('Page') %]">Have a look here</a>

page.tt

<h1>Hello again... [% tit %]</h1>

<p>$v->{list}...</p>

<ul>
    [% FOREACH item IN list %]
    <li>[% item %]</li>
    [% END %]
</ul>

<a href="[% R('Home') %]">back to home</a>

Stash variables in Squatting (ie. variables that can used between controller & the view/template) can be set/get by $self->v
NB. “v” is for variables and shouldn’t be confused in anyway with “view” ;-(

Using “layout[.tt]” method/template is optional in Squatting (and Camping) so u can drop this and it will just render the view/template only. The code uses “layout” thus home.tt & page.tt renders as [% body %] via layout.tt

R() returns the route used by the specified controller ( for eg. R(‘Page’) returns “/path/to/page” ). This is quite a handy subroutine to export to TT templates!

So see it working just name above program “App.pm” and put in same directory as the template files and just do squatting App and then point your browser to http://localhost:4234/

Hopefully more on Squatting soon. So if u fancy a bit of fun web programming then give Squatting a go!