SAPUI5 & OpenUI5
Inhaltsverzeichnis
SAPUI5 ist aktuell die neben WebDynpro die am weitesten verbreitete SAP-Oberflächentechnologie und soll in Zukunft als alleinige Oberflächentechnologie etabliert werden.
Das UI Framework wird nicht nur für Fiori Applikationen eingesetzt, sondern ganz allgemein für die Entwicklung von Anwendungen auf Basis von JQuery und Webstandards wie HTML5, JavaScript und CSS3. SAPUI5 ist für die Entwicklung von Applikationen optimiert, die sowohl von Desktop-Rechnern als auch mobilen Endgeräten genutzt werden sollen.
Das standardisierte SAPUI5-Toolset beinhaltet zahlreiche vordefinierte grafische Bedienelemente zum Erstellen neuer Oberflächen für verschiedenste Prozessschritte in SAP. Anwender können sowohl Standard-Fiori-Apps individuell ergänzen als auch völlig neue Anwendungen zur Prozessautomatisierung kreieren.
In vielen Fällen ist dies notwendig, da SAP selbst kaum sämtliche seiner bislang rund 400.000 Benutzeroberflächen (SAP Dynpros) als Fiori App nachprogrammieren wird. SAPUI5 ist ideal für die Entwicklung von schlanken Business Applikationen mit einem Fokus auf Usability. Es unterstützt alle SAP Produkte und lässt sich auf diversen Servern nutzen.
Für Entwickler ist SAPUI5 leicht zu erlernen. Es bietet umfassende Möglichkeiten, Steuerungselemente und Themes anzupassen, und basiert auf offenen Standards, die die Integration von 3rd-Party JavaScript-Bibliotheken unterstützen. Es basiert auf dem MVC-Modell, das die Datenlogik vom Design trennt und Änderungen am UI vereinfacht.
SAPUI5 unterstützt über zweiseitige Datenanbindung neben dem für SAP Fiori relevanten Datenformat OData auch JSON, XML u.a.
SAPUI5 vs. OpenUI5
SAP liefert zwei Ausführungen seines Development Toolkits aus: SAPUI5 und die Open-Source Variante OpenUI5. Das JavaScript-Framework OpenUI5 hat SAP unter einer Apache-2.0-Lizenz entwickelt, um betriebssystemunabhängige Geschäftsanwendungen zu erstellen. Sein Kernel basiert auf JavaScript, jQuery und LESS. Die Bibliothek beinhaltet die MVC-Architekturbausteine mit Optionen für verschiedene Ansichten und Modellformate. Sie wurde nach mehreren Jahren in der Produktion bei SAP Ende 2013 als Open Source veröffentlicht; Erweiterungen sind über GitHub möglich.
SAPUI5 ist quasi eine proprietäre Version von OpenUI5, die integriert ist in die eigenen Produkte (SAP HANA, SAP Business Technology Platform, SAP NetWeaver 7.4 oder höher, User Interface Add-on für SAP NetWeaver Application Server 7.3x). Anwender erhalten SAPUI5 kostenfrei zur Verfügung gestellt. Hierfür liefert SAP, anders als bei OpenUI5, auch Bugfixes. Darüber hinaus beinhaltet SAPUI5 einige zusätzliche Komponenten, die in der freien Version fehlen. Hierbei handelt es sich jedoch größtenteils um exotische UI-Komponenten – die Standardkomponenten sind in beiden Versionen vorhanden. Der Kernel ist bei beiden Versionen identisch, die somit stets den gleichen Entwicklungsstand haben.
Browser und Platform Support
Da OpenUI5 auf CSS3, HTML5 und der JavaScript-API von ECMAScript 5 (ES5) basiert, werden nur Browser mit HTML5-Fähigkeiten unterstützt. Mit iOS-, Android-, MacOS- und Windows befinden sich darunter die relevanten Plattformen. Generell unterstützt das OpenUI5-Framework nur Hauptversionen, die auch von der jeweiligen Plattform unterstützt werden.
UI5 Architektur
Auf der Client-UI-Technologie OpenUI5 entwickelte Apps laufen im Browser auf jedem Endgerät. Greift der Anwender auf eine App zu, wird eine Anfrage an den jeweiligen Server gesendet, um die Anwendung in den Browser zu laden.
Abhängig von der Umgebung, in der OpenUI5 eingesetzt wird, können die Bibliotheken oder Anwendungen zum Beispiel auf einem SAP NetWeaver Application Server oder einer SAP Business Technology Platform abgelegt werden.
Im ersten Fall ist der Betrieb eines SAP Fiori Frontend Servers als Gateway Voraussetzung. Dieser kommuniziert mit SAP über OData-Services (s.u.) und rendert die Apps. Soll eine App auch außerhalb der Unternehmensgrenzen genutzt werden, sollte der Web-Zugriff auf das SAP Gateway beim On-premise-Betrieb durch einen Reverse Proxy und eine Web Application Firewall geschützt werden, die in der demilitarisierten Zone angesiedelt ist.
Die oberste Struktureinheit wird als Bibliothek bezeichnet. Bibliotheken sind die Master-Artefakte im Erweiterungskonzept. Sie bündeln eine Reihe von Controls (z.B. Button, Label, TextField oder Table) und verwandten Typen und machen sie für Web-Anwendungen nutzbar. Es gibt vordefinierte und Standardbibliotheken, wie sap.m, mit vielen häufig verwendeten Controls.
Ein UI-Element ist der Grundbaustein der Benutzeroberflächen. Dabei handelt es sich um eine wiederverwendbare Einheit mit Eigenschaften, Ereignissen, Methoden und Beziehungen. Die wichtigsten Beziehungen sind Aggregationen zu anderen UI-Elementen, so dass eine Baumstruktur von Elementen erstellt werden kann.
Die aus Entwicklersicht wichtigsten Artefakte sind die Controls, die das Erscheinungsbild und die Benutzerinteraktion auf dem Bildschirm steuern. Dabei handelt es sich um spezielle Oberflächenelemente, die als Endknoten (Blätter) einer Baumstruktur verwendet werden können. Auf diese Weise dient ein Control als Einstiegspunkt, insbesondere für das Rendering.
Neben Controls gibt es noch weitere Nicht-Control-Elemente, die nicht als Wurzel, sondern nur als abhängiger Teil innerhalb einer solchen Baumstruktur verwendet werden können (z.B. TableRow, TableCell). Datentypen sind First-Class-Entitäten im Metamodell. Dies ermöglicht die Wiederverwendung von Typen über Bibliotheken hinweg und die Erweiterbarkeit des Typensystems.
SAPUI5 IDE
Während man die Oberfläche selbst in SAPUI5 erstellt, werden die eigentlichen OData-Services im Backend mit ABAP programmiert. Die vorgegebenen Klassen lassen hier erweitern, in dem man die entsprechenden Methoden überschreibt. Im besten Fall kommen dafür die Funktionsbausteine (FuBas) und Business Application Programming Interfaces (BAPIs) zum Einsatz.
Über das Open Data (OData) Protocol und das SAP NetWeaver Gateway kommunizieren beide Ebenen miteinander.
Für die Programmierung des GUIs stehen zwei Entwicklungsumgebungen (IDE) zur Verfügung. Eine webbasierte (WebIDE) sowie SAPUI5 Plugins für Eclipse. Eclipse wird zur Entwicklung von Software verschiedenster Art genutzt, insbesondere für Java als integrierte Entwicklungsumgebung.
SAP stellt für Fiori die sogenannten „SAPUI5 Tools“ bereit, die als Plugins den Weg in die Eclipse Versionen Mars (4.5) oder Luna (4.4) finden. Bei WebIDE wird analog zu Web Dynpro immer das Model-View-Controller-Architekturmuster angewandt. Hier stehen vier verschiedene Datenmodelle zur Verfügung: OData als Backend-Repräsentation sowie JSON, XML, Resource für den Client.
OData ist ein serverseitiges Modell und lädt nur die von der Benutzeroberfläche angeforderten Daten vom Server. JSON, XML und Resource sind Client-bezogen, d.h. die Modelldaten werden vollständig geladen und stehen auf dem Client zur Verfügung.
Operationen wie Sortieren und Filtern werden auf diesem ohne weitere Serveranfragen ausgeführt. Bei der App-Entwicklung in SAPUI5 können unterschiedliche Modelle für verschiedene Bereiche der Anwendung definiert sowie auch einzelne Controls einem Modell zugeordnet werden.
Modelle lassen sich darüber hinaus schachteln, z.B. ein für die Anwendung definiertes JSON-Modell und ein OData-Modell für ein in der Anwendung enthaltenes Table Control. Eine Web-Anwendung sollte grundsätzlich mehrere Datenformate unterstützen, also JSON, XML, Atom oder OData.
Die Art und Weise, wie die Datenbindung innerhalb der User Interface (UI) Controls definiert und implementiert wird, sollte jedoch von diesen unabhängig sein. Es ist auch möglich, eine benutzerdefinierte Modellimplementierung für Datenquellen zu erstellen, die noch nicht durch das Framework abgedeckt sind oder domänenspezifisch sind.
Features von SAPUI5 für Eclipse
- Code Completion
- Syntax Highlighting
- Deployment der App auf ein ABAP-Backend-System
- Quellcodeverwaltung über weiteres Plugin möglich
Features von SAP WebIDE
- Syntax Highlighting
- Code Completion
- Templates um bspw. den Rumpf einer Master-Detail-App generieren zu lassen
- Integrierter Git Client zur Quellcode Verwaltung
- Layout Editor zum Erstellen von Views mittels Drag & Drop
- Wizards zur Erweiterung von Standard Fiori Apps der SAP
- Deployment der App auf ein ABAP-Backend-System oder direkt in die HANA Cloud Platform
Welche IDE verwendet werden sollte, hängt stark von der individuellen Situation im Unternehmen ab. Um die in WebIDE entwickelten Apps in das lokale SAP-Entwicklungssystem zu überführen, ist stets eine Verbindung mittels SAP Cloud Connector notwendig. Zudem fallen hier zusätzlich Lizenzkosten für den produktiven Einsatz an, was zunächst für Eclipse spricht.
Jedoch setzt SAP auf WebIDE zur Fiori UI-Entwicklung und entwickelt neue Features im Wesentlichen nur noch für diese Umgebung. In diesem Zuge hat sich die Full Stack-Version der WebIDE entwickelt, die weitere Möglichkeiten zur Verfügung stellt.
Websession: SAPUI5
Haben Sie noch offene Fragen zum Thema SAPUI5? In einer kostenlosen Websession besprechen wir Ihre Herausforderungen und Möglichkeiten. Nachdem Sie das Formular ausgefüllt haben rufe ich Sie an um einen passenden Termin zu vereinbaren.
Hands-on Grundlagenwissen zur Entwicklung mit SAPUI5
- SAP UI5 – Grundlagenwissen Teil 1 (HTML)
- SAPUI5 – Grundlagenwissen Teil 2 (CSS)
- SAP UI5 – Grundlagenwissen Teil 3 (JavaScript – Vergleich mit ABAP)
FAQ
Was ist SAPUI5?
Anwender können sowohl Standard-Fiori-Apps individuell ergänzen als auch völlig neue Anwendungen zur Prozessautomatisierung kreieren. In vielen Fällen ist dies notwendig, da SAP selbst kaum sämtliche seiner bislang rund 400.000 Benutzeroberflächen (SAP Dynpros) als Fiori App nachprogrammieren wird. Die App-Entwicklung geschieht mit Hilfe von SAPUI5, einem auf HTML5 basierenden OpenSource-Toolset. Mit HTML5 werden Texte und andere Inhalte elektronischer Dokumente im Internet ausgezeichnet und vernetzt.
SAPUI5 vs. OPENUI5?
SAP liefert zwei Ausführung seines Development Toolkits aus: SAPUI5 und die Open-Source Variante OpenUI5. Das JavaScript-Framework OpenUI5 hat SAP unter einer Apache-2.0-Lizenz entwickelt, um betriebs-systemunabhängige Geschäftsanwendungen zu erstellen.
Welche Features von SAPUI5 gibt es für Eclipse?
- Code Completion
- Syntax Highlighting
- Deployment der App auf ein ABAP-Backend-System
- Quellcodeverwaltung über weiteres Plugin möglich
Was ist der Unterschied zwischen SAPUI5 und Fiori?
Fiori ist ein Designkonzept, das die Benutzererfahrung von SAP Anwendungen vereinfacht und personalisiert. SAPUI5 ist die Bezeichnung für das neueste User Interface Development Toolkit von SAP. Das JavaScript Framework ist mit dem Fokus auf intuitive Bedienbarkeit und mobile Nutzung entwickelt worden.
