Hello World

Hello World
This tutorial will tell you how to implement a very simple SAPUI5 based Hello World example. But instead of simply writing "Hello World" to the console we will display "Hello World" in an alert dialog which is displayed each time the user presses a button.
Here I am writing the code in the HTML, and not following the MVC concepts. MVC  concepts are followed for a bigger project, since this is a simple hello world program, the coding is done only in html file itself.

1.  <!DOCTYPE html>
2.  <html lang="en">
3.      <head>
4.          <title>SAPUI5 Hello World live demo</title>
5.          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
6.          <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
8.          <script id="sap-ui-bootstrap"
9.              type="text/javascript"
10.            src="https://openui5.hana.ondemand.com/1.28.15/resources/sap-ui-core.js"
11.            data-sap-ui-theme="sap_bluecrystal"
12.            data-sap-ui-libs="sap.ui.commons">
13.        </script>
17.        <script type="text/javascript">
18.            var oBtn;
20.            oBtn = new sap.ui.commons.Button({
21.                text : "Hello World",
22.                press : function (oEvent) {
23.                    alert(this.getText());
24.                }
25.            });
26.            oBtn.placeAt("content");
27.        </script>
29.    </head>
31.    <body class="sapUiBody" role="application">
32.        <div id="content"></div>
33.        <br/>
34.        <div id="content2"></div>
35.    </body>
First line describes HTML5 DOCTYPE. SAPUI5 considers  itself an HTML5 framework.Lline 5 and 6 tells the browser that mimetype is text/html and the content is UTF-8 encoded. With the X-UA-Compatible meta tag we tell IE browsers what version of Internet Explorer the page should be rendered as i.e. IE7 compatibility. IE=edge tells IE 8 should render with the highest IE 8 mode.
In line 8 we define our SAPUI5 framework , here we get it from the SAP HANA Cloud. When bootstrapping SAPUI5 you can specify the theme and SAPUI5 library.
These are 3 most widely used themes:
·   sap_goldreflection
·   sap_bluecrystal
·    sap_hcb
The data-sap-ui-libs attribute can be used to load different libraries of SAPUI5
Two most common used libraries are:
·   sap.ui.commons – for desktop platform
·    Sap.m – for mobile platform
If you want you could define your own css classes or you could overwrite SAPUI5 styles.
At First we have defined variable oBtn then we instatiate a new button and assign it to oBtn. Here we are using “new” for instantiating the variable, new is a standard Javascript keyword and creates a new object.
Here we are using sap.ui.commons.Button which has a property text. Here sap.ui.commons.Button inherits from sap.ui.core.Control.  Here, we want the text on the button to be "Hello World" and the press event listener simply gets the text of the button by calling the getText() method on this to alert the text. Then we  calling oBtn.placeAt("content"); in order to add our button to the right location in our DOM.
In line 31, we are defining the HTML body, It comes with the class sapUiBody which will offer some css styling, the role attribute of the body tag is relevant for Accessibility.


Click here for comments
30 October 2018 at 01:20 ×

Thanks for the useful information about web designing, give more updates on web designing, First time I visit your channel really nice, here after a daily visit.

15 August 2019 at 23:35 × This comment has been removed by a blog administrator.