SAPUI5 Grundlagen

Übersetzbare Texte

Ein weiteres Datenmodell

(C) Brandeis Consulting.

Übersicht

(C) Brandeis Consulting.

Textdateien

Das Wort internationalization hat 20 Buchstaben und wird darum häufig mit i18n abgekürzt.

Folgende Konventionen gelten für die Textdateien:

  • Eigener Ordner /i18n
  • Der Dateiname i18n.properties enthält die Default-Texte
  • Für jede Sprache wird eine Datei hinzugefügt. Diese unterscheidet sich im Namen. z.B.:
    • i18n_de.properties
    • i18n_en.properties

Dateiformat

  • Die Properties Dateien enthalten Schüssel/Wert Paare.
  • Alle Einträge sind casesensitiv.
  • Platzhalter können in geschweiften Klammern eingefügt werden. Diese werden später ersetzt.
  showHelloButtonText=Say Hello
  helloMsg=Hello {0}
/i18n/i18n.properties
(C) Brandeis Consulting.

Im Controller - Laden und Binden des Ressourcenbündel

  1. Ressourcenmodell laden und zuweisen
  2. Dem aktuellen View das Ressourcenmodell zuweisen unter dem Namen i18n
sap.ui.define([
  ...
  "sap/ui/model/resource/ResourceModel" ], 
  function (... ,
            ResourceModel ) { 
     ...
     onInit : function () {
        ...
         // set i18n model on view
         var i18nModel = new ResourceModel({
            bundleName: "ui5.walkthrough.i18n.i18n"
         });
         this.getView().setModel(i18nModel, "i18n");
      },
...
Aus controller/App.controller.js

Der bundleName enthält den Pfad ui5.walkthrough. Diesen haben wir in der Datei index.html definiert:

    ...
    <script
    ...
      data-sap-ui-resourceroots='{
			"ui5.walkthrough": "./"
		}'
    ></script>
Aus webapp/index.html
(C) Brandeis Consulting.

Im Controller - Verwenden der Texte

In dem Beispiel soll in dem Text der Platzhalter ersetzt werden.

  • Von der Funktion
    this.getView().getModel("i18n").getResourceBundle()
    bekommen wir das Textmodell in der passenden Sprache geliefert.
  • Danach bekommen wir den Text für den Platzhalter aus unserem Datenmodell
  • Mit
    oBundle.getText("helloMsg", [sRecipient] )
    rufen wir den Text ab und liefern in einem Array die Werte für die Platzhalter mit.
...
onShowHello : function () {
    // read msg from i18n model
    var oBundle = this.getView().getModel("i18n")
                                .getResourceBundle();
    var sRecipient = this.getView().getModel()
                         .getProperty("/recipient/name");
    var sMsg = oBundle.getText("helloMsg", [sRecipient]);
    // show message
    MessageToast.show(sMsg);
}
 ...
Aus controller/App.controller.js
(C) Brandeis Consulting.

Im XML-View - Verwenden der Texte

Der Zugriff auf die Texte erfolgt analog dem Zugriff auf andere Datenmodelle mit geschweiften Klammern. Es wird lediglich der Name i18n des Modells, getrennt durch ein >, vorangestellt.

Falls wir uns vertippen, wird der Schlüssel statt dem Text im View angezeigt.

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