Class sap.ui.core.RenderManagerModule: sap/ui/core/RenderManager
RenderManager that will take care for rendering Controls.
The RenderManager will be available from the sap.ui.core.Core instance (available via sap.ui.getCore()
).
It can be used to render Controls and Control-Trees.
The convention for renderers belonging to some controls is the following:
- for a Control e.g.
sap.ui.controls.InputField
there shall be - a renderer named
sap.ui.controls.InputFieldRenderer
sClassName
and enriches it with the information contained in oClassInfo
.The value is properly escaped to avoid XSS attacks.
- See:
- sap.ui.core.Core
- sap.ui.getCore()
{sap.ui.core.Element} | oElement | The Element instance for which to create the placeholder ID |
{string} | The ID used for the invisible Placeholder of this element |
sClassName
and enriches it with the information contained in oClassInfo
. oClassInfo
might contain the same kind of information as described in sap.ui.base.Object.extend.
{string} | sClassName | Name of the class being created |
{object} | oClassInfo? | Object literal with information about the class |
{function} | FNMetaImpl? | Constructor function for the metadata object; if not given, it defaults to sap.ui.core.ElementMetadata |
{function} | Created class / constructor function |
{string} | sId | control id to search content for. |
{jQuery} | a jQuery collection representing the found content |
{sap.ui.base.Metadata} | Metadata object describing this class |
{Element} | the hidden area reference belonging to this core instance. |
{sap.ui.core.Control} | oControl | the control that should be rendered |
A node is declared "to-be-preserved" when it has the data-sap-ui-preserve
attribute set. When the optional parameter bPreserveNodesWithId
is set to true, then nodes with an id are preserved as well and their data-sap-ui-preserve
attribute is set automatically. This option is used by UIAreas when they render for the first time and simplifies the handling of predefined HTML content in a web page.
The "to-be-preserved" nodes are searched with a depth first search and moved to the 'preserve' area in the order that they are found. So for direct siblings the order should be stable.
{Element} | oRootNode | to search for "to-be-preserved" nodes |
{boolean} | bPreserveRoot? | whether to preserve the root itself |
{boolean} | bPreserveNodesWithId? | whether to preserve nodes with an id as well |
{string} | sName | name of the class to be added; null values are ignored |
{sap.ui.core.RenderManager} | this render manager instance to allow chaining |
{string} | sName | name of the CSS property to write |
{string|float|int} | value | value to write |
{sap.ui.core.RenderManager} | this render manager instance to allow chaining |
A control is responsible for the rendering of all its child controls. But in some cases it makes sense that a control does not render all its children based on a filter condition. For example a Carousel control only renders the current visible parts (and maybe some parts before and after the visible area) for performance reasons. If a child was rendered but should not be rendered anymore because the filter condition does not apply anymore this child must be cleaned up correctly (e.g deregistering eventhandlers, ...).
The following example shows how renderControl and cleanupControlWithoutRendering should be used:
render = function(rm, ctrl){ //... var aAggregatedControls = //... for(var i=0; i Note: The method does not remove DOM of the given control. The callee of this method has to take over the responsibility to cleanup the DOM of the control afterwards. For parents which are rendered with the normal mechanism as shown in the example above this requirement is fulfilled, because the control is not added to the rendering buffer (renderControl is not called) and the DOM is replaced when the rendering cycle is finalized.
{sap.ui.core.Control} | oControl | the control that should be cleaned up |
- Since:
- 1.22.9
This function must not be called within control renderers.
Usage:
// Create a new instance of the RenderManager var rm = sap.ui.getCore().createRenderManager(); // Use the writer API to fill the buffers rm.write(...); rm.renderControl(oControl); rm.write(...); ... // Finally flush the buffer into the provided DOM node (The current content is removed) rm.flush(oDomNode); // If the instance is not needed anymore, destroy it rm.destroy();
{Element} | oTargetDomNode | The node in the dom where the buffer should be flushed into. |
{boolean} | bDoNotPreserve | flag, whether to not preserve (true) the content or to preserve it (false). |
{boolean|int} | vInsert | flag, whether to append (true) or replace (false) the buffer of the target dom node or to insert at a certain position (int) |
sap.ui.getCore().getConfiguration()
{sap.ui.core.Configuration} | the configuration object |
{sap.ui.core.Control} | oControl | the control that should be rendered |
If the control is already rendered in the provided DOMNode the DOM of the control is replaced. If the control is already rendered somewhere else the current DOM of the control is removed and the new DOM is appended to the provided DOMNode.
This function must not be called within control renderers.
{sap.ui.core.Control} | oControl | the Control that should be rendered. |
{Element} | oTargetDomNode | The node in the DOM where the result of the rendering should be inserted. |
If the given control is undefined or null, then nothing is rendered.
{sap.ui.core.Control} | oControl | the control that should be rendered |
{sap.ui.core.RenderManager} | this render manager instance to allow chaining |
{string|number} | sText | (can be a number too) |
{sap.ui.core.RenderManager} | this render manager instance to allow chaining |
The ARIA properties are only written when the accessibility feature is activated in the UI5 configuration.
The following properties/values to ARIA attribute mappings are done (if the element does have such properties): editable===false
=> aria-readonly="true"
enabled===false
=> aria-disabled="true"
visible===false
=> aria-hidden="true"
required===true
=> aria-required="true"
selected===true
=> aria-selected="true"
checked===true
=> aria-checked="true"
In case of the required attribute also the Label controls which referencing the given element in their 'for' relation are taken into account to compute the aria-required
attribute.
Additionally the association ariaDescribedBy
and ariaLabelledBy
are used to write the id lists of the ARIA attributes aria-describedby
and aria-labelledby
.
Label controls which referencing the given element in their 'for' relation are automatically added to the aria-labelledby
attributes.
Note: This function is only a heuristic of a control property to ARIA attribute mapping. Control developers have to check whether it fullfills their requirements. In case of problems (for example the RadioButton has a selected
property but must provide an aria-checked
attribute) the auto-generated result of this function can be influenced via the parameter mProps
as described below.
The parameter mProps
can be used to either provide additional attributes which should be added and/or to avoid the automatic generation of single ARIA attributes. The 'aria-' prefix will be prepended automatically to the keys (Exception: Attribute 'role' does not get the prefix 'aria-').
Examples: {hidden : true}
results in aria-hidden="true"
independent of the precense or absence of the visibility property. {hidden : null}
ensures that no aria-hidden
attribute is written independent of the precense or absence of the visibility property. The function behaves in the same way for the associations ariaDescribedBy
and ariaLabelledBy
. To append additional values to the auto-generated aria-describedby
and aria-labelledby
attributes the following format can be used: {describedby : {value: "id1 id2", append: true}}
=> aria-describedby="ida idb id1 id2"
(assuming that "ida idb" is the auto-generated part based on the association ariaDescribedBy
).
{sap.ui.core.Element} | oElement? | the element whose accessibility state should be rendered |
{Object} | mProps? | a map of properties that should be added additionally or changed. |
{sap.ui.core.RenderManager} | this render manager instance to allow chaining |
{string} | sName | the name of the attribute |
{string|number|boolean} | value | the value of the attribute |
{sap.ui.core.RenderManager} | this render manager instance to allow chaining |
The value is properly escaped to avoid XSS attacks.
{string} | sName | the name of the attribute |
{any} | vValue | the value of the attribute |
{sap.ui.core.RenderManager} | this render manager instance to allow chaining |
{sap.ui.core.Element|boolean} | oElement? | an Element from which to add custom style classes (instead of adding from the control itself) |
{sap.ui.core.RenderManager} | this render manager instance to allow chaining |
{sap.ui.core.Control} | oControl | the control whose identifying information should be written to the buffer |
{sap.ui.core.RenderManager} | this render manager instance to allow chaining |
{sap.ui.core.Element} | oElement | the element whose identifying information should be written to the buffer |
{sap.ui.core.RenderManager} | this render manager instance to allow chaining |
{string} | sText | |
{boolean} | bLineBreaks | Whether to convert linebreaks into tags |
{sap.ui.core.RenderManager} | this render manager instance to allow chaining |
Controls should only use this method if they can't live with the standard 'visible=false' implementation of the RenderManager which renders dummy HTMLSpanElement for better re-rendering performance. Even though HTML5 error tolerance accepts this for most of the cases and these dummy elements are not in the render tree of the Browser, controls may need to generate a valid and semantic HTML output when the rendered HTMLSpanElement is not an allowed element(e.g. <span> element within the <tr> or <li> group).
The caller needs to start an opening HTML tag, then call this method, then complete the opening and closing tag.
oRenderManager.write("");
{sap.ui.core.Element} | oElement | an instance of sap.ui.core.Element |
{sap.ui.core.RenderManager} | this render manager instance to allow chaining |
{sap.ui.core.RenderManager} | this render manager instance to allow chaining |
{sap.ui.core.Control} | oControl | the Control whose HTML should be returned. |
- Deprecated:
- Since version 0.15.0. Use
flush()
instead render content outside the rendering phase.
{string} | the resulting HTML of the provided control |
- Deprecated:
- Not implemented - DO NOT USE
{sap.ui.core.RenderManager} | this render manager instance to allow chaining |