SAPUI5: Ein paar Grundlagen zum SAPUI5-Framework

Hier mal ein Artikel, der sich nicht mit .NET-Technologien wie C# oder WPF beschäftigt. In letzter Zeit habe ich mich ein wenig mit Webtechnologien und den dort zur Verfügung stehenden Frameworks, wie Angular, React oder eben SAPUI5, beschäftigt. In diesem Artikel möchte ich mal ein kurzen Überblick über das SAPUI5-Framework geben. Das SAPUI5-Framework bietet u.a. über 200 vorgefertigte Controls, DataBinding- und OData-Support sowie die Unterstützung des MVC-Patterns. Für die Entwicklung von Benutzeroberflächen stehen diverse View-Typen (HTML-, JSON-, XML- und JavaScript-Views) zur Verfügung. Daneben gibt es schon eingebaute Funktionen für die Modularisierung und Erweiterbarkeit, um enterprisetaugliche Anwendungen zu entwickeln. Als WPF-Entwickler wird man einige, der dort eingesetzten Konzepte schnell wiedererkennen, gerade im Bereich Oberflächen- bzw. UI-Entwicklung (z.B. XML-Views und DataBinding).

Grundlagen zu SAPUI5

SAPUI5 ist, wie der Name schon vermuten lässt, ein von der SAP entwickeltes UI-Framework. Das Framework basiert auf aktuellen Webstandards wie HTML5, CSS3 und JavaScript (z.B. jQuery) und ist das zur Zeit am meisten verwendete Framework für neue SAP-Anwendungen und gilt als maßgebend für die neue Generation der SAP-Lösungen, die plattformübergreifend kompatibel sein sollen. Auch wenn das Framework ursprünglich als neue Generation für SAP-eigene Anwendungen entwickelt und angepriesen wurde, ist es mittlerweile ein Tool zur Entwicklung beliebiger Webanwendungen geworden. Dies wird vor allem durch die OpenSource-Version OpenUI5 deutlich, welche im Jahre 2014 veröffentlicht wurde und auf Basis des SAPUI5-Frameworks entstanden ist.

Funktionsumfang

Hier mal ein kurzer Überblick über die wichtigsten Features des SAPUI5-Frameworks:

  • MCV Pattern Unterstützung
  • Responsive Controls (z.B. Tabellen/Listen oder analytische Tabellen)
  • Single Page Application und Routing Support
  • Lokalisierung
  • Barrierefreiheit
  • Unit-/Integration-Test Support
  • Theming
  • Two-way data binding
  • OData Support
  • Development Tools

SAPUI5 vs. OpenUI5

