Controls previously either generate their HTML structure themselves(AbstractControlBase.internalWrite(DisplayContext, TagWriter)), or use a coded renderer(Renderer.write(DisplayContext, TagWriter, Object)). In both cases, the HTML structure produced for the UI element is either not customizable at all or only via a code extension.
Improvement
Mechanisms should be provided to allow UI elements to be rendered via templates (no-code).
Application
There are three new renderers that can be parameterized in their configuration 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, not the general interface com.top_logic.layout.Renderer is expected, but a specialized renderer interface, e.g. com.top_logic.layout.table.ITableRenderer for tables, or com.top_logic.layout.form.control.IButtonRenderer for buttons.
For example, such a configured renderer can 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 language for rendering templates, see TL/RenderingTemplates.
The state of the rendered object is accessed through the WithProperties interface, which must be implemented by the rendered object. If the template contains an expression {my-prop}, the WithProperties.getPropertyValue("my-prop") method is called on the rendered object and the result is rendered.
Test
- View Technical Demo:Layout Framework#1:Tables:Custom Renderer in tl-demo.