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 Explained

In this article we will go deep into SAPUI5 Controller and its design.

Note: If you are new to SAPUI5, we recommend you to read below articles too.

An example of Controller

Below is an example of Controller. click here to open the complete SAPUI5 project. Please note that this link may not work in IE browser.

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

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

   onPress: function() {
    MessageToast.show("Hello");
   }

   });
  });

Controller File Extension
Controller file extension is always ".controller.js".

What is "use strict"?
The "use strict" is a literal expression in JavaScript. It tells the browser to execute the code in a so called "strict mode". With strict mode, you cannot, for example, use undeclared variables.

The strict mode helps to detect potential coding issues at an early state at development time. Thus, it helps to prevent common JavaScript pitfalls and it's therefore a good practice to use strict mode.

SAPUI5 Controller Explained

Controller.extend()
  Controller.extend("saphanatutorial.controller.HelloWorld", { ... });
The extend creates a new subclass of SAPUI5 Controller class (sap.ui.core.mvc.Controller) with name "saphanatutorial.controller.HelloWorld".

Refer to Understanding Namespace in SAPUI5 to know how "saphanatutorial.controller.HelloWorld" reference string is decided.

How sap.ui.define() work?

sap.ui.define() is used to define a module and its dependencies in such a way that they can be loaded asynchronously without worrying about the loading order. At first declare dependencies and then define the factory function that becomes the controller, in this case.

There are 2 parameters required for sap.ui.define()
  • Optional list of dependencies, declared as an array
  • Function that has a single statement returning an extended controller

  sap.ui.define([LIST_OF_DEPENDECIES],
    function() {
      return Controller.extend("PATH_TO_CONTROLLER_FILE_NAME", {
        }
      )
    }
  );

In this case, we have a dependency on sap.ui.core.mvc.Controller and sap.m.MessageToast because we are:
  • extending SAPUI5 Controller (sap.ui.core.mvc.Controller)
  • using Message Toast's "show" function
So we declare a dependency on sap.m.MessageToast and sap.ui.core.mvc.Controller.

Note: The dependencies are expressed as resource paths (with the .js suffix omitted).

SAPUI5 Controller Explained

In the function, each dependency reference is specified in the same order they're declared in the dependency list.

By convention, the most significant part of the resource path name is used for the parameter name (for example "MessageToast" for sap.m.MessageToast). But you can give any reference name. For example, instead of "MessageToast", we can write "xyz" or any other name.
Following code will work just fine.

SAPUI5 Controller Explained

Detailed information about sap.ui.define() can in found in the API Reference.

Can there be an SAPUI5 View without Controller?

A view does not necessarily need an explicitly assigned controller. You do not have to create a controller if the view is just displaying information and no additional functionality is required. If a controller is specified, it is instantiated after the view is loaded.

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