SAPUI5 Grundlagen

Die App-Beschreibung

Eine Datei mit allen Metadaten

(C) Brandeis Consulting.

Die App im Fiori Launchpad

Das SAP Fiori Launchpad fungiert als Anwendungscontainer und instanziiert die Anwendung, ohne eine lokale HTML-Datei für den Bootstrap zu haben. Stattdessen wird die Deskriptor-Datei manifest.json geparst und die Komponente in die aktuelle HTML-Seite geladen. So können mehrere Anwendungen im gleichen Kontext angezeigt werden. Jede Anwendung kann lokale Einstellungen festlegen, z. B. Spracheigenschaften, unterstützte Geräte und mehr. Außerdem können wir die Deskriptordatei verwenden, um zusätzliche Ressourcen zu laden und Modelle wie unser i18n-Ressourcenbündel zu instanziieren.

(C) Brandeis Consulting.

Die Datei manifest.json (1/2)

Die manifest.json Datei in SAPUI5 dient als zentrale Konfigurationsdatei und beschreibt alle Aspekte einer Anwendung oder einer Komponente in einem standardisierten Format. Sie vereinfacht den gesamten Anwendungslebenszyklus, von der Konzeption bis zur Bereitstellung.

  • _version:
    • Zeigt die Version des Manifest-Schemas an.
  • sap.app:
    • id: Eindeutige ID der Anwendung oder Komponente.
    • type: Art der Komponente, hier "application", was bedeutet, dass es sich um eine Hauptanwendung handelt.
    • i18n: Pfad zur Internationalisierungsdatei (i18n).
    • title & description: Titel und Beschreibung der Anwendung. Sie nutzen Platzhalter ({{appTitle}} & {{appDescription}}), welche durch Werte aus der i18n-Datei ersetzt werden.
    • applicationVersion: Gibt die Version der Anwendung an.
  • sap.ui:
    • technology: Gibt an, welche Technologie verwendet wird.
    • deviceTypes: Listet die unterstützten Gerätetypen auf.
{
  "_version": "1.12.0",
  "sap.app": {
    "id": "ui5.walkthrough",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "applicationVersion": {
      "version": "1.0.0"
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
        "desktop": true,
        "tablet": true,
        "phone": true
    }
  },
//Fortsetzung auf der nächsten Folie
(C) Brandeis Consulting.

Die Datei manifest.json (2/2)

  • sap.ui5:
    • rootView: Der Startpunkt der Anwendung oder Komponente.
      • viewName: Vollqualifizierter Name der Hauptansicht.
      • type: Art der Ansicht, hier "XML".
      • id: Eindeutige ID für die rootView, hier "app".
    • dependencies: Abhängigkeiten der Anwendung.
      • minUI5Version: Minimale erforderliche Version von SAPUI5 für diese Anwendung.
      • libs: Verwendete Bibliotheken. Hier sind sap.ui.core und sap.m aufgelistet.
    • models: Datenmodelle, die in der Anwendung verwendet werden.
      • i18n: Ein spezielles Modell für die Internationalisierung.
        • type: Typ des Datenmodells.
        • settings: Einstellungen für das i18n-Modell, einschließlich des Namens des Ressourcenbündels, unterstützter Sprachen und einer Fallback-Sprache.
//Fortsetzung
  "sap.ui5": {
    "rootView": {
        "viewName": "ui5.walkthrough.view.App",
        "type": "XML",
        "id": "app"
    },
    "dependencies": {
      "minUI5Version": "1.93",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {}
      }
    },
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "ui5.walkthrough.i18n.i18n",
          "supportedLocales": [""],
          "fallbackLocale": ""
        }
      }
    }
  }
}
(C) Brandeis Consulting.

manifest.json als Diagramm

(C) Brandeis Consulting.

Änderungen in index.html

Wir deklarieren unsere Komponente im Body unserer index.html. Im Bootstrapping-Skript unserer index.html aktivieren wir das ComponentSupport-Modul und entfernen die sap.m-Bibliothek.

Die Datei index.js kann gelöscht werden! Sie wird nicht mehr gebraucht.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>UI5 Walkthrough</title>
  <script
    id="sap-ui-bootstrap"
    src="resources/sap-ui-core.js"
    data-sap-ui-theme="sap_horizon"
    data-sap-ui-compatVersion="edge"
    data-sap-ui-async="true"
    data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
    data-sap-ui-resourceroots='{
      "ui5.walkthrough": "./"
    }'>
  </script>
</head>
<body class="sapUiBody" id="content">
  <div data-sap-ui-component 
       data-name="ui5.walkthrough" 
       data-id="container" 
       data-settings='{"id" : "walkthrough"}'>
  </div>
</body>
</html>
(C) Brandeis Consulting.

Neue Texte in i18n.properties

Die neuen Texte werden in der manifest.json verwendet:

# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5

# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
(C) Brandeis Consulting.

Entfernung der Metadaten aus Component.js

Statt der Metadaten genügt jetzt eine Referenz auf das mainfest.

sap.ui.define([
   "sap/ui/core/UIComponent",
   "sap/ui/model/json/JSONModel"
], function (UIComponent, JSONModel) {
   "use strict";
   return UIComponent.extend("ui5.walkthrough.Component", {
      metadata : {
            interfaces: ["sap.ui.core.IAsyncContentCreation"],
            manifest: "json"
      },
      init : function () {
         // call the init function of the parent
         UIComponent.prototype.init.apply(this, arguments);
         // set data model
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.setModel(oModel);
      }
   });
});
(C) Brandeis Consulting.