Quickstart: Using string resources (HTML)

Article
01/11/2016

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

Put string resources into resource files, and reference those strings from your JavaScript code or HTML markup.

Instructions

Put strings into resource files, instead of putting them directly in code or markup.
1. Open package.appxmanifest in Visual Studio, select the Application tab, and set your default language to "en-US". (If this is a universal app, do this for each package.appxmanifest in your solution.)Note This specifies the default language for the project. The default language resources are used if the user's preferred language or display languages do not match the language resources provided in the app. For more info, see Property Pages, JavaScript.
2. Create a folder to contain the resource files.
  1. In the Solution Explorer, right-click the project (the Shared project if this is a universal app) and select Add > New Folder.
  2. Name the new folder "strings".
  3. If the new folder is not visible in Solution Explorer, select Project > Show All Files from the Microsoft Visual Studio menu while the project is still selected.
3. Create a sub-folder and a resource file for English (United States).
  1. Right-click the strings folder and add a new folder beneath it. Name it "en-US". The resource file is placed in a folder that has been named for the BCP-47 language tag. See How to name resources using qualifiers for details on the language qualifier and a list of common language tags.
  2. Right-click the en-US folder and select Add > New Item….
  3. Select Resources File (.resjson).
  4. Click Add. This adds a resource file with the default name resources.rejson. We recommend that you use this default filename. Apps can partition their resources into other files, but you must be careful to refer to them correctly (see How to load string resources).
  5. The new file contains default content. Replace the content with the following (which may be very similar to the default):
    
    strings/en-US/resources.resjson
```
{
    "greeting"              : "Hello",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Goodbye",
    "_farewell.comment"     : "A goodbye."
}
```
    This is strict JavaScript Object Notation (JSON) syntax where a comma must be placed after each name/value pair, except the last one. In this sample, greeting and farewell identify the strings that are to be displayed. The other pairs (_greeting.comment and _farewell.comment) are comments that describe the strings. The comments are a good place to provide any special instructions to translators who localize the strings to other languages.

Add string resource identifiers to code and markup.

Add references to the JavaScript file from your HTML file, if they aren't already there. (Default templates should always produce these; the name of the default CSS file can vary depending on which template you're using, but that doesn't matter for purposes of this example.)
```

<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>
```

In the JavaScript code that accompanies your HTML file, call the WinJS.Resources.processAll function when your HTML page is loaded.

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

If additional HTML is loaded into a WinJS.UI.Pages.PageControl object, call WinJS.Resources.processAll(element) in the page control's IPageControlMembers.ready method, where element is the HTML element (and its child elements) being loaded. This example is based on scenario 6 of the Application resources and localization sample:

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); 
    } 
});

In the HTML, refer to the string resources using the resource identifiers (greeting and farewell) from the resource files, using the data-win-res attribute.
```
<h2><span data-win-res="{textContent: 'greeting'}"></span></h2>
<h2><span data-win-res="{textContent: 'farewell'}"></span></h2>
```

Here's how to refer to string resources in JavaScript.

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

Notes and tips

The general pattern of the data-win-res attribute for HTML replacement is data-win-res="{propertyname1: 'resource ID', propertyname2: 'resource ID2'}".

If the resource string does not contain any markup and can be inserted as plain text, then bind the resource to the textContent property instead of innerHTML. The textContent property is much faster to replace within the DOM than is innerHTML.

You also can use attributes: as the property name. In this case the value is not the named resource name, but is a set where the first value is the attribute name, the second value is the named resource you want to use as the value. For example:<div data-win-res="{attributes: {'aria-label' : 'Button1LabelForAria'}}" > ...</div>. You can see an example of this in scenario 9 of the Application resources and localization sample.

For more details on adding additional languages and localization, see Quickstart: Translating UI resources.

How to name resources using qualifiers

How to load string resources

WinJS.Resources.processAll

Quickstart: Translating UI resources

Application resources and localization sample

Property Pages, JavaScript

The BCP-47 language tag

Quickstart: Using string resources (HTML)

Instructions

Notes and tips

Related topics

Additional resources