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
How customization works

Before getting into the technical details behind the customization process, it is good to have an understanding of the theory.

The GBC contains these components, as illustrated in Figure 1:

  • Projects
  • Customizations
  • Themes
  • Theme parts

Relationship of project, customization, and themes Figure 1: Relationship of project, customization, and themes

These components contain the files that do the work of the customization: the json files, the scss files, and the javascript files. See Figure 2 for the directory structure.

Directory structure showing project, customization, and themes

Figure 2: Directories for customization and themes

At the root is the GBC project directory. In most cases, your team has only one GBC project directory for each version of the GBC project package that they download. A project directory is referred to as the gbc-project-dir.

Within the project directory, your team can add customization projects. A customization project contains any of the javascript and scss files that you create to customize the widgets. Each customization that you may add has its own customization directory, which we refer to as a customization-project-dir.

Within a customization project, you can define multiple themes. Themes allow the user to change the look-and-feel while remaining within the same customization. For example, if you keep the themes that are provided by default with the customization package, the user can switch between a default theme and a high contrast theme, the latter providing them with an interface with larger fonts. Other possible themes could include providing with a light interface and a dark interface, or providing different color options.

A theme is comprised of one or more theme parts. A theme part can define theme variables, resources (such as images), and conditions (such as a check on whether the client is desktop or mobile). You combine theme parts to create a theme - think of them as Lego building blocks that you snap together.

The theme parts may be local (contained within the customization folder) or global (for theme parts that you may want to use across multiple customizations within the project).

TIP: To ease migration, it is recommended that you use local theme parts.

The GBC displays the application according to the customization and theme selected.