SAPUI5 Grundlagen

Controllers

Aktiönchen hinzufügen

(C) Brandeis Consulting.

Überblick

(C) Brandeis Consulting.

Konzept von Controllers

In SAPUI5, innerhalb des Model-View-Controller (MVC)-Designmusters, hat der Controller eine zentrale Rolle bei der Handhabung von Benutzerinteraktionen und der Geschäftslogik. Er fungiert als Bindeglied zwischen der View (der Benutzeroberfläche) und dem Modell (den Daten). Hier sind einige der Hauptfunktionen und Verantwortlichkeiten eines Controllers:

  1. Ereignishandhabung: Der Controller enthält Funktionen (Handler), die auf Benutzerereignisse reagieren, die in der zugehörigen View definiert sind.

  2. Datenmanipulation: Wenn Daten in der View angezeigt oder vom Benutzer geändert werden, übernimmt der Controller die Aufgabe, diese Änderungen an das Modell weiterzuleiten oder Daten aus dem Modell abzurufen und sie der View zur Verfügung zu stellen.

  3. Navigationsmanagement: In vielen SAPUI5-Anwendungen gibt es die Notwendigkeit, zwischen verschiedenen Views oder Seiten zu navigieren. Der Controller steuert solche Navigationsaktionen, oft unter Verwendung des Routing-Konzepts von SAPUI5.

  4. Lebenszyklusmethoden: Der Controller kann spezielle Methoden enthalten, die zu bestimmten Zeitpunkten im Lebenszyklus der View aufgerufen werden, wie z.B. beim Initialisieren oder Beenden der View.

  5. Zusätzliche Logik: Neben den oben genannten Funktionen kann ein Controller auch zusätzliche Geschäftslogik, Hilfsfunktionen und andere notwendige Codes enthalten, um die Anforderungen der Anwendung zu erfüllen.

(C) Brandeis Consulting.

Konventionen

  • Controller sind in einem separaten Ordner controller
  • Der Name eines Controllers ist 1:1 identisch mit dem zugehörigen View
  • Die Namensendung eines Controlers lautet .controller.js
  • Eventhandler beginnen mit on
(C) Brandeis Consulting.

Codeänderungen

XML View

  • Der View bekommt das Attribut controllerName gesetzt mit Verweis auf unseren neuen Controller
  • Ein Button wird hinzugefügt mit den Attributen
    • text - Was auf dem Button draufsteht und
    • press - Der Name des EventHandlers im Controller
<mvc:View
   controllerName="ui5.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Button
      text="Say Hello"
      press=".onShowHello"/>
</mvc:View>
controller/App.view.xml

Controller

Der Controller des SAPUI5 wird erweitert um unseren Handler onShowHello.

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
   "use strict";
   return Controller.extend("ui5.walkthrough.controller.App", {
      onShowHello : function () {
         // show a native JavaScript alert
         alert("Hello World");
      }
   });
});
controller/App.controller.js
(C) Brandeis Consulting.