SAPUI5 Best Practices: Das „Model-View-Controller“-Pattern erklärt
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
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.
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.
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.
