SAPUI5 Grundlagen

SAPUI5 laden

Einbinden der UI5 Bibliotheken

(C) Brandeis Consulting.

Was ist UI5 und warum brauchen wir das

Die SAPUI5 Bibliotheken helfen bei der Erstellung von Webanwendungen bzw. -apps. Sie bringen viele Funktionen und Konzepte mit, die wir für Enterprise Anwendungen benötigen. Z.B.

  • Oberflächenelemente, z.B. Tabellen, Diagramme, Eingabefelder etc.
  • Datenanbindung zu Services mit OData
  • Internationalisierung bzw. Mehrsprachigkeit
  • Theming
  • Unterstützung unterschiedlicher Browser

Bei reinen HTML-Anwendungen muss das Rad jedes Mal neu erfunden werden. Mit SAPUI5 hat man einen guten Standard.

(C) Brandeis Consulting.

Wie bekomme ich SAPUI5 in mein Dateienbündel?

SAP CDN

Die SAPUI5 Bibliotheken liegen auf der Website
ui5.sap.comoder
sdk.openui5.org

Aber welche ist die Richtige? Es gibt hier viele Versionen, siehe

https://ui5.sap.com/versionoverview.html

Long-term Maintenance Versionen werden langfristig gewartet und sind lange verfügbar.

Lokal

Alternativ können die Bibliotheken auch auf dem lokalen Webserver abgelegt werden. Der UI5 CLI erledigt das für uns:

ui5 use OpenUI5

Dazu laden wir onch ein paar Bibliotheken, die wir gleich brauchen:

ui5 add sap.ui.core sap.m themelib_sap_horizon
(C) Brandeis Consulting.

Standardcode zum Laden der Bibliotheken

In der Startseite index.html wird im head-Bereich der folgende Code eingebaut:

	<script
		id="sap-ui-bootstrap"
		src="resources/sap-ui-core.js"
		data-sap-ui-theme="sap_horizon"
		data-sap-ui-libs="sap.m"
		data-sap-ui-compatVersion="edge"
		data-sap-ui-async="true"
		data-sap-ui-onInit="module:ui5/walkthrough/index"
		data-sap-ui-resourceroots='{
			"ui5.walkthrough": "./"
		}'>

	</script>
  • src - gibt die Quelle für die SAPUI5 Bibliotheken an
  • data-sap-ui-theme - Welches Theme soll verwendet werden. Wir verwenden heute sap_horizon
  • data-sap-ui-libs - gibt die konkreten Bibliotheken an, die wir verwenden wollen. Da kommen später noch mehr dazu.
  • data-sap-ui-compatVersion - die Kompatibilitätsversion. Hier steht immer edge. Siehe Doku
  • data-sap-ui-async - die Bibliotheken werden asynchron geladen. D.h. es muss nicht gewartet werden, bis sie da sind.
  • data-sap-ui-resourceroots - Hier geben wir an, wo unsere Dateien liegen. Dabei definieren wir in JSON-Notation einen Namensraum und weisen ein Verzeichnis zu.
(C) Brandeis Consulting.

Test der Bibliotheken

Um zu testen, ob das wirklich mit dem Einbinden funktioniert hat, können wir eine einfache JavaScript index.js Datei anlegen:

sap.ui.define([
], function () {
	"use strict";
	alert("UI5 is ready");
});
webapp/index.js

Diese Datei enthält unsere Anwendungslogik.
Sie wird von der index.html beim Initialisieren aufgerufen über das Attribut

<script
   ...
   data-sap-ui-onInit="module:sap/ui/demo/walkthrough/index"
   ...
   >
(C) Brandeis Consulting.

Optional Wenn wir die Version festlegen wollen

Die Versionsnummer besteht aus mehreren Komponenten:
<UI5-Release>.<Versionsnummer>.<Patchlevel> also z.B. 1.117.0

Eine konkrete Version

Damit ist alles unter Kontrolle und man kann nach dem Testen sicher sein, dass sich nichts verändert. Aber auch keine Sicherheitslücken geschlossen werden.

<script id="sap-ui-bootstrap"
    type="text/javascript"
    src="https://ui5.sap.com/1.117.0/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_fiori_3"
    data-sap-ui-async="true"
    data-sap-ui-libs="sap.m"></script>

Die Evergreen Version

Wenn man den Patchlevel nicht mit angibt, bekommt man den aktuellsten Patchlevel. Dazu sind andere Attribute beim Bootstraping zu setzen:

<script id="sap-ui-bootstrap"
        src="https://ui5.sap.com/1.108/resources/sap-ui-core.js"        data-sap-ui-async="true"        data-sap-ui-onInit="module:sap/ui/core/ComponentSupport"        data-sap-ui-resourceRoots='{ "my.app": "./" }'
        data-sap-ui-...="..."></script>

Die Aktuellste

Ohne der Versionsnummer im Pfad bekommt man immer das neuste SAPUI5. Das kann sich aber kurzfristig ändern und ist aber darum selten stabil. Das ist eigentlich nur zum Testen zu empfehlen.

<script id="sap-ui-bootstrap"
    type="text/javascript"
    src="https://ui5.sap.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_fiori_3"
    data-sap-ui-async="true"
    data-sap-ui-libs="sap.m"></script>

SAP Dokumentation

(C) Brandeis Consulting.