a programmer's best friend :: Entries from Friday, July 9. 2004

Recently I added a new custom function to patTemplate, that pushes unifying site design to a new level. In most sites, you have a set of design compontents, that you use in many pages to build headlines, information boxes, news entries, etc.
These should look the same on all pages to give the site a unified look and feel. To achieve this, you could either use XML and XSLT or you try to use a templating engine. This has the drawback that the designer, who creates the static pages of the site is not able to access the components in the template. It would be great if he could just say "hey, use the template for a box with this headline and that content" and it would automatically be replaced with the correct layout.

Well, patTemplate 3.0 can do this for you, all I had to do was create a custom function with about 10 lines of code. To ease your designers life, you can do the following:
1. Create a template file with all re-usable components you need in your site.
2. Get the latest version of patTemplate from CVS
3. Re-use the components in the pages by using <patTemplate:Call/>
The best way to show what I'm talking about is an example:

File "compontents.tmpl":
<patTemplate:tmpl name="hint">
<div style="border-width: 1px; border-style: dashed; border-color: #000000; padding: 10px; 20px; background-color: #ccffcc; margin:10px;">
    <strong>{TITLE}</strong>
    <div style="padding-left: 20px;">
        {CONTENT}
    </div>
</div>
</patTemplate:tmpl>

<patTemplate:tmpl name="news">
<div style="background-color: #dddddd; padding: 5px; margin-bottom: 20px;">
    <strong>{HEADLINE}</strong><br />
    <em>By {AUTHOR} on {DATE}</em><br />
    <br />
    {CONTENT}
</div>
</patTemplate:tmpl>
This file defines two templates, hint and news which we will re-use in the pages of our site. A news consists of a title, date, author and content, wheras a hint only has a title and content.

File "page.tmpl:
<patTemplate:tmpl name="page">

<patTemplate:Call template="news" date="2004-07-08" author="Stephan Schmidt" headline="patTemplate goes Randy">
    By using the new patTemplate:Call function, it is possible to define
    often used design elements in one template file and then re-use these components
    to display any information you need.<br />
    The Function allows you to pass any number of attributes as variables of your
    component templates.<br />
    <patTemplate:Call template="hint" title="Calls may be nested.">
        You may nest the Call tags as deep as you like, this brings
        most of patXMLRenderers functionality to patTemplate.
    </patTemplate:Call>
</patTemplate:Call>

<patTemplate:Call template="news" date="2004-07-07" author="Stephan Schmidt" headline="Been to the Spidey-Night.">
    This shows you ho to reuse the templates. If you need the change the layout of this news block, you
    only need to change it once and all news entries will have the design you created.
</patTemplate:Call>

</patTemplate:tmpl>

PHP Code:
<?PHP require_once '../patTemplate.php';

$tmpl = &new patTemplate();
$tmpl->setRoot( 'templates' );

$tmpl->readTemplatesFromInput( 'compontents.tmpl' );

$tmpl->readTemplatesFromInput( 'page.tmpl' );

$tmpl->displayParsedTemplate( 'page' );
?>

When executing the page, the result will look like this:


As you can easily see, it's quite easy for a designer to use the predefined elements in the pages. All he has to do is using the <pattemplate:Call> tag and passing the name of the desired element to the template attribute. All other attributes will be passed as variables to the template. The content of the tag will go into the {CONTENT} variable.

The example is included in the distribution and available online.

In the templates, you may use any of patTemplate's features, like variable modifiers or conditions. As patTemplate features a template cache that caches the resulting file with all components expanded, performance will not be an issue.