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.
Example
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"/>
7.
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>
14.
15.
16.
17. <script
type="text/javascript">
18. var oBtn;
19.
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>
28.
29. </head>
30.
31. <body class="sapUiBody"
role="application">
32. <div
id="content"></div>
33. <br/>
34. <div
id="content2"></div>
35. </body>
36.
37.</html>
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.
2 comments
Click here for commentshttps://bit.ly/2ONCOHF
ReplyThanks 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.
ConversionConversion EmoticonEmoticon