LeseprobeMit diesem Buch tauchen Sie ein in die Anwendungsentwicklung mit SAPUI5 und lernen alles, was Sie ber Design, Programmie-rung und Betrieb der Apps wissen mssen. In dieser Leseprobe erlutern die Autoren die allgemeine Nutzung von SAPUI5 sowie deren Modelltypen und errtern die unterschiedlichen Formen des Data Bindings.

Christiane Goebels, Denise Nepraunig, Thilo Seidel

SAPUI5 Das umfassende Handbuch699 Seiten, gebunden, November 2016 79,90 Euro, ISBN 978-3-8362-4456-5

www.sap-press.de/4303

Modelle und Bindings Einleitung

Inhaltsverzeichnis

Index

Die Autoren

Leseprobe weiterempfehlen

SAP-Wissen aus erster Hand.

https://www.rheinwerk-verlag.de/sapui5_4303/?GPP=lpnmailto:?body=Leseproben-Empfehlung:%20%C2%BBSAPUI5%20%E2%80%93%20Das%20umfassende%20Handbuch%C2%AB%20von%20SAP%20PRESS,%20http://gxmedia.galileo-press.de/leseproben/4303/leseprobe_sappress_sapui5_handbuch.pdf&subject=Leseprobe:%20%C2%BBSAPUI5%20%E2%80%93%20Das%20umfassende%20Handbuch%C2%AB

161

Kapitel 5

In diesem Kapitel errtern wir die allgemeine Nutzung von SAPUI5 und die darin enthaltenen Modelltypen sowie das Data Binding.

5 Modelle und Bindings

Im vorherigen Kapitel 4, Aufbau von MVC-Anwendungen, haben wir er-lutert, wie Modelle als Datencontainer funktionieren, in denen smtlicheGeschftsdaten enthalten sind, die in Ihrer Anwendung verarbeitet werden.SAPUI5 wird mit verschiedenen vordefinierten, einsatzbereiten Modellklas-sen bereitgestellt. In der Beispielanwendung haben Sie schon ein JSON- undein Ressourcenmodell in Aktion gesehen. In diesem Kapitel erklren wir die-se Modelltypen genauer, und Sie erfahren mehr ber die Bindungsfunktio-nalitt, die in allen Anwendungen zum Einsatz kommt.

Data Binding beinhaltet das Verbinden von Daten, die in einem bestimmtenModell in einer Anwendung verfgbar sind, mit einem bestimmten Teil derBenutzeroberflche auf dem Bildschirm. Diese Verbindung kann entwederunidirektional oder bidirektional sein. Bei der ersten Verbindung werden dieDaten aus dem Modell bereitgestellt, und die Modelldaten bleiben un-berhrt, wenn sie in der Benutzeroberflche gendert werden. Bei der letz-ten Verbindung werden die Daten aus der Benutzeroberflche und demModell laufend synchronisiert, wie es bereits im Beispiel des letzten Kapi-tels bei den Eingabefeldern gezeigt wurde.

Bei den meisten Modellen knnen Sie selbst entscheiden, ob Sie eine uni-oder eine bidirektionale Bindung verwenden mchten. Eine unidirektionaleBindung bedeutet allerdings nicht, dass die Daten in solch einem Modell garnicht aktualisiert werden knnen: Sie mssen Sonderaktionen ausfhren,um das Modell zu aktualisieren. Warum das so ist, wird deutlich, wenn wireinen genaueren Blick auf die Menge an Daten werfen, auf die unsere An-wendung zugreifen kann, und prfen, woher diese Daten stammen. Zuerstbetrachten wir ein JSON-Beispiel.

4456.book Seite 161 Mittwoch, 9. November 2016 10:03 10

Modelle und Bindings5

162

5.1 Verwenden von Modellen ein JSON-Beispiel

JSON-Modelle sind clientseitige Modelle. Dies bedeutet, dass die Anwen-dung nach der Instanziierung des Modellobjekts und dem Laden der DatenZugriff auf alle im Modell enthaltenen Daten hat.