Wie bereits erwähnt gibt es zwei Versionen des Frameworks: SAPUI5 und OpenUI5. Der Funktionsumfang der beiden Frameworks ist jedoch gleich! Auch als nicht SAP-Kunde können Anwendungen mit SAPUI5 entwickelt werden. In diesem Fall verwendet man einfach OpenUI5 anstelle von SAPUI5. Der größte Unterschied zwischen den beiden Varianten ist, dass OpenUI5 mit einer Apache-2.0-Lizenz verfügbar ist. Diese ist vollständig OpenSoure kompatibel, und die Apache-Lizenz ist so flexibel, dass OpenUI5 für wirklich alles verwendet werden kann. Im Dezember 2013 wurde beschlossen, alle Hauptbestandteile von SAPUI5 als OpenSource bereitzustellen, und der Code ist seit einiger Zeit über GitHub (https://github.com/SAP/openui5) verfügbar.

SAPUI5-Demokit und OpenUI5-Demokit

Als Startpunkt eignet sich das SAPUI5-Demokit, das unter der folgenden URL online verfügbar ist: https://sapui5.hana.ondemand.com/. Das SAPUI5-Demokit enthält u.a. die folgenden Abschnitte:

  • Developer Guide – Das Entwicklerhandbuch beinhaltet zusätzliche Dokumentationen und eine stetig wachsende Anzahl an Tutorials (z.B. Routing und Navigation, Data Binding, usw.)
  • Explored – Die Explored-App enthält Beispiele, die zeigen, wie unterschiedliche Controls verwendet werden, welchem Zweck sie dienen und in welcher SAPUI5-Bibliothek sie enthalten sind. Die Beispiele zeigen typische Anwendungsfälle in unterschiedlichen Konfigurationen des jeweiligen Controls.
  • API Reference – Vollständige API-Dokumentation für jede in SAPUI5 verfügbare Ressource
  • Demo Apps – Demonstriert unterschiedliche Beispielanwendungen, wie z. B. »Hello, World«
  • Icons – Übersicht über die in SAPUI5 verfügbaren Symbole

Das Pendant für OpenUI5 gibt es hier: https://openui5.hana.ondemand.com

Bibliotheken

Ähnlich dem .NET-Framework sind einzelne Funktionen oder auch Controls in eigenen Bibliotheken abgelegt. Diese Bibliotheken müssen dann bei der Initialisierung der Anwendung (Bootstrapping) geladen werden, dazu später etwas mehr. Hier mal eine Übersicht über die wichtigsten Bibliotheken:

Bibliothek / NamensraumVerwendungszweck
sap.ui.coreDie SAPUI5 Core Runtime. Enthält die UI5 jQuery-Plugins (jQuery.sap.*), den Core und all seine Komponenten, Basisklassen für Controls, Komponenten und die Model-View-Controller Klassen.
sap.mDie Hauptbibliothek für UI5-Steuerelemente. Enthält responsive Controls, die sowohl mit Touch-Geräten als auch mit Desktop-Browsern verwendet werden können.
sap.ui.layoutBibliothek mit Layoutcontrols, z.B. Grid, Splitter, usw.
sap.ui.unifiedEinheitliche Controls für Mobil- und Desktopszenarios, z.B. Kalender, Currency, File-Upload, usw.
sap.ui.tableTabellenähnliche Steuerelemente (hauptsächlich für den Einsatz in Desktopanwendungen)
sap.vizChart-Controls auf Basis der SAP BI COM Charting Library
sap.ui.compSAPUI5-Bibliothek mit smarten (intelligenten) Controls.

Hinweis: Die Steuerelemente in dieser Bibliothek unterstützen nur OData V2 (siehe sap.ui.model.odata.v2.ODataModel) und Standardmodelle.
sap.ui.richtexteditorEin Rich-Text-Editor (RTE) Control
sap.ui.vkSAPUI5-Bibliothek mit Steuerelmenten zur Anzeige von 3D-Modellen.

Es gibt jedoch einige Einschränkungen bei der Kompatibilität von Bibliotheken untereinander. Dazu mal das folgende Bild:

SAPUI5 - Supported Library Combinations

SAPUI5 – Supported Library Combinations (Quelle [4])

Die Bibliotheken in der Schnittfläche der beiden Kreise können mit den Bibliotheken aus dem linken Kreis bzw. mit den Bibliotheken aus dem rechten Kreis eingesetzt werden. Allerdings sollten die Bibliotheken aus dem linken und dem rechten Kreis nicht zusammen eingesetzt werden.

Entwicklungsumgebung und Tools

Wie weiter oben schon geschrieben kann SAPUI5 für die Erstellung beliebiger Webanwendungen verwendet werden, daher ist für die Entwicklung nicht zwingend ein SAP-Backendsystem (z.B. SAP NetWeaver) notwendig. Für die Minimalisten reicht ein einfacher Texteditor, die SAP bietet allerdings Entwicklungstools für die OpenSource Entwicklungsumgebung Eclipse an. Aktuell werden die folgenden Eclipse Versionen unterstützt:

Hier mal beispielhaft die Installation für Eclipse Neon:

  1. Innerhalb von Eclipse das Menü Help > Install New Software… aufrufen
  2. Im Installationsdialog die folgende URL eingeben: https://tools.hana.ondemand.com/neon
  3. Enter drücken um die zur Verfügung stehenden Features anzuzeigen
  4. Unter UI Development Toolkit for HTML5 die gewünschten Features auswählen
  5. Eclipse Installation SAPUI5 Development Toolkit

    Eclipse Installation SAPUI5 Development Toolkit

  6. Im nächsten Schritt erhält man Übersicht über die zu installierenden Features
  7. Zum Abschluss noch die Lizenzvereinbarung bestätigen und die Installation beginnt
  8. Nach Abschluss der Installation sollte man unter Help > Installation Details einen Eintrag namens UI Development ToolKit for HTML5 finden:
  9. Eclipse Installation SAPUI5 Development Toolkit

    Übersicht installierte Versionen

Hello World!

In diesem Abschnitt geht es jetzt um die Erstellung der ersten SAPUI5 Anwendung. Das SAPUI5-Framework unterstützt verschiedene Anwendungstypen. Dies ist vergleichbar mit den Projekttypen innerhalb von VisualStudio für ein .NET-Projekt, allerdings gibt es hier bisher keine Wizardunterstützung. Zunächst mal ein Überblick über die Anwendungstypen und die Möglichkeiten eine SAPUI5 Anwendung zu strukturieren.

Struktur der Anwendung / Anwendungstypen

Das SAPUI5-Framework bietet verschiedene Möglichkeiten eine Anwendung zu strukturieren. Ein wichtiger Aspekt in modernen Softwarearchitekturen ist die Entwicklung von unabhängigen und wiederverwendbaren Modulen/Einheiten und genau dafür bietet SAPUI5 das Konzept der sogenannten Komponenten. Komponenten sind ein Konzept, zu dem Kapselung und Wiederverwendung gehören. Dabei können Komponenten unabhängig voneinander von verschiedenen Entwicklungsteams implementiert und in verschieden Projekten eingesetzt werden. Dies macht die Struktur der Anwendung und deren Code leichter verständlich und ist dadurch auch einfacher zu warten. Es gibt zwei unterschiedliche Komponententypen:

  • oberflächenfreie Komponenten – diese Komponenten besitzen keine Benutzeroberfläche und können für Anwendungen, wie z.B. einen Service, nützlich sein, über den Daten aus dem Backend bereitgestellt werden
  • UI-Komponenten – diese Komponenten repräsentieren einen Bildschirmbereich oder ein Element innerhalb der Benutzeroberfläche, z.B. einen Button oder eine Shell.

Abgrenzung zu anderen Konzepten innerhalb von SAPUI5

In der folgenden Liste wird erläutert, wie sich andere in SAPUI5 verwendete Konzepte vom SAPUI5-Komponentenkonzept unterscheiden:

  • Composite controls – beide Konzepte repräsentieren eine Menge von Controls/Steuerelement innerhalb der Benutzeroberfläche (im WPF-Umfeld spricht man von einem UserControl). Zusammengesetzte Controls dienen vor allem der Wiederverwendbarkeit und erlauben es bereits existierende Controls, z.B. Buttons, ComboBoxen, Grids, usw., in einem gemeinsamen Control zu kapseln. Dieses zusammengesetzte Control kann dann in unterschiedlichen Dialogen wiederverwendet werden.

  • UI library – eine UI library oder UI-Biblothek ist die auszulieferende Einheit um eine Menge von Controls: Es werden niemals einzelne Controls ausgeliefert, sondern Controls sind immer Bestandteil einer Bibliothek. Komponenten hingegen sind in sich geschlossen und sollten nicht für die Bereitstellung von Controls verwendet werden.

  • Notepad control – ein Notepad-Control ist eine andere Möglichkeit ein Control/Steuerelement zu definieren. Notepad controls haben alle Merkmale/Eigenschaften eines „normalen“ Controls.

  • MVC – MVC steht für Model-View-Controller und ist ein Muster/Pattern zur Trennung von Software in die drei Komponenten Datenmodell (engl. model), Präsentation (engl. view) und Programmsteuerung (engl. controller). Ziel des Musters ist ein flexibler Programmentwurf, der eine spätere Änderung oder Erweiterung erleichtert und eine Wiederverwendbarkeit der einzelnen Komponenten ermöglicht.

  • Application – Anwendungen haben eine einzige Start-URL (index.html) und enthalten alles was zur Anwendung gehört (alles in einer auslieferbaren Einheit). Es ist allerdings nicht möglich eine Anwendung in eine andere Anwendung einzubetten, da das Wissen über die benötigten Bibliotheken, Skripts und zusätzliche Stylesheets in der index.html enthalten ist

View-Typen

In SAPUI5 können unterschiedliche Arten von Views erstellt werden. Views können entweder mit JavaScript-Code oder deklarativ mit XML, JSON oder HTML erstellt werden. Die SAP empfiehlt wann immer es geht XML-Views zu verwenden, dieser View-Typ kommt auch dem WPF-Entwickler entgegen, dazu aber später etwas mehr. Hinsichtlich der Namenskonventionen ist es wichtig, dass die View-Dateien analog dem folgendem Schema benannt werden: ViewName.view.viewtype. Hier die Dateinamenskonventionen:

View-TypenDateiendung
JavaScript-View*.view.js
XML-View*.view.xml
HTML-View*.view.html
JSON-View*.view.json

Dies nur mal zu besseren Übersicht über die einzelnen Viewtypen. Hier mal noch ein Beispiel für einen XML-View (als kleiner Vorgeschmack ;-)):

