A widget template (.tpl.html) file contains HTML code that implements an element of the user interface. Working with these components individually or grouped in containers simplifies your work in building a customized UI.

Overview

The template contains blocks of HTML code that can be easily selected by CSS. Templates define HTML elements for two main types of widgets:

• Simple widget
• Container widget

Simple widget

A simple widget defines elements that implement basic functions, such as form field elements. The EditWidget, LabelWidget, and TextEditWidget are good examples where the <div> container holds code for a single widget.

For example, examine the gbc-project-dir/src/js/base/widget/widgets/formfields/EditWidget.tpl.html template shown here:

<div class="mt-field gbc_dataContentPlaceholder">
  <input type="text" />
</div>

The CSS selector targets elements of both the mt-field and gbc_dataContentPlaceholder CSS classes. When a widget is used in the DOM, elements and attributes of these classes will be appended in the DOM node. The input element with type "text" represents markup that is placed inside the DOM node.

Container widget

A container widget provides a placeholder for child widgets. It is defined with a class attribute with its value set to containerElement. The gbc-project-dir/src/js/base/widget/widgets/actions/MenuWidget.tpl.html template is a good example of this type of template:

<div>
  <div class="gbc_MenuWidgetTitle">
    <div class="gbc_MenuWidgetText"></div>
  </div>
  <div class="gbc_MenuWidgetScrollContainer">
    <div class="containerElement"></div>
  </div>
</div>