Getting started with sapui5
Remarks#
What is SAPUI5?
Based on the theory above, SAP introduced an HTML5-based development toolkit, SAPUI5, which encourages one consistent user experience. By utilizing the theory above, apps built using SAPUI5 are responsive across browsers and devices - they run on smartphones, tablets, and desktops. The UI controls automatically adapt themselves to the capabilities of each device. To do this, SAPUI5 provides robust development concepts to create apps with consumer-grade, browser-based business applications. In a nutshell, UI5 is a client UI technology based on JavaScript, CSS and HTML5. Servers come into play for deploying your applications, storing the SAPUI5 libraries, and connecting to a database. Depending on the environment in which you are using SAPUI5, the libraries and your applications are stored for instance on SAP HANA Cloud Platform or another application server. The favored means to access business data for your application is by using the oData model.
The SAP UI development toolkit for HTML5 is a user interface technology that is used to build and adapt client applications. The runtime is a client-side HTML5 rendering library with a rich set of standard and extension controls and a lightweight programming model.
There are two flavours, OpenUI5 (the Open Sourced version) and SAPUI5 (the original licenced version). Both have the same technical core mechanisms and are collectively referred to as UI5.
UI5 provides many features to enable you to easily create and extend state-of-the-art user interfaces:
- It supports RIA like client-side features based on JavaScript
- It supports CSS3, which allows you to adapt themes to your company’s branding in an effective manner
- It is based built-in extensibility concepts at code and application level
- It uses the open source jQuery library as a foundation
- It fully supports SAP product standards
- It complies with OpenAjax and can be used together with standard JavaScript libraries
- It offers extensive responsive controls to create platform independent user interfaces with less effort
- It offers full Translation/i18n support
- It features the Fiori Design language that is based on extensive UX research
You can get your first UI5 page started here. Also for more information see the developer guide and API reference, available in the respective SDK references: OpenUI5 SDK, SAPUI5 SDK. Demo Apps can be found be here
Hello World!
We start with creating an HTML page for the app. There we define the meta tags, a script tag to load the SAPUI5 libraries, and a placeholder for the content of the app.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Hello World App</title>
<script src="https://<<server>>:<<port>>/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m">
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>Adapt the path where the resources are located (<
>:< >) according to your installation. For OpenUI5 you can use src=”https://openui5.hana.ondemand.com/resources/sap-ui-core.js”. For accessing SAPUI5 on the SAP HANA Cloud Platform, for example, use src=”https://sapui5.hana.ondemand.com/resources/sap-ui-core.js“.
Hello World
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>SAPUI5 Hello World</title>
<!-- Load SAPUI5 , theme and control library -->
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"></script>
<!-- Create a UI5 button and place it onto the page -->
<script>
new sap.m.Button({
text:"Hello world",
press: function(){
alert("hello SapUI5!");
}
}).placeAt("content");
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>Hello World
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-compatVersion="1.24"
data-sap-ui-resourceroots='{"<projectname>": "./"}'>
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.getCore().attachInit( function () {
new sap.ui.core.ComponentContainer ("<ComponentId(can be anyname you wish)>",{
height : "100%",
name : "<name of component>"
}).placeAt('content');
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>