UI5 bringt viele interessante Features mit sich, z. B. die Typbindung.
Heute werfen wir einen genaueren Blick auf dieses Konzept und zeigen Ihnen, wie das Format einer Währungseingabe an Ihre Bedürfnisse angepasst werden kann.
UI5 bietet einen eigenen eindeutigen Datentyp namens Currency , der verwendet werden kann, um dies zu erreichen. Schauen wir uns zunächst genauer an, was Typbindung ist, um zu verstehen, wie sie im Allgemeinen funktioniert und wie Sie dieses Wissen später bei der Verwendung anderer Datentypen wie Date, Boolean und String anwenden können (eine vollständige Liste der verfügbaren Typen finden Sie hier: https://sapui5.hana.ondemand.com/#/api/sap.ui.model.type)
Was ist Typbindung?
Unter Typbindung versteht man die “Bindung” von Modellwerten an Datentypen der Klasse sap.ui.model.Type und der von ihr erbenden Klassen, wie z.B. sap.ui.model.SimpleType oder unsere sap.ui.model.type.Currency.
Durch das “Binden” der Werte werden sie automatisch von UI5 formatiert, je nachdem, was Sie verwenden.
Wann sollten Sie die Typbindung verwenden?
Die Typbindung kann verwendet werden, wenn Sie Werte formatieren möchten, die in Ihrem Modell vorhanden sind, bevor sie in der Benutzeroberfläche angezeigt werden, wie dies in unserem Beispiel der Fall ist.
Wie benutzt man es jetzt?
Binding-Syntax für den Typ sap.ui.model.type.Currency
{ parts:[{ path:'modelname>variablepath' -> the model path pointing to the value which we want to format. Please keep in mind whether that path is absolute or relative. },{ path:'modelname>/variablepath' -> model path pointing to the currency identifier. Can be a currency symbol like '€' for Euro or an ISO code ('EUR') as specified by CLDR }], type:'sap.ui.model.type.Currency', -> Specifies the Currency data type to be used for the value formatting in your binding formatOptions:{ /// Optional, this object provides a set of fields to customize the formatting behavior, find the complete list of available fields here } }
Da wir nun unsere Binding-Syntax fertig haben, müssen wir sie nur noch auf unser Widget im Simplifier anwenden.
Dazu öffnen wir einfach den UI Designer unserer Anwendung, wählen das Widget auf dem jeweiligen Bildschirm aus und klicken dann auf das Büroklammer-Symbol neben der zu bindenden und zu formatierenden Eigenschaft.
Dadurch wird der Editor für Bindungsausdrücke geöffnet, in den wir unsere Bindungssyntax einfügen können.
Schließlich können wir die Anwendung bestätigen und dann bereitstellen, um die Bindung und ihre Formatierung zu aktivieren