Schnellstart: Übersetzen von UI-Ressourcen (HTML)

Artikel
01/29/2016

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

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 Visual Studio „package.appxmanifest“, rufen Sie die Registerkarte Anwendung auf, und legen Sie die Standardsprache auf "en-US" fest. Wenn dies eine Universal-App ist, müssen Sie die Aktion für jede package.appxmanifest-Datei in Ihrer Lösung ausführen.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, um dort die Ressourcendateien zu speichern.
  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt (das freigegebene Projekt, wenn es sich um eine Universal-App handelt), und wählen Sie Hinzufügen > Neuer Ordner aus.
  2. Geben Sie dem neuen Ordner den Namen "strings".
  3. Wenn der neue Ordner nicht im Projektmappen-Explorer sichtbar ist, wählen Sie im Microsoft 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 unterhalb davon einen neuen Ordner hinzu. Geben Sie dem neuen Ordner den Namen "en-US". Die Ressourcendatei befindet sich in einem Ordner mit dem BCP-47-Sprachtag. Details 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… aus.
  3. Wählen Sie "Ressourcendatei (.resjson)".
  4. Klicken Sie auf Hinzufügen. Hierdurch wird eine Ressourcendatei mit dem Standardnamen resources.rejson hinzugefügt. Wir empfehlen Ihnen, diesen Standarddateinamen zu verwenden. Apps können ihre Ressourcen in andere Dateien partitionieren. Sie müssen jedoch darauf achten, richtig auf die Dateien zu verweisen (siehe So wird’s gemacht: Laden von Zeichenfolgenressourcen).
  5. Die neue Datei enthält Standardinhalt. Ersetzen Sie ihn durch folgenden Inhalt (der dem Standardinhalt unter Umständen sehr ähnlich ist):
    
    strings/en-US/resources.resjson
```
{
    "greeting"              : "Hello",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Goodbye",
    "_farewell.comment"     : "A goodbye."
}
```
    Hierbei handelt es sich um strikte JSON-(JavaScript Object Notation-)Syntax, bei der nach jedem Name/Wert-Paar mit Ausnahme des letzten Paares ein Komma stehen muss. In diesem Beispiel identifizieren "greeting" und "farewell" die Zeichenfolgen, die angezeigt werden sollen. 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.
  
  Hinweis Das folgende Beispiel zeigt den HTML-Code für die Datei default.html des Windows-Projekts, das generiert wird, wenn Sie in Visual Studio ein neues Projekt vom Typ Leere App (Universelle Apps) erstellen. Beachten Sie, dass die Datei bereits Verweise auf die WinJS enthält.
```

<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
```
  Hinweis Das folgende Beispiel zeigt den HTML-Code für die Datei default.html des WindowsPhone-Projekts, das generiert wird, wenn Sie in Visual Studio ein neues Projekt vom Typ Leere App (Universelle Apps) erstellen. Beachten Sie, dass die Datei bereits Verweise auf die WinJS enthält.
```

<link href="/css/ui-themed.css" rel="stylesheet" />
<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>
```
2. Rufen Sie in dem zur HTML-Datei gehörenden JavaScript-Code die WinJS.Resources.processAll-Funktion auf, wenn der HTML-Code geladen wird.
```
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:
```
var output;

var page = WinJS.UI.Pages.define("/html/scenario6.html", {
    ready: function (element, options) {
        output = element.querySelector('#output');
        WinJS.Resources.processAll(output); // Refetch string resources
        WinJS.Resources.addEventListener("contextchanged", refresh, false);
    }
    unload: function () { 
        WinJS.Resources.removeEventListener("contextchanged", refresh, false); 
    } 
});
```
3. Verweisen Sie in der HTML mit den Ressourcenbezeichnern ("greeting" und "farewell") aus den Ressourcendateien auf die Zeichenfolgenressourcen.
```
<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.
```
<div data-win-res="{attributes: {'aria-label' : 'String1'}}" >
```
5. Verweisen Sie auf die Zeichenfolgenressourcen in JavaScript.
```
var el = element.querySelector('#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
```
{
    "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
```
{
    "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.
Hinweis Nur Windows Store-Apps. 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.
Hinweis Nur Windows Phone Store-Apps. Testen Sie die App für die anderen Sprachen.
1. Öffnen Sie die Einstellungen am Telefon (oder Phone-Emulator).
2. Wählen Sie Sprache aus.
3. 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.
4. Wenn nicht alle drei Sprachen auf Ihrem Telefon verfügbar sind, fügen Sie die fehlenden Sprachen hinzu, indem Sie auf Sprachen hinzufügen tippen und die Sprachen dann zur Liste hinzufügen.
5. Um die App in einer anderen Sprache zu testen, tippen und halten Sie die Sprache in der Liste, und tippen Sie dann so lange auf Nach oben, bis sich die Sprache am Anfang der Liste befindet. Setzen Sie dann das Telefon zurück, und führen Sie die App aus.

Schnellstart: Übersetzen von UI-Ressourcen (HTML)

Anweisungen

Verwandte Themen

Zusätzliche Ressourcen