TWiki/TWikiTemplates.mdwn

   1 <div>
   2   <ul>
   3     <li><a href="#TWiki Template System"> TWiki Template System</a><ul>
   4         <li><a href="#Overview"> Overview</a></li>
   5         <li><a href="#Major changes from the previous"> Major changes from the previous template system</a></li>
   6         <li><a href="#Functional Specifications"> Functional Specifications</a></li>
   7         <li><a href="#New Template System by Example"> New Template System by Example</a><ul>
   8             <li><a href="#Base template oopsbase.tmpl"> Base template oopsbase.tmpl</a></li>
   9             <li><a href="#Test template oopstest.tmpl"> Test template oopstest.tmpl</a></li>
  10             <li><a href="#Sample screen shot of oopstest.t"> Sample screen shot of oopstest.tmpl</a></li>
  11           </ul>
  12         </li>
  13         <li><a href="#TWiki master template"> TWiki master template</a></li>
  14         <li><a href="#Known Issues"> Known Issues</a></li>
  15       </ul>
  16     </li>
  17   </ul>
  18 </div>
  19
  20 # <a name="TWiki Template System"></a> TWiki Template System
  21
  22 _Definition of the templates used to render all HTML pages displayed in TWiki_
  23
  24 ## <a name="Overview"></a> Overview
  25
  26 The new modular template system is more flexible, efficient, and easily updated than the old set-up, where each template is a complete HTML file. The new master template approach places common templates parts, like headers and footers, in one shared file. This simplifies the conversion of templates into XHTML format, and provides a more versatile solution for templates and for [[TWikiSkins]].
  27
  28 ## <a name="Major changes from the previous"></a><a name="Major changes from the previous "></a> Major changes from the previous template system
  29
  30 The main difference is that templates are now defined using variables to include template parts. You change one stored instance of a common element to update all occurrences. The new system:
  31
  32 - separates a set of common template parts into a base template that is included by all of the related templates;
  33
  34 - defines common variables, like a standard separator (ex: "|"), in the base template;
  35
  36 - defines variable text in the individual templates and passes it back to the base template.
  37
  38 ## <a name="Functional Specifications"></a> Functional Specifications
  39
  40 - Special template directives (or preprocessor commands) are embedded in normal templates.
  41 - Use of template directives is optional, templates work without them.
  42 - All template preprocessing is done in `&TWiki::Store::readTemplate()` so that the caller simply gets an expanded template file (the same as before).
  43 - Directives are of the form `%TMPL:<key>%` and `%TMPL:<key>{"attr"}%`.
  44 - Directives:
  45   - `%TMPL:INCLUDE{"file"}%`: Includes a template file. The template directory of the current web is searched first, then the templates root (`twiki/templates`).
  46   - `%TMPL:DEF{"var"}%`: Define a variable. Text between this and the END directive is not returned, but put into a hash for later use.
  47   - `%TMPL:END%`: Ends variable definition.
  48   - `%TMPL:P{"var"}%`: Prints a previously defined variable.
  49 - Variables are live in a global name space, there is no parameter passing.
  50 - Two-pass processing, so that you can use a variable before declaring it or after.
  51 - Templates and [[TWikiSkins]] work transparently and interchangeably. For example, you can create a skin that overloads just the `twiki.tmpl`, like `twiki.print.tmpl`, that redefines the header and footer.
  52 - **_Note:_** The template directives work only for templates, they do not get processed in topic text.
  53
  54 ## <a name="New Template System by Example"></a> New Template System by Example
  55
  56 Attached is an example of an oops base template `oopsbase.tmpl` and a example oops dialog `oopstest.tmpl` which is based on the base template. **_NOTE:_** This isn't the release version, just a quick, simple demo.
  57
  58 ### <a name="Base template oopsbase.tmpl"></a> Base template oopsbase.tmpl
  59
  60 The first line declares the delimiter variable called "sep", used to separate multiple link items. The variable can be called anywhere by writing `%TMPL:P{"sep"}%`
  61
  62 > <table border="1" cellpadding="1" cellspacing="0">
  63 >   <tr>
  64 >     <td><pre>
  65 > %TMPL:DEF{"sep"}% | %TMPL:END%
  66 > &lt;html&gt;
  67 > &lt;head&gt;
  68 >   &lt;title&gt; %WIKITOOLNAME% . %WEB% . %TOPIC% %.TMPL:P{"titleaction"}%&lt;/title&gt;
  69 >   &lt;base href="%SCRIPTURL%/view%SCRIPTSUFFIX%/%WEB%/%TOPIC%"&gt;
  70 >   &lt;meta name="robots" content="noindex"&gt;
  71 > &lt;/head&gt;
  72 > &lt;body bgcolor="#FFFFFF"&gt;
  73 > &lt;table width="100%" border="0" cellpadding="3" cellspacing="0"&gt;
  74 >   &lt;tr&gt;
  75 >        &lt;td bgcolor="%WEBBGCOLOR%" rowspan="2" valign="top" width="1%"&gt;
  76 >               &lt;a href="%WIKIHOMEURL%"&gt;
  77 >               &lt;img src="%PUBURLPATH%/wikiHome.gif" border="0"&gt;&lt;/a&gt;
  78 >        &lt;/td&gt;
  79 >        &lt;td&gt;
  80 >               &lt;b&gt;%WIKITOOLNAME% . %WEB% . &lt;/b&gt;&lt;font size="+2"&gt;
  81 >               &lt;B&gt;%TOPIC%&lt;/b&gt; %TMPL:P{"titleaction"}%&lt;/font&gt;
  82 >        &lt;/td&gt;
  83 >   &lt;/tr&gt;
  84 >   &lt;tr bgcolor="%WEBBGCOLOR%"&gt;
  85 >        &lt;td colspan="2"&gt;
  86 >               %TMPL:P{"webaction"}%
  87 >        &lt;/td&gt;
  88 >   &lt;/tr&gt;
  89 > &lt;/table&gt;
  90 > --- ++ %TMPL:P{"heading"}%
  91 > %TMPL:P{"message"}%
  92 > &lt;table width="100%" border="0" cellpadding="3" cellspacing="0"&gt;
  93 >   &lt;tr bgcolor="%WEBBGCOLOR%"&gt;
  94 >        &lt;td valign="top"&gt;
  95 >               Topic &lt;b&gt;%TOPIC%&lt;/b&gt; . {
  96 >                 %TMPL:P{"topicaction"}%
  97 >               }
  98 >        &lt;/td&gt;
  99 >   &lt;/tr&gt;
 100 > &lt;/table&gt;
 101 > &lt;/body&gt;
 102 > </pre></td>
 103 >   </tr>
 104 > </table>
 105
 106 ### <a name="Test template oopstest.tmpl"></a> Test template oopstest.tmpl
 107
 108 Each oops template basically just defines some variables and includes the base template that does the layout work.
 109
 110 > <table border="1" cellpadding="1" cellspacing="0">
 111 >   <tr>
 112 >     <td><pre>
 113 > %TMPL:DEF{"titleaction"}% (test =titleaction=) %TMPL:END%
 114 > %TMPL:DEF{"webaction"}% test =webaction= %TMPL:END%
 115 > %TMPL:DEF{"heading"}%
 116 > Test heading %TMPL:END%
 117 > %TMPL:DEF{"message"}%
 118 > Test =message=. Blah blah blah blah blah blah blah blah blah blah blah...
 119 >
 120 >       * Some more blah blah blah blah blah blah blah blah blah blah...
 121 >       * Param1: %PARAM1%
 122 >       * Param2: %PARAM2%
 123 >       * Param3: %PARAM3%
 124 >       * Param4: %PARAM4%
 125 > %TMPL:END%
 126 > %TMPL:DEF{"topicaction"}%
 127 > Test =topicaction=:
 128 > [[%WEB%.%TOPIC%][OK]] %TMPL:P{"sep"}%
 129 > [[%TWIKIWEB%.TWikiRegistration][Register]] %TMPL:END%
 130 > %TMPL:INCLUDE{"oopsbase"}%
 131 > </pre></td>
 132 >   </tr>
 133 >   <tr>
 134 >     <td> &lt;/table &gt; </td>
 135 >   </tr>
 136 > </table>
 137
 138 ### <a name="Sample screen shot of oopstest.t"></a> Sample screen shot of oopstest.tmpl
 139
 140 With URL: <code>**.../bin/oops/Test/TestTopic2?template=oopstest&amp;param1=WebHome&amp;param2=WebNotify**</code>
 141
 142 > <table border="1" cellpadding="0" cellspacing="0">
 143 >   <tr>
 144 >     <td><img alt="testscreen.gif" height="304" src="http://www.dementia.org/twiki//view/testscreen.gif" width="554" /></td>
 145 >   </tr>
 146 > </table>
 147
 148 ## <a name="TWiki master template"></a> TWiki master template
 149
 150 All common template parts are defined in one master template, `twiki.tmpl`, that all other templates include.
 151
 152 <table border="1" cellpadding="0" cellspacing="0">
 153   <tr>
 154     <th bgcolor="#99CCCC"><strong> Template variable: </strong></th>
 155     <th bgcolor="#99CCCC"><strong> Defines: </strong></th>
 156   </tr>
 157   <tr>
 158     <td> %TMPL:DEF{"sep"}% </td>
 159     <td> "|" separator </td>
 160   </tr>
 161   <tr>
 162     <td> %TMPL:DEF{"htmldoctype"}% </td>
 163     <td> Start of all HTML pages </td>
 164   </tr>
 165   <tr>
 166     <td> %TMPL:DEF{"standardheader"}% </td>
 167     <td> Standard header (ex: view, index, seach) </td>
 168   </tr>
 169   <tr>
 170     <td> %TMPL:DEF{"simpleheader"}% </td>
 171     <td> Simple header with reduced links (ex: edit, attach, oops) </td>
 172   </tr>
 173   <tr>
 174     <td> %TMPL:DEF{"standardfooter"}% </td>
 175     <td> Footer, excluding revision and copyright parts </td>
 176   </tr>
 177   <tr>
 178     <td> %TMPL:DEF{"oops"}% </td>
 179     <td> Skeleton of oops dialog </td>
 180   </tr>
 181 </table>
 182
 183 > **Example: `oopspreview.tmpl` template**
 184 >
 185 >     %TMPL:INCLUDE{"twiki"}%
 186 >     %TMPL:DEF{"titleaction"}% (oops) %TMPL:END%
 187 >     %TMPL:DEF{"webaction"}% *Attention* %TMPL:END%
 188 >     %TMPL:DEF{"heading"}% Topic is not saved yet %TMPL:END%
 189 >     %TMPL:DEF{"message"}% Please go back in your browser and save the topic. %TMPL:END%
 190 >     %TMPL:DEF{"topicaction"}%
 191 >     %TMPL:END%
 192 >     %TMPL:P{"oops"}%
 193
 194 ## <a name="Known Issues"></a> Known Issues
 195
 196 - A drawback of referring to a master template is that you can only test a template from within TWiki, where the include variables are resolved. In the previous system, each template is a structurally complete HTML document with a `.tmpl` filename extension - it contains unresolved `%VARIABLES%`, but can still be previewed directly in a browser.
 197
 198 -- [[PeterThoeny]] - 23 Jul 2001 <br /> -- [[MikeMannix]] - 30 Aug 2001