DC 2 - Working with page templates and stylesheets
Here's a flexible way to separate content from presentation: setting up a template system and putting all your CSS in an external stylesheet. For both elements I use a simple Notes document.
The Stylesheet
The Stylesheet form contains the 'PageKey' field to build the URL, a rich text field 'Body' to attach the images, a 'TextData' field to hold the CSS text itself. The URLs to the images are computed in the 'TextComputed' field:
a:=@AttachmentNames;
b:=wPath+"inc/"+PageKey+"/$file/"+@AttachmentNames;
@ReplaceSubstring(@Implode(TextData; @NewLine); a; b)
In last fields on the form the key, sort and value is computed so that the document appears in the 'lookup' view and can be selected in a field on the page template.
The page template
This is built almost exactly as the Stylesheet.There is an additional field that allows you to select a stylesheet. The choices formula:
a:=@DbLookup("":"NoCache"; ""; "lookup"; "stylesheet"; 3);
@If(@IsError(a); "none|"; "none|":a)
The text content is a complete, valid XHTML 1.0 page with special tags that will be filled in by the QueryOpen agent:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><meta http-equiv="content-type" content="text/html;charset=UTF-8" />
[%meta%]
[%include%]
</head><body><div id="canvas">
<div id="top"><a href="/">[%dbtitle%]</a></div>
<div id="top-sh"></div>
<div id="trail">[%trail%]</div>
<div id="content">
<div id="nav">[%nav%]</div>
[%content%]
<img src="dominobird.jpg" alt="Just a sample image on the pagetemplate..." />
</div>
<div id="content-sh"></div>
<div id="bottom">Deep blue theme - Rendered in [%rendertime%] sec.</div>
</div><!-- end canvas -->
</body></html>
The 'inc' view
From this view, both the images of the page template and these of the stylesheet are retrieved. The stylesheet itself is also retrieved here. The '.css' form makes it render with mimetype 'text/css'. The page template to use has to be selected in the DbConfig document.
The magic
From here, it all happens in the LotusScript library '101-processing', in the WebSession class. Here, the computed text of the page template is retrieved and processed.
You can see it in action here and/or download the latest version below. Note that some elements are rendered as 'Undefined', because... they are not yet defined. Documentation (the updated cookbook) will follow.
Upgrade to version 2
- Download the file and unzip.
- Make it a template and sign it.
- Replace the design of your previous version with the template.
- Copy and paste the Stylesheet and the PageTemplate documents from the template in your own database.
- Edit the DbConfig document to select the page template.
Comments
To add a comment, log in or register as new user. It's free and safe.