rendering ...

Overview

The Triangular template system is used to enable predefined HTML snippets to be easily included in application pages.

The fact that they can be altered during injection, either by the alter keyword or by the use of predefined keywords such as $MODOBJ$ adds even more flexibility to the template facility.

It relies on the macro fetch directive to inject the template into the application page.

Triangular predefined templates are stored in tri/AppBase.htm. Custom templates are defined at the end of the appname-html file.

The templates are loaded as described in hookMsgListener.

The Chrome browser inspect function is a helpful way to see the injected templates. The comments before the injected code indicate their source and what process injected them.

The load process

The templates are processed after the browser has parsed them. This means that tags are converted to lower case and double quotes inserted around each HTML attribute, needed or not.

The browser will also attempt to GET any <img> , <audio> or <script> tags in the file. To prevent this from happening add a defer after the tag. Thus <img> would be <img-defer>. In the case of <audio> or <script> this also applies to the matching </audio> or </script> tags.

The img-defer adjustment to img is done automatically by the macro fetch process. For script-defer and audio-defer adjustments they should be added to the macro fetch.alter parameter where applicable.

Template Syntax

Each template is of the form

  <pre class=template id="name.html">
     ...
  </pre>

where

name.html is the template name that is registered and used in the macro fetch

and the "..." is the template code that is inserted after processing as described in the macro directive.

Example

This is an example from the "Deps.htm" file. It is used to display the donor address information.

The string '$MODOBJ is replaced during the injection process by the current object in context.

  <pre class=template id="code.html">
    <fieldset id=fld-code>
      <legend>Donor {{$MODOBJ$.code}}</legend>
      <div>{{$MODOBJ$.donor.name}}</div>
      <pre>{{$MODOBJ$.donor.address}}</pre>
      <pre>{{$MODOBJ$.donor.phones}}</pre>
    </fieldset>
  </pre>