WinJS – how to use resources and do some globalization

, , 3 Comments

Resources are really useful when you want to globalize your app to distribute it to the whole world !

It also can be useful when you need to store a label used on a lot of place in your application.

The .Net resources system is described all around the web and today we are going to explore a little the WinJS one.


In Metro app, the behavior is the same than in .NET, the values will be retrived depending of the current machine language.

Adding a resource file

The first thing is to add a folder for your resources. The folder name is what permits the resource engine to chose between langages. In our case, let’s create a ‘fr-FR’ folder. You can do it in place this folder anywhere in your solution, not necessary at the root of it.

Now, let’s add a resource file : choose an unique item name, then right-click on the previously created folder, choose “add an item” and select “Resources File (.resjson)”.

In WinJS, resources are JSON files easy to edit. Each value is represented by a key and the value itself. There is no editor like we used to in .NET :
[javascript]{
"greeting" : "Hello",
"_greeting.comment" : "A welcome greeting.",

}[/javascript]

If you want to add another language, just create another folder with the correct name and copy/paster the resource file in it with the same name.

Retrieve the value with Javascript

WinJS provide an helper class to retrieve the values : ResourceLoader.

The constructor takes as a param the name of the resource file. I played a lot with it and it seems that you don’t have to provide the full ‘folder path’ of the resource file. It means that for the previous example we create an instance of it like this :
[javascript]
var rS= new Windows.ApplicationModel.Resources.ResourceLoader("/strings");

//AND NOT :
//new Windows.ApplicationModel.Resources.ResourceLoader("/i18n/strings");
[/javascript]

Once you have an instance of it, you use the getString method providing the key of the seeked value as a param :
[javascript]
var theValue= rS.getString("greeting");
[/javascript]

Keys are string value and so you can construct them at runtime very easily…

Retrieve the value in the HTML view

WinJS comes with an automatic way to push the values from the resources files directly to the HTML controls’ properties.

You have to use the data-win-res attribute and define the resource key to use on each control.
As this time, you can only use textContent specifier.
Here is an example retrieving the value of ‘greeting’ in the resource file and pushing it as the inner text of the “span” element.
[html]
<span data-win-res="{textContent: ‘greeting’}">
[/html]

Once the HTML element defined, you have to tell the resource engine to process the HTML element by using the WinJS.Resources.processAll. This another processAll method but in an another namespace. As a param you provide the element to process. Its child elements will be processed too. If you provide none, the whole document is processed.
You so have to do this each time you load an element.

In the MSDN example, it is done once when the app is loaded and I think this can be a good practice :
[javascript]
WinJS.Application.onloaded = function(){
WinJS.Resources.processAll();
}[/javascript]

Links to read

 

3 Responses

  1. anthymecaillard

    13/03/2012 10 h 51 min

    Hello ! T’es devenu un aficionados du js !
    Finallement tu préfères le dev WinJS ou XAML metro ?

Comments are closed.