Auf den ersten Blick könnte man meinen es handelt sich um einen WPF-View, z.B. sieht man XML-Namensräume und die Deklaration eines Controls. Jeder, der schon einmal unter WPF entwickelt hat sollte sich, zumindest bei diesem View-Typ, recht schnell zurechtfinden. Wie das Beispiel zeigt ist die Syntax weitestgehend identisch und darüber hinaus gibt es auch ein Konzept für das DataBinding, das werde ich aber in einem weiteren Beitrag genauer beschreiben. Zunächst einmal die erste SAPUI5 Anwendung.

Anwendung erstellen

In diesem Abschnitt geht es um die Erstellung einer ersten SAPUI5-Anwendung. Bei der Erstellung werden die folgenden drei Schritte ausgeführt:

  1. Startseite erstellen
  2. Anwendung initialisieren
  3. Content hinzufügen

Erstellen der Startseite (index.html)

Wir beginnen mit dem Erstellen einer HTML-Seite (index.html) für die Anwendung. Dort definieren wir die Meta-Tags, ein Skript-Tag zum Laden der SAPUI5-Bibliotheken (Bootstrapping) und einem Platzhalter für den Inhalt der Anwendung.

So was genau passiert hier jetzt:

  • Mit dem Tag <!DOCTYPE html> wird dem Browser mitgeteilt, dass es sich um eine HTML5 Seite handelt
  • Das head-Tag mit den folgenden Informationen:
    • Die meta Tags <meta http-equiv="X-UA-Compatible" content="IE=edge"> um den Microsoft Internet Explorer mitzuteilen, dass die neueste Rendering-Engine (edge) verwendet soll und <meta charset="utf-8"> um das Encoding festzulegen
    • Den Titel der Anwendung
    • Das script-Tag um die SAPUI5-Bibliotheken zu laden und initialisieren (Bootstrapping)
  • Das HTML body-Tag mit der ID content und class sapUiBody. Dies dient als Platzhalter für den späteren Content der Anwendung

