<p>A template is used to build one ore more pages for a web application.</p>
<p><img src="http://github.com/gmurray/protorabbit/raw/master/docs/images/protorabbit-template.png"/></p>
<p>In protorabbit a template is described using JavaScript Object Notation (<span class="caps">JSON</span>). A basic template looks like the following:</p>
<pre>
{ "templates" : [
{
"id" : "blueprints-css",
"template" : "templates/bp-2-column-base.html",
"styles" : {
"libs" : [
{ "id" : "blueprint", "url" : "lib/grid.css"}
]
},
"properties" : {
"title" : { "type" : "string", "value" : "Welcome to Proto Rabbit"},
"header" : { "type" : "include", "value" : "/header.html" },
"body" : { "type" : "include", "value" : "/blueprints.html"},
"sidebar" : { "type" : "include", "value" : "/sidebar.html" },
"footer" : { "type" : "include", "value" : "/footer.html" }
}
}
]
}
</pre>
<p>The template above describes the component parts of a page such as the text for the title, and <span class="caps">HTML</span> fragments defined in files. The layout of the properties described in a template are provided in a <span class="caps">HTML</span> file with tokens that represent commands to the egine protorabbit engine. The <span class="caps">HTML</span> template is specified using the “template” property with the path to the <span class="caps">HTML</span> template.</p>
<p>Following is a template describing the layout for all templates that based on the “blueprints-base” template. All descendant templates will use this layout unless they override it.</p>
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><^ insert('title') ^></title>
<^ includeResources('styles') ^>
</head>
<body>
<div class="container">
<div class="block">
<div class="column span-24">
<div>
<div style="font-size:2em"><^ insert('title') ^></div>
</div>
<^ include('header') ^>
</div>
</div>
<div class="block">
<div class="column span-18 colborder">
<div>
<^ include('body') ^>
</div>
</div>
<div class="column span-5 last">
<^ include('sidebar') ^>
</div>
</div>
</div>
<^ includeResources('scripts') ^>
</body>
</html>
</pre>
<p>You may notice the tokens delimited by the <^ commandName(…) ^> in the template. These are tokens that specific what to do in a specific region of the page. Protorabbit out of the box provides commands for replacing tokens with files (include) or replacing tokens (insert) with text or including script or css links resources in a page (includResources).</p>
2009-11-26T15:43:54-08:00
206198
templates
160673
Templates
2009-06-03T14:43:25-07:00
31047