SAPUI5 Best Practices: View-Fragmente
Sollten Sie bereits das ein oder andere SAPUI5-Projekt umgesetzt haben, ist Ihnen bestimmt schon aufgefallen, dass sich einige Abschnitte wiederholen. Das ist auch gut so, denn durch Kapselung dieser Elemente können Sie einiges an Entwicklungszeit sparen. Dazu nutzen Sie View-Fragmente. Wie das funktioniert, möchte ich Ihnen in diesem Beitrag näherbringen.
Vorteile von View-Fragmenten
Fragmente bedienen zwei wesentliche Aspekte:
Wiederverwendbarkeit
Ihre Anwendung besteht immer aus dem gleichen Layout? Sie verfolgen durch Corporate Design immer einen ähnlichen Ansatz? Ihre Dialoge für den Anwender sehen immer gleich aus? Wenn Sie diese und ähnliche Fragen mit „Ja“ beantworten können, finden Sie mit hoher Wahrscheinlichkeit Abschnitte in Ihrer Anwendung, die sich auf andere Anwendungen übertragen lassen. Dies erreichen Sie mit View Fragmenten, auch Nested Views genannt.
Gut lesbarer Code
Wenn eine Anwendung sehr komplex und groß wird, kann ihre view.xml-Datei sehr unübersichtlich werden. Überlegen Sie in so einem Fall, ob Sie diese Anwendung in Abschnitte aufteilen können. Eine gute Hilfe können an dieser Stelle Panel sein. Durch sie wird in den meisten Fällen eine Unterteilung in Abschnitte ganz automatisch vorgenommen. Diese Teile müssen dann nur noch ausgelagert werden
Doch wie kann nun dieses Auslagern erfolgen? Das möchte ich Ihnen gern im nächsten Abschnitt erläutern.
Auslagern und Einbinden der View-Fragmente
Sehen Sie sich einmal den folgenden Abschnitt an:
Panel rahmen einen View ein.
Hier wird der aktuelle Inhalt der View ganz klar von Panel eingerahmt. Hierbei handelt es sich allerdings nur um einen einzelnen Abschnitt. Aber was ist, wenn z. B. noch 6 weitere dieser Abschnitte hinzukommen?
Im Folgenden wollen wir dieses Beispiel einmal gemeinsam durchgehen.
Zunächst legen Sie eine View an. Da es sich hier um einen Begrüßungsabschnitt handelt nennen wir unsere View mal „HelloPanel.view.xml“. In diese neue View lagern Sie einfach den gesamten Code aus:
Ausgelagerter Code in neuer View.
Das Einbinden des neuen View-Fragments ist dann sehr einfach:
Einbinden eines neuen View-Fragments.
Noch ein wichtiger Hinweis
Nachdem Sie nun eine neue View angelegt haben, empfehle ich Ihnen, einen dazu passenden Controller anzulegen, der sich weiterhin um die Steuerung der UI-Elemente kümmert. Es ist Good Practice, zu jeder View auch einen Controller zu haben. Dazu müssen Sie lediglich den Inhalt aus dem alten Controller (App.controller.js) verschieben.
Eine detaillierte Beschreibung zu diesem Vorgehen können Sie hier nachlesen.
Zusammenfassung
Sie haben nun alle nötigen Schritte kennengelernt, um beliebige Abschnitte aus Ihrer View wiederverwendbar zu machen und Ihren Code noch lesbarer zu gestalten. Schauen Sie doch mal in Ihre alten Projekte. Ich bin mir sicher, Ihnen wird etwas auffallen, das Sie in Zukunft wiederverwenden können.
Wenn Sie sich vertiefend mit dem Thema Best Practices mit SAPUI5 beschäftigen möchten, schauen Sie sich gerne auch die anderen Beiträge aus dieser Beitragsserie an. Sollten Sie noch konkrete Fragen haben, zögern Sie auch nicht, mich persönlich zu kontaktieren. Ich freue mich auf Ihren Kontakt!
Innovation mit System - Die SAP HR/HCM Berater
Unsere zertifizierten SAP HR Berater geben Ihnen jeden Monat eine auf Ihre Engpässe abgestimmte SAP Innovationsberatung. Nur bei ActivateHR.
