Step 2: Initialize the App

The sap.m library provides a control called App which is meant to be the root control of an app. It initializes the content of the body tag, sets some meta tags on the HTML document for mobile devices, and can manage multiple pages and the animations when navigating.

index.html

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
	<title>Hello World App</title>
	<script src="http://<server>:<port>/resources/sap-ui-core.js"
		id="sap-ui-bootstrap"
		data-sap-ui-theme="sap_bluecrystal"
		data-sap-ui-libs="sap.m">
	</script>
	<script type="text/javascript">
		sap.ui.getCore().attachInit(function () {
			// create a mobile app and display page1 initially
			var app = new sap.m.App("myApp", {
				initialPage: "page1"
			});
		});
	</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>

In a second script block, we attach a function to the global attachInit event. This function will be called as soon as SAPUI5 is loaded and initialized. Create the app control here, and define the page that you want be displayed initially. At this point in time, this page does not have any content.

Instead of using the sap.m.App control, you could also manually call the methodjQuery.sap.initMobile() to set up the HTML and use other full screen controls, such as sap.m.Page or sap.m.Carousel as root element of your app.