Schnellstart: Übersetzen von UI-Ressourcen (Windows Store-Apps mit JavaScript und HTML)

Speichern Sie Zeichenfolgenressourcen für Ihre Benutzeroberfläche in Ressourcendateien. Sie können dann in Ihrem Code oder Markup auf diese Zeichenfolgen verweisen.

Anweisungen

Fügen Sie Zeichenfolgen in Ressourcendateien ein und nicht direkt in den Code oder das Markup.
1. Öffnen Sie in Microsoft Visual Studio "package.appxmanifest", rufen Sie die Registerkarte Anwendungsbenutzeroberfläche auf, und legen Sie die Standardsprache auf "en-US" fest.
  Hinweis Damit haben Sie die Standardsprache für das Projekt festgelegt. Die Standardsprachressourcen werden verwendet, wenn die bevorzugte Sprache des Benutzers oder die Anzeigesprachen nicht mit den von der Anwendung bereitgestellten Sprachressourcen übereinstimmen. Siehe Eigenschaftenseiten, JavaScript.
2. Erstellen Sie einen Ordner für die Ressourcendateien.
  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie Hinzufügen > Neuer Ordner aus.
  2. Geben Sie dem Ordner den Namen "strings".
  3. Wenn der neue Ordner nicht im Projektmappen-Explorer sichtbar ist, wählen Sie im Visual Studio-Menü Projekt > Alle Dateien anzeigen, während das Projekt noch ausgewählt ist.
