SAPUI5 Grundlagen

Ein Toast!

Eine weitere Oberflächenkomponente hinzufügen

(C) Brandeis Consulting.

Module

In JavaScript bezeichnet ein Modul eine kleinere, eigenständige Einheit von Code, die bestimmte Funktionalitäten kapselt. Module ermöglichen es Entwicklern, Code in wiederverwendbaren Einheiten zu organisieren, was die Wartbarkeit, Lesbarkeit und Wiederverwendbarkeit des Codes erhöht.

Ab ECMAScript 2015 (ES6) gibt es in JavaScript eine native Unterstützung für Module, die es ermöglicht, Funktionen, Klassen oder Werte zwischen Modulen mit den Schlüsselwörtern import und export auszutauschen.

Beispiel

Definition eines Moduls

// datei: mathModule.js
export function add(x, y) {
    return x + y;
}

export function subtract(x, y) {
    return x - y;
}

Verwendung des Moduls

// datei: app.js

import { add, subtract } from './mathModule.js';

console.log(add(2, 3)); // 5
console.log(subtract(5, 3)); // 2
(C) Brandeis Consulting.

Weitere Oberflächenkomponenten hinzufügen

In SAPUI5-Controllern werden den benötigten Module in

sap.ui.define(["<ModulPfadUndName>" ], function (ModulName))

mitgegeben.

Wir laden ein neues Modul in den JavaScript Controller mit dem Namen sap/m/MessageToast.

(C) Brandeis Consulting.

Hinzufügen eines Toast-Info-PopUp

Im Tutorial: Synchrones Laden

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast"], function (Controller, MessageToast) {   "use strict";
   return Controller.extend("ui5.walkthrough.controller.App", {
      onShowHello : function () {
         MessageToast.show("Hello World");      }
   });
});
controller/App.controller.js

Alternativ: Asynchrones Laden

sap.ui.define(
  ["sap/ui/core/mvc/Controller"],
  function (Controller, MessageToast) {
    "use strict";
    return Controller.extend("ui5.walkthrough.controller.App", {
      onShowHello: function () {
        sap.ui.require(["sap/m/MessageToast"], function (MessageToast) {
          MessageToast.show("Hello World");
        });
      },
    });
  }
);
controller/App.controller.js
(C) Brandeis Consulting.