Das Laden und Initialisieren der SAPUI5 Anwendung, innerhalb des script-Tags, wird auch als Bootstrapping bezeichnet. Um SAPUI5 in die Anwendung zu laden, muss der Anwendung mitgeteilt werden, wo die SAPUI5-Ressourcen abgerufen werden sollen und welche der zahlreichen Ressourcen für die Anwendung benötigt werden (Attribut: data-sap-ui-libs). Dabei zeigt das Attribut src der Anwendung, wo sich die SAPUI5-Bibliothek befindet. Hier muss der Pfad so angepasst werden, dass der Speicherort der Ressourcen (<<server>>:<<port>>) auch passend zur jeweiligen Installation angegeben ist. Zu Testzwecken kann auch Content Delivery Network (CDN) der SAP genutzt werden. Die Pfade hierfür sind wie folgt:

Das sieht dann so aus:

Dies sollte man aber nur zu Testzwecken so machen! Bei dem oben genannten Pfad handelt es sich um die sogenannte Default-Version und diese wird ständig aktualisiert, was zu Instabilitäten in der eigenen Anwendung führen kann. Besser ist eine spezifische Version des SAPUI5-Frameworks zu verwenden. Das könnte in etwa so aussehen:

Eine Übersicht der verschiedenen Versionen ist hier zu finden:

Weitere Einzelheiten zum Thema Bootstrapping sind im Developer Guide zu finden:

Anwendung initialisieren

