Customizing your application using widgets

The Genero Browser Client (GBC) includes built-in widgets that define the user interface. When a built-in widget does not provide the required functionality, developers can create, extend, or override widgets to meet specific needs.

You usually start with an existing widget (such as the EditWidget or ButtonWidget) and extend its functionality. For example, you might want to include a custom color picker. You could start with the ButtonWidget and add code to display a color wheel that allows user selection.

Creating or extending GBC widgets requires familiarity with JavaScript.

Required files

Each widget is defined by the following:
  • A JavaScript (.js) file managing the widget creation, behavior, and listeners.
  • A template HTML (.tpl.html) file containing the HTML code structure of the widget. The template file determines whether your widget is:
    • A simple widget, which defines elements that implement basic functions; for example, an EditWidget or LabelWidget.
    • A container widget, which provides a placeholder for child widgets; for example, a MenuWidget.
  • A sass (.scss) file that serves as the widget's style sheet.

Some widgets require a library. The library must be in the customization directory under resources/lib/, and must be referenced by the config.json file.

Important:

Be careful when adding libraries to the GBC. If the library has access to GBC context, it might behave in an unexpected way. If the library is not optimized, it might cause performances issues.

Resources, such as images, may also be included with the widget.

Source files

Explore the source files to understand how the front-end is implemented. The default GBC stores the source files for its built-in widgets in the gbc-project-dir/src directory.

Warning:

Do not modify the original source widget files.

Overriding and extending widgets

In terms of widget development, it's important to distinguish between two key techniques:

  • Overriding: replaces the existing widget.
  • Extending: creates a new widget based on an existing widget.

Both techniques are essential for customizing and enhancing widgets, enabling you to create more flexible and powerful applications.

Overriding a widget allows you to replace the default functionality of an existing widget with your custom implementation. For more information, go to Widget overrides.

Extending a widget allows you to create a new version of an existing widget while retaining its functionality and adding new features. For more information, go to Extending a widget.