Verbesserung
Top-Thema
Wichtig
Kleinigkeit
Wichtig
Controls erzeugen ihre HTML-Struktur bisher entweder selbst (AbstractControlBase.internalWrite(DisplayContext, TagWriter)), oder nutzen einen kodierten Renderer (Renderer.write(DisplayContext, TagWriter, Object)). In beiden Fällen ist die für das UI-Element produzierte HTML-Struktur entweder überhaupt nicht anpassbar oder nur über eine Code-Erweiterung.
Verbesserung
Es sollen Mechanismen bereitgestellt werden, die es erlauben UI-Elemente über Templates (no-code) zu rendern.
Anwendung
Es gibt drei neue Renderer, die in ihrer Konfiguration über ein Template parametrisiert werden können:
- com.top_logic.layout.template.ConfiguredRenderer (implementiert com.top_logic.layout.Renderer)
- com.top_logic.layout.template.ConfiguredButtonRenderer (implementiert com.top_logic.layout.form.control.IButtonRenderer)
- com.top_logic.layout.table.renderer.ConfiguredTableRenderer (implementiert com.top_logic.layout.table.ITableRenderer)
Je nach Kontext, wird nicht das allgemeine Interface com.top_logic.layout.Renderer erwartet, sondern ein spezialisiertes Renderer-Interface, z.B. com.top_logic.layout.table.ITableRenderer für Tabellen, oder com.top_logic.layout.form.control.IButtonRenderer für Buttons.
Ein solcher konfigurierter Renderer kann z.B. für eine Tabellen-Komponente in der folgenden Form eingesetzt werden:
#!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>
Die Template-Ausdrücke in den Konfigurationsoptionen template und row-template sind Ausdrücke in der Sprache für Rendering-Templates, siehe TL/RenderingTemplates.
Der Zugriff auf den Zustand des gerenderten Objektes erfolgt über das Interface WithProperties, das vom gerrenderten Objekt implementiert werden muss. Wenn das Template einen Ausdruck {my-prop} enthält, wird auf dem gerenderten Objekt die Methode WithProperties.getPropertyValue("my-prop") aufgerufen und das Resultat gerendert.
Test
- Sicht Technisches Demo:Layout-Framework#1:Tabellen:Custom Renderer in tl-demo.