OpenUI5 provides three classes for control rendering: sap.ui.core.Control, sap.ui.core.RenderManager, and sap.ui.core.Renderer.
sap.ui.core.Control)The control class contains the control for rendering. A control consists of properties, events, aggregations, associations, and methods. They define the behavior of the control. The appearance and data of the control is determined by properties, associations, and aggregations. The get... methods of the control are used to access this information during the execution of the render() method:
Accessing properties:
// var oValue = oControl.get<Property>();
// for example for the 'text'-property
var oValue = oControl.getText();
Accessing 1..1 aggregations
// var oAggregation = oControl.get<Aggregation>();
// for example for content-aggregation
var oAggregation = oControl.getContent();
Accessing 1..n aggregrations:
// var aAggregations = oControl.get<Aggregation>s();
// for example for rows-aggregation
var aAggregations = oControl.getRows();
Accessing associations:
// var sAssociatedControlId = oControl.get<Association>();
// for example labelFor-association
var sAssociatedControlId = oControl.getLabelFor();
sap.ui.core.RenderManager)The render manager class collects pieces of HTML and injects the generated markup into the DOM. The RenderManager determines and loads the corresponding renderer and delegates the control rendering to the renderer. The RenderManager also provides, amongst others, the following helper functions for rendering:
| Method | Description |
|---|---|
| `write()` | Writes string information to the HTML |
| `writeControlData()` | Writes the ID and the recognition data of the control to the HTML |
| `renderControl()` | Converts the specified control into HTML representation and adds it to the HTML; used for rendering child controls |
For more information, see sap.ui.core.RenderManager.
sap.ui.core.Renderer)The renderer class is the base class for control renderers. The Renderer implements the static render method that is called when a control is added to the DOM. To render a control, the RenderManager executes the render method on the corresponding Renderer of the respective control and passes the reference to itself and to the control.
Custom controls don’t need a dedicated renderer module that exports the Renderer class. Instead, you can embed the rendering code in the control’s class definition by using the renderer property. This approach applies to all custom controls, regardless of whether they’re defined within a library or not.
Use an external renderer in a separate file when the renderer has a lot of code or must inherit from another renderer. In other cases, embedding the renderer takes less effort.
Related Information