SAPUI5 Controller Lifecycle Events

SAP UI5 events for a view:

Event handlers:
- onPress. Called on press button.

Specific events, which are called “lifecycle hooks”:

- onInit. Colled when the controller is initialized.
- onBeforeRendering. Called before the rendering.
- onAfterRendering. Called when the rendering has already happened on the page
- onExit. Called when the view is closed.

the “lifecycle hooks” are invoked by the UI5 framework at key points in the lifecycle of the application.



Ej. onPress event handler:

In the view.xml:

<Button text="Find Jobs" type="Emphasized" class="sapUiSmallMarginTop" press=".onPress('for jobs')"/>

In the view.controler.js:

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function (Controller) {
    "use strict";

    return Controller.extend("xxx.controller.MainView", {
        onInit: function () {

        },
        onPress: function (oEvent) {
            sap.ui.require(["sap/m/MessageToast"], function (oMessage) {
                oMessage.show("Hello on press.");
            });
        }
    });
});

 

Web App. Add SAPUI5 elements to a view

<mvc:View controllerName="macara.webapp.controller.App"

       displayBlock="true"

       xmlns="sap.m"

       xmlns:mvc="sap.ui.core.mvc"

       xmlns:core="sap.ui.core">

    <Page title="{i18n>title}">

      <content>

         <Label text="XXX" labelFor="city"/>

         <Button text="Find 

                 "class="sapUiSmallMarginTop" 

                  type="Emphasized"/>

              </content>

         

     </Page>      

Speed up UI5 Applications

To improve the performance of your app, you should always load resources asynchronously.

index.html

UI5 is bootstrapped relatively in the index.html file.

The bootstrapping tag data-sap-ui-async="true" in the index.html file loads the modules for all declared libraries asynchronously. This way the files are retrieved in parallel which speeds up the loading of the background processes and speeds up the whole app too.

 

All UI assets are encapsulated in a component that is instantiated from our index.html page.

Components are independent and reusable parts used in UI5 applications. The component configuration is stored in the manifest.json – the so-called application descriptor.  

manifest.json

The manifest.json contains additional settings for asynchronous loading of the root view and the views instantiated by the routing configuration.


 

Controller in the model-view-controller pattern (MVC)

Asynchronous loading of dependencies is also set in the App.controller.js file included in the template. In the controller file, "sap.ui.define" is used for asynchronous loading of the controller base class before extending it.