Übersetzung von JavaScript-Anwendungen (Cordova-Anwendungen, Webanwendungen) in mehrere Sprachen

Übersicht

Sie können das Framework der IBM Mobile Foundation nutzen, um zu JavaScript-Anwendungen (Cordova, Web) Übersetzungen in mehrere Sprachen hinzuzufügen.
Zu den Elementen, die übersetzt werden können, gehören Anwendungszeichenfolgen und Systemnachrichten.

Fahren Sie mit folgenden Abschnitten fort:

• Anwendungszeichenfolgen übersetzen
• Systemnachrichten übersetzen
• Übersetzung in mehrere Sprachen
• Ländereinstellung und Sprache eines Geräts erkennen
• Beispielanwendung

Anwendungszeichenfolgen übersetzen

Zeichenfolgen, die übersetzt werden sollen, werden in einem JSON-Objekt mit der Bezeichnung “Messages” gespeichert.

• Bei Cordova-Anwendungen, die das MobileFirst-SDK verwenden, finden Sie das Objekt in der Datei index.js der Cordova-Anwendung ([Stammverzeichnis_des_Cordova-Projekts]/www/js/index.js).
• Bei Webanwendungen müssen Sie das Objekt hinzufügen.

Beispiel für die JSON-Objektstruktur

var Messages = {
    headerText: "Default header",
    actionsLabel: "Default action label",
    sampleText: "Default sample text",
};

Es gibt zwei Möglichkeiten für die Anwendungslogik, die im JSON-Objekt “Messages” gespeicherten Zeichenfolgen zu referenzieren:

Als JavaScript-Objekteigenschaft:

Messages.headerText

Als ID eines HTML-Elements mit class="translate":

<h1 id="headerText" class="translate"></h1>

Systemnachrichten übersetzen

Es ist möglich, von der Anwendung angezeigte Systemnachrichten zu übersetzen, z. B. die Naricht “Internet connection is not available” oder “Invalid username or password”. Systemnachrichten werden im Objekt WL.ClientMessages gespeichert.

Hinweis: Sie müssen Systemnachrichten auf einer globalen JavaScript-Ebene überschreiben, weil Teile des Codes erst nach erfolgreicher Initialisierung der Anwendung ausgeführt werden.

Webanwendungen

Eine vollständige Liste der Systemnachrichten ist in der Datei messages.json im Ordner *[Projektstammverzeichnis]\node_modules\ibm-mfp-web-sdk\lib\messages* enthalten.

Cordova-Anwendungen

Eine vollständige Liste der Systemnachrichten ist in der Datei messages.json des generierten Projekts.

• Android: [Cordova-Projekt]\platforms\android\assets\www\plugins\cordova-plugin-mfp\worklight\messages
• iOS, Windows: [Cordova-Projekt]\platforms\[ios or windows]\www\plugins\cordova-plugin-mfp\worklight\messages

Zum Übersetzen einer Systemnachricht müssen Sie sie im Anwendungscode überschreiben.

WL.ClienMessages.loading = "Application HelloWorld is loading... please wait.";

Übersetzung in mehrere Sprachen

Mit JavaScript können Sie für Ihre Anwendung eine Übersetzung in mehrere Sprachen implementieren.
Nachfolgend ist die Implementierung der Beispielanwendung für dieses Lernprogramm erläutert.

1. Definieren Sie die Standardanwendungszeichenfolgen in der Datei index.js.

   var Messages = {
        headerText: "Default header",
        actionsLabel: "Default action label",
        sampleText: "Default sample text",
        englishLanguage: "English",
        frenchLanguage: "French",
        russianLanguage: "Russian",
        hebrewLanguage: "Hebrew"
   };
   

2. Überschreiben Sie bei Bedarf bestimmte Zeichenfolgen.

   function setFrench(){
        Messages.headerText = "Traduction";
        Messages.actionsLabel = "Sélectionnez une langue:";
        Messages.sampleText = "Ceci est un exemple de texte en français.";
   }
   

3. Aktualisieren Sie die grafische Benutzerschnittstelle mit den neuen Zeichenfolgen. Sie können weitere Aufgaben ausführen. Beispielsweise können Sie für Sprachen wie Hebräisch oder Arabisch die Ausrichtung des Textes von rechts nach links festlegen. Immer, wenn ein Element aktualisiert wird, erfolgt die Aktualisierung mit Zeichenfolgen der derzeit aktiven Sprache.

   function languageChanged(lang) {
        if (typeof(lang)!="string")
            lang = $("#languages").val();
   
        switch (lang) {
            case "english":
                setEnglish();
                break;
            case "french":
                setFrench();
                break;
            case "russian":
                setRussian();
                break;
            case "hebrew":
                setHebrew();
                break;
        }
                  
        if ($("#languages").val()=="hebrew")
            $("#wrapper").css({direction: 'rtl'});
        else
            $("#wrapper").css({direction: 'ltr'});
         
        $("#sampleText").html(Messages.sampleText);
        $("#headerText").html(Messages.headerText);
        $("#actionsLabel").html(Messages.actionsLabel);
   }
   

Ländereinstellung und Sprache eines Geräts erkennen

Gehen Sie wie folgt vor, um die vom Gerät oder Browser verwendete Sprache zu erkennen:

Webanwendungen

Verwenden Sie navigator.language oder andere verfügbare Frameworks und Lösungen, um die Browsersprache zu erkennen.

Cordova-Anwendungen

Verwenden Sie das Cordova-Globalisierungs-Plug-in cordova-plugin-globalization, um die Ländereinstellung und die Sprache eines Geräts zu erkennen.
Das Globalisierungs-Plug-in wird automatisch installiert, wenn eine Plattform zu einer Cordova-Anwendung hinzugefügt wird.

Verwenden Sie die Funktionen navigator.globalization.getLocaleName und navigator.globalization.getPreferredLanguage, um die Ländereinstellung bzw. die Sprache zu erkennen.

navigator.globalization.getLocaleName(
	function (localeValue) {
		WL.Logger.debug(">> Detected locale: " + localeValue);
		
        ...
        ...
        ...
	},
	function() {
		WL.Logger.debug(">> Unable to detect locale.");
	}
);

navigator.globalization.getPreferredLanguage(
	function (langValue) {
		lang = langValue.value;
		WL.Logger.debug(">> Detected language: " + lang);
	},
	function() {
		WL.Logger.debug(">> Unable to detect language.");
	}
);

Das Ergebnis sehen Sie im Geräteprotokoll, z. B. im LogCat von Android Studio:

Beispielanwendung

Klicken Sie hier, um das Cordova-Projekt herunterzuladen.

Verwendung des Beispiels

Anweisungen finden Sie in der Datei README.md zum Beispiel.

Tipp: Das LogCat können Sie in der LogCat-Konsole von Android Studio untersuchen, während die Anwendung ausgeführt wird.