Die Bibliothek sap.m enthält ein Control namens App, welches das Root-Control der Anwendung darstellt. Dieses Control initialisiert den Inhalt des Body-Tags und setzt einige Meta-Tags auf das HTML-Dokument für mobile Geräte. Darüber hinaus verwaltet dieses Control die einzelnen Seiten der Anwendung, die Navigation zwischen den einzelnen Seiten und steuert die Animation beim Navigieren.

In dem zweiten Skriptblock wird das attachInit-Ereignis mit Hilfe einer anonymen Funktion, als Event-Handler, registriert. Dieses Event wird aufgerufen, sobald das SAPUI5-Framework geladen und initialisiert wurde. Innerhalb der anonymen Funktion wird das Root-Objekt der Anwendung erzeugt und die Seite definiert, die als Startseite angezeigt werden soll. Zu diesem Zeitpunkt hat diese Seite noch keinen Inhalt.

Content hinzufügen

Nachdem die Anwendung initialisiert wurde kann entsprechender Content hinzugefügt werden und das sieht in etwa so aus:

So was passiert hier jetzt: Der Anwendung werden zwei einfache Seiten hinzugefügt und die Navigationspfade werden definiert. Um eine neue Seite zu erzeugen wird ein Objekt vom Typ sap.m.Page erstellt (Zeile 19-29). Der Inhalt der Seite wird in Zeile 22-27 definiert. Hier wird einfach ein neuer Button erzeugt, der Text des Buttons festgelegt und das press-Event des Buttons registriert. Wird der Button gedrückt wird das App-Objekt angewiesen die Navigation zur zweiten Seite auszuführen, welche in Zeile 31 definiert wurde. Über die Eigenschaft showNavButton kann gesteuert werden, ob der Back-Button im Browser aktiviert bzw. deaktiviert ist. Damit das Root-Objekt jetzt überhaupt weiß welche Seiten zur Anwendung gehören werden diese dem app-Objekt in Zeile 40 hinzugefügt. Abschließend wird das app-Objekt im Inhaltsbereich der HTML-Seite abgelegt (Zeile 42), welcher vorher im body-Tag definiert wurde (Zeile 46).

Damit hat man erfolgreich eine erste Anwendung mit SAPUI5 erstellt. Wie zu sehen hat diese Anwendung zwei Seiten innerhalb nur einer HTML-Datei. Gerade für größere Anwendung ist das natürlich nicht wirklich geeignet. Wie weiter oben schon beschrieben bietet das SAPUI5-Framework hier noch einige weiterführende Möglichkeiten um die Anwendung besser zu strukturieren (z.B. durch das MVC-Pattern) und zu modularisieren. Diese Möglichkeiten werde ich einem weiteren Artikel genauer beschreiben.

Fazit

Das SAPUI5-Framework bietet einige interessante Features, vor allem die im Lieferumfang enthaltenen Controls in Verbindung mit XML-Views und DataBinding kommen gerade dem WPF-Entwickler sehr entgegen. Auch die bereits eingebauten Konzepte für die Strukturierung und Modularisierung (z.B. MVC-Konzept) oder der gute OData-Support erlauben es, auf einfache Art und Weise, enterprisetaugliche Anwendungen zu entwickeln. Durch die die OpenSource-Version OpenUI5 können auch nicht SAP-Kunden dieses Framework einsetzen und beliebige Webanwendungen entwickeln. Die sehr gute Dokumentation, die vielen Beispiele und die Integration in Eclipse sind weitere Pluspunkte. Alles in allem bietet das SAPUI5-Framework eine Menge an Funktionen, welche ich in weiteren Artikeln noch etwas genauer erläutern werde.

Literaturverzeichnis und Weblinks

Abk.Quelle
[1]SAPUI5-Demokit
https://sapui5.hana.ondemand.com/
[2]OpenUI5-Demokit
https://openui5.hana.ondemand.com/
[3]GitHub Repository OpenUI5
https://github.com/SAP/openui5
[4]SAPUI5 - Supported Library Combinations
https://sapui5.hana.ondemand.com/#docs/guide/363cd16eba1f45babe3f661f321a7820.html
[5]Bootstrapping: Loading and Initializing
Bootstrapping: Loading and Initializing
Fork me on GitHub