enhancement
Until now, controls have either generated their own HTML structure (AbstractControlBase.internalWrite(DisplayContext, TagWriter)) or used a hard-coded renderer (Renderer.write(DisplayContext, TagWriter, Object)). In both cases, the HTML structure generated for the UI element is either not customizable at all or can only be customized through code extensions.
Improvement
Mechanisms should be provided that allow UI elements to be rendered using templates (no-code).
Application
There are three new renderers whose configuration can be parameterized via a template:
- com.top_logic.layout.template.ConfiguredRenderer (implements com.top_logic.layout.Renderer)
- com.top_logic.layout.template.ConfiguredButtonRenderer (implements com.top_logic.layout.form.control.IButtonRenderer)
- com.top_logic.layout.table.renderer.ConfiguredTableRenderer (implements com.top_logic.layout.table.ITableRenderer)
Depending on the context, the general interface com.top_logic.layout.Renderer is expected, but rather a specialized renderer interface, e.g., com.top_logic.layout.table.ITableRenderer for tables, or com.top_logic.layout.form.control.IButtonRenderer for buttons.
Such a configured renderer can, for example, be used for a table component in the following form:
#!xml
<tableView name="${componentName}" ... >
<table>
<tableRenderer class="com.top_logic.layout.table.renderer.ConfiguredTableRenderer">
<template>
<![CDATA[
<table id="{id}">
<tbody>
{foreach(row : rows, '', $row)}
</tbody>
</table>
]]>
</template>
<row-template>
<![CDATA[
<tr id="{id}" onclick="{selectAction}">
{foreach(col : cols, '', {
<td>
{$col.value}
</td>
})}
</tr>
]]>
</row-template>
</tableRenderer>
</table>
</tableView>
The template expressions in the template and row-template configuration options are expressions in the rendering template language; see TL/RenderingTemplates.
Access to the state of the rendered object is provided via the WithProperties interface, which must be implemented by the rendered object. If the template contains an expression {my-prop}, the method WithProperties.getPropertyValue("my-prop") is called on the rendered object, and the result is rendered.
Test
- See Technical Demo:Layout Framework#1:Tables:Custom Renderer in tl-demo.