SAPUI5 Enterprise Development
Architektur und Komponentenstruktur
Das Fundament Ihrer Anwendung
Wenn Sie eine SAPUI5-Anwendung starten, ist die index.html der erste Berührungspunkt. Sie lädt das SAPUI5-Framework und weist es an, eine Komponente zu laden. Aber das eigentliche Gehirn Ihrer Anwendung ist die Kombination aus Component.js und einer zentralen Konfigurationsdatei: dem manifest.json, auch als Anwendungsdeskriptor bekannt. Diese Trennung ist der Schlüssel zu wartbaren und skalierbaren Enterprise-Anwendungen.
Der Startvorgang, oder das Bootstrapping, folgt einer klaren Logik. Die index.html enthält in der Regel nur minimalen Code. Ihre Hauptaufgabe ist es, eine Instanz des sap.ui.core.ComponentContainer zu erstellen. Dieser Container erhält die Anweisung, Ihre Hauptkomponente zu laden, die in der Component.js-Datei definiert ist. Die Komponente wiederum liest als Erstes ihren eigenen Steckbrief – die manifest.json. So versteht sie ihre Struktur, Abhängigkeiten, Datenquellen und vieles mehr, bevor sie mit der eigentlichen Arbeit beginnt.
<!-- index.html -->
<body class="sapUiBody" id="content">
<div data-sap-ui-component
data-name="your.namespace.app"
data-id="container"
data-settings='{"id" : "app"}'>
</div>
</body>
Dieser Code in der index.html ist deklarativ. Er sagt dem Framework: „Finde die Komponente mit dem Namen your.namespace.app und rendere sie in dieses div-Element.“ Das Framework kümmert sich um den Rest.
Die manifest.json im Detail
Die manifest.json ist die Single Source of Truth für die Metadaten Ihrer Anwendung. Anstatt Konfigurationen fest im Code zu verankern, beschreiben Sie Ihre Anwendung in dieser JSON-Datei. Das hält die Component.js sauber und flexibel. Man kann es sich so vorstellen: Die Component.js ist der Motor, aber die manifest.json ist das technische Datenblatt des Autos. Es sagt dem Motor, welche Teile er hat, wo er seinen Treibstoff (Daten) bekommt und welche Sprache er sprechen soll.
Die Datei ist in verschiedene Namespaces unterteilt. Jeder hat eine spezifische Aufgabe:
sap.app: Enthält allgemeine Anwendungsinformationen wie ID, Typ, Titel, Beschreibung und Datenquellen (dataSources). Hier deklarieren Sie, mit welchen Backend-Services Ihre App kommunizieren wird, z. B. einem ().sap.ui: Definiert technologiebezogene Attribute, wie z. B. welche Geräte (Desktop, Tablet, Phone) unterstützt werden.sap.ui5: Der wichtigste Abschnitt für die Anwendungsstruktur. Hier definieren Sie die Root-View, Abhängigkeiten (Bibliotheken), Routing-Konfigurationen und vor allem die Modelle, die Ihrer Anwendung zur Verfügung stehen.
{
"sap.app": {
"id": "your.namespace.app",
"type": "application",
"dataSources": {
"mainService": {
"uri": "/sap/opu/odata/sap/YOUR_SERVICE_NAME/",
"type": "OData",
"settings": {
"odataVersion": "2.0"
}
}
}
},
"sap.ui5": {
"rootView": {
"viewName": "your.namespace.app.view.App",
"type": "XML",
"async": true,
"id": "app"
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "your.namespace.app.i18n.i18n"
}
},
"": {
"dataSource": "mainService",
"preload": true
}
}
}
}
Beachten Sie im models-Abschnitt zwei wichtige Deklarationen. Das i18n-Modell ist ein ResourceModel und für die Mehrsprachigkeit zuständig. Es verweist auf eine Eigenschaftendatei, die alle Texte der Benutzeroberfläche enthält.
Das zweite Modell hat keinen Namen (ein leerer String "") und wird daher zum Standardmodell der Anwendung. Es verweist über dataSource auf den zuvor definierten OData-Service. Die Einstellung "preload": true ist entscheidend: Sie weist das Framework an, die Metadaten des Service so früh wie möglich zu laden, was die Startleistung der Anwendung verbessert.
Asynchrones Laden und Initialisierung
Moderne Webanwendungen müssen schnell sein. Ein blockierender, synchroner Startvorgang ist da ein No-Go. SAPUI5 setzt daher konsequent auf Asynchronität(). Die Einstellung "async": true bei der rootView in der manifest.json ist ein Beispiel dafür. Sie sorgt dafür, dass die UI nicht blockiert wird, während die erste Ansicht geladen wird.
Nachdem die manifest.json geladen und analysiert wurde, ruft das Framework die init-Funktion in Ihrer Component.js auf. Dies ist Ihr Einstiegspunkt für programmatische Initialisierungen.
Hier initialisieren Sie das (), das für die Navigation zwischen den verschiedenen Ansichten Ihrer App verantwortlich ist. Die init-Funktion ist auch der Ort, an dem Sie Modelle erstellen könnten, die nicht im Manifest deklariert sind, obwohl die deklarative Methode fast immer vorzuziehen ist.
// Component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"your/namespace/app/model/models"
], function (UIComponent, Device, models) {
"use strict";
return UIComponent.extend("your.namespace.app.Component", {
metadata : {
manifest: "json"
},
init : function () {
// Rufen Sie die init-Funktion der übergeordneten Klasse auf
UIComponent.prototype.init.apply(this, arguments);
// Initialisieren Sie den Router
this.getRouter().initialize();
// Setzen Sie Gerätemodelle, falls benötigt
this.setModel(models.createDeviceModel(), "device");
}
});
});
Der Aufruf UIComponent.prototype.init.apply(this, arguments); ist unerlässlich. Er stellt sicher, dass die Standardinitialisierung des Frameworks ausgeführt wird, wie z. B. das Auslesen des Manifests und das Erstellen der darin deklarierten Modelle.
Mit diesem Wissen über das Zusammenspiel von index.html, manifest.json und Component.js haben Sie eine solide Grundlage für die Entwicklung robuster SAPUI5-Anwendungen. Die zentrale, deklarative Konfiguration im Manifest macht Ihre Apps nicht nur performanter, sondern auch wesentlich einfacher zu warten und zu erweitern.
Welche Datei wird als „Single Source of Truth“ für die Metadaten und Konfiguration einer SAPUI5-Anwendung bezeichnet?
In welchem Namespace der manifest.json werden die Root-View, Abhängigkeiten und Modelle der Anwendung definiert?