GBC 4.01
Customization
How customization works
Planning for the customization Getting the customization to the user
Set up your GBC build environment Create a customization project Rebuild the GBC
Create a runtime package Deploy on GAS Deploy on JGAS Change the version customization suffix
Manage themes
Add a theme part Add a theme Modify a theme Delete a theme
Replace an image
Change the favicon Change background image for empty tabbed container
Use theme variables
Display or hide the sidebar Customize the chromebar Change checkbox icons Display the Genero context menu Change relog prompt
Use style sheets
Center progress indicator icon Center file loading icon
Use widgets
Add header image Add header image using style class Add header text Add footer text Change file loading icon Redirect application end Extend the MainContainerWidget
Internationalize your app
Add localized text Configure right-to-left languages Customize translation text Default encoding
Migrating customizations
Add localized text

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.

    Settings Français

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

    titre Français