Fast responding SAPUI5 Core(-Library) Loader
original idea by Konstantin Anikeev 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:
Hi Danilo,
I just implemented this in my application. It works like a charm. Thanks.
FYI,
I found that this is not working when the application is configured to launch using cache buster(/sap/public/bc/ui5_ui5/1/resources/sap-ui-cachebuster/sap-ui-core.j) and also when the Debug Sources is turned ON in SAPUI5 Diagnostics tool.
thanks for that.
this is caused by the script loaded event.. in cache buster case it's fired to ealy, the ui-core isn't loaded yet. i will try to implement a solution for cache buster cases.
EDIT: seems like it isn't possible to use with cache buster. SAP uses document.write() in cachebuster script: Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
if this will be changed to appendChild or something equivalent (in future) - it will do.
UPDATE^2: current commit of CoreLoader.js will open popup dialog with a hint "do not use with cachebuster".
Danilo
Hi Danilo,
Can you please explain a little bit, how this Coreloader reduces the initial loading time.
Does it collates all the files into one?
Thanks,
Anirban
Hi, Danilo!
I am getting the following error: CoreLoader is not defined. below is my index.html
<script id="util-coreloader"
src="util/CoreLoader.js"
data-loader-src="resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.commons,
sap.ui.core, sap.ui.table, sap.m, sap.ui.ux3,
sap.suite.ui.commons, sap.uiext.inbox"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-appCacheBuster="./"
data-sap-ui-resourceroots='{"view": "./"}'
>
<script>
CoreLoader.onReadyState(function(){ <----- this is what's causing the error
sap.ui.getCore().attachInit(function () {
var oMenuView = sap.ui.view({
id: "idMenu",
viewName: "view.Navigatsioon.Menu",
type: sap.ui.core.mvc.ViewType.JS,
controller: sap.ui.controller("view.Navigatsioon.Menu")
});
oMenuView.placeAt("content");
$("#loading").remove();
CoreLoader.ready();
});
});
</script>
the util folder with CoreLoader.js is in the source directory where my view folder is (there are other js files for view/controllers).