3. Erstellen Sie einen Unterordner und eine Ressourcendatei für Englisch (USA).
  1. Klicken Sie mit der rechten Maustaste auf den Ordner "strings", und fügen Sie einen neuen Ordner unterhalb von "strings" hinzu. Geben Sie ihm den Namen "en-US". Die Ressourcendatei befindet sich in einem Ordner, der für das BCP-47-Sprachtag benannt wurde. Ausführliche Informationen zum Sprachqualifizierer und eine Liste von häufigen Sprachtags finden Sie unter So wird's gemacht: Benennen von Ressourcen mit Qualifizierern.
  2. Klicken Sie mit der rechten Maustaste auf den Ordner "en-US", und wählen Sie Hinzufügen > Neues Element….
  3. Wählen Sie "Ressourcendatei (.resjson)" aus.
  4. Klicken Sie auf Hinzufügen. Hierdurch wird eine Ressourcendatei mit dem Standardnamen Resources.rejson hinzugefügt. Wir empfehlen, diesen Standarddateinamen zu verwenden. Apps können ihre Ressourcen zwar auf andere Dateien aufteilen, Sie müssen aber sorgfältig darauf achten, korrekt auf sie zu verweisen (siehe So wird's gemacht: Laden von Zeichenfolgenressourcen).
  5. Die neue Datei enthält Standardinhalt. Ersetzen Sie diesen durch folgenden Inhalt (der dem Standardinhalt möglicherweise sehr ähnlich ist):
    
    strings/en-US/resources.resjson
    json
    Kopieren
    
    { "greeting" : "Hello", "_greeting.comment" : "A welcome greeting.", "farewell" : "Goodbye", "_farewell.comment" : "A goodbye." }
    Hierbei handelt es sich um strikte JSON-Syntax (JavaScript Object Notation), bei der nach jedem Name/Wert-Paar mit Ausnahme des letzten ein Komma stehen muss. In diesem Beispiel bezeichnen "greeting" und "farewell" die anzuzeigenden Zeichenfolgen. Die anderen Paare ("_greeting.comment" und "_farewell.comment") sind Kommentare zur Beschreibung der Zeichenfolgen. Kommentare eignen sich gut, um ggf. zusätzliche Anweisungen für Übersetzer bereitzustellen, die die Zeichenfolgen in andere Sprachen lokalisieren.
Hinzufügen von Zeichenfolgenressourcen-Bezeichnern im Code und im Markup
1. Fügen Sie der HTML-Datei, sofern noch nicht vorhanden, Verweise auf die Windows-Bibliothek für JavaScript hinzu.
  HTML
  Kopieren
   <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet"> <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
  In diesem Beispiel wird der HTML-Code für die Datei Default.html gezeigt, die generiert wird, wenn Sie in Microsoft Visual Studio Express 2012 für Windows 8 ein neues Projekt vom Typ Leere Anwendung erstellen. Beachten Sie, dass die Datei bereits Verweise auf die Windows-Bibliothek für JavaScript enthält.
2. Rufen Sie in dem zur HTML-Datei gehörenden JavaScript-Code die WinJS.Resources.processAll-Funktion auf, wenn der HTML-Code geladen wird.
  JavaScript
  Kopieren
  WinJS.Application.onloaded = function(){ WinJS.Resources.processAll(); }
  Wenn zusätzliche HTML-Elemente in ein WinJS.UI.Pages.PageControl-Objekt geladen werden, rufen Sie WinJS.Resources.processAll(element) in der IPageControlMembers.ready-Methode der Seitensteuerelemente auf. Dabei steht element für das HTML-Element (und seine untergeordneten Elemente), das geladen wird. Dieses Beispiel basiert auf Szenario 6 von Anwendungsressourcen und Lokalisierung – Beispiel:
  JavaScript
  Kopieren
  var output; var page = WinJS.UI.Pages.define("/html/scenario6.html", { ready: function (element, options) { output = document.getElementById('output'); WinJS.Resources.processAll(output); // Refetch string resources WinJS.Resources.removeEventListener("contextchanged", refresh, false); WinJS.Resources.addEventListener("contextchanged", refresh, false); } });
3. Verweisen Sie in der HTML mit den Ressourcenbezeichnern ("greeting" und "farewell") aus den Ressourcendateien auf die Zeichenfolgenressourcen.
  HTML
  Kopieren
  <h2><span data-win-res="{textContent: 'greeting'}"></span></h2> <h2><span data-win-res="{textContent: 'farewell'}"></span></h2>
4. Verweisen Sie auf die Zeichenfolgenressourcen für Attribute.
  HTML
  Kopieren
  <div data-win-res="{attributes: {'aria-label' : 'String1'}}" >
5. Verweisen Sie auf die Zeichenfolgenressourcen in JavaScript.
  JavaScript
  Kopieren
  var el = document.getElementById('header'); var res = WinJS.Resources.getString('greeting'); el.textContent = res.value; el.setAttribute('lang', res.lang);
Das allgemeine Muster des Attributs "data-win-res" für den HTML-Ersatz ist: data-win-res="{propertyname1: 'resource ID', propertyname2: 'resource ID2'}".

Hinweis Wenn die Zeichenfolge kein Markup enthält, sollte die Ressource möglichst an die "textContent"-Eigenschaft und nicht an "innerHTML" gebunden werden. Die "textContent"-Eigenschaft ist sehr viel schneller zu ersetzen als "innerHTML".
Fügen Sie Ordner und Ressourcendateien für zwei weitere Sprachen hinzu.
1. Fügen Sie unter dem Ordner "strings" einen weiteren Ordner für Deutsch hinzu. Geben Sie dem Ordner den Namen "de-DE" für Deutsch (Deutschland).
2. Erstellen Sie im Ordner "de-DE" eine weitere Version der Datei Resources.rejson, und ersetzen Sie deren Inhalt durch Folgendes:
  
  strings/de-DE/resources.resjson
  json
  Kopieren
  { "greeting" : "Hallo", "_greeting.comment" : "A welcome greeting.", "farewell" : "Auf Wiedersehen", "_farewell.comment" : "A goodbye." }
3. Erstellen Sie einen weiteren Ordner mit dem Namen "fr-FR" für Französisch (Frankreich). Erstellen Sie eine neue Version der Datei Resources.rejson, und ersetzen Sie ihren Inhalt durch Folgendes:
  
  strings/fr-FR/resources.resjson
  json
  Kopieren
  { "greeting" : "Bonjour", "_greeting.comment" : "A welcome greeting.", "farewell" : "Au revoir", "_farewell.comment" : "A goodbye." }
Erstellen Sie die App, und führen Sie sie aus.
Testen Sie die App für die Standardanzeigesprache.
1. Drücken Sie F5, um die App zu erstellen und auszuführen.
2. Wie Sie sehen, werden Begrüßung und Verabschiedung in der bevorzugten Sprache des Benutzers angezeigt.
3. Beenden Sie die App.
Testen Sie die App für die anderen Sprachen.
1. Öffnen Sie die Systemsteuerung, und wählen Sie Zeit, Sprache und Region > Sprache aus.
2. Wie Sie sehen, wird die Sprache, die beim Ausführen der App angezeigt wurde, als erste Sprache aufgeführt, also Englisch, Deutsch oder Französisch. Wenn die zuerst aufgeführte Sprache keine der drei genannten Sprachen ist, greift die App auf die erste Sprache in der Liste zurück, die von der App unterstützt wird.
3. Wenn nicht alle drei Sprachen auf Ihrem Computer verfügbar sind, fügen Sie die fehlenden Sprache hinzu, indem Sie auf Sprache hinzufügen klicken und die Sprachen dann zur Liste hinzufügen.
4. Um die App mit einer anderen Sprache zu testen, wählen Sie die Sprache in der Liste aus, und klicken Sie dann so lange auf Nach oben, bis sich die Sprache am Anfang der Liste befindet. Führen Sie die App anschließend aus.

Schnellstart: Übersetzen von UI-Ressourcen (Windows Store-Apps mit JavaScript und HTML)

Anweisungen

Verwandte Themen