Internationalising an application

This page provides instructions on internationalising and localising a Caplin Trader 5 application.

For more information on the terms used in this page, see Internationalisation and localisation on Wikipedia.

Install required Caplin packages

To install the packages that provide Caplin’s internationalisation functionality, follow the steps below:

  1. Run the command below from the root directory of your Caplin Trader 5 application to install the br package and its dependencies:

    $ yarn add file:../../packages-caplin/br
Some dependencies of the br package include Caplin alias definitions. If Webpack throws an alias resolution error during build, see Troubleshooting build issues.

Create localisation resource files

Create a resource file in your application for each language your app will be localised to. Name the file _resources/<lang_code>.properties, where <lang_code> is the international two-letter code for the language. At the very least, create a resource file for the main language of your application; new resource files can be added later.

In each file, specify a list of tokens and values in the format below:

<token>=<localised_text>

For example, files for English and German might contain the following content:

  • file _resources/en.properties:

    greeting.morning=Good Morning
greeting.evening=Good Evening

  • file _resources/de.properties:

    greeting.morning=Guten Morgan
greeting.evening=Guten Abend

Replace strings in your application with i18n tokens

Caplin’s /br/I18n/i18n class handles internationalisation in Caplin Trader. Replace all text strings in your application’s user interface with calls to i18n(token).

Edit each module that requires internationalisation, and make the following changes:

  1. Import the localisation resource files. For example, to import the English and German resources files created above, use the import statements below:

    import "./_resources/en.properties";
import "./_resources/de.properties";

  2. Import the /br/I18n/i18n class:

    import i18n from "br/I18n";

  3. Replace all user-facing text strings with calls to i18n(token). For example, to localise a morning greeting, you might use the code below:

    var greeting = i18n('greeting.morning');
    The locale used to resolve the token passed to i18n is set in your application’s index page (see next section).

Include i18n resources in your application’s index page

Edit your application’s index page and make the following changes:

  1. Insert the following JavaScript above where the bundle-dev.js file is included:

    <script>
  window.$_brjsI18nProperties = {};
  window.$_brjsI18nUseLocale = navigator.language === "en"
    || navigator.language === "de" ? navigator.language : "en";
</script>

  2. Include the i18n-dev.js bundle above where the bundle-dev.js file is included:

    <script src="static/i18n-dev.js"></script>