GBC 5.00.11 new features and upgrade notes

A summary of new features and changes in functionality introduced with Genero Browser Client (GBC) 5.00.11. Note the changes you may need to make when moving to this version of the GBC.

Important:

This page covers only those new features introduced with the Genero Browser Client version specified in the page title. Check prior new features pages if you migrate from an earlier version.

For a detailed list of GBC 5.00.11 changes, please refer to the list of fixes on our issue tracker.

Previous new features page: GBC 5.00.10 new features and upgrade notes.

New degraded mode alerts

The degraded mode feature provides information when certain functions of GBC might not work properly due to limitations in the environment or configuration.

Added a new theme variable theme-enable-degraded-mode-alerts to manage degraded mode alerts.


Variable	Type	Comment
$theme-enable-degraded-mode-alerts	Boolean	Default value is `TRUE`

For more information, go to Degraded mode alerts.

The headerPosition table style attribute

GBC supports the headerPosition presentation style attribute for setting the position of column headers (the name of the columns) relative to the field position. This attribute applies only to flipped table rendering.

Values can be "top" or "left" (default).

With headerPosition set to "top", the headerAlignment attribute can be used to display column titles on the top-left, top-center, or top-right of the field values.

With headerAlignment set to "auto", the column headers are placed above the field values, depending on the row rendering type:

With rowAspect set to "default", the headers will be right aligned.
With rowAspect set to "list", the headers will be left aligned.

Refer to the Table style attributes page in the Genero Business Development Language User Guide.

New visual feedback framework

There has been a review of the visual feedback shown to the user when they hover, click/touch, and focus field widgets and buttons in the GBC. The new visual feedback mechanism is an enhancement to help users better identify which widget or button they are using at any given time.

For field widgets, the changes are implemented as follows:

When hovering, a thick gray outline appears around the field.
When clicking or touching it, a thick, faded blue outline appears for a few moments.
And when focusing the field, a thick blue outline is present.

For buttons, the visual feedback is slightly different:

When hovering or clicking, the button appears slightly paler.
When focusing, a white border appears inside the button.

All of this is controllable by theme variables allowing you to change the color, opacity, and outline thickness. We advice you to use the new naming for the theme variables as described in What is changing in theme variables? and the CSS classes described in What is changing in CSS?. Your may need to review JavaScript in your existing customizations for changes to the ComboBoxWidget, widgets that use FieldWidgetBase, and so on, as described in What is changing in JavaScript?.

Concepts

"Outline" is new concept introduced with the visual feedback framework. It defines a line drawn outside the border of a widget or button to make it stand out when its state changes, such as when the user hovers, clicks/touches, and focuses on an element.

What is changing in theme variables?

Several theme variables were added to control the new visual feedback. The following widgets now have a set of variables that you can use to customize widget hover, focus, and active states:

Table 1 gives an example of the variables you can set for each widget.

Table 1. Variables for widget states
Variable	Comment
`gbc-WidgetName-hover-border-width`	Border width for widget when hovered
`gbc-WidgetName-focus-border-width`	Border width for widget when focused
`gbc-WidgetName-active-border-width`	Border width for widget when hovered
`gbc-WidgetName-hover-color`	Border color for widget when hovered
`gbc-WidgetName-focus-color`	Border color for widget when focused
`gbc-WidgetName-active-color`	Border color for widget when focused

New theme variables

New variables are introduced for setting theme state (hover, focus, active) for widgets.

