Web-Framework OpenUI5 für Business-Anwendungen

Web à la SAP

Sebastian Springer

Wenn Facebook und Google ihre JavaScript-Frameworks veröffentlichen, geht ein kleines Beben durch die Web-Community. Anders sieht es bei einem großen deutschen Softwarekonzern aus. Zugegeben, SAP ist kein Unternehmen, das man mit den neuesten Web-Trends in Verbindung bringt. Aber OpenUI5 ist ein ausgereiftes, unternehmenstaugliches Web-Framework.

Mit OpenUI5 stellt SAP der Welt sein seit Jahren entwickeltes JavaScript-Framework zur Programmierung von Web-Frontends als Open Source unter Apache-Lizenz auf GitHub zur Verfügung. Bei seinen eigenen Produkten nutzt SAP eine proprietäre Variante von OpenUI5, die den Namen SAPUI5 trägt. SAP-Kunden erhalten SAPUI5 kostenlos. Der Hersteller liefert für SAPUI5 Bugfixes; im Community-Produkt OpenUI5 ist das nicht garantiert.

SAPUI5 enthält außerdem 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. Auch den Kern des Frameworks teilen sich beide Versionen, sodass sie sich bei der Entwicklung auf Augenhöhe befinden.

Enterprise-ready und responsiv

OpenUI5 versteht sich als „Enterprise-ready Web Toolkit“: Mit dem Framework lassen sich auch unternehmenskritische Anwendungen umsetzen. Ein Grund hierfür ist, dass OpenUI5 dem Entwickler viel Arbeit abnimmt, indem es Strukturen in einer Applikation schafft und eine große Auswahl an funktionsbereiten UI-Elementen mitbringt. Im Idealfall muss der Entwickler diese Elemente nur noch zu einer ansprechenden grafischen Oberfläche zusammensetzen und kann sich ansonsten auf die Businesslogik der Applikation konzentrieren.

Wichtige Aspekte wie Sicherheit und Mehrsprachigkeit deckt das Framework bereits größtenteils ab. So bietet OpenUI Features wie Validierung und Ausgabe-Encoding zur Vermeidung von Cross-Site-Scripting. Die Unterstützung mehrerer Sprachen setzt das Framework über Ressourcen-Dateien um, die anhand der eingestellten Sprache geladen werden.

Zur Strukturierung von Applikationen greift OpenUI5 auf das bewährte MVC-Muster zurück. Informationen lassen sich in verschiedenen Datenformaten wie XML oder JSON darstellen und verarbeiten. Auch responsives Design ist möglich: Die UI-Elemente können sich an das Format der Anzeige anpassen. Insgesamt lässt der Funktionsumfang des Frameworks kaum Wünsche offen. Und sollte sich ein Feature nicht mit Bordmitteln umsetzen lassen, gibt es immer noch die Möglichkeit, eigene Erweiterungen zu schreiben.

Installation und erste Schritte

Für die Entwicklung einer Applikation auf Basis von OpenUI5 gibt es mehrere Pakete, die auf openui5.org zum Download bereitstehen. Zur Auswahl stehen zwei Versionen der OpenUI5-Runtime: Neben der Standard-Runtime, die im Normalfall für die Applikationsentwicklung verwendet wird, gibt es noch eine Mobile Runtime, die für die Verwendung auf Mobilgeräten optimiert ist und weniger Speicherplatz benötigt. Die Runtime-Pakete enthalten den JavaScript-Code, der die OpenUI5-Elemente bereitstellt.

Außerdem bietet SAP ein SDK zum Download an, das neben der Runtime die vollständige Dokumentation des Frameworks enthält. Aktuell ist der manuelle Download der Zip-Archive der von den Entwicklern empfohlene Weg, das Framework zu installieren. Eine Unterstützung von NPM als Installationsquelle ist derzeit leider nicht vorgesehen.

Am Beginn der Entwicklung einer OpenUI5-Anwendung steht das Einbinden des Frameworks in eine HTML-Seite. Die Datei sap-ui-core.js enthält die wesentlichen Bestandteile von OpenUI5 und sorgt dafür, dass weitere Komponenten geladen werden:

<script id='sap-ui-bootstrap' 
  src='resources/sap-ui-core.js'  
  data-sap-ui-theme='sap_bluecrystal'  
  data-sap-ui-libs='sap.m'></script>

Über Attribute des script-Tags lässt sich die Applikation weiter konfigurieren. So kann beispielsweise das Farbschema über die Eigenschaft data-sap-ui-theme verändert werden. Im Quellcode von OpenUI5 sind einige Standard-Themes wie sap_belize, sap_bluecrystal oder sap_goldreflection enthalten. Alternativ kann man über den UI Theme Designer ein eigenes Theme erstellen (siehe „Alle Links“). Hierfür ist allerdings ein SAP-Account erforderlich. Das Attribut data-sap-ui-libs ermöglicht die Einbindung zusätzlicher Bibliotheken wie sap.m, die responsive Kontrollelemente zur Verfügung stellt, die sowohl auf mobilen als auch mit Desktop-Geräten funktionieren.

Mit der Einbindung der sap-ui-core-Bibliothek beginnt der Bootstrap-Prozess des Frameworks, an dessen Ende die Applikation startet. Das Framework löst zum Schluss das init-Event aus, auf das Callback-Funktionen registriert werden können.

Per Code platzierte Komponenten

Über die Funktion sap.ui.getCore() greift man auf den Kern des Frameworks zu, der unter anderem die Methode attachInit zum Registrieren der Applikationslogik bereitstellt. attachInit ist vergleichbar mit der Methode ready von JQuery – auch hier wird sichergestellt, dass sämtliche Ressourcen geladen und bereit sind.

const button = new sap.m.Button({  
  text:'Press me',  
  press() {
    const text = new sap.m.Text({
      text: 'Hello World!'
    });
    text.placeAt('content');
  }  
});  
button.placeAt('content');

Wie der Name von OpenUI5 nahelegt, ist eines der Kernfeatures die Unterstützung bei der Erstellung von Benutzeroberflächen. Zu diesem Zweck liefert das Framework eine Reihe gängiger Formular- und Layoutelemente mit. Grafische Oberflächen werden in OpenUI5 standardmäßig imperativ erstellt, indem man die Elemente im Programmcode erzeugt und in einen HTML-Container platziert (Listing 1).

Beim Erstellen eines Elements lassen sich Event-Handler als Methoden registrieren. Ein solches GUI-Objekt enthält also bereits alle Aspekte, um arbeiten zu können. Durch diese Struktur finden sich alle zusammengehörigen Komponenten an einer Stelle, was den Quellcode der Applikation sehr übersichtlich gestaltet.