Multilingual translation of JavaScript (Cordova, Web) applications

Overview

You can use the IBM Mobile Foundation framework to add multilingual translation in JavaScript (Cordova, Web) applications into other languages.
Items that can be translated are application strings and system messages.

JSON object structure example

Strings stored in the Messages JSON object can be referenced in two ways in the application logic:

As a JavaScript object property:

Messages.headerText

As an ID of an HTML element with class="translate":

<h1id="headerText"class="translate"></h1>

Translating system messages

It is also possible to translate the system messages that the application displays, for example “Internet connection is not available” or “Invalid username or password”. System messages are stored in the WL.ClientMessages object.

Note: Override system messages at a global JavaScript level because some parts of the code are executed only after the application has successfully initialized.

Web applications

You can find a full list of system messages in the messages.json file, located in the [project root folder]\node_modules\ibm-mfp-web-sdk\lib\messages\ folder.

Cordova applications

You can find a full list of system messages in the messages.json file, located inside the generated project.

Update the GUI components with the new strings. You can perform more tasks, such as setting the text direction for right-to-left languages such as Hebrew or Arabic. Each time that an element is updated, it is updated with different strings according to the active language.

Detecting the device locale and language

To detect the language used by the device or browser:

Web applications

Detect the browser language using navigator.language or any number of available frameworks and solutins.

Cordova applications

Detect the locale and the language of the device using the Cordova’s globalization plug-in: cordova-plugin-globalization.
The globalization plug-in is auto-installed when adding a platform to the Cordova application.

Use the navigator.globalization.getLocaleName and navigator.globalization.getPreferredLanguage functions to detect the locale and language respectively.