Connecting SAP HANA Cloud Platform with the Cloud Connector

To deploy a SAPUI5 application created on the SAP Web IDE on to an ABAP server, we need the Cloud connector. In this tutorial, we explain how to set up the connection between the SAP HANA Cloud Platform and the Cloud Connector.

The very first step is to create a destination in the SAP HANA Cloud Platform. On the SAP HANA Cloud Platform Cockpit, click on Destination under Connectivity in the left hand side.

Click on New Destination button 

Fill in the below configuration values for the destination form and save.

For WebIDEUsage enter: dev_abap, ui5_execute_abap, bsp_execute_abap, odata_abap


The WebIDE configuration is done.

Next, login to your local Cloud Connector.

Execute the URL https://localhost:8443 on Google Chrome.
























Login with UserName : Administrator, Password: manage. If this does not work, please check with system administrator for the UserName and Password.

In the Cloud Connector Administration page, click SubAccount and fill in as shown below and save.

On Save, your Subaccount gets created. Notice the Region Host and HTTPS Proxy which is green indicates correct configuration.

















Next, click on Cloud to On- Promise to add active SAP resources. Click on + icon.
















Follow the wizard.






















Provide your ABAP system hostname and port.











Fill in the Virtual Host and Port as per the information entered while creating destination in SAP HANA Cloud destination.























Select Check Internal Host and Finish.
The Internal System gets added. Notice that the system is reachable.















Now we will add the URL paths of ABAP System that needs to accessible. Click + icon of Resources Accessible and fill in the below details and Save.
















Now you find that Resources Accessible are added and the Mapping Virtual to Internal System status turns green from gray.














Click on Connector to check the status of your Subaccount.
















This indicates that we have successfully connected the SAP HANA Cloud Platform with the Cloud Connector.

In the next article we will see how to deploy SAP UI5 application from SAP WebIDE to the ABAP system.

MongoDB in Action, 2ed: Covers MongoDB Version 3.0

Author: Kyle Banker, Peter Bakkum, Shaun Verch, Doug Garrett, Tim Hawkins 

Publiser: MANNING 

Pages: 375

"Through an unlikely turn of events, I started working for 10gen, the company spearheading the development of this open source database.

MongoDB: The Definitive Guide, 2nd Edition

Author: Kristina Chodorow 

Publiser: O'REILLY 

Pages: 432

MongoDB: The Definitive Guide, 2nd Edition. Powerful and Scalable Data Storage by Author Kristina Chodorow.

MongoDB Cookbook

http://www.amarmn.com/2017/10/mongodb-cookbook.html
Author: Amol Nayak

Publiser: PACKT enterprise

Pages: 388

MongoDB is a document-oriented, leading NoSQL database, which offers linear scalability, thus making it a good contender for high-volume, high-performance systems across all business domains. 

PowerShell for SQL Server Essentials

http://www.amarmn.com/2017/10/powershell-for-sql-server-essentials.html
Author: Donabel Santos

Publiser: PACKT enterprise

Pages: 183

This book introduces you to PowerShell and taps into how you can use PowerShell in the context of SQL Server.  

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.
MVC architecture in SAPUI5 application

Create your First SAPUI5 Example on Eclipse based on MVC pattern

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.

Understanding SAPUI5 resource path

Resource path tells the browser where all the SAPUI5 libraries are placed. Based on this Resource path, the browser loads the required SAPUI5 libraries.

Whenever we create a SAPUI5 application, the bootstrap section will be something similar to the below code:

<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>

The first line src="resources/sap-ui-core.js" tells the browser that all the SAPUI5 libraries are placed inside the resources folder.

Based on this instruction, the browser registers the resources folder.
Quickly create a SAPUI5 application. Do not worry about placing any control. Run the application in Chrome browser. Press F12 to check the console tab.
You will find an entry similar to below:

registerResourcePath ('', 'resources/') -  sap.ui.ModuleSystem
URL prefixes set to: -  sap.ui.ModuleSystem
(default) : resources/ -  sap.ui.ModuleSystem

This indicates that based on the src="resources/sap-ui-core.js" attribute, the browser has registered Resouce path to the 'resources/'  folder. It is very important to understand this concept, as it will be very helpful in real time debugging of SAPUI5 applications.

Few good to know points:

If you do not define the src parameter in bootstrap section, you will get an error
"Unncaught ReferenceError: sap is not defined"

or NetworkError: 404 File not found

We may not be able to directly locate the resources folder. The path "/resources" is a mapping to a servlet called ResourceServlet. This can be found in the web.xml file placed inside WEB-INF folder. This servlet internally points to JavaResources folder which holds all SAPUI5 libraries.




MVC architecture in SAPUI5 application

