SapHanaTutorial.Com HOME     Learning-Materials Interview-Q&A Certifications Quiz Online-Courses Forum Jobs Trendz FAQs  
     Explore The World of Hana With Us     
About Us
Contact Us
 Apps
X
HANA App
>>>
Hadoop App
>>>
Tutorial App on SAP HANA
This app is an All-In-One package to provide everything to HANA Lovers.

It contains
1. Courses on SAP HANA - Basics, Modeling and Administration
2. Multiple Quizzes on Overview, Modelling, Architeture, and Administration
3. Most popular articles on SAP HANA
4. Series of Interview questions to brushup your HANA skills
Tutorial App on Hadoop
This app is an All-In-One package to provide everything to Hadoop Lovers.

It contains
1. Courses on Hadoop - Basics and Advanced
2. Multiple Quizzes on Basics, MapReduce and HDFS
3. Most popular articles on Hadoop
4. Series of Interview questions to brushup your skills
Apps
HANA App
Hadoop App
';
Search
Stay Connected
Search Topics
Topic Index
+
-
SAPUI5 Overview
+
-
SAP Fiori Overview
+
-
SAP Web IDE
+
-
SAPUI5 Basic Concepts
+
-
Data Binding and Model

Understanding Bootstrap in SAPUI5

In previous articles Prerequisite for SAPUI5 and Fiori, What is SAPUI5? and What is Fiori?_, we explained the basics of SAPUI5 and Fiori.

In this article we will try to understand one of the important concept in SAPUI5 - Bootstrap

Prerequisite

Please create a SAPUI5 Hello World application by following the article SAPUI5 Hello World using Web IDE. We will refer to this application to explain various concept.

Otherwise please click here to see a running SAPUI5 Hello World example. Note that this link may not work in IE browser.

What is Bootstrap in SAPUI5?

Before we can do something with SAPUI5, we need to load and initialize it. This process of loading and initializing SAPUI5 is called bootstrapping.

Understanding Bootstrap in SAPUI5

Open the SAPUI5 Hello World application and check index.html file. The index.html file is the entry point of an SAPUI5 application and here we need to specify bootstrap script.
The following code snippet shows a typical bootstrap script tag:

  <script id="sap-ui-bootstrap"
   type="text/javascript"
   src=" https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
   data-sap-ui-theme="sap_belize"
   data-sap-ui-libs="sap.m">
  </script>

The bootstrap script does following tasks

  src=" https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
The most important attribute is "src". The src attribute tells the browser where to find the SAPUI5 core library. It loads the SAPUI5 library and initializes the SAPUI5 runtime.

  data-sap-ui-theme="sap_belize"
SAPUI5 support different themes. Here we are specifying "sap_belize" as our default theme.

  data-sap-ui-libs="sap.m"
The libraries specified in the data-sap-ui-libs attribute is also loaded. Here we are specifying the "sap.m" should be loaded.

Let's understand Bootstrap with an example

A SAPUI5 project must have the Bootstrap script specified in the index.html file. Let's create a very simple SAPUI5 project with only index.html file.
Create a SAPUI5 project and create index.html file. Paste the below code.

  <!DOCTYPE html>
  <html>
  <head>
    <title>SAPUI5 Bootstrap</title>
    <script
      id="sap-ui-bootstrap"
      src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
      data-sap-ui-theme="sap_belize"
      data-sap-ui-libs="sap.m">
    </script>
    <script>
      sap.ui.getCore().attachInit(function () {
        alert("SAPUI5 library is loaded");
      });
    </script>
  </head>
  <body>
  </body>
  </html>

Or you can directly access the sample bootstrap project from here_. Note that this link may not work in IE browser.

If you run this SAPUI5 application, it will show a popup as below.

Understanding Bootstrap in SAPUI5

sap.ui.getCore() and attachInit() methods

sap.ui.getCore() method returns the Core class of SAPUI5 library. It provides events where application can attach to.
sap.ui.getCore().attachInit() is used to registers a given function that is executed after the SAPUI5 framework has been initialized.

When all resources and libraries are loaded, the SAPUI5 runtime fires the global init event to signal that the library is ready. It is a good practice to listen for this event in order to trigger your application logic only after the event has been fired.

In this example, we get a reference to the SAPUI5 core by calling sap.ui.getCore() and register a function for the init event by calling attachInit() on the core. Hence in this case, once SAPUI5 library is loaded, it will call the alert function inside attachInit().

What's Next?

Below articles might help you to know more about SAPUI5.

If you have any question, please post in the comment or contact us.


Support us by sharing this article.



Explore More
Close X
Close X

Leave a Reply

Your email address will not be published. Required fields are marked *

Current day month ye@r *

 © 2017 : saphanatutorial.com, All rights reserved.  Privacy Policy