Add i18n support

Currently, in the Demo widget, there are some hard-coded English language strings:

  • "I am a demo widget."
  • "This is configurable."

To internationalize the UI, isolate these strings in a separate language-specific resource file and reference the strings by their identity. Dojo provides complete i18n support, which is sensitive to user settings in the browser. For example, if Chinese translation is defined, and a user visits your web application with their browser language code set to zh-cn, they automatically get the Chinese UI. For more information, see http://dojotoolkit.org/documentation/tutorials/1.8/i18n/.

The first step is to abstract the user interface strings to the default resource file. The user determines the translation of these strings.

Open the nls/strings.js file with a text editor. Add the following:

define({
    root:{
        label1: "I am a demo widget.",
        label2: "This is configurable."
    },
    "zh-cn": true    
});

Create a folder named zh-cn and create a strings.js file in it. The following is the content:

define({
    label1 : "我是一个演示widget。",
    label2 : "这里可以配置。"
});

Apply the changes to the template by removing the hard-coded English language and replacing it with markers:

<div>
    <div>${nls.label1}.</div>
    <div>${nls.label2}.[${config.configText}]</div>
</div>

Reload your application. This time, add a URL parameter, locale=zh-cn, or you can change the browser's locale configuration to view the change.

Localization

To support specific languages, create folders under the nls folder, named by the language code (for example, en, fr, ru). Copy the strings.js file to that folder and update the content to reflect the language for that code.

To internationalize the widget display name, use _widgetLabel as the string key in strings.js:

define({
    root:{
        label1: "I am a demo widget.",
        label2: "This is configurable.",
        _widgetLabel: "Demo"
    },
    "zh-cn": true    
});

There are some languages that read from right to left (RTL). For more information, see Support RTL.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.