Andere Modelle, wie z. B. das OData-Modell, sind serverseitige Modelle. Beider Instanziierung eines bestimmten Modellobjekts werden Daten nicht au-tomatisch geladen. Die Daten mssen angefordert werden und werden dannbei Bedarf geladen. Dies kann entweder ber bewusste Aktionen im Anwen-dungscode erfolgen (z. B. Aufruf der entsprechenden Funktionen im Modell)oder automatisch geschehen, wenn die Daten aus solch einem Modell mitbestimmten Bindungstypen an ein bestimmtes Bildschirmelement gebundensind. Das Modellobjekt selbst bernimmt dann die Anforderung der Datenaus dem Service. Weitere Details hierzu erhalten Sie im nchsten Kapitel,wenn wir genauer auf das oData-Modell eingehen.

Wie im vorangehenden Kapitel verwenden wir nun ein JSON-Modell undprfen, wie dieses in der Anwendung eingesetzt werden kann und wie dieunterschiedlichen Bindungstypen aus SAPUI5 angewendet werden knnen.

5.1.1 Instanziierung und Laden der Daten

Wir rekapitulieren zuerst die Modellstruktur aus der Beispielanwendung,und greifen wir nochmals auf, was wir im vorangehenden Kapitel erreichthaben. Alle Geschftsdaten, die wir fr unsere Anwendung bentigen, lie-gen uns in einer JSON-Struktur vor. Wie Sie gesehen haben, ist das Instanzi-ieren eines JSON-Modells mit der Konstruktorfunktion der entsprechendenModellklasse ziemlich leicht:

// model creation and loading the datavar oAppModel = sap.ui.model.json.JSONModel(this.getMetadata().

getConfig().serviceUrl);

Sie wissen bereits, was hier geschieht: SAPUI5 erstellt ein neues Objekt mitdem Prototyp sap.ui.model.json.JSONModel.

Als Nchstes bentigen wir einige Daten fr dieses Modell, die den Controlsin unserer Anwendung zur Verfgung stehen sollen. Wie zuvor verwendenwir nicht einfach ein JSON-Objekt, sondern laden die Daten aus einer sepa-raten Datei, um die Antwort zu simulieren, die wir von einem Service erhal-ten wrden.

4456.book Seite 162 Mittwoch, 9. November 2016 10:03 10

Verwenden von Modellen ein JSON-Beispiel 5.1

163

Im Hintergrund werden zwei Optionen fr das JSON-Modell unterschieden:ob es 1) eine URL oder 2) ein Objekt als Parameter fr den Konstruktor emp-fangen hat. Dieses Mal wurde eine URL bergeben, die von der Konstruktor-funktion des Modells erkannt wird. Die Funktion versucht dann automa-tisch, die Datei mit der Funktion setData des Modells aus der URL zu laden.Dies knnen Sie erkennen, wenn Sie einen Blick auf die Konstruktorfunktionwerfen (siehe Listing 5.1).

var JSONModel = ClientModel.extend("sap.ui.model.json.JSONModel", {constructor : function(oData) {ClientModel.apply(this, arguments);if (oData && typeof oData == "object") {

this.setData(oData);}

},

metadata : {publicMethods : ["setJSON", "getJSON"]

}});

Listing 5.1 sap.ui.model.JSONModel-Konstruktor

Wurden die Daten erfolgreich abgerufen, werden sie im Modellobjekt, ge-nauer gesagt in einer Eigenschaft des Modells mit dem Namen oData, gespei-chert. Beachten Sie, dass diese Eigenschaft nicht fr den direkten Zugriff ge-dacht ist und hier nur erwhnt wird, um zu verdeutlichen, wo die Datenabgelegt werden.

