Schnellstart: Verwenden von Zeichenfolgenressourcen (HTML)

[ 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 ]

Platzieren Sie Zeichenfolgenressourcen in Ressourcendateien, und verweisen Sie von Ihrem JavaScript-Code oder HTML-Markup auf diese Zeichenfolgen.

Anweisungen

  1. Fügen Sie Zeichenfolgen in Ressourcendateien ein und nicht direkt in den Code oder das Markup.
    1. Öffnen Sie package.appxmanifest in Visual Studio, wählen Sie die Registerkarte Anwendung aus, und legen Sie die Standardsprache auf "en-US" fest. (Wenn dies eine universelle App ist, müssen Sie die Aktion für jede package.appxmanifest-Datei in der Projektmappe 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 App bereitgestellten Sprachressourcen übereinstimmen. Weitere Informationen finden Sie unter 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.

  2. Hinzufügen von Zeichenfolgenressourcen-Bezeichnern im Code und im Markup
    1. Fügen Sie von der HTML-Datei Verweise auf die JavaScript-Datei hinzu, sofern noch keine vorhanden sind. (Von Standardvorlagen sollten die Verweise immer erzeugt werden. Der Name der CSS-Standarddatei kann je nach verwendeter Vorlage variieren, was für dieses Beispiel jedoch keine Rolle spielt.)

      <!-- WinJS references -->
      <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 die HTML-Seite geladen wird.

      WinJS.Application.onloaded = function(){
          WinJS.Resources.processAll();
      }
      

      Wenn zusätzlicher HTML-Code in ein WinJS.UI.Pages.PageControl-Objekt geladen wird, rufen Sie WinJS.Resources.processAll(element) in der IPageControlMembers.ready-Methode der Seitensteuerung auf. Dabei entspricht element dem zu ladenden HTML-Element (und den untergeordneten Elementen). 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 im HTML-Code von den Ressourcendateien mithilfe von Ressourcenbezeichnern (greeting und farewell) auf die Zeichenfolgenressourcen, indem Sie data-win-res attribute verwenden.

      <h2><span data-win-res="{textContent: 'greeting'}"></span></h2>
      <h2><span data-win-res="{textContent: 'farewell'}"></span></h2>
      
    4. Hier sehen Sie, wie Sie in JavaScript auf Zeichenfolgenressourcen verweisen.

      var el = document.getElementById('header');
      var res = WinJS.Resources.getString('greeting');
      el.textContent = res.value;
      el.setAttribute('lang', res.lang);
      

Hinweise und Tipps

Das allgemeine Muster von data-win-res attribute für den HTML-Ersatz ist data-win-res="{propertyname1**: 'resource ID', propertyname2: 'resource ID2'}"**.

Wenn die Ressourcenzeichenfolge kein Markup enthält und als Nur-Text eingefügt werden kann, binden Sie die Ressource anstelle von innerHTML an die textContent-Eigenschaft. Die textContent-Eigenschaft kann innerhalb des DOM wesentlich schneller ersetzt werden als innerHTML.

Sie können auch attributes: als Eigenschaftsnamen verwenden. In diesem Fall entspricht der Wert nicht dem Namen der benannten Ressource, sondern einem Satz, bei dem der erste Wert der Attributname und der zweite Wert der benannten Ressource entspricht, die Sie als Wert verwenden möchten. Beispiel:<div data-win-res="{attributes: {'aria-label' : 'Button1LabelForAria'}}" > ...</div>. Ein Beispiel sehen Sie in Szenario 9 von Anwendungsressourcen und Lokalisierung – Beispiel.

Weitere Details zum Hinzufügen von Lokalisierung und weiteren Sprachen finden Sie unter Schnellstart: Übersetzen von UI-Ressourcen.

Verwandte Themen

So wird's gemacht: Benennen von Ressourcen mit Qualifizierern

So wird's gemacht: Laden von Zeichenfolgenressourcen

WinJS.Resources.processAll

Schnellstart: Übersetzen von UI-Ressourcen

Anwendungsressourcen und Lokalisierung – Beispiel

Eigenschaftenseiten, JavaScript

Das BCP-47-Sprachtag