How does the lifecycle of UI5 Controls work?

Question

Can someone give a more detailed explanation about the lifecycle of the default events of a UI5 Control? I know there is this page on the documentation that gives an overview of a Control lifecycle, however, I think it is very brief and wanted something more detailed. Can someone list the order of the events of a Control and explain what every event does?

Answer 1

You are absolutely right. The details of a Control lifecycle and implementation details are very well hidden in the docs. I'll try to sum up my so far understanding for you.

The lifecycle of a Control is mainly determined by:

• init : Your little Control is born! Function is called by the framework during constructor execution. Do your initialization stuff here.
• onBeforeRendering : Called by the framework before the rendering of the control is started. Triggers before every (re)rendering.
• onAfterRendering : Called by the framework after the rendering of the control has completed. Triggers after every (re)rendering.
• exit : RIP little Control! Cleans up the element instance before destruction. Called by the framework. Do your clean up here. Btw: If you need to explicitly destruct a Control/Element you should call destroy and not directly exit.

Here is a sample implementation with some sample usages for the different hooks:

sap.ui.core.Control.extend("a.sample.Control", {
  init : function() {
    // instantiate a sub-control
    this._btn = new sap.m.Button(); 
  },

  onBeforeRendering : function() {
    // deregister a listener via jQuery
    this.$("subelement").off("click", this.subElementClick);
  },

  onAfterRendering : function() {
    // register a listener via jQuery on a sub-element
    this.$("subelement").on("click", this.subElementClick);
  },

  subElementClick : function() {
    // do stuff
  },

  exit : function() {
    // clean up sub-controls and local references
    this._btn.destroy();
    delete this._btn;
  }

});

Why shouldn't I do my init stuff in my constructor?

There is a basic UI5 constructor in ManagedObject. It "prepares" your UI5 object for you and calls your init function afterwards. That means in your init all settings will already be applied for you and you can access properties and aggregations as usual.

Why shouldn't I call rerender?

The SAPUI5 rendering is intelligent in a sense that it groups and optimizes queued rerenderings. Therefore you should never call rerender directly but instead use invalidate to mark a control for rerendering.

HF

Chris

Answer 2

UI5 provides predefined lifecycle hooks for Controller implementation. You can add event handlers or other functions to the controller and the controller can fire events, for which other controllers or entities can register.

UI5 provides the following lifecycle hooks:

• onInit(): Called when a view is instantiated and its controls (if available) have already been created; used to modify the view before it is displayed to bind event handlers and do other one-time initialization

• onExit(): Called when the view is destroyed; used to free resources and finalize activities

• onAfterRendering(): Called when the view has been rendered and, therefore, its HTML is part of the document; used to do post-rendering manipulations of the HTML. SAPUI5 controls get this hook after being rendered.

• onBeforeRendering(): Called every time the View is rendered, before the Renderer is called, and the HTML is placed in the DOM-Tree.

^{Source: ui5.sap.com/#/topic/121b8e6337d147af9819129e428f1f75}