The XForms Engine HTML rendering is completely done by separate Render Devices. The XHTML 1.0 strict and HTML 5 Render Devices allow for complete customization using formatting rules, defined in XML. These formatting rules can be selected at runtime for full control over the resulting HTML.

A template xml for the HTML render device consists of the following elements:

• template (attributes: id [inherit])
  • format (attributes: name)
    • [format (attributes: [appearance] [hasclass] [readonly] [scripting])]

All these elements exist in the namespace http://smartsite.nl/namespaces/xforms/1.0/html. A brief example:

XML

Copy Code

<template id="E-Loket" inherit="default" xmlns="http://smartsite.nl/namespaces/xforms/1.0/html">       <format name="help"><![CDATA[<span class="xforms-field-info xforms-field-help"><span class="xforms-help-box">{data}</span></span>]]></format>       <format name="controlcontainer">         <![CDATA[<div class="xforms-cc {cls}"><div>{label}{data}{info}</div>{help}</div>    ]]>       </format> </template>

The inherit attribute of the template can refer to any other template by id, althoug it will usually refer to the default template.

The following names are supported with the formatting parameters in parentheses:

• form (id, action, charset, enctype, method, cls, data)
  The form element. The parameter cls is the value of the class attribute, data is the inner html of the form.
• group (id, cls, attr, label, data)
  A <xf:group> element. attr will contain additional attributes.
• switch (id, cls, attr, data)
  A <xf:switch> element.
• repeat (id, cls, attr, data)
  A <xf:repeat> element.
• repeatcontainer (cls, data)
  For each node referenced by a repeat a copy of its children will be rendered within a repeatcontainer.
• select (id, name, size, hint, attr, data)
  The root element of a multi-select control. The attr parameter will also contain the class attribute.
• selectitem (name, value, attr, label)
  A single item within a multi-select control. The attr parameter will also contain the class attribute.
• selectselecteditem (name, value, attr, label)
  As selectitem, but specifically for selected items.
• selectitemgroup (label, data)
  A group of items within a multi-select control.
• select1 (id, name, size, hint, attr, data)
  The root element of a single-select control. The attr parameter will also contain the class attribute.
• select1item (name, value, attr, label)
  A single item within a single-select control. The attr parameter will also contain the class attribute.
• select1selecteditem (name, value, attr, label)
  As selectitem, but specifically for the selected item.
• select1itemgroup (label, data)
  A group of items within a single-select control.
• controlcontainer (cls, label, data, info, help)
  The control container wraps control, label, alert and help text.
• emptycontrolcontainer (cls, label, data, info, help)
  A version of the control container for control without a separate label element (like buttons).
• label (id, attr, data)
  The label element for inputs (not for groups etc.). id is the id of the corresponding input, not of the label element itself. attr will also contain the class attribute.
• trigger (id, name, hint, attr, label)
  A trigger element. Usually rendered as a button.
• fileinput (id, name, hint, attr)
  A file (upload) input.
• textarea (id, name, hint, attr, value, rows, cols)
  A multi-line text input.
• textinput (id, name, type, hint, attr, value, maxlength)
  A single-line text input.
• booleaninput (id, name, hint, attr)
  A boolean input (usually a checkbox).
• output (id, hint, attr, data)
  An output control.
• image (src, alt, hint, attr)
  Specific output for uploaded images.
• validation (data)
  Contains the alert text of a control (its validation error).
• help (data)
  Contains the help text of a control.
• accesskey(data)
  How the access key of a control is made visible within its label.

All these named formats are used in the default template, which is included as an example.

A named format (a direct child of the template) may contain conditional formats. Conditional formats are evaluated from top to bottom. The first format to meet all conditions is returned, so order your conditional formats carefully. The following conditions are checked:

• appearance
  Custom appearances should be prefixed with the complete namespace uri.
• hasclass
  Checks whether the element currently being formatted contains the given class.
• readonly
• scripting
  Allows for different control formatting for scripting and non-scripting environments.

The attributes readonly and scripting are booleans.. Valid values are 0/1 or false/true.

Because the order of conditional formats is critical, subclassing of formats can only be done at the named formats level. For example:

XML

Copy Code

<template id="definitionlist" inherit="default" xmlns="http://smartsite.nl/namespaces/xforms/1.0/html">  <format name="controlcontainer"><![CDATA[<dt>{label}</dt><dd>{data}{info}</dd>]]></format>  <format name="group">   <format appearance="minimal"><![CDATA[<fieldset class="{cls}" id="{id}"{attr}><dl>{data}</dl></fieldset>]]></format>   <format appearance="compact"><![CDATA[<fieldset class="{cls}" id="{id}"{attr}><dl>{data}</dl></fieldset>]]></format>   <format><![CDATA[<fieldset class="{cls}" id="{id}"{attr}><legend>{label}</legend><dl>{data}</dl></fieldset>]]></format>  </format>  <format name="switch">   <format appearance="minimal"><![CDATA[<dl>{data}</dl>]]></format>   <format><![CDATA[<dl class="{cls}" id="{id}"{attr=""}>{data}</dl>]]></format>  </format>  <format name="repeat">   <format appearance="minimal"><![CDATA[<dl>{data}</dl>]]></format>   <format><![CDATA[<dl class="{cls}" id="{id}"{attr=""}>{data}</dl>]]></format>  </format> </template>