templating UI CDK Guide

# Templating

The Component Development Kit (CDK) allows to use templates for generation Renderer class.

Templates are JSP-like markup pages with special tags that are converted into Renderer by a build script.

It's possible to use evaluated expressions in components templates with the help of scriptlets. It's also possible to create the base class for a template to implement additional functions in it, so as the functions could be called from the template. Hence, in the generated Renderer class there are corresponding function calls on the place of these elements.

Let's create the template for HTML 4.0 markup. At first you should proceed to the inputDate/src/main/templates/org/mycompany directory where htmlInputDate.jspx template file is stored. This file contains a Template Skeleton like this one:

    <?xml version="1.0" encoding="UTF-8"?>
    <f:root
    	xmlns:f="http://ajax4jsf.org/cdk/template"
    	xmlns:c=" http://java.sun.com/jsf/core"
    	xmlns:ui=" http://ajax4jsf.org/cdk/ui"
    	xmlns:u=" http://ajax4jsf.org/cdk/u"
    	xmlns:x=" http://ajax4jsf.org/cdk/x"
    	class="org.mycompany.renderkit.html.InputDateRenderer"
    	baseclass="org.ajax4jsf.renderkit.AjaxComponentRendererBase"
    	component="org.mycompany.component.UIInputDate"
    	>
    	<f:clientid var="clientId"/>
    	<div id="#{clientId}"
    		x:passThruWithExclusions="value,name,type,id"
    		>
    	</div>
    </f:root>

According to the created UI prototype you need to extend Template Skeleton with proper elements:

- <div>-wrapper element with "title", "id" attributes and with the"caption" facet

      ...
      <div id="#{clientId}" title="#{value}" x:passThruWithExclusions="value,name,type,id">
      	...
      </div>
      ...

- <input> element with "id", "value", "name", "type", "class", "style" attributes. It is possible to use the "icon" facet in order to redefine a default icon of the component.

      ...
      <input  id="#{clientId}"
      		name="#{clientId}"
      		type="text"
      		value="#{this:getValueAsString(context, component)}"
      		class="my-inputDate-input #{component.attributes['inputClass']}"
      		style="#{component.attributes['inputStyle']}"/>
      ...

- <img> element with "src", "class", "style" attributes which defines a default icon of the component. In order to add an image to the Template you should register it with the help of <f:resource> template tag and bind to a variable specified by the "var" attribute:

      ...
      <f:resource name="/org/mycompany/renderkit/html/images/inputDate.png" var="icon" />
      	...
      <img src="#{icon}" class="my-inputDate-icon #{component.attributes['iconClass']}" style="#{component.attributes['iconStyle']}"/>
      ...

The <inputDate> component uses styles that should be defined in the template with the help of <h:styles> tag:

    ...
    <h:styles>/org/mycompany/renderkit/html/css/inputDate.xcss</h:styles>
    ...

How to register all resources is explained in the "Component resources registration" chapter.

Important:

Don't forget to add namespace `xmlns:h=" http://ajax4jsf.org/cdk/h"` to the <f:root> element:

    <?xml version="1.0" encoding="UTF-8"?>
    <f:root
    	...
    	xmlns:h=" http://ajax4jsf.org/cdk/h"
    	...
    	>
    	...
    </f:root>

Here is a full example of the template for the <inputDate> component: htmlInputDate.jspx.

Note:

As it is seen in the Template Skeleton the Renderer Baseclass is `org.ajax4jsf.renderkit.AjaxComponentRendererBase`. You need to define Renderer Base class special for the <inputDate> component. In the next section "Creating a Renderer Base class" we will create Renderer Base class `org.mycompany.renderkit.InputDateRendererBase`.

All the Template tags you could find in the "Template tags overview" chapter.