Customize translation text

This procedure shows you how custom translation text is provided in a locale file and referenced in the HTML code in the widget template file.

About this task

The Genero Browser Client (GBC) front-end provides support for language selection based on locale. To support multiple languages, the GBC instructs the DVM at runtime to transcode the application user interface (AUI) tree from the local Genero BDL encoding used in sources to UTF-8 automatically. Thus the GBC is able to display correctly any characters used by Genero BDL. For more details, see Localization in the Genero Business Development Language User Guide.

You can use translation texts to provide localization mainly in the following GBC front-end components:

  • Welcome Page
  • Ending Page
  • Calendar Widget
  • Contextual Menu For Tables
  • File Transfer Dialog

You will find the locale files in gbc-project-dir/src/locales/xx-YY.json, where xx-YY follows the standard localization code used for languages, for example, en-US, de-DE, fr-FR.

Locale files are json files which have a typical json structure of keys and values in double quotes separated by colons, ":". Translation key-value pairs are separated by commas. A sample from the US English locale file is shown.

// in en-US.json
{
  "gwc": {
    "lngName" : "English",
    "app": {
    
    "waiting": "Waiting for connection",
    "restart": "Restart the same application",
    "run": "Run"
    }
  }
}
  1. View the translation keys in the template file
    1. Open gbc-project-dir/src/js/base/widget/widgets/application/SessionEndWidget.tpl.html with a text editor.
    2. At the end of the page, find the default text for the ending page component: 
      {
  <li class="mt-action restartApp from-ua hidden">
      <a title="Restart the app">
        <i class="zmdi zmdi-repeat"></i> <span class="sessionVMLog" data-i18n="gwc.app.restart">Restart the same application</span>
      </a>
  </li>
}

    The default text, "Restart the same application", may be replaced with that referenced by the gwc.app.restart key in the locale file. If the key is not found, the GBC falls back to the default locale, "en-US". If the entry is still not found, then the translation value will be the key name.

    Note:

    Internationalization is done by the GBC JavaScript function i18next.t. This function takes the localization key ("gwc.app.restart") as argument and returns the translation text.

  2. Set the language from the GBC interface.

    By default, the GBC language defaults to the browser language but the user can change the interface language from within the user interface.

    1. Select the Settings menu from the toolbar.
      Figure: Settings icon


    2. Choose the language from the Interface language list .
      Figure: Settings configuration


    The name of the language, "Français", that you see displayed is defined in the locale file by the translation key gwc.lngName, for example, as in the fr-FR.json:

    {
"gwc": {
  "lngName" : "Français",
 "app": {
    "ending": {
      "title": "L'application s'est arrêtée",
      "session": "ID de session"
    } 

  }
} 
}