Neben diesem automatischen Laden bei der Instanziierung gibt es eine wei-tere Mglichkeit, um die Anforderung von Daten auszulsen. Das JSON-Mo-dell verfgt auerdem ber eine Methode loadData, mit der wir das Ladenvon Daten, wie es in Listing 5.2 dargestellt ist, manuell auslsen knnen.

// model creation and loading the datavar oAppModel = sap.ui.model.json.JSONModel();

// loading the JSON data from the URL and storing it in the modeloAppModel.loadData("service/data.json");

Listing 5.2 Instanziieren des Modells und manuelles Laden der Daten

Diese Komfortfunktion ist tatschlich ein Wrapper fr eine XHR-Anfrage, diewir ansonsten selbst erstellen mssten, wenn wir selbst entscheiden mch-ten, wann die Anforderung zum Laden von Daten ausgelst werden soll. Wir

4456.book Seite 163 Mittwoch, 9. November 2016 10:03 10

Modelle und Bindings5

164

erhalten so eine Mglichkeit, um einen Teil des aus der bergeordnetenKlasse sap.ui.model.Model vererbten Standardverhaltens zu beeinflussen.

Wir lassen das Standardverhalten fr den Moment aber unverndert und se-hen uns genauer an, was geschieht, wenn die Funktion loadData aufgerufenwird (siehe Listing 5.3; Codezeilen, die derzeit nicht relevant sind, haben wirausgelassen).

JSONModel.prototype.loadData = function(sURL, oParameters, bAsync,sType, bMerge, bCache, mHeaders){

[...]this.fireRequestSent({url : sURL, type : sType, async : bAsync,headers: mHeaders, info : "cache=" + bCache + ";bMerge=" +bMerge, infoObject: {cache : bCache, merge : bMerge}});this._ajax({[...]

success: function(oData) {[...]that.setData(oData, bMerge);that.fireRequestCompleted({url : sURL, type : sType,async : bAsync,headers: mHeaders, info : "cache=" + bCache + ";bMerge=" + bMerge,infoObject: {cache : bCache, merge : bMerge}, success: true});},error: function(XMLHttpRequest, textStatus, errorThrown){

[...]});};

Listing 5.3 Auszug aus der Funktion loadData des JSON-Modells

Neben der eigentlichen Anforderung gibt es auch Code, der bestimmte Er-eignisse auslst, die die Listener ber den Status der Anforderung informie-ren. Mit diesen Ereignissen knnen Sie in Ihrer Anwendung ermitteln, wannSie mit den Daten aus dem Modell sicher arbeiten knnen oder wann dieAnforderung fehlgeschlagen ist. Mglicherweise mchten Sie auf einen sol-chen Fehler reagieren. Diese Ereignisse werden im Modell ausgelst; daherknnen Sie problemlos Event-Handler mit ihnen verknpfen.

Jedes Mal, wenn eine solche Anforderung gesendet wird, wird das EreignisrequestSent im Modell ausgelst. Wichtiger fr unsere nachfolgenden Expe-rimente im Modell ist jedoch das Ereignis, das bei Erfolg (oder Fehler) aus-gelst wird: das Ereignis requestCompleted.

4456.book Seite 164 Mittwoch, 9. November 2016 10:03 10

Verwenden von Modellen ein JSON-Beispiel 5.1

165

5.1.2 Zugriff auf Modellwerte

Sie erfahren nun, wie Sie ber die Methoden getProperty und setPropertyauf Werte in einem JSON-Modell zugreifen und diese manipulieren knnen.Um allerdings sicherzustellen, wann die Daten im Modell verfgbar sein sol-len und wann wir damit arbeiten knnen, mssen wir das Ereignis request-Completed anhngen.

Wechseln wir fr die restliche Einfhrung in das Data Binding zu einem klei-neren und isolierteren Anwendungsbeispiel. Dieses nennen wir DatabindingFirst Steps. Mit diesem Beispiel werden unsere ersten zaghaften Schritte imModell transparenter. Wir kehren gelegentlich zum grere