Daniel Krause
 - 30. März 2021

SAPUI5 Best Practices: View-Fragmente

Individuelle SuccessFactors Entwicklung

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:

SAPUI5 Nested View

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:

outsource the Code

Ausgelagerter Code in neuer View.

Das Einbinden des neuen View-Fragments ist dann sehr einfach:

Bind nesetd View

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.

FAQ: SAPUI5 SAP Fiori

Die häufigsten Fragen zum Themenkomplex SAPUI5 & SAP Fiori.

Unsere FAQs zum Thema SAPUI5 SAP Fiori

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!

Daniel Krause

Daniel Krause

Bei der mindsquare durfte ich meine Leidenschaft zum Beruf machen. Das zahle ich mit Begeisterung bei der Arbeit zurück. Ich bin immer motiviert zu Ihren Problemen die richtige Lösung zu finden. Ihr Erfolg ist mein Ziel und die Belohnung meiner Arbeit.

Sie haben Fragen? Kontaktieren Sie mich!



Das könnte Sie auch interessieren

Wie im letzten Beitrag der Blogreihe erwähnt wurde, ist die richtige Ordnerstruktur der Grundpfeiler für eine saubere App-Entwicklung. Um die Aufwände für Ihr Projektsetup gering zu halten, bietet die SAP über die Web IDE vorgefertigte Projekttemplates an, die Sie hierzu […]

weiterlesen

In diesem Beitrag zu unserer aktuellen Serie Best Practices und Entwicklungsansätze mit SAPUI5 möchte ich Ihnen das Konzept näher bringen, wie Sie eine auf JavaScript basierende App grundlegend aufbauen. Durch eine Aufteilung nach dem Konzept „Model View Controller“ erhalten Sie […]

weiterlesen

Wenn Sie die vorherigen beiden Beiträge gelesen haben, wissen Sie bereits, wie Sie Ihr Projekt „Entwicklung einer SAPUI5-App“ vorbereiten können. In diesem Beitrag möchte ich Ihnen die Coding Guidelines näher bringen. Diese sind gerade in einer auf JavaScript basierenden Programmiersprache […]

weiterlesen

Schreiben Sie einen Kommentar

Bitte füllen Sie alle mit * gekennzeichneten Felder aus. Ihre E-Mail Adresse wird nicht veröffentlicht.





Angebot anfordern
Preisliste herunterladen
Expert Session
Support