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

Deep dive into SAPUI5 View and Controller

In previous articles Prerequisite for SAPUI5 and Fiori, What is SAPUI5? and What is Fiori?_, we explained the basics of SAPUI5 and Fiori.
In this article, we will deep dive into SAPUI5 View and Controller.

Note: If you are new to SAPUI5, please first learn how to create a Hello World Application in SAPUI5 by referring to this article.

What is SAPUI5 View and Controller?

SAPUI5 application has 2 major part View and Controller.

Deep dive into SAPUI5 View and Controller

View: View is the place where we define UI. For example, in view we decide how a Button should look like.

Controller: Controller is the place where we write all logics. For example, in controller we decide what happens when a Button is clicked.

Note: There is also another very important component called Model. To know more about View, Controller and Model, refer to the article SAPUI5 Overview.

Types of SAPUI5 View

In SAPUI5, Views can be defined in 4 different ways:
  • XML View
  • JavaScript View
  • JSON View
  • HTML View

Among the four, JavaScript and XML views are widely used for SAPUI5 applications. Amongst them also, XML view is mostly used. XML view is recommended as per SAP Fiori guidelines.

XML Based SAPUI5 View

This is recommended view type. The user interface is defined in an XML file or string. The extension of the view file is ".view.xml".
Below is an example of XML based view.

  <mvc:View
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    controllerName="saphanatutorial.controller.HelloWorld" >
    <Button
        text="Say Hello with XML View"
        press="onPress"/>
  </mvc:View>

To see the complete project using XML view please refer to basic Hello World example using XML view.

You must note few important points about XML view.
  1. controllerName is used to specify name of controller file.
  2. The names of the SAPUI5 control libraries are mapped to XML namespaces. One of the required namespaces is defined as default namespace. The control tags for this namespace do not need a prefix.
  3. UI controls (for example Button) can be added as XML elements.

Deep dive into SAPUI5 View and Controller

JavaScript Based SAPUI5 View

The user interface is defined in a traditional JavaScript manner. The extension of the view file is ".view.js".
Below is an example of JavaScript based view.

  sap.ui.jsview("saphanatutorial.view.HelloWorld", {

   getControllerName: function() {
   return "saphanatutorial.controller.HelloWorld";
   },

   createContent: function(oController) {
   var oButton = new sap.m.Button({text:"Say Hello with JavaScript View"});
   oButton.attachPress(oController.onPress);
   return oButton;
   }
  });

To see the complete project using JavaScript view please refer to basic Hello World example using JavaScript view.

JSON Based SAPUI5 View

The user interface is defined in a file or string in JSON format. The file name ends with the extension ".view.json".
Below is an example of JSON based view.

  {
   "Type":"sap.ui.core.mvc.JSONView",
   "controllerName":"saphanatutorial.controller.HelloWorld",
   "content": [{
   "Type":"sap.m.Button",
   "text":"Say Hello with JSON View",
   "press": "onPress"
   }]
  }

To see the complete project using JSON view please refer to basic Hello World example using JSON view.

HTML Based SAPUI5 View

The user interface is defined in an HTML file or string. The file name ends with the extension ".view.html".
Below is an example of HTML based view.

  <template data-controller-name="saphanatutorial.controller.HelloWorld">
   <div
   data-sap-ui-type="sap.m.Button"
   data-text="Say Hello with HTML View"
   data-press="onPress">
   </div>
  </template>

To see the complete project using HTML view please refer to basic Hello World example using HTML view.

Which view type is recommended for SAPUI5?

As per SAP Fiori guidelines, we should always use XML view. SAP ships all Fiori apps using XML views.

The advantage of using XML views are:
  • XML favors a strict separation between view and logic. They help sticking to MVC since you're less tempted to introduce controller logic into views.
  • More readability and less lines of code.
  • Quite implicit, and easier to learn

SAPUI5 Controller

SAPUI5 controller is always defined as a JavaScript file. The extension of the view file is ".controller.js".
Note: In all previous examples, controller is same and defined as JavaScript file.
Below is an example of controller.

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

   return Controller.extend("saphanatutorial.controller.HelloWorld", {
   onPress: function(Event) {
   alert("Hello! Button clicked");
   }
   });
  });

Controller contains methods that define how model and view interact. SAPUI5 provides predefined lifecycle methods for controller. These are also called controller lifecycle hooks. These methods are
  • onInit(): Called when a view is; used to modify the view before it is displayed
  • onExit(): Called when the view is destroyed; used to free resources and finalize activities
  • onAfterRendering(): Called when the view has been rendered; used to do post-rendering manipulations.
  • onBeforeRendering(): Called every time the View is rendered.

Note: To know more about Controller lifecycle methods, refer to the article SAPUI5 Controller Lifecycle Methods.

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