XEO Components and Templating

Introduction

In order to improve the layout customization of existing applications, the concept of "templating" was added to (some) existing components and the creation of new "templatable" components is also allowed. This document explains all you need to know in order to use and create the new "templating" system.

In order to create a component (the old way) you need two classes:

The component class
The renderer class

The component class holds the properties of the component and the renderer is responsible for the HTML output. The rendering of a component is usually something like this:

w.startElement( DIV );

w.writeAttribute( ID, tabs.getClientId() );

w.writeAttribute( CLASS, "xwc-tabs" );

Iterator<UIComponent> childrenIterator = component.getChildren().iterator();

w.startElement( UL );

w.writeAttribute( CLASS, "xwc-tab-navbar" );

This meant that you had absolutely no chance of customizing the look and feel of a given component (apart from creating a new renderer for the said component component). With component templating the following scenario is possible when building a component: