April27

Localizing a Windows 8 Metro App using HTML and Javascript

 

I think technically this is now called Internationalization, but I still think of it as localization.

I needed to test a localization process for project research and thought I would write it down for everyone.  This is going to be a real quick blast through, it only took me about 30 minutes to build this (and most of it was taking screen shots!).

New HTML project

Create a new HTML blank project, and create a strings folder, and one per language like this screenshot.

image

The language strings folders should be named after the locale you want them to match.

Edit language files

Each resjson is a simple text file in JSON format.

{
"ContentGettingStarted_Text" : "Getting Started",
"ContentGettingStarted_Text.comment" : "used as title for getting started section",

"ContentTutorialsDataHub_Text" : "Using SQL Azure as a Data Hub",

"ContentTutorialsGettingStarted_Text" : "Getting Started with SQL Azure",

"ContentTutorialsImportingData_Text" : "Importing Data into SQL Azure",

"ContentTutorialsSqlAzureSamples_Text" : "SQL Azure Samples"
}

Add Javascript loader

Add the following line to your default javascript.  This is what allows the data binding to work correctly, it will inspect the users current locale and load the correct resource file.

// This is required to get the WinJS runtime to do the string replacement through javascript
WinJS.Application.onloaded = function () {
WinJS.Resources.processAll();
};
 

Modify your HTML

The HTML body needs to be modified to use the strings.  This is the one sort of awkward part to me. There is no intellisense to match up, and you are pretty much typing the whole key over and over.
 
<body>
<h1>Resource Project</h1>
<h2>
<span data-win-res="{textContent: 'ContentGettingStarted_Text'}"></span>
</h2>
<h2>
<span data-win-res="{textContent: 'ContentTutorialsDataHub_Text'}"></span>
</h2>
<p data-win-res="{textContent: 'ContentTutorialsGettingStarted_Text'}"></p>
</body>

The data-win-res is the html extension that the javascript loader above will be using the to the string replacement.  You can specify more than one value, they are simple key : value, statements and replacement will be done.

 

Testing your app

You must use the control panel to change your machines language support.  Click on the Add a language link to add additional languages.  Put the primary language you want to support at the top.

image

In my case I added German and French (english was installed by default).  Then I changed them to each be the primary language for testing.

Seeing the output

Choose one language and run the app to see the results.

German Language

image

French Language

image

English Language

image

Done

Simple, right?  Well, that works well enough for a simple app. 

But I wonder about the complexity of mapping all those strings to their json key value.  I would probably create a function to load them from an id.  This would let you have intellisense, and the developers not have to switch back and forth all the time to see what the spelling was for the key.

Sample Project

I have put a sample project on my varmints drive (should be ok from corpnet).  But I don’t promise how long I will keep it there. Smile

Updating to hopefully get the images back…

Localization HTML Windows 8 Sample App