Was ist Routing?
Wenn du dich im Internet mit einem Browser bewegst kennst du die klassischen Links, mit denen man zwischen Seiten navigieren kann. In der UI5-App-Programmierung werden allerdings keine klassischen Links gesetzt. UI5 verwendet das sogenannte Routing. Dies ist auf den ersten Blick nicht sehr intuitiv bietet allerdings einige Funktionalitäten um die Seitennavigation in deinen Apps bestmöglich umzusetzen.
Funktionsweise von Routing
Um in einer UI5-App von einer Seite zur nächsten zu gelangen, passiert im Hintergrund ganz schön viel.
Die View, auf der beispielsweise ein Button geklickt wurde, meldet dem Controller, dass eine Aktion ausgeführt werden soll. Der Controller meldet dem Router dann die Zielroute der Navigation (z.B. „Detail“). Der Router verarbeitet diese Information und sucht zu diesem Stichwort eine passende „Route“. Alle Routen sind vorher in der manifest.json (im Bereich „sap.ui5“) festzulegen. Zu einer Route ist auch jeweils ein „Target“ festgelegt. In diesem Target steht die View, die auch letztendlich angezeigt wird. Der Router hangelt sich also über die Route zum Target und darüber zur View. Diese View wird dann zur Anzeige gebracht. Der Ablauf ist auch noch einmal in folgender Grafik dargestellt:
Routes & Targets
Wie aber werden diese Routen und Targets nun genau definiert und was genau bewirken sie. Dazu werfen wir einmal einen Blick in eine beispielhafte manifest.json. In dieser Datei sind die Routen und Targets schon angelegt:
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "erpcouch.routingexample.view",
"controlAggregation": "pages",
"controlId": "app",
"clearControlAggregation": false
},
"routes": [{
"name": "Overview",
"pattern": "",
"target": "OverviewTarget"
}, {
"name": "Detail",
"pattern": "detail",
"target": "DetailTarget"
}],
"targets": [{
"OverviewTarget": {
"viewId": "overview",
"viewName": "Overview"
},
"DetailTarget": {
"viewId": "detail",
"viewName": "Detail"
},
}]
}
Der Abschnitt „config“ dient zur Konfiguration des Routers. Diesen kannst du eigentlich meistens so lassen. Nur im Ausnahmefall benötigst du hier andere Einstellungen. Beachte nur, dass unter „viewPath“ der korrekte Pfad zu deinen Views steht.
Unter „routes“ sind die einzelnen Routen definiert. Der Name ist dabei frei wählbar und hat keine Auswirkungen auf deine Navigation. „Pattern“ gibt an, bei welchem Text diese Route „zuschlagen“ soll. Findet der Router ein Pattern so navigiert er zu dem angegebenen Target. Im Target ist ein Name sowie die ViewId angegeben, zu der navigiert werden soll.
Übrigens: Wenn du in der URL deiner App hinten eins der eingegebenen Pattern (in diesem Fall z.B. „detail“) angibst, navigiert der Router automatisch zu der angegebenen View.
Tutorial
Neben der Anpassung der manifest.json müssen noch einige Kleinigkeiten geschehen, damit das Routing in UI5 korrekt funktioniert. Ich zeige dir jetzt, wie du Routing in eine App integrierst. Als Beispiel werden wir eine Übersichts- und eine Detailseite implementieren.
Erstelle dazu ein neues UI5-Projekt in deiner Web IDE (New -> Project from Template -> SAP UI5 Application). Ich habe das Projekt „RoutingExample“ und die Standard-View „App.view.xml“ genannt. Der Projektordner sollte dann wie folgt aussehen:
Erstelle danach zwei neue Views: Eine Übersichts-View (Overview.view.xml) und eine Detail-View (Detail.view.xml). Erstelle darin jeweils eine Page. Auf der Übersichtsseite sollte zudem ein Button eingefügt werden, den wir als Link nutzen. Die Views sollten in etwa so aussehen:
<mvc:View controllerName="erpcouch.RoutingExample.controller.App" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
<Page title="Detail">
<content>
</content>
</Page>
</mvc:View>
<mvc:View controllerName="erpcouch.RoutingExample.controller.App" xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
xmlns="sap.m">
<Page title="Overview">
<content>
<Button text="Zur Detail-Seite" press="navToDetail"></Button>
</content>
</Page>
</mvc:View>
Aus der App.view.xml kannst du den Page teil entfernen. Wir integrieren die jeweiligen Pages (Overview und Detail) in die App-View.
Passe die manifest.json so wie oben beschrieben an. Der Routing-Teil sollte danach so aussehen:
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "erpcouch.RoutingExample.view",
"controlAggregation": "pages",
"controlId": "app",
"clearControlAggregation": false
},
"routes": [
{
"name": "Detail",
"pattern": "detail",
"target": ["DetailTarget"]
},{
"name": "Overview",
"pattern": "",
"target": ["OverviewTarget"]
}],
"targets": {
"OverviewTarget": {
"viewId": "Overview",
"viewName": "Overview"
},
"DetailTarget": {
"viewId": "Detail",
"viewName": "Detail"
}
}
}
Im App.controller.js muss dann noch die Methode ausgeprägt werden, die die Navigation beim Klick auf den Button ausführt:
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("erpcouch.RoutingExample.controller.App", {
onInit: function () {
},
navToDetail: function(){
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("Detail");
}
});
});
Wichtig: Wenn du „oRouter.navTo“ aufrufst, musst du immer den Namen der Route angeben. Wenn du im Browser direkt eine Route aufrufen willst, musst du das Pattern (in diesem Fall „detail“) angeben.
Zusätzlich muss auch noch der Router initialisiert werden. Dies ist allerdings schon in der Component.js beim Generieren des UI5-Projekts geschehen. Falls du das Projekt nicht generiert hast musst du die Initialisierung noch hinzufügen.
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"erpcouch/RoutingExample/model/models"
], function (UIComponent, Device, models) {
"use strict";
return UIComponent.extend("erpcouch.RoutingExample.Component", {
metadata: {
manifest: "json"
},
/**
* The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
* @public
* @override
*/
init: function () {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
// enable routing
this.getRouter().initialize();
// set the device model
this.setModel(models.createDeviceModel(), "device");
}
});
});
Nun hast du eine erste Verlinkung in deiner UI5-App hinzugefügt. Starte die App und klicke auf den Button. Du wirst nun auf die Detailseite weitergeleitet:
Download: Beispielprojekt
Hier findest du ein Beispielprojekt, welches du in der SAP Web IDE importieren kannst. Es beinhaltet alle der hier angesprochenen Themen. Der Download ist natürlich kostenlos und ohne Angabe von persönlichen Daten möglich. Damit erpcouch noch mehr Leute erreicht musst du allerdings diesen Post auf einem sozialen Netzwerk teilen, bevor du das Projekt downloaden kannst. Falls du keine Möglichkeit hast, in ein soziales Netzwerk zu posten schreibe mir bitte eine Mail an adrian@erpcou.ch.
[ARSocialLocker id=1][powerkit_button size=“lg“ style=“primary“ block=“false“ url=“https://erpcou.ch/wp-content/uploads/2021/02/RoutingExample_xodo38.zip“ target=“_self“ nofollow=“true“]Download: RoutingExample[/powerkit_button][/ARSocialLocker]
Zusammenfassung & Ausblick
Dieser Blogbeitrag hat dir die Grundlagen des Routings in UI5-Apps vermittelt. Du weißt nun, was „Routes“ und „Targets“ sind, und wie diese in Zusammenhang mit dem Routing stehen. Zusätzlich kannst du nun eigene Verlinkungen in deine UI5-App einbauen. In weiterführenden Artikeln erfährst du, wie du einen Zurück-Button implementierst und die man Parameter beim Routing übergeben kann.
Wie kommst du mit dem Routing in UI5 zurecht? Was findest du am Kompliziertesten? Hast du ein Problem und kommst nicht weiter oder hast einfach nur Anregungen? Schreib doch einen Kommentar unter diesen Blogbeitrag oder schreibe mir direkt eine Mail an adrian@erpcou.ch.
