HTML Templates

Last Updated: 5/8/2009

Sections above here:
Home » Development » Layout Managers and Templates

Sections below here:

Topics in this section:
Layout Managers and Templates
HTML Templates
Master Templates

Templates allow for advanced formatting and layout of individual containers (forms, IntraWeb frames or user controls, regions). Templates also allow a web designer to design the layout of containers without using the IDE. In short, templates allow presentation and implementation to be separated. Templates are simply special HTML files.

The use of templates still requires the browser to support HTML and JavaScript.

Any framed controls will be rendered without frames when templates are used. If you wish to have frames in the template, you should frame them by using IFrame or other method in your template.

To use templates create a "Templates" sub directory in your application directory (or the directory where ServerController.TemplateDir points to) and create a <FormName>.html file. Next, for the form that you wish to apply the template to:

Add a HTML template processor on your form. In IntraWeb for Delphi this type of processor is called TIWTemplateProcessorHTML component an is placed on the IntraWeb Control tab on the palette. In IntraWeb for Visual Studio .NET this processor is TemplateProcessorHTML and is placed on the IntraWeb components toolbox item.
Set the form's LayoutMgr to the new HTML template processor control.

Most of the template functionality should be self-explanatory by looking at the examples. To see templates in action see the Phonetics Customer Profiler demo.

For each component, the template should contain a tag of the form {%Component.HTMLName%}.

Note: This rule does not apply to non visual controls.

HTMLName in most cases is the same as the name. When the form is generated, the tags will be replaced with the component output. The use of {%TagName %} instead of <#TagName> allows for easier editing in WSIWYG HTML editors and is compatible with all HTML editors. The {% %} tag characters are also not considered special characters and therefore are not converted to special tags. By default, a master FORM tag will surround the body to ensure proper function of all input controls and buttons. However, in some cases this can interfere with the HTML. For such cases, see the help topic for TIWTemplateProcessorHTML.MasterFormTag.

There is a special case when building HTML templates for forms which contain regions or IntraWeb frames in Delphi code or user controls in Visual Studio .NET.

For controls on regions, the following situations can occur:

controls are placed on a region which has it's own subtemplate. In this case, in you do not have to specify tags for the controls on the region, just reference the region thru a tag. At runtime, the controls on this region will be rendered according to the subtemplate. For a Delphi example on subtemplates see the Features demo.
controls are placed on a region which does not have a subtemplate associated. In this case refer to the controls with:

{%RegionName.ControlHTMLName%}. If you want the region to be rendered as in design time, in the HTML template write only the tag for the region: {%RegionHTMLName%}.

Note that in the subtemplates for regions, controls must be referred only with the HTML name: {%Control.HTMLName%}. Please check the Summary Note at the end of this section for an example on how to reference controls on regions with assigned subtemplates.

Controls placed on IntraWeb frames/user controls can be referenced by:

{%FrameNameRegionName.ControlHTMLName%} if the parent IntraWeb frame is not rendered thru a subtemplate. RegionName is the name of the region placed on the IntraWeb frame.
{%FrameName%}: in this case, the IntraWeb frame is rendered according to an assigned subtemplate or, if no subtemplate is assigned, it will have the layout and look established at design time. If you choose this approach, you do not have to reference through tags any of the controls on the IntraWeb frame.

If you wish to use the Borland style tags <#TagName> instead of the IntraWeb style tags you can set the TagType property to ttBorland. IntraWeb type tags are easier to use with WSYWIG HTML editors, as <#TagName> is invalid HTML.

Templates and Mozilla

It is not recommended to use IWRegions inside <table> structures, due to some issues with positioning in the Mozilla browser. For example this won't be positioned correctly in Mozilla:

<html>
  <body>
  <table>
    <tbody>
      <tr>
        <td>
          test</td>
        <td>
          
  
  
  {%IWRegion1%}</td>
  </tr> </tbody> </table> </body> </html>

More details on this bug can be found at http://bugzilla.mozilla.org/show_bug.cgi?id=63895 and http://bugzilla.mozilla.org/attachment.cgi?id=76045&action=view.

Summary Note

Controls on regions or frames whichhave their own templates must be specified individually. Suppose you have a form (IWForm1), and put a region on the form (IWRegion1), an edit box on the form (IWEdit1) and a label on the region (IWLabel1). If you assign templates both to the form and the region, you have to include the controls on the form in the template for the form (IWRegion1 and IWEdit1 in our example), and include the controls on the region in the template for the region (IWLabel1 in our example). An example with regions and subtemplates can be seen in the Features demo.

System Templates

System templates can be used to modify the look and layout of system messages and dialogs generated by IntraWeb.

System Dialogs

There are two specific template files:

IWShowMessage.html
Used for displaying uncaught exceptions (e.g. in OnClick events).
Note: This template has no effect if smAlert is passed to ShowMessage().
IWException.html
Used to provide additional formatting to WebApplication.ShowMessage()
Note: This template has no effect if ServerController.ExceptionDisplayMode is set to smAlert.

The following tags must be present in both templates:

{%textMessage%}

{%butnOk%}

IWError.html

System errors are errors that happen outside of your application and in the server portion of IntraWeb. These errors are rare and usually consist of such things as the user entering invalid requests via URLs or trying to access expired sessions. These errors can be handled by creating a template named IWError.html.

Additional Resources

Blog: Customizing the display of errors