How to use Dojo i18n in the SIMPLEST manner possible - internationalization

Question

I'm new to Dojo and i18n for that matter. I am looking to convert a couple of works to different languages in my app. I've read through a few articles and to be honest, I feel like a LOT of information is thrown at me to digest, and I'm struggling with it. Would someone be able to provide me with the simplest way I can possibly do this? Let's say I want to change the word 'Hello'. In my head it would be something like:
Dojo library ready for use
I define String 'hello' in my javascript file. It has the placeholder text of "hello"
I specify in my HTML that I want my page to be
"string specified here to display hello in a different language"
So that's as much as I can assimilate from my limited knowledge. How do I essentially get that sort of setup to work? I assume I need to require i18n on my page, but exactly how I execute this is still to be determined.
Any help would be super. Please bear in mind that I have a limited knowledge with your answer if at all possible, thanks!

Answer 1

The nls folder is normally used to store your translation strings and is usually a subdirectory next to the widget using it.
ie. If your widget is stored in myWidget.js within a folder called app, then your translation strings for myWidget.js are stored in a file with the same name (myWidget.js) in the directory app/nls.
This is just convention but is probably worth following as it makes your directory structure logical.
Here is an example of the myWidget.js widget:
define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/i18n!./nls/myWidget"
], function(
declare, _widget, _templated, strings, domAttr
){
"use strict";
var construct = declare([_widget, _templated], {
"i18n": strings,
"templateString": "<div>${i18n.hello}</div>"
});
return construct;
});
This is a very simple widget that creates a <div> (see templateString property) on the screen. The <div> should contain the text loaded from the translation file and assigned to the hello property.
The widget will need nls directory creating in the same directory as myWidget.js. In the nls directory you create another javascript file called myWidget.js (ie. same name as the parent). This file is you root translation file and looks like this:
define({
root: ({
"hello": "Hello"
})
});
Here you have assigned the string, "Hello" to the property hello. This is not very useful as no translations have been supplied. If you wanted to have a Norwegian translation then you would modify it like this:
define({
root: ({
"hello": "Hello"
}) ,
"no": true
});
Here you are saying that as well as the root translation strings you also have a Norwegian translation. You will then need to create your Norwegian translation file and place it in a subdirectory of nls called no. So you create another file called myWidget.js and place it in nls/no:
define({
"hello": "Hei"
});
The format for the translation file is slightly different to the root file. The default strings are used, unless a translation is available for the given string in the current browser language (ie. you do not need to translate every string, just the ones you want translating).
See the Dojo tutorial for internationalization for more help on this subject.
See sample project for the above code on Bitbucket
Loading translation-strings outside of widget:
The above examples show how to load translation text for a widget following the normal conventions. You can load any set of strings you want in any widget or any require statement. The dojo/i18n class is able to load any set of strings you specify.
eg:
require([
"dojo/i18n!<PATH TO TRANSLATION ROOT FILE YOU WANT TO LOAD>"
], function(string) {
// translation-string are stored in the 'strings' variable for the
// current browser language
});