Table 2. New theme state variables
Variable	Comment
theme-hover-border-width	Sets the hover outline width for widgets.
theme-active-border-width	Sets the active outline width for widgets.
theme-focus-border-width	Sets the focus outline width for widgets.
theme-hover-color	Sets the color applied when hovering over a widget.
theme-active-color	Sets the color applied when widget is active.
theme-focus-color	Sets the color applied when widget is focused.
theme-hover-opacity	Sets the widget hover color opacity (in percent).
theme-active-opacity	Sets the active color opacity (in percent).
theme-focus-opacity	Sets the focus color opacity (in percent).
theme-hover-color-on-color	Sets the color applied when hovering a widget with a colored background.
theme-active-color-on-color	Sets the color applied when a widget with a colored background is active.
theme-focus-color-on-color	Sets the color applied when a widget with a colored background has the focus.
theme-hover-opacity-on-color	Sets the hover color opacity (in percent) for widgets with a colored background.
theme-active-opacity-on-color	Sets the color opacity (in percent) for an active widget with a colored background.
theme-focus-opacity-on-color	Sets the color opacity (in percent) for a focused widget with a colored background.

New theme variables are available to handle aspect for the SliderWidget:

Table 3. New theme variables for SliderWidget
Variable	Comment
gbc-SliderWidget-thumb-size	Sets the size of the slider handle/thumb.
gbc-SliderWidget-track-thickness	Sets the thickness of the slider widget track.
gbc-SliderWidget-track-color	Sets the base color of the slider widget track.

A new theme variable is available to handle aspect for the RadioGroup widget:

Table 4. New theme variable for RadioGroup widget
Variable	Comment
`gbc-RadioGroupWidget-border-radius`	Sets the border radius of the RadioGroup widget.

The space between MenuWidget items is now managed by the gbc-MenuItemWidget-gap variable instead of setting a margin to the hosted widgets.

Table 5. New theme variable for MenuWidget
Variable	Comment
`gbc-MenuItemWidget-gap`	Sets the vertical space between menu items

What is changing in CSS?

The usage of the old CSS classes shown in Table 6 should be considered obsolete and be replaced with the new name.

Note:

Old classes are still valid, but they are deprecated and will be subject to disappear. If you have customizations, don't hesitate to change class names to fit the new ones.

The ButtonWidget hover effect has changed: It now uses an inset box-shadow instead of a background change. This may result in conflicts in some customizations.

Table 6. Renamed CSS classes
Old classes	Renamed to
`gbc_startMenuCommandText`	`gbc_StartMenuCommandWidget__text`
`gbc_startMenuGroupTitle`	`gbc_StartMenuGroupWidget__header`
`gbc_startMenuGroupTitleText`	`gbc_StartMenuGroupWidget__title`
`mt-button` (located in the ButtonWidget)	`gbc_ButtonWidget__root`
`textimage` (located in the ButtonWidget)	`gbc_ButtonWidget__container`
`gbc_imageContainer` (located in the ButtonWidget)	`gbc_ButtonWidget__imageContainer`
`mt-button-text` (located in the ButtonWidget)	`gbc_ButtonWidget__label`

Some new CSS classes were added to simplify customization.

Table 7. New CSS classes
Classes	Comment
`gbc_SliderWidget__input`	Sets the `<input type="range">` element of the Slider widget
`gbc_ComboBoxWidget__container`	Sets the `<div>` element that contain the input.
`gbc_ComboBoxWidget__button`	Sets the `<i>` element that opens the dropdown when clicking on it.
`gbc_ComboBoxWidget__input`	Sets the `<input type="text">` element that holds the value of the combobox and where the user can enter text when in `QueryEditable+CONSTRUCT` (Previously, this was an EditWidget created at runtime)

What is changing in JavaScript?

We recommend that you review your existing customizations for the following changes:

ComboBoxWidget no longer uses EditWidget: This is the most important change. ComboboxWidget now has its own input element. This may impact your existing customizations. But no feature is lost in this change.
The Input element of FieldWidgetBase is now stored in the initElement() method: If you have a widget that inherits from a FieldWidgetBase, it must now have an input element; even if it is not actually in use.
Cursor management is now in FieldWidgetBase. This can impact your existing custom widgets, mainly if they inherited from FieldWidgetBase.
The image container of the ButtonWidget is not generated dynamically anymore. It is now in the DOM element by default, only the image is added to it.
The updateAttribute method is added: This method allows you to add or remove the HTML attributes of widgets. The new method replaces the _setElementAttribute method, which is now deprecated.