In diesem Blog werden wir uns mit den verschiedenen Arten von Bindings in SAP UI5 bzw. Open UI5 beschäftigen.

Die folgenden Informationen werden auch, jedoch um einiges ausführlicher, in unseren offiziell bei der SAP im Schulungskatalog gelisteten Kursen HOUI5 und HOFIO behandelt.

Inhalt

 

In diesem Blog werden wir uns folgenden Themen widmen: 

  • Grundlegendes zu Binding
  • Binding Modi
    • One-Time-Binding
    • One-Way-Binding
    • Two-Way-Binding
  • Binding Arten
    • Property Binding
    • Aggregation Binding
    • Element Binding
  • Binding Syntax
    • Binding Pfad
    • Composite Binding
    • Expression Binding
    • Metadata Binding 

Grundlegendes zu Binding

In SAPUI5 wird Data Binding eingesetzt, um die Daten aus den Models mithilfe von UI-Elementen darzustellen. Das ermöglicht auch das Aktualisieren und Editieren der Daten direkt aus dem UI. Dadurch wird das UI mit dem Model „verknüpft“.

 

Hierfür werden 2 Dinge benötigt:

  • Data Model (JSON, OData)
  • Binding Instanz 

Das Data Model – üblicherweise ein JSON bzw. OData-Model – stellt Daten und Methoden, um die Daten vom Server abzufragen, zur Verfügung. Zusätzlich bietet es eine Methode, um Bindings zu erstellen. Eine Binding Instanz wird erstellt, sobald diese Methode aufgerufen wird. Die Instanz beinhaltet Informationen zum Binding und ein Event, welches getriggert wird, wenn sich die gebundenen Daten ändern.

Binding Modi

Durch das enum „sap.ui.model.BindingMode“ werden 3 verschiedene Binding Modi bereitgestellt.

Diese können entweder allgemein auf ein Model mit der Methode „.setDefaultBindingMode(bindingMode)“ oder über das Property „oBindingInfo.mode“ auf einzelne Binding Instanzen angewendet werden.

 

One-Time-Binding – sap.ui.model.BindingMode.OneTime

Wird der BindingMode auf „OneTime“ gesetzt, werden die Daten nur einmalig vom Model gelesen.

 

One-Way-Binding – sap.ui.model.BindingMode.OneWay

“OneWay”-Binding bedeutet, dass der Wert nur vom Model zur View gelesen wird, jedoch nicht umgekehrt. Das bedeutet, dass Änderungen in der View keine Auswirkungen auf die Daten im Model haben.

 

Two-Way-Binding – sap.ui.model.BindingMode.TwoWay

Möchte man in der View Daten editieren und diese Änderungen auch automatisch in das Model übernehmen, ist der Binding Mode „TwoWay“ genau das Richtige. Anders als beim One-Way-Binding werden hier Daten vom Model zur View und umgekehrt übertragen.

Binding Arten

In UI5 gibt es 3 verschieden Arten von Bindings. Diese werden im Folgenden näher erläutert. Beim Binding muss immer ein Bindingpfad angegeben werden. Dieser wird durch ‚{}‘ gekennzeichnet.

Je nachdem, ob man das Default-Model oder ein Named-Model verwendet, unterscheidet sich dieser Pfad. Bei der Verwendung eines Named-Models muss dem Propertynamen noch ein ‚modelName>‘ vorangestellt werden.

Möchte man die Eigenschaft „FirstName“ auf die value-Eigenschaft eines Inputs binden (Property Binding), sieht das, bei der Verwendung eines Default-Models, so aus:

Verwendet man hingegen ein Named-Model, muss der Eigenschaft der Modelname vorangestellt werden:

Property Binding

Property Binding wird verwendet, wenn beispielsweise Daten in einem Formular gebunden werden. Hierfür muss in der entsprechenden Eigenschaft (z.B.: text, value, …) ein Binding-Pfad angegeben werden. 

Am ‚/‘ vor dem Propertynamen erkennt man, dass es sich um einen absoluten Pfad handelt. Das bedeutet, das sich die Eigenschaft „FirstName“ auf der Root-Ebene des Default-Models befindet.

Aggregation Binding

