docs
Step 6: Modules
In OpenUI5, resources are often referred to as modules. In this step, we replace the alert from the last exercise with a proper Message Toast from the sap.m library.
Preview
Coding
You can view and download all files at Walkthrough - Step 6.
webapp/controller/App.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast"
], (Controller, MessageToast) => {
"use strict";
return Controller.extend("ui5.walkthrough.controller.App", {
onShowHello() {
MessageToast.show("Hello World");
}
});
});
We extend the array of required modules with the fully qualified path to sap/m/MessageToast. Once both modules, Controller and MessageToast, are loaded, the callback function is called, and we can make use of both objects by accessing the parameters passed to the function.
This Asynchronous Module Definition (AMD) syntax allows to clearly separate the module loading from the code execution and greatly improves the performance of the application. The browser can decide when and how the resources are loaded prior to code execution.
Conventions
-
Use
sap.ui.definefor controllers and all other JavaScript modules to define a global namespace. With the namespace, the object can be addressed throughout the application. -
Use
sap.ui.requirefor asynchronously loading dependencies but without declaring a namespace, for example code that just needs to be executed, but does not need to be called from other code. -
Use the name of the artifact to load for naming the function parameters (without namespace).
Parent topic:Walkthrough Tutorial (JavaScript)
Next:Step 5: Controllers
Previous:Step 7: JSON Model
Related Information