SAPUI5 Grundlagen

Übersetzbare Texte

Ein weiteres Datenmodell

Übersicht

alt text

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

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

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

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>