original idea by konstantin.anikeev2 with his Blog Post Asynchronous load of SAPUI5,
"thank you for the inspiration to create this kinky easy-to-use Module"
Why use CoreLoader.js?
Loading SAPUI5 or OpenUI5 based Application needs time. JavaScript and CSS files need to be loaded before the view appears. During this time the User has to wait, this depends on the network connection speed and the used libraries (for example: on cellular devices about 20 seconds).
Modern web-based Applications respond fast. All initialization and loading should be done in the background. The User needs to be notified about that process. That is what Konstantin and I have tried to implement.
How to use or integrate into (existing) Applications?
Simple! The main focus of this development has been to make the integration in existing Applications extremely easy. You do not need to remove your initialization Code from your index.html. Utilize this module by changing some attributes in your bootstrap <script> tag!
What do you need?
Only one JavaScript file is needed. You can download it from GitHub repository. Just place the file "CoreLoader.js" where you want. My suggestion: "/WebContent/util/CoreLoader.js", Than change the bootstrap script tag to the source where you have placed the CoreLoader.js. The Module automatically generates all required DOM-elements at runtime.
ORIGINAL: index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8">
<title>Example Application</title>
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-resourceroots='{
"com.inwerken": "../com_inwerken"
}'
data-sap-ui-xx-bindingSyntax="complex">
</script>
<script>
// execute when Core is loaded ...
sap.ui.getCore().attachInitEvent(function () {
// .. load Component
var oComponentContainer = new sap.ui.core.ComponentContainer({
height: "100%",
name: "Example"
});
oComponentContainer.placeAt("content");
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
How to Install?
Just make the following changes to your index.html:
- bootstrap script tag
- EDIT line 08 id="util-coreloader"
- EDIT line 09 src="to your url path/CoreLoader.js"
- INSERT line 10 data-loader-src="original src value"
- application init time
- INSERT line 20
- INSERT line 28
- INSERT line 30
CoreLoader.js: index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8">
<title>Example Application</title>
<script id="util-coreloader"
src="util/CoreLoader.js"
data-loader-src="resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-resourceroots='{
"com.inwerken": "../com_inwerken"
}'
data-sap-ui-xx-bindingSyntax="complex">
</script>
<script>
// execute when Core is loaded ...
CoreLoader.onReadyState(function() {
sap.ui.getCore().attachInitEvent(function () {
// .. load Component
var oComponentContainer = new sap.ui.core.ComponentContainer({
height: "100%",
name: "Example"
});
oComponentContainer.placeAt("content");
CoreLoader.ready();
});
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Finished? Yes.
That's all. Try to launch your Application.
It should work and come up with a Screen like this:
- SAP Managed Tags:
4 Comments
