Introduction
Before we dive into the lesson, let's understand what bootstrapping is in the context of SAPUI5.
In SAPUI5, bootstrapping is the initial step that sets up and initializes the SAPUI5 runtime. When we talk about 'bootstrapping', we are referring to the script tag in our HTML file that loads the SAPUI5 core.
SAPUI5 Bootstrap Script
Let's start with an example of a bootstrap script. In your index.html file, you may observe something like this:
123456789101112131415161718192021<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<script id="sap-ui-bootstrap"
src="https://ui5.sap.com/1.114.0/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-resourceroots='{
"sap.training.sample.app": "./"
}'>
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
Key Elements of the Bootstrap Script
src="https://ui5.sap.com/1.114.0/resources/sap-ui-core.js": This is where the SAPUI5 core is loaded from. The src attribute points to the URL where the SAPUI5 core JS file is hosted.
data-sap-ui-libs="sap.m": The libraries needed for your application are listed here. In this case, the sap.m library, which includes the master library of SAPUI5 controls, is loaded.
data-sap-ui-theme="sap_belize": This attribute sets the theme of your SAPUI5 application. There are different themes available that you can choose from.
data-sap-ui-resourceroots='{"sap.training.sample.app": "./"}': This attribute is where you specify the roots of your resource. This helps in mapping the namespace of the controls to their physical location.