Explaining Basic SAPUI5 Concepts

Objective

After completing this lesson, you will be able to Explain the basic concepts of SAPUI5.

Bootstrapping in SAPUI5

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:

Code Snippet
Copy code
Switch to dark mode
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.

MVC Architecture

Introduction

Understanding the MVC pattern is crucial to developing applications using SAPUI5 because it forms the backbone of SAPUI5 architecture. By the end of this section, you'll have a good grasp of what MVC is and how it's used in SAPUI5.

What is MVC?

MVC is a design pattern that's widely used in software development for designing the structure of applications. This pattern divides the application into three interconnected components, each with a distinct responsibility.

Model

This represents the data and the business logic of the application. It retrieves the data and converts it into a format that's usable for the rest of the application. This data might come from a database, an API, or some other source, and the Model is responsible for handling all interactions with that data source. It's important to note that SAPUI5 supports different types of models:

  • JSON Model: Used for client-side data manipulation and is ideal for small datasets.
  • XML Model: Used for client-side data binding when the input is in XML format.
  • Resource Model: Used for internationalization and to maintain texts in different languages.
  • OData Model: This is a server-side model that supports two-way data binding. It's used to work with an OData service.

View

This is the user interface – everything the user sees and with which they interact. In an SAPUI5 application, the View is typically written in XML and defines the layout and structure of the UI, although JavaScript, JSON, and HTML can also be used. It's purely concerned with presenting data to the user.

Controller

The Controller sits in between the Model and View and processes all the user interactions and data changes. It's the Controller's job to handle user input from the View, process it, and then implement the business logic in the model. In other words, it controls the data flow into the model object and updates the data in the view whenever it changes.

How MVC works in SAPUI5?

  1. The user interacts with the View.
  2. Upon interaction (such as a button press), the View triggers an event in the Controller.
  3. The Controller processes the event and may change the data in the Model as needed.
  4. Changes in the Model are automatically updated in the View thanks to data binding.

This separation of concerns allows developers to work on individual components without affecting the others. For example, a developer can change the layout and design of the View without changing the Controller or Model. Similarly, developers can change the data structure in the Model without modifying the View or Controller. This makes the application more manageable and maintainable.

Views in SAPUI5

What are Views in SAPUI5?

In the MVC architecture, the View is responsible for defining the user interface. It determines what the end user sees on the screen. The view includes all the UI elements, such as buttons, tables, forms, and so on. SAPUI5 supports several types of views, including XML, JavaScript, JSON, and HTML. However, the most commonly used and recommended type is XML because of its readability and clear separation between the view and controller.

Creating a View in SAPUI5

Creating a view involves defining the structure and elements of the user interface. Let's take an XML view as an example.

An XML view is an XML document and has a root element mvc:View. It can include various UI controls provided by SAPUI5.

Here's an example of a basic XML view.

Code Snippet
Copy code
Switch to dark mode
1234567891011121314
<mvc:View
controllerName="sap.training.sample.ControllerName"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<App>
<pages>
<Page title="Hello World">
<content>
<Button text="Click Me" press="onButtonPress"/>
</content>
</Page>
</pages>
</App>
</mvc:View>

In this example:

  • mvc:View is the root element. The attribute controllerName points to the controller handling this view.
  • sap.m.App, sap.m.Page, and sap.m.Button are different UI controls used to build the user interface.
  • The press event of the Button control is handled by the onButtonPress method in the controller.

Controllers in SAPUI5

What are Controllers in SAPUI5?

In the MVC design pattern, the Controller is the intermediary between the Model and the View. It handles the user's interactions and data changes, taking input from the View, processing it, and updating the Model and View accordingly.

In SAPUI5, a Controller is a JavaScript file (.js) that contains the logic to respond to view events (such as button clicks or data changes). A Controller is associated with a specific View.

Creating a Controller in SAPUI5

A Controller in SAPUI5 is defined using the sap.ui.define function, which includes dependencies (like modules or other Controllers) and a function that returns an object representing the Controller.

Here's an example of a basic Controller in SAPUI5.

Code Snippet
Copy code
Switch to dark mode
123456789101112131415
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("sap.training.sample.ControllerName", {
onInit: function () {
// Initialization logic here
},


onButtonPress: function () {
// Button press handling logic here
}
});
});

In this example, sap.training.sample.ControllerName is the name of the Controller. The onInit function is a lifecycle method that is called when the Controller is initialized. The onButtonPress function is an event handler that is called when a button is pressed.

Event Handling in Controllers

One of the main responsibilities of a Controller is to handle events that are fired from the View. For example, when a user clicks a button or changes the value of an input field, an event is fired.

You can define event handler functions in the Controller to respond to these events

Here's an example of how to handle a button press event.

Code Snippet
Copy code
Switch to dark mode
12345
onButtonPress: function () {

// Do something when the button is pressed
sap.m.MessageToast.show("You press the Button");
}

Interacting with the Model

Controllers can interact with the model to retrieve, manipulate, or update data. This is typically done in response to user interactions.

Models in SAPUI5

What are Models in SAPUI5?

In SAPUI5, a Model is an object that holds the application's data and provides methods to access and manipulate that data. It can be thought of as a bridge between the application's data (usually stored in a backend system or a local storage) and the UI.

Types of Models in SAPUI5

SAPUI5 supports several types of models, each suited for different types of data and use cases:

  • JSONModel: Used for handling JSON data. It's useful when you're working with data that can be represented as a JSON object, such as configuration data or simple application data.

  • XMLModel: Used for handling XML data.

  • ResourceModel: Used for handling internationalization (i18n) and resource bundling.

  • ODataModel: Used for handling OData protocol. It's useful when you're working with an OData service as your data source, which is common in SAP applications.

Creating and Using a Model in SAPUI5

Here's an example of how to create a JSON model and set data to it.

Code Snippet
Copy code
Switch to dark mode
123456789101112131415
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel" 
], function (Controller, JSONModel) { 
"use strict"; 
return Controller.extend("sap.training.sample.ControllerName", { 
onInit: function () { 
var oModel = new JSONModel({ 
name: "John Doe", 
age: 30 }); 

this.getView().setModel(oModel); 
} 
}); 
});

In this example, a new JSONModel is created with an object that has "name" and "age" properties. The model is then set to the view using the setModel method. This makes the model data available to the UI elements in the View.

Log in to track your progress & complete quizzes