Sollen Listen auf ein Control gebunden werden, kommt Aggregation Binding zum Einsatz. Aggregation Binding wird meistens in Listen und Tabellen verwendet. Dabei muss auch ein Template angegeben werden, welches für jedes Element in der Liste einmal geklont wird. Innerhalb des Templates verwendet man relative Pfade, da der Pfad des Aggregation Bindings bereits auf die entsprechende Liste verweist. Anstelle eines Templates kann auch eine Factory-Function angegeben werden. Diese definiert, wie die Einträge dargestellt werden sollen.

Default-Model

Named-Model

Element Binding

Element Binding ermöglicht das Binden einzelner Elemente einer Liste auf Controls. Hierbei wird ein Binding-Context erzeugt. Die Binding-Pfade sind relativ.

Dies kommt vor Allem in Master-Detail Apps zum Einsatz.

Element-Binding kann auf folgende Arten umgesetzt werden:

  • bindElement im Controller aufrufen
  • binding-Property des Controls verwenden

Binding Syntax

Mit einem Binding-Pfad werden UI Elemente auf die Daten des Models gebunden. Durch das definieren eines Pfades, wird ein Binding-Context erstellt.

Composite Binding

Oftmals, wenn man einen Formatter verwendet, ist es der Fall, dass mehrere Werte an den Formatter übergeben werden müssen. Dies kann mit Composite-Binding umgesetzt werden. In der jeweiligen Eigenschaft (value, text, …) des UI-Elements kann ein parts-Array von paths definiert werden.

Expression Binding

Mithilfe von Expression-Binding können simple Prüfungen – z.B.: Vergleich von Werten – direkt in der View und das ganze zur Laufzeit gemacht werden. Dadurch erspart man sich die das Implementieren von zusätzlichen Formatter-Funktionen im Controller.

Expression-Binding kann auf 2 Arten umgesetzt werden:

  • ‚{=expression}‘: Hier wird One-Way-Binding verwendet. Sollten sich Werte im Model ändern, wird auch das Binding aktualisiert.
  • ‚{:=expression}‘: Hier wird One-Time-Binding verwendet. Der Wert wird einmal ermittelt und anschließend nicht mehr aktualisiert.

Als expression können beliebige Prüfungen implementiert werden. Dabei ist die Syntax ähnliche jener in Javascript, jedoch werden nicht alle JavaScript Expressions unterstützt. Innerhalb der Expression greift man auf Modeldaten folgendermaßen zu: ‚${binding}‘ oder ‚%{binding}‘

Eine Prüfung und entsprechende Anzeige verschiedener Werte sieht wie folgt aus:

${binding} VS %{binding}

Verwendet man ‚${binding}‘ wird der Wert automatisch in den Typ der Eigenschaft des Controls konvertiert. Im Falle des Visible-Properties eines sap.m.Input wäre dies ‚boolean‘. Nicht immer ist diese Konvertierung erwünscht, daher kann diese mit ‚%{binding}‘ umgangen werden. ‚%{binding}‘ ist eine Kurzform für ‚${path: ´binding´, targetType: ´any´}‘ Der targetType kann auch durch beliebige Typen, die sap.ui.model.odata.type bietet ersetzt werden.

 

Metadata Binding

Möchte man Metadata-Eigenschaften wie sap:label, sap:createable, sap:updatable, … in der View abfragen, erreicht man dies mit Metadata-Binding.

Auch hier gibt es 2 Ansätze.

Absolute Bindings

Absolute Bindings sehen folgendermaßen aus:

            /#EntityName/PropertyName/@Attribut

Relative Bindings

Relative Bindings sehen so aus:

            /EntitySetName/PropertyName/#@Attribut

Best-Practice Beispiel mit OData-Model und Two-Way-Binding

Abschließend noch ein kurzes Best-Practice Beispiel, in dem mithilfe eines OData-Models und Two-Way-Binding ein Update auf die Details eines Employees geschickt wird.

Hier werden folgende Methoden verwendet:

  • hasPendingChanges: Zum Abfragen, ob es Änderungen gibt
  • submitChanges: Mit ‚Save‘ werden die Änderungen ans Backend geschickt
  • resetChanges: Mit ‚Discard‘ werden die Änderungen verworfen

View:

Controller:

Anmeldung zu unseremNewsletter

Anmeldung zu unseremNewsletter

Tragen Sie sich in unsere Mailingliste ein, um die neuesten Nachrichten und Updates von unserem Team zu erhalten.

Vielen Dank für die Anmeldung!