SapHanaTutorial.Com HOME     Learning-Materials Interview-Q&A Certifications Quiz Online-Courses Forum Jobs Trendz FAQs  
     Explore The World of Hana With Us     
About Us
Contact Us
 Apps
X
HANA App
>>>
Hadoop App
>>>
Tutorial App on SAP HANA
This app is an All-In-One package to provide everything to HANA Lovers.

It contains
1. Courses on SAP HANA - Basics, Modeling and Administration
2. Multiple Quizzes on Overview, Modelling, Architeture, and Administration
3. Most popular articles on SAP HANA
4. Series of Interview questions to brushup your HANA skills
Tutorial App on Hadoop
This app is an All-In-One package to provide everything to Hadoop Lovers.

It contains
1. Courses on Hadoop - Basics and Advanced
2. Multiple Quizzes on Basics, MapReduce and HDFS
3. Most popular articles on Hadoop
4. Series of Interview questions to brushup your skills
Apps
HANA App
Hadoop App
';
Search
Stay Connected
Search Topics
Topic Index
+
-
SAPUI5 Overview
+
-
SAP Fiori Overview
+
-
SAP Web IDE
+
-
SAPUI5 Basic Concepts
+
-
Data Binding and Model

SAPUI5 Controller Lifecycle Methods

In this article we will learn about SAPUI5 Controller lifecycle methods.

Note: If you are new to SAPUI5 View and Controller, we recommend you to read below articles.

What are lifecycle methods or lifecycle hooks in SAPUI5 Controller?

SAPUI5 provides predefined lifecycle methods for controller. These are also called controller lifecycle hooks. These methods are
  • onInit()
  • onBeforeRendering()
  • onAfterRendering()
  • onExit()


SAPUI5 Controller Lifecycle Methods

onInit()
This method is called upon initialization of the View. The controller can perform its internal setup in this hook. It is only called once per View instance, unlike the onBeforeRendering and onAfterRendering hooks.
If you need to modify the view before it is displayed, for example bind data to view, initialize model; it can be done inside onInit() methd.

onBeforeRendering()
This method is called every time the View is rendered, before the Renderer is called and the HTML is placed in the DOM-Tree. It can be used to perform clean-up-tasks before re-rendering.

onAfterRendering()
This method is called every time the View is rendered, after the HTML is placed in the DOM-Tree. It can be used to apply additional changes to the DOM after the Renderer has finished.
It can be used to do post-rendering manipulations of the HTML.

onExit()
This method is called upon destruction of the View. The controller should perform its internal destruction in this hook. It is only called once per View instance, unlike the onBeforeRendering and onAfterRendering hooks.
It can be used to free resources and finalize activities.

Let's understand with the help of an example

Prerequisite: Please create a SAPUI5 Hello World application by following the article SAPUI5 Hello World using Web IDE

Step 1: Open Web IDE and open the SAPUI5 HelloWorld project. Open view (HelloWorld.view.xml) file and paste below code.
   <mvc:View
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    controllerName="saphanatutorial.controller.HelloWorld" >
    <Button
        text="Destroy View and Controller"
        press="onPress"/>
  </mvc:View>

Step 2: Open controller (HelloWorld.controller.js) file and paste below code.
sap.ui.define([
   "sap/ui/core/mvc/Controller"
  ], function(Controller) {

   return Controller.extend("saphanatutorial.controller.HelloWorld", {

   onInit: function() {
    alert("onInit function called");
   },

   onBeforeRendering: function() {
    alert("onBeforeRendering function called");
   },

   onAfterRendering: function() {
    alert("onAfterRendering function called");
   },

   onExit: function() {
     console.log("onExit() of controller called...");
     alert("onExit function called");
  },

   onPress: function(Event) {
    this.getView().destroy();
   }

   });
  });

Step 3: Save and Run the project. You will get 3 alerts one by one for onInit(), onBeforeRendering() and onAfterRendering().

SAPUI5 Controller Lifecycle Methods

Step 4: Click on the button "Destroy View and Controller", this will destroy the view and controller. Hence the onExit() method will be called and you will see an alert like below.

SAPUI5 Controller Lifecycle Methods

You can download the source code from here.
Otherwise please click here to see the running SAPUI5 lifecycle method example. Note that this link may not work in IE browser.

Difference between onInit() and onBeforeRendering()

One of the main doubt that people have is the difference between onInit() and onBeforeRendering().
onBeforeRendering() is used when you want to perform something before the view is loaded, for example you want to load oData model before the view is loaded. You might wonder that this can also be done inside onInit().

The main difference is between onInit() and onBeforeRendering() is that onInt() is only called first time when the view is rendering. It will not be called again and again whenever the view is re rendered again. That is why onInit() is mostly used to initialize some parameters. While onBeforeRendering() is called whenever the view is re-rendered again.

Let's say you want to get data from OData model every time you load your view so that you can show user with the real-time data. But if you did this in onIint() then user will not be able to see the changes that are made after the first call of the service(When the view is first time rendered) doesn't matter how many time view is re-rendered as onInit() will not be called again. That's why you should load the data in onBeforeRendering().

What's Next?

Below articles might help you to know more about SAPUI5.

If you have any question, please post in the comment or contact us.



Support us by sharing this article.



Explore More
Close X
Close X

Leave a Reply

Your email address will not be published. Required fields are marked *

Current day month ye@r *

 © 2017 : saphanatutorial.com, All rights reserved.  Privacy Policy