You first create an HTML page and define the meta tags, a script tag to load the SAPUI5 libraries and a
placeholder for your app.
Procedure
-
Create an HTML page called mobile.html
-
Add the HTML5 doctype definition: <!DOCTYPE html>" in
the first line and the Internet Explorer-specific meta tag :<meta
http-equiv="X-UA-Compatible" content="IE=edge" />" are the
beginning of <head> element.
This ensures that all browsers use the latest version of their rendering engine.
-
Add a second meta tag: <meta http-equiv="Content-Type"
content="text/html;charset=UTF-8"/>.
This lets all browsers treat the file as UTF-8 encoded (assuming that you use this
encoding when editing/saving the file).
-
In the HTML <body> there needs to be a place where the app HTML will go. Here we add
a <div> element to <body> . The
"sapUiBody" class should always be added to the
<body> tag to initialize font and colors for the
whole page:
- You can equally use the body itself, omitting the extra
div. In this case give the body the ID
content.
<body class="sapUiBody">
<!-- This is where the app will live: -->
<div id="content"></div>
</body>
-
To load the SAPUI5 JavaScript
file that contains the library add the following script tag in the
<head>:
<script src="http://<server>:<port>/sapui5/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>Replace <server> and <port> with your local
installation. In the SAP HANA Cloud Platform,
for example, use src=
"https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
.
Note Only the sap.m library and the
sap_bluecrystal theme are loaded
Results
At this point,
SAPUI5 including controls
is loaded and ready to use.
