In this procedure, you will use a custom header widget to display customized text in French on the header bar when the interface language is set for French.

Copy the necessary files from the sample customization.

Copy the following js and tpl.html files from the gbc-project-dir/customization/sample/js/ directory to your gbc-project-dir/customization/customization-project-dir/js directory:

• MyHeaderBarWidget.js
• MyHeaderBarWidget.tpl.html
• MyMainContainerWidget.js
• MyMainContainerWidget.tpl.html

Copy this scss file from the gbc-project-dir/customization/sample/sass/ directory to your gbc-project-dir/customization/customization-project-dir/sass directory:

• MyMainContainerWidget.scss

Copy this locale file from the gbc-project-dir/customization/sample/locales/ directory to your gbc-project-dir/customization/customization-project-dir/locales directory:

• fr-FR.json

Edit the locale files

The message displayed in the header bar is based on the value of the currentTitle variable in the language-specific .json files, located in the locales directory of the customization project. To update the message, edit each of the language-specific files.

For example, open the gbc-project-dir/customization/customization-project-dir/locales/fr-FR.json file with a text editor.

The example shows the title message in fr-FR.json:

// in fr-FR.json
{

  "mycusto":{
    "window":{
      "currentTitle": "Titre de la fenêtre courante"
    }
  }
}

Update customization.scss

Open the gbc-project-dir/customization/customization-project-dir/sass/customization.scss file for editing.

Import the MyMainContainerWidget.scss file by copying and pasting the code shown in the example. Save your changes.

//@import "sampleItem";
//@import "sampleContainer";
@import "MyMainContainerWidget";

Rebuild using gbc build.

$ gbc build --customization <customization_project_dir>

Test

Test the translation text is displayed as expected by closing and reopening your application.

By default, the GBC language defaults to the browser language but you can set the language from the GBC interface.

1. Select the Settings menu from the toolbar.

2. Choose the language "Français" from the Interface language list in the Stored Settings configuration window that pops up.

   

3. In the application header bar you see the text "Titre de la fenêtre courante" is displayed.