SAPUI5 Hello World Example
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. We will also have a second button which displays the currently used/loaded version of the SAPUI5 framework. Both buttons are standard SAPUI5 Button controls, but for pedagogical reasons we will instantiate them diffrently to demonstrate different approaches. We will code everything into one single HTML file instead of following any modularization patterns which are often used in large SAPUI5 projects (our example is simply too small). In future tutorials I might dive deeper into modularization of SAPUI5 applications, i.e. by completely separating your Controllers, (XML-)Views etc. Instead of talking too much let's just have a look at the complete source code before I explain it:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SAPUI5 Hello World live demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/1.36.12/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.commons">
</script>
<!--
data-sap-ui-themes:
- sap_bluecrystal
- sap_goldreflection
- sap_hcb
-->
<style>
/* here you could overwrite some sapui5 styles you don't like */
</style>
<script>
var oBtn;
//option 1: setting properties via constructor
oBtn = new sap.ui.commons.Button({
text : "Hello World",
press : function (oEvent) {
alert(this.getText());
}
});
oBtn.placeAt("content");
//option 2: setting properties via setters
oBtn = new sap.ui.commons.Button();
oBtn.setText("show sapui5 version");
oBtn.attachPress(function (oEvent) {
alert("sapui5 version = " + sap.ui.version);
});
oBtn.placeAt("content2");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
<br/>
<div id="content2"></div>
</body>
</html>
Looks quite self explaining, doesn't it? The first thing you might have noticed is the HTML5 DOCTYPE in the first line. Keep in mind that SAPUI5 considers itself an HTML5 framework. Next we can see two meta tags in line 5 and 6. With these lines of code we tell the browser that our 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 view or IE 8 standards view in case of IE 8 browsers. Because we want to use the highest IE mode available we use IE=edge, i.e. IE 8 should render with the highest IE 8 mode.
In line 8 we reference our SAPUI5 framework (actually we get OpenUI5). As you can see we get it from the SAP HANA Cloud. This is where the magic comes from. When bootstrapping SAPUI5 you can specify the theme and SAPUI5 libs that shall be loaded. sap_goldreflection was up to a few months ago the standard/default theme of SAPUI5. Now it seems that this has changed to sap_bluecrystal. Feel free to choose which theme you like better. You could also use the sap_hcb theme, which stands for High Contrast Black (HCB). For some user groups or companies HCB is very important. Some government agencies are only allowed to buy software solutions which support HCB and which are fully accessibile (Accessibility is out of scope for this tutorial). So you might want to think twice right from the beginning of your SAPUI5 project to what level you want to support HCB and Accessibility depending on your potencial target group. SAPUI5 comes with great support for both HCB and Accessibility. The data-sap-ui-libs attribute can be used to load different libraries of SAPUI5. Depending on the SAPUI5 features (i.e. Controls) you want to use it is important to make sure that they are loaded. For our example it is enough to load only sap.ui.commons (you will see that very often). Please see here to find out what sap.ui.commons contains, i.e. it contains the class sap.ui.commons.Button (the Button control of which we will create two instances later). Some controls are not in the sap.ui.commons namespace, i.e. the sap.ui.table.Table control. sap.ui.commons or sap.ui.table are called namespaces, but it is common that developers simply call them packages. This might come from the similarity to packages in Java or other programming languages. Everything in SAPUI5 is organized in packages. In fact, SAPUI5 is an object oriented Javascript framework; to the full extent of object oriented programming in Javascript (including inheritance)! If you want you could define your own css classes or you could overwrite SAPUI5 styles which you do not like, but this is not in scope of our little example. Please see the official OpenUI5 documentation to find out more about the Configuration of the UI5 Runtime and about Loading / Initializing SAPUI5 within an HTML Page.
Before diving into the second script tag, which contains our little application, please have a look at our html body tag. It comes with the class sapUiBody which will offer some css styling for us. You don't have to use it, but it is used often in typical SAPUI5 applications. The role attribute of the body tag is relevant for Accessibility (however, you could also place it somewhere else). I just added it here to remind you that SAP thought a lot about Asseccibility when they designed SAPUI5.
Now let's have a detailed look at our second script tag, which implements our real application. First, we define a variable oBtn. Then we instantiate a new button and assign it to oBtn. As you can see we instantiate the new button with the new keyword. new is a standard Javascript keyword and creates a new object. That means if you would call typeof oBtn the result would be "object". And if you would call oBtn instanceof sap.ui.commons.Button the result would be true. Now guess what would happen if you would try to execute oBtn instanceof sap.ui.core.Control? The result would be true because a sap.ui.commons.Button is a sap.ui.core.Control, or in other words sap.ui.commons.Button inherits from sap.ui.core.Control! This is a proove that inheritance is used in SAPUI5; and it is used heavily! Typically, SAPUI5 controls have different properties. For example, the sap.ui.commons.Button has a property called text. It represents the text you will see on the rendered button. For receiving press events you can register a press event listener, which is nothing but a simple callback function. Please have a look at the APIs of the sap.ui.commons.Button Control to find out about other properties. To fill the properties with initial values we simply pass a settings object (sometimes also called options object). As you can see 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. Within the event listener this is bound to the instance of our button. I hope you can see a pattern here: If there is a property called text, then there will be (per default) a getText() and a setText(sText) method available on the controls instance. If that reminds you of Java Beans then you are right. The SAPUI5 framework even generates the getters and setters for you if you write your own controls. I will focus on that topic in one of my future tutorials. Last but not least, we call oBtn.placeAt("content"); in order to add our button to the right location in our DOM.
For our first button we passed a settings object to the constructor of the button. But you could also use the kind of Java style getters and setters for changing the properties of your instance. As you can see we create a second instance of the button by calling oBtn = new sap.ui.commons.Button(); and without passing a settings object for initialisation purposes. Instead, in the next two lines we call oBtn.setText("show sapui5 version"); to set the text displayed on the button and we call oBtn.attachPress(fnListener) to listen for the press event. So in general we have pairs of getters/setters for properties and attach/detach for event listeners. If the second button is clicked then we will see an alert dialog containing the version of the currently used SAPUI5 framework (sap.ui.version). Sometimes it can be helpful to know how to find out on which version of SAPUI5 you are running. In a past project we had a Selenium test to check the deployed version of SAPUI5 in order to be always informed if the deployed version changes. Of course, you could also use a Javascript Unit Test to get the same information (maybe that's in many cases the better choice).
SAPUI5 also comes with some tools for debugging. In any SAPUI5 application simply hit the keys Shift + Ctrl + Alt + P to see some of the hidden features. These guys really want to make developers happy :-) You could try this on the demo site of this little example.