MVC stands for Model View Controller. It is a software architectural pattern where in the software is developed in loosely coupled components of Model, View and Controller. The three components interact between each other and exchange data.

Model - Model is responsible to manage the application data.
View - All logic pertaining to view design will be placed in the view file.
Controller - All functions and event handling is written in Controller file.


MVC has become a standard design pattern that developers follow to create all Desktop, Web and even Mobile applications.

SAPUI5 strictly follows MVC architecture. If you create a SAPUI5 application in WebIDE, it automatically creates application template based on MVC pattern. If  you create application using Eclispe, on selecting checkbox Create an Initial view, it creates SAPUI5 application based on MVC pattern.















The above image shows how SAP WebIDE follows MVC pattern. As you can check, it clearly creates separate folders for Model, View and Controller. Hence, the code for Model, View and Controller is separated., thus following MVC pattern.

The same can be achieved if you use Eclipse as your development IDE. The idea is to separate the code for Model, View and Controller.

What is the advantage for following MVC pattern?
Two biggest advantage is:
Code Re-usability - 
Code Maintainability-


Create your First SAPUI5 application in WebIDE

Open WebIDE.

On the menu, click on File -> New -> Project From Template


















Select SAPUI5 application and click Next





























Provide the Project Name and Namespace. Click Next.





























Let the View Type be XML. Give a meaningful View Name. I have given SOList. Click Finish.





























A SAPUI5 prject is created. Expand the folder to view the application structure. It strictly follows the MVC architecture. Also double click on index.html file to view the code generated by the WebIDE.



















index.html

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">

<title>zdemoproj</title>

<script id="sap-ui-bootstrap"
src="../../resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"zdemoproj": ""}'>
</script>

<link rel="stylesheet" type="text/css" href="css/style.css">

<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "zdemoproj"
})
}).placeAt("content");
});
</script>
</head>

<body class="sapUiBody" id="content">
</body>

</html>

The code highlighted in yellow color is the bootstrap of SAPUI5 application.

Run SAPUI5 application by clicking the RUN button. It displays a blank application with Title.



How to install SAPUI5 in Eclipse - Step by step

SAP UI5 development can be done on Eclipse or SAP WebIDE. The below steps explain how to set up the Eclipse to start working with SAPUI5 development.



Step 1 - Check your JRE version - JRE is required to run Eclipse

The minimum required JRE version to run Eclipse is 1.6. If you have JRE version above 1.6, then you don't need to worry. If you don't have JRE installed or it is version less that 1.6, then you can download and install the latest JRE from the below url.

Download and Install the latest JRE from Oracle website.

http://www.oracle.com/technetwork/java/javase/downloads/index.html
Oracle Archive link to get older version JREs.
http://www.oracle.com/technetwork/java/archive-139210.html

In Windows OS, you can check your Java version by following path
Start -> Control Panel -> Programs -> Java
















In General tab, click About to check the Java version. In my case it is version 8 update 77.






















Otherwise, if you do not have JRE installed, go ahead and install it.

Step 2 - Download Eclipse 32-bit

Download Eclipse package from Eclipse website. The below link also gives all the packages available.
https://eclipse.org/downloads/packages/

Note : SAPUI5 Team Provider works with Eclipse 32 bit. So its better to download Eclipse 32 bit. We will discuss about Team Provider later.

You should download Eclipse IDE for Jave EE developers Mars or Neon package. The current version of Eclipse is Oxygen but SAP has not released SAPUI5 add-on for Oxygen at the time of writing this article. I particularly recommend Eclipse Mars as I have found it very stable.

















Unzip the downloaded Eclipse file, and run Eclipse by double- clicking eclipse.exe file. Eclipse does not need to be installed and it runs in working memory. You will see a popup box for Work-space. Select the checkbox to make it as your default work-space.















Step 3: Install SAP development tools in Eclipse

You can refer SAP development tools at URL https://tools.hana.ondemand.com/.
Check the latest Eclipse Software sites available and the respective Eclipse version.


To Install SAP development tools, from the menu of Eclipse, click Help -> Install new Software.























Click on Add button. In Add Repository window, provide Location from Eclipse Software sites.



















Paste the Eclipse software site URL compatible with the Eclipse version at Location field.
Click Ok.

The wizard will show all the SAP development tools that will be installed on Eclipse. Click Select All button.




















Hit Next button in the installation wizard. Follow the wizard steps to complete the installation process.
Once finished, restart Eclipse.

Step 4: Check if the SAPUI5 development add-ons have installed successfully.

Run Eclipse.
From the Eclipse Menu, click on File -> New -> Other.
In the window, scroll to find the folder SAPUI5 Application Developement. Expand the folder, to see Application project and View.






















This indicates that we installed the SAP add-ons successfully on Eclipse.

We are now ready with the SAPUI5 development environment on Eclipse.