Web Dynpro war gestern, UI5 ist heute? – Eine Einführung in SAP UI5 – Teil 5
Lesezeit ca. 6 Minuten
Dies ist der fünfte Teil der mehrteiligen Blog-Reihe „Einführung zu SAP UI5“, in welcher wir Ihnen zeigen möchten, wie Sie Oberflächen mit der neuen SAP-Technologie UI5 entwickeln können. Im vorherigen Teil der Reihe haben Sie eine einfache SAP UI5 Anwendung erstellt. In diesem Teil lernen Sie, wie Sie zwischen Views navigieren und dabei Parameter übergeben können. Sie benötigen dafür die im vierten Teil erstelle Anwendung.
Was Sie in diesem Artikel lernen
In diesem Artikel lernen Sie wie Sie in UI5 eine Navigation zwischen mehreren Views implementieren. Sie werden
- ihre Anwendung aus Teil 4 umstrukturieren, um die Router Komponente verwenden zu können,
- einen neuen View anlegen und
- die Navigation mit Übergabeparameter implementieren.
Vorbereitung
Anlegen eines neuen Views
Zunächst müssen Sie einen neuen View anlegen. Klicken Sie dafür mit der rechten Maustaste auf „Webapp“, wählen Sie „New“ und „SAPUI5 View“. Geben Sie im anschließenden Dialog den Namen und den Typ an. Als Typ wählen Sie XML. Die IDE legt daraufhin automatisch einen neuen View und einen Controller an.
Platzieren Sie anschließend einen Button und einen Text auf dem View. Die Nachricht, die bisher über das MessageToast ausgegeben wird, soll nun an diese Seite übergeben und dort im View ausgegeben werden. Der Button dient der Navigation zurück zu View1.
Erstellen eines „AppViews“
Um mit dem SAP-Router arbeiten zu können, ist es nötig einen View zu erstellen, der ausschließlich die App-Komponente enthält. Der Grund dafür ist, dass der Router die Seiten dynamisch auf die App lädt. Erstellen Sie, wie oben beschrieben, noch einen weiteren View und fügen Sie in diesem eine App-Komponente hinzu. Diese App-Komponente muss eine ID haben. In diesem Fall wird die ID „root“ verwendet. Der XML-Code sieht dann folgendermaßen aus:
Entfernen Sie nun noch die App- und Pages-Komponenten aus den anderen Views. Es reicht aus, wenn Sie einfach die Zeilen mit den öffnenden und schließenden Tags löschen. Die Pages-Komponenten müssen entfernt werden, da diese von nun an dynamisch vom Router erstellt werden.
Einrichten der Navigation
Manifest.json
Navigieren Sie in die Manifest.json Datei. Unten im Editor haben Sie nun eine Auswahl zwischen „Code Editor“ und „Description Editor“. Falls nicht schon ausgewählt, wählen Sie den „Description Editor“. Navigieren Sie anschließend zum Reiter „Routing“.
Default Configuration
Unter Default Configuration definieren Sie die Art, den Pfad zu den Views sowie die Komponente, auf welcher Pfad und View platziert werden sollen.
Unter View Path geben Sie das Verzeichnis an, in dem Ihre Views liegen. Dies setzt sich aus dem Namespace, in unserem Fall „Demo“, dem Projektnamen „DemoProjekt“ sowie dem Ordner in dem die Views liegen „view“ zusammen. Das Projekt und der Ordner werden mit einem Punkt getrennt.
Die Control ID ist die ID, die Sie in Ihrer App-Komponente weiter oben im Artikel hinterlegt haben.
Als View Level wählen Sie „1“. Das sog. View Level wird für die Animationen genutzt, dazu erfahren Sie später mehr.
Als Control Aggregation wählen Sie „pages“. Diese Komponente haben Sie vorhin noch aus den Views entfernt, hier bestimmen Sie, dass diese vom Router dynamisch erzeugt wird.
Die Transition beschreibt die Art der Animation bei einem Seitenwechsel. Hier ist es Ihre persönliche Entscheidung, welche Art Sie wählen wollen.
Targets
Als nächstes definieren Sie Ziele. Klicken Sie dafür auf das + und geben Sie die Daten entsprechend dem Screenshot an. Wiederholen Sie dies für View2, geben Sie allerdings diesmal bei View Level 2 anstatt 1 an. Mittels des View-Level bestimmen Sie, in welche „Richtung“ Animationen gehen. Wenn Sie von View-Level 1 zu View-Level 2 navigieren, wischt die Anzeige von Links nach Rechts, wenn Sie von View-Level 2 zu View-Level 1 gehen, von rechts nach links.
Routen definieren
In diesem Dialog definieren Sie die Routen. Unter Name definieren Sie den Namen der Route, dieser entspricht dem angesteuerten View. Das Pattern gibt an, unter welchem Link die Seite erreichbar ist. Ohne Pattern wird die Seite als Startseite Ihrer Anwendung festgelegt. In diesem Fall ist „View1“ die Startseite und View2 ist unter /ausgabe zu erreichen. Der „text“ ist ein dynamischer Übergabeparameter der in der URI kodiert wird. In dieser Anwendung wird hier der Name angegeben. Unter Targets fügen Sie den anzuzeigenden View ein. Hier können Sie mehrere Views anfügen, da beispielsweise bei MasterPage- oder SplitPage-Komponenten zwei Views gleichzeitig aufgerufen werden.
Definieren des root-Views
Zuletzt müssen Sie nun den Root View deklarieren. Dazu müssen sich in die Code-Ansicht der metadata.json wechseln und die markierten Zeilen (s. Screenshot) hinzufügen. Die „id“ gibt dabei die ID der App-Komponente an.
Programmieren der Navigation
Initialisierung in der Component
Zunächst muss der Router in der Component initialisiert werden. Dies geschieht ganz einfach über folgende Zeile:
Implementierung der Navigation
In der Methode, in der momentan der MessageToast aufgerufen wird, wird nun stattdessen der Router aufgerufen.
Mittels navTo geben Sie dem Router die Anweisung zu navigieren. „View2“ ist dabei die Route, die Sie in der manifest.json definiert haben. Die übergebene Struktur umfasst alle definierten Parameter. In diesem Fall ist das lediglich der Parameter „text“. Im Screenshot ist der Aufruf noch einmal verdeutlicht.
Entgegennehmen des Parameters
Um den Parameter entgegen zu nehmen und speichern zu können, müssen Sie zunächst ein Model anlegen (1). In diesem Beispiel wurde das Model aus View1 übernommen. Anschließend rufen Sie über den Router die Route und darüber wiederum die Methode attachPatternMatched auf (2). An diese Methode müssen Sie einen Funktionszeiger und den Controller selber übergeben (3). Anschließend erstellen Sie die Funktion die Sie übergeben. Diese nimmt ein Event entgegen, mit dem Sie den übergebenen Parameter bekommen (4). Zuletzt speichern Sie den Wert des Parameters im angelegten Model (4). Die dritte Methode zeigt die Navigation zurück.
Zuletzt müssen Sie die „Text“-Komponente noch mit dem Attribut im Modell verknüpfen. Dies geschieht, wie bereits in den letzten Artikeln gezeigt, mittels PersData/name.
Das Übergeben des Parameters auf diese Weise hat Nachteile. Wenn Sie beispielsweise ein „/“ übergeben, kann dies nicht verarbeitet werden. Auch einige andere Sonderzeichen funktionieren nicht, daher sollten Sie immer abwägen, ob es sinnvoller ist, ein Model in der Component zu erstellen und darauf als globales Model zuzugreifen. Ein Vorteil dieser Methode ist allerdings, dass Sie nur durch das Sichern des Links in der Lage sind auf bestimmte Programmzustände zuzugreifen. Denkbar wäre beispielsweise ein Master und ein Detailview. Wird im Masterview ein Eintrag angeklickt, so werden die Informationen über diesen Eintrag an einen URI-Parameter übergeben. Daraufhin ist es möglich, den Link zum Eintrag zu kopieren und später direkt in diesen Programmzustand zu wechseln.
Mittels des Routers sind Sie außerdem in der Lage, Lesezeichen und eine Historie zu verwalten. Natürlich können auch mehrere Parameter an einen View übergeben werden. Der Link verlängert sich entsprechend. Sie haben auch die Möglichkeit mehrere Targets zu definieren, die auf den gleichen View, allerdings mit anderen Parametern, verweisen.
Ausblick
Im nächsten Kapitel erfahren Sie, wie die Kommunikation von UI5 zu Ihrem SAP System funktioniert und was Sie beachten müssen. Das wird ein eher theoretischer Artikel, nachfolgend kommen aber wieder praktische.
Haben Sie Fragen, Anregungen, positive oder negative Kritik? Oder möchten Sie bestimmte Punkte des Artikels noch näher erläutert bekommen? Dann kontaktieren Sie uns.
