Create your First SAPUI5 Example on Eclipse based on MVC pattern

This first SAPUI5 application is created based on MVC pattern. The reason I choose to show example with MVC pattern as the first example is to make you familiar right from the beginning about SAPUI5 application architecture.

There are many articles that first shows how to create a SAPUI5 application based on non-MVC architecture and later switches to MVC. But in work, we will never come across any application that is based on non-MVC pattern, hence it makes sense to get accustomed with it right from beginning.

Please read the article MVC architecture in SAPUI5 application, if you are not aware of  MVC in SAPUI5.

Run Eclipse.
From the menu click, File-> New -> Other.

Select Application Project under SAPUI5 Application Development folder.
Click Next.

Give a suitable Project Name - zamarmn1
select Target Device - Mobile
Select checkbox Create an Initial View
click Next.

Specify the view Name - Main and select Devleopement Paradigm XML.
Click Finish.






































In the Development Paradigm window we have four options for view type:
JavaScript
XML
JSON
HTML
In SAPUI5, we can choose any of the above languages to create the view i.e. JavaScript, XML, JSON and HTML.
For this example I have choosen to create XML view. SAP recommends to use XML view type to create views. SAP Fiori apps and S/4 HANA Fiori applications are using XML view types. Since SAP favors XML views over other view types, hence I would like to discuss our first example using XML views. What we learn first, is what we remember always. In SAPUI5 job also, we may be working most of the time with XML views.

With little practice, we can be familiar with XML style of coding. Reason why SAP prefers to create Fiori applications on XML views are:
XML follows hierarchical structure of coding,
XML views can be validated automatically,
XML syntax are more compact compared to HTML syntax,
XML codes are more readable compared to JavaScript and JSON code,
SAP Web IDE supports XML code by providing XML Layout editor,
It may be easy to include inline functions in JavaScript view, thereby violating SAPUI5 strict MVC architecture pattern.

The above reasons, and most importantly SAP's favor for XML is enough to make us start practicing XML view coding.

The Eclipse creates a SAPUI5 project based on MVC paradigm. The project structure has a folder with the name of the project. It contains a view.XML file and controller.js file. An index.html file is also created.

























As per MVC paradigm, we need to separate the code for Model, View and Controller. This example creates the view and controller file to separate logic for view and controller. Lets check the code for each of the files created.

Main.view.xml

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
              controllerName="zamarmn.Main" xmlns:html="http://www.w3.org/1999/xhtml">
       <Page title="Title">
              <content>
      
              </content>
       </Page>

</core:View>
First line : xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
This is namespace concept in XML. It declares short names for referring the corresponding SAPUI5 libraries. So, short name core refers to SAPUI5 library sap.ui.core, mvc refers sap.ui.core.mvc. Blank namespace is user for sap.m.
So, if you are trying to change any existing code in job, do check the namespace used by the developer.
Second line: controllerName="zamarmn.Main" xmlns:html="http://www.w3.org/1999/xhtml"
Declares the name of the controller used by this view.
After this we have the <Page> </Pagetag. This will hold any controls that we want to place in the XML view.

Main.controller.js

sap.ui.controller("zamarmn.Main", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf zamarmn.Main
*/
//     onInit: function() {
//
//     },

/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf zamarmn.Main
*/
//     onBeforeRendering: function() {
//
//     },

/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf zamarmn.Main
*/
//     onAfterRendering: function() {
//
//     },

/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf zamarmn.Main
*/
//     onExit: function() {
//
//     }


});

The controller.js file has a function sap.ui.controller("zamarmn.Main", {
...
});
The Id "zamarmn.Main" refers to the view Main.view.xml.
The controller has four functions inside it. These are known as the life cycle methods of the controller.
OnInit
OnBeforRendering
OnAfterRendering
OnExit.

index.html

<!DOCTYPE HTML>
<html>
       <head>
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

              <script src="resources/sap-ui-core.js"
                           id="sap-ui-bootstrap"
                           data-sap-ui-libs="sap.m"
                           data-sap-ui-theme="sap_bluecrystal">
              </script>
              <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

              <script>
                           sap.ui.localResources("zamarmn");
                           var app = new sap.m.App({initialPage:"idMain1"});
                           var page = sap.ui.view({id:"idMain1", viewName:"zamarmn.Main", type:sap.ui.core.mvc.ViewType.XML});
                           app.addPage(page);
                           app.placeAt("content");
              </script>

       </head>
       <body class="sapUiBody" role="application">
              <div id="content"></div>
       </body>

</html>

Select index.html file in Eclipse and click the Run button.


In the window select web app preview, click Ok button.

The app will display in web app preview. Its an empty application with no controls in it. Select Open in External browser to open in default browser.

Press F12, the browser will open in debug mode. Click Network tab and press F5 to reload the empty application.


The reason why I asked you to see the Network tab in debugging mode is to make you familiar with the loading of files for this very simple application. This simple application starts with index.html file. This file then loads the sap-ui-core.js file. After this few other files are loaded. Then the Main.view.xml and Main.controller.js files are loaded. So the view loads before the controller. This information will be used most frequently when we will try to debug complex SAPUI5 applications.

This example gives you the most needed information with which you can move ahead to explore further in SAPUI5.