UI5 Render Manager - wridgeu/wridgeu.github.io GitHub Wiki
More information about the UI5 render manager can be found here ...
... or within the documentation.
renderer: function(oRM, oCustomControl){
oRM.write("<div");
oRM.writeControlData(oCustomControl);
oRM.addClass("someCSSClass");
oRM.writeClasses();
oRM.write(">");
oRM.renderControl(oCustomControl.getAggregation("_label", oCustomControl));
oRM.write("</div>");
}Rendered in HTML
renderer: function(oRM, oCustomControl){
oRM.openStart("div", oCustomControl);
oRM.class("someCSSClassHere");
oRM.openEnd();
oRM.renderControl(oCustomControl.getAggregation("_label", CustomControl));
oRM.close("div");
}Rendered in HTML
Rendered with small adjustment to .openStart method, following a hint in the UI5 Documentation about optimization of the renderer. Here, instead of giving the entire element as second parameter we just hand over the Id where we can add our own suffix.
oRM.openStart("div", oCustomControl.getId()+"-suffix")Rendered in HTML
In order to take advantage of in-place DOM patching use the apiVersion: 2 which improves the rendering performance massively. UI5 architect Cahit Gürgüc gave a talk on this at UI5con 2019 – ever since he implemented it into UI5’s core, apiVersion: 2 should always be used when developing custom controls! Thanks to Volker Buzek for this hint.
renderer: {
apiVersion: 2, //better performance
render(oRM, oControl){
oRM.openStart("div", oControl);
oRM.class("someCSSClassHere");
oRM.openEnd();
oRM.renderControl(oControl.getAggregation("_label", CustomControl));
oRM.close("div");
}
}A detailed explanation about the old and new rendering API of the UI5 framework as well as other examples for a custom control using it, can be found here.
The following picture illustrates a control tree with V2 renderers (new API) and the V1 renderers (old API). While a change of the state of a control using a V2 renderer (dashed border and colored background) only invalidates and updates the DOM of the control, a change to the state of a control using a V1 renderer will also re-render all child controls regardless whether they support DOM patching or not.
