Daniel Krause
 - 27. August 2020

SAPUI5 Best Practices: Das „Model-View-Controller“-Pattern erklärt

Dynpro ABAP

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 dabei eine klare Struktur und einen hohen Grad generischen Wiederverwendbarkeit. Was die einzelnen Bestandteile des „Model-View-Controller“-Patterns ausmacht und wie sie zusammen arbeiten, erkläre ich Ihnen in diesem Artikel.

Das Model-View-Controller-Modell ist bereits eine Weile bekannt und hat sich in verschiedenen Programmiersprachen und Softwaresystemen bewährt.  Jedes der drei Teile aus dem Pattern erfüllt seine ganz eigenen Aufgaben und erst im Zusammenspiel entfaltet sich die ganze Stärke. Die View beinhaltet alle Informationen zur Optik der Anwendung. Sie beinhaltet sowohl die User-Interface-Elemente als auch das Layout. Das Model verwaltet die Daten der Anwendung. Die beiden Komponenten kommunizieren wiederum über den Controller. Eine grafische Darstellung der Zusammenhänge habe ich Ihnen hier einmal mitgebracht:

Das Model-View-Controller-Konzept

Das Model-View-Controller-Konzept

View

Wie bereits erwähnt kümmert sich die View in einer SAPUI5-App um die Darstellung der einzelnen Elemente. In ihr gibt der Entwickler an, wie die genutzten Daten dargestellt werden sollen und auf welche Art und Weise der Anwender Eingaben machen kann. Auch die Anordnung dieser Elemente können Sie hier über das Layout steuern. Sollten die Möglichkeiten einer View einmal nicht ausreichen, können Stylesheets zu Hilfe gezogen werden (CSS). Das ist aber nur dann der Fall, wenn die einzelnen Elemente von den Fiori Design Guidelines abweichen.

Eine View kann allerdings nicht entscheiden, was passieren soll, nachdem der Anwender auf ihr eine Aktion durchgeführt hat. Auch was konkret auf ihr angezeigt werden soll, weiß sie nicht direkt. Dazu benötigt sie die Hilfe eines Controllers.

Controller

Der Controller kümmert sich um die Kommunikation zwischen Model und View. Er verwendet die beiden Einheiten, um der App seine Funktionalität zu verleihen. Sie erstellen ihn in SAPUI5  – ein Framework, das auf JavaScript basiert. Es ist theoretisch auch hier möglich, UI-Elemente auf der View hinzuzufügen. Dadurch würde jedoch die App ihre Generik verlieren und nicht nur unübersichtlicher, sondern auch deutlich schwieriger wartbar werden. Wie genau der Controller mit den anderen Komponenten interagiert, erläutere ich weiter unten im Artikel.

Model

Hier werden die Daten verwaltet. Sie können das Model über ein JSON (JavaScript Object Notation) oder über ein oData-Service erstellen. Im Zusammenhang mit einem SAP-Backendsystem ist ein oData Service die gängige Wahl. Das Model kennt die View nicht – es kann die Daten also nur über den Controller weitergeben.

FAQ: SAPUI5 SAP Fiori

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

Unsere FAQs zum Thema SAPUI5 SAP Fiori

Zusammenspiel der Komponenten

Stellen wir uns einmal ein einfaches Anwendungsszenario für eine SAPUI5 App vor: „Mitarbeiter möchten digital ein- und auschecken“

Dazu können verschiedene Informationen zum Mitarbeiter, wie zum Beispiel sein Name oder die Abteilung, angezeigt werden. Für alle diese Informationen müssen Sie Felder in der View definieren und nach einem gewählten Layout anordnen. Beim Starten der Anwendung teilt der Controller dem Model mit, dass es die initialen Daten laden soll. Nach einem erfolgreichen Aufruf ins Backend leitet der Controller die Daten an die View weiter, die die Elemente dann wie zuvor definiert anordnet. Der Mitarbeiter kann nun also zum Beispiel seinen Namen und seine aktuellen Stunden zur Arbeitswoche ablesen. Nun klickt er entweder auf den „Kommen“- oder auf den „Gehen“-Button. Hinter dieser Aktion ist ein spezielles „Event“ hinterlegt, auf das wiederum der Controller reagieren kann. Er ermittelt nun die erforderlichen Daten und gibt diese gesammelt an das Model weiter. Das Model transportiert die Informationen in das angeschlossene SAP-Backend, wo sie dann weiter verarbeitet werden können.

Zusammenfassung

Das MVP-Pattern ermöglicht es Ihnen, auch komplexe Ablauflogiken in seine Bestandteile zu zerlegen und ermöglicht so weiterhin eine hohe Lesbarkeit.  Durch die Aufteilung können Änderungen am Aufbau der Ansicht (View) vorgenommen werden, ohne den Rest der App zu beeinflussen. Genauso verhält es sich mit der Ablauflogik. Dazu werden dann nur Änderungen an der Controller-Datei vorgenommen.

Sollten Sie dazu noch offene Fragen haben, hinterlassen Sie mir gerne einen Kommentar! Wenn Sie Interesse bekommen haben, Ihre eigene Arbeitsumgebung zu vereinfachen, schauen Sie doch einmal auf unserer Produktseite vorbei. Hier finden Sie viele Beispiele, wie SAPUI5-Apps den Arbeitsalltag verbessern können.

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 stellen Sie die Weichen so, dass Ihr Unternehmen auch in Zukunft erfolgreich ist? Welche Unternehmensstrategien werden sich in der digitalen Transformation durchsetzen, welche sind zum Scheitern verurteilt? Finden Sie heraus, wie zukunftsfähig Ihr Unternehmen ist.

weiterlesen

Viele sehen sich durch Ausgangsbeschränkungen, Kurzarbeit, Lohnkürzungen und der permanenten Gefahr einer Ansteckung so nie dagewesenen Herausforderungen gegenübergestellt. Bei vielen der Fragen, die wir uns aktuell stellen, können uns Experten noch keine verlässliche Antwort geben: „Wie lange dauert dieser Zustand […]

weiterlesen

Das Beitragsbild, das Sie hier sehen, kursiert zurzeit im ganzen Internet – und es stimmt. Aktuell müssen viele Prozesse in Unternehmen bedingt durch die derzeitige Situation umgestellt werden. Das sorgt bei vielen unserer Kunden unweigerlich auch für weitere Kosten. Wie […]

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