Applying Internationalization

To successfully localize your apps and services, you need to internationalize them first.

Internationalization mainly carries out the following two tasks: marking text strings for translation and formatting locale-sensitive data. Text strings of your apps and services need to be marked for translation. Formatting locale-sensitive data, such as dates, times, numbers or currency, for different locales and cultural conventions are also required. These are done by using an external internationalization library for each supported programming language.

Internationalization in webOS OSE is available for different programming languages. See Overview for the list of supported programming languages.

Note
This page only provides guides for marking strings for translation. For more information about formatting locale-sensitive data, please refer to the user guide of the provided internationalization library for each programming language.

JavaScript

For web apps developed in JavaScript, use iLib to internationalize your code.

Note
For more information about iLib, refer to the iLib documentation.

Enact Apps

Enact framework offers the $L component as part of its i18n library, which provides functions to map to translated strings.

Example for $L usage
`import $L, {toIString} from '@enact/i18n/$L'; $L('Close'); // => "Close" in the current locale toIString('Close'); // => an ilib IString representing "Close" in the current locale`

Note
For more information about the $L component, refer to the Enact documentation.

Non-Enact Apps

For web apps that do not utilize Enact framework, use the getString() API of ResBundle feature in iLib.

Making and Importing Your Own iLib

First, make your own iLib build version and import it into your app as follows:

Extract iLib features in your app.
1. iLib-js provides ilib-scanner. This utility generates webpack metafiles, and the metafiles include only those iLib classes that your code actually needs.
  Example for executing ilib-scanner
  $ npm install ilib-scanner $ ilib-scanner [options] outputFile # example $ ilib-scanner --assembly=assembled --locales=ko-KR,es-ES ilib-include.js
2. After running ilib-scanner, webpack metafiles (ilib-include.js, webpack.config.js) will be created.
Generate a iLib file for your app.
1. With the metafiles from step 1-b, run webpack to get the iLib output file properly. (Webpack must be installed in your machine first.)
  Also in order to generate the iLib file, ilib-webpack-plugin is required as a dependent package.
  Example for executing webpack
  $ npm install webpack $ npm install ilib-webpack-plugin $ webpack
2. After running webpack, the iLib file (ilib.js) is generated in the current directory.

Example for executing ilib-scanner
`$ npm install ilib-scanner $ ilib-scanner [options] outputFile # example $ ilib-scanner --assembly=assembled --locales=ko-KR,es-ES ilib-include.js`

Example for executing webpack
`$ npm install webpack $ npm install ilib-webpack-plugin $ webpack`

Convert translation resources.

iLib-js provides ilib-resbundler that helps to convert JSON files into JS files.

Example for executing ilib-resbundler

Example for executing ilib-resbundler
`$ npm install ilib-resbundler $ ilib-resbundler [options] # example 1) ilib-resbundler --assembly=assembled --resDir=resources --outDir=outResDir 2) ilib-resbundler --assembly=dynamic --resDir=resources --outDir=outResDir --locales=ko-KR,es-ES`

$ npm install ilib-resbundler
$ ilib-resbundler [options]

# example
1) ilib-resbundler --assembly=assembled --resDir=resources --outDir=outResDir
2) ilib-resbundler --assembly=dynamic --resDir=resources --outDir=outResDir --locales=ko-KR,es-ES

In the above example:

example 1) Output file (ilib-translations.js) is created in ./outResDir.
example 2) Output files (ko-KR.js and es-ES.js) are created in ./outResDir.

Import output files from the step 2 and 3 into your app.

Note
For more details on how it works, visit our sample app repository.

Example for index.html

Example for index.html
`<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>iLib Test Sample</title> <meta http-equiv="Content-Type" content="text/html; charset=utf8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <script src="./ilib.js"></script> <script src="./outResDir/ko-KR.js"></script> <script src="./outResDir/es-ES.js"></script> <script src="./lib/localize.js"></script> </head> .....`

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>iLib Test Sample</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <script src="./ilib.js"></script>
    <script src="./outResDir/ko-KR.js"></script>
    <script src="./outResDir/es-ES.js"></script>
    <script src="./lib/localize.js"></script>
    </head>
.....

Using the ResBundle.getString() method

After making and importing iLib, use the ResBundle.getString() method of iLib as follows:

Example for a non-Enact web app
`var rb = new ResBundle({locale: "en-US"}); var str = rb.getString("String 1"); // str is iLib string object var jsStr = str.toString(); // jsStr is js string object`

C++/C

If you are developing apps or services in C++/C, use libwebosi18n to internationalize your code.

The following shows an example which uses the getLocString() API of libwebosi18n in C++ and C:

Using getLocString() in C++

Using getLocString() in C++
`#include <webosi18n.h> std::string locale = "en-US"; const std::string file = "cppstrings.json"; const std::string resources_path = "/usr/share/localization/samplecpp"; ResBundle* resBundle = new ResBundle(locale, file, resources_path); resBundle->getLocString("String 1");`

#include <webosi18n.h>

std::string locale = "en-US";
const std::string file = "cppstrings.json";
const std::string resources_path = "/usr/share/localization/samplecpp";
ResBundle* resBundle = new ResBundle(locale, file, resources_path);

resBundle->getLocString("String 1");

Using getLocString() in C

Using getLocString() in C
`#include <webosi18n_C.h> const char* locale = "en-US"; const char* file = "cstrings.json"; const char* resources_path = "/usr/share/localization/sample_c"; ResBundleC* resBundle = resBundle_createWithRootPath(locale, file, resources_path); resBundle_getLocString(resBundle, "String 1");`

#include <webosi18n_C.h>

const char* locale = "en-US";
const char* file = "cstrings.json";
const char* resources_path = "/usr/share/localization/sample_c";
ResBundleC* resBundle = resBundle_createWithRootPath(locale, file, resources_path);

resBundle_getLocString(resBundle, "String 1");

Qt/QML

For Qt/QML apps, follow Qt’s internationalization guideline. For details, refer to the Qt documentation.