Renderers

The HTML code snippet for read-only mode is defined in file roBoolean.htm:

The snippet adds two radio buttons with the same name, the property name. The first button is used for property value “true”, the second one for “false”. The buttons are disabled since the snippet is for read-only pages only.

Each radio button is followed by its label. The labels reference the custom renderer properties “labelTrue” and “labelFalse”, respectively. The labels are enclosed in “span” elements that define their CSS class name.

The Javascript scriptlet at the bottom of the snippet checks if the actual property value is “true” or “false”, and activates the corresponding radio button.

The snippet references (via ${…​} expressions) some renderer properties that are replaced at runtime by their actual values:

The HTML code generated at runtime may for example look like

The HTML code snippet for read-write mode is defined in file rwBoolean.htm:

The snippet is almost identical to the read-only snippet. The only difference is that the radio buttons are not disabled in order to allow for changing their values.

The Javascript code snippet for displaying boolean properties in table cells is defined in file boolean.js:

C_BO("${value}")

“C_BO” is a unique short identifier for the Javascript method that actually renders the values.

The code to check a radio button is:

The task of a table cell renderer function is to create the DOM representation for the property value. This may be just a single DOM element, or a DOM tree. The renderer does not add the DOM representation to the table cell but just returns the DOM element or the root of the DOM tree to the caller.

Renderer functions are invoked with a couple of predefined arguments:

In addition to that, some complex renderers have additional arguments.

The sample code to render boolean values in read-only mode is

The sample renderer creates a new “div” element and assigns it a CSS class depending on the value of the boolean property.

In order to extend the above function to read-write mode, we first have to understand how tables work in Web Center. If a table is newly displayed, Web Center invokes the renderer functions for each table cell in read-only mode with arguments

If one clicks on a table cell, Web Center invokes the renderer function of the cell in read-write mode with arguments

On value changes, the renderer must store the new value in attribute “value” of a DOM element (created by the renderer) with id “<cell id>_edit”. Then, if one clicks somewhere outside the table cell, Web Center persists the possibly modified value in a hidden field and invokes the renderer function again in read-only mode, but this time with arguments

If the cell is clicked again, the renderer function is called in read-write mode:

Before Web Center invokes a renderer function it deletes the content of the table cell. The renderer, therefore, has to recreate the table content on each invocation.

In our sample, we want let the users change a boolean value by clicking on a square, but not by clicking into the cell somewhere outside the square. This poses a slight difficulty since the “div” elements representing the squares do not propagate clicks to the table cell. Thus, a click on a square will not lead to a call of the cell’s renderer function. On the other hand, a click somewhere outside the square will invoke the renderer function but should have no effect at all.

Therefore, we first assign an onclick handler to the square:

square.onclick = custom.squareClicked;

The onclick handler gets the DOM element representing the table cell, sets its “squareClicked” attribute to “true”, and propagates the click to the table cell by firing a corresponding event, which will lead to a call of the cell’s renderer function in read-write mode:

Now, whenever our renderer function is called in read-write mode, we have to check the value of the cell’s “squareClicked” attribute. If its value is “true”, the call was caused by clicking on the cell’s square, and we must invert the value of the boolean property and reset the attribute. Otherwise, we don’t change the value:

Finally, we save the current boolean value in the square’s “div” element, and set its id to the cell’s id plus “_edit”:

This will let Web Center store the new value in a hidden field when the cell changes back to read-only mode. Note that the lifetime of the “div” element is temporary since the cell content is cleared each time the renderer is invoked.

The complete renderer code is:

Web Center provides a Javascript object named renderers which is responsible to decide which renderer to take for which table cell. The object keeps a map of renderer ids to renderer functions. Initially, the map is filled with the standard cell renderers provided with Web Center.

Custom cell renderers must be registered with the renderers object in order to get added to the map. The object provides a registration method:

The only argument of our sample custom renderer is the cell value. Thus, we register the renderer with:

Add an include statement for your custom script file to the custom JSP
WEB-INF/custom/jsp/scriptsAndStyles.jsp:

File: WEB-INF/classes/resources/languages/en/text_en.properties

Messages:

File: WEB-INF/classes/resources/languages/de/text_de.properties

Messages:

File: resources/custom/styles/medium/styles.css

Definitions:

File: resources/custom/styles/large/styles.css

Definitions:

The styles are identical to the medium ones, except for a larger font size, height and width.

Import the core tag library and add an include statement for your custom script file to the custom JSP WEB-INF/custom/jsp/scriptsAndStyles.jsp:

The renderer used to display or modify a property in an HTML form may be assigned as field renderer to a form property:

The above definition assigns renderer “customBoolean” to the HTML form field for property “dxrUserAssignmentPossible”.

The renderer used to display or modify a property in an HTML table column may be assigned as cell renderer to a data property:

The above definition assigns renderer “customBoolean” to the HTML table column for property “dxrUserAssignmentPossible”.

The following line assigns the default renderer “customBoolean” to property “dxrUserAssignmentPossible”:

For generic forms, the default renderer may vary with the object type:

The default renderer for the property is “checkbox” for roles, and “customBoolean” otherwise.

Property names and object types must be specified in lower case.

The following line assigns the default renderer “customBoolean” to all properties with editor “siemens.dxm.storage.beans.JnbBoolean”:

The following line assigns the default renderer “customBoolean” to all properties of type ”java.lang.Boolean”: