SAPUI5 Grundlagen

Daten Debugging

Jetzt kommt der interessante Teil

Exkurs JSON

Dem View ein Model setzen

In SAPUI5 können Sie Datenmodelle verwenden, um Daten in Ihrer Anwendung zu repräsentieren und an Ihre Views zu binden. Es gibt verschiedene Arten von Datenmodellen in SAPUI5, wie z.B. JSONModel, XMLModel, ResourceModel und ODataModel.

  1. Modell erstellen: Zuerst müssen Sie ein Modell erstellen, abhängig von Ihrer Datenquelle oder Ihrem Datenformat. Zum Beispiel, um ein JSONModel zu erstellen:
var oData = {
   name: "Max",
   age: 30
};
var oModel = new sap.ui.model.json.JSONModel(oData);
  1. Modell zur Anwendung hinzufügen: Nachdem Sie das Modell erstellt haben, können Sie es Ihrer Anwendung oder einem View hinzufügen:
this.getView().setModel(oModel);

Oder mit Namen:

this.getView().setModel(oModel, "myModelName");
  1. Datenbindung in der XML-View: Nachdem das Modell gesetzt wurde, können Sie Daten in Ihrer View an dieses Modell binden. Wenn Sie z.B. einen Text in einer XML-View haben und diesen an das oben definierte JSONModel binden möchten:
<Text text="{/name}" />

Wenn Sie das Modell mit einem Namen gesetzt haben, verwenden Sie diesen Namen in der Bindung:

<Text text="{myModelName>/name}" />

Anlegen des Modells

Die auf der vorigen Folie beschriebenen Schritte sehen wir auch hier wieder:

  1. Modell erstellen
  2. Modell zur Anwendung hinzufügen
  3. Datenbindung in der XML-View - Auf der nächsten Folie
sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast",
   "sap/ui/model/json/JSONModel"
], function (Controller, MessageToast, JSONModel) {
   "use strict";
   return Controller.extend("ui5.walkthrough.controller.App", {
      onInit : function () {
         // set data model on view
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.getView().setModel(oModel);
      },
      onShowHello : function () {
         MessageToast.show("Hello World");
      }
   });
});

Binden der Daten im XML-View

Sowohl für die Eingabe als auch für die Verwendung können wir uns auf die Datenmodelle beziehen. In den Views können wir überall in einem literalen Text mit geschweiften Klammer auf ein Datenmodell beziehen.

<mvc:View
   controllerName="ui5.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Button
      text="Say Hello"
      press=".onShowHello"/>
   <Input
      value="{/recipient/name}"
      description="Hello {/recipient/name}"
      valueLiveUpdate="true"
      width="60%"/>
</mvc:View>

Herausforderungen

  • Ändere die Beschriftung des Buttons so, dass dort immer der Text aus dem Eingabefeld angezeigt wird.
  • Lege ein zweites Feld an, das einen Nachnamen erfasst. Erweitere dazu das JSON Datenmodell entsprechend.

Debugging - Konzept

Breakpoints können in den Browser-Entwicklertools (F12) gesetzt werden oder im BAS. In den Entwicklertools muss man dazu den entsprechenden Quellcode öffnen (Sources=>Page)

Danach wird die entsprechende Aktion ausgeführt und der Debugger hält an:

Debugging - Übung

Wenn wir jetzt den Erfassten Text im Toast anzeigen wollen, können wir das nicht mehr nur durch Binding im View machen. Denn der Toast wird im Controller mit dem Text versorgt.

Herausforderung: Wie kommen wir an den Zustand des Datenmodells?

Im Debugger können wir ganz einfach die notwendigen Erkenntnisse dazu gewinnen.

     onShowHello : function () 
     {
        var oModel = this.getView().getModel(); //<<Hier anhalten und oModel analysieren...
        MessageToast.show( "Hallo" ) ;      
      },

Debugging - Lösung der Übung

Im Debugger sehen wir schön den Aufbau des Objektes oModel:

Lokale Variablen im Debugger

Entsprechend können wir unseren Code dann anpassen, so dass immer der aktuelle Text im Toast erscheint:

     onShowHello : function () 
     {
        var oModel = this.getView().getModel();
        MessageToast.show(oModel.oData.recipient.name);      
      },