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
Use widgets

You can use widgets to customize your user interface.

To understand the basics about widgets, see the Widgets reference page.

This is a general procedure to follow when customizing your user interface. For specific examples of widget customization, see:

Identify the widget you want to modify

Most UI elements are widgets that use the same name as in the AUI tree, such as the EditWidget, or the TableWidget, see API reference. If you are not sure which widget to modify, you can use browser developer tools to inspect the elements of a GBC application interface and identify the widget. Browser developer tools are accessed by pressing the F12 key.

Modify the stylesheets (.scss)

  • Add entries directly in customization.scss, or create additional stylesheet (.scss) files. Place new stylesheet files in the project's sass directory.
  • Reference any added stylesheet (.scss) files in the customization.scss file. For example, if the stylesheet is MyHeader.scss, you would add the following to customization.scss:
@import "MyHeader";

If additional customization is needed, extend the widget

  • Create the JavaScript (.js) and template (.tpl.html) files needed to extend the widget. By default, the JavaScript and template files share the same name. Save these files in the project's js directory.
  • If your template file uses a different name, or if you want to reuse an existing template file, specify the template file in the JavaScript file with __templateName. For example:
__name: xxx,
__templateName: "yyy"

Compile 

$ gbc build --customization customization-project-dir

Test

Test your customization.