GBC 5.01.05 new features and upgrade notes
A summary of new features and changes in functionality introduced with Genero Browser Client (GBC) 5.01.05. Note the changes you may need to make when moving to this version of the GBC.
Release 5.01.05 includes updates to the UX/UI that may affect the user experience. We recommend reviewing and testing the release to assess any impact before deploying. If you identify issues that require you to stay on version 5.01.04, please contact your support center to request interim fixes.
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.01.05 changes, please refer to the list of fixes on our issue tracker.
Previous new features page: GBC 5.01.04 new features and upgrade notes.
UX-UI improvements
Starting with the release of version 5.01.05, the GBC main interface has undergone significant rework and improvements to enhance user experience and align with modern best practices in page layout responsiveness.
-
SideBarRail: The permanent thin sidebar provides quick access to the application list, featuring either application icons or abbreviations of application names.
You can control the SideBarRail visibility via the
applicationListVisible
4st variable. For more information, refer to UserInterface style attributes page in the Genero Business Development Language User Guide.The following new theme variables have been added to support the SideBarRail:
Variable Description $gbc-SideBarRail-width
Defines the sidebar rail width. $gbc-SideBarRail-color
Defines the sidebar rail text color.
$gbc-SideBarRail-background-color
Defines the sidebar rail background color. -
SideBarDrawer: The start menu sidebar is activated via the App Grid Icon ("nine-squares"
icon) at the top left of the interface. It displays the application list with full names and
includes the StartMenu. The SideBarDrawer floats but can also be pinned for easier access. For more
information on the sidebars, go to Application page.
The APPLICATION and STARTMENU categories can be collapsed or expanded, with APPLICATION collapsed by default when there is a STARTMENU.
The following new theme variables have been added to support the SideBarDrawer:Table 1. SideBarDrawer specific variables Variable Description $gbc-SideBarDrawer-min-width
Defines the sidebar drawer min width.
$gbc-SideBarDrawer-max-width
Defines the sidebar drawer max width.
$gbc-SideBarDrawer-width
Defines the sidebar drawer width.
$gbc-SideBarDrawer-z-index
Defines the floating panel z-index. $gbc-SideBarDrawer-color
Defines the sidebar drawer text color. $gbc-SideBarDrawer-background-color
Defines the sidebar drawer background color. $gbc-SideBarDrawer-AppsSection-show
Controls the visibility of the APPS section in the SideBarDrawer. The following new theme variables have been added to support the StartMenu:Table 2. StartMenuWidget spaces Variable Description $gbc-StartMenuWidget-item-height
Defines the height of the items in the StartMenu. $gbc-StartMenuWidget-icon-height
Defines the height of the item icons in the StartMenu. $gbc-StartMenuWidget-item-indent
Defines the StartMenu group content indentation. Table 3. StartMenuWidget state layer Variable Description $gbc-StartMenuItemWidget-hover-color
Defines the overlay color of hovered StartMenuWidget item. $gbc-StartMenuItemWidget-active-border-width
Defines the outline width of active StartMenuWidget item. $gbc-StartMenuItemWidget-active-color
Defines the outline color of active StartMenuWidget item. $gbc-StartMenuItemWidget-focus-border-width
Defines the outline width of focused StartMenuWidget item. $gbc-StartMenuItemWidget-focus-color
Defines the outline color of focused StartMenuWidget item. Table 4. StartMenuItemWidget spaces Variable Description $gbc-StartMenuItemWidget-vertical-padding
Define the top and bottom padding of items in the StartMenu. $gbc-StartMenuItemWidget-indent
Define the left space for sub items. - Quick Close Button: You can close any application item in both the SideBarRail and the SideBarDrawer by hovering over it to reveal a small close button. This allows you to execute the close action for the current dialog, just like the close icon in the ChromeBar.
-
StartMenu persistence: Once created by an application, the StartMenu remains visible across all other applications. It is no longer limited to its parent application. If the application that created the StartMenu is deleted, the StartMenu disappears everywhere.
-
TopMenu appearance update: When TopMenu is set as "sidebar" for
topmenuDesktopRendering
andtopmenuMobileRendering
, it now appears in a dropdown instead of the left sidebar. The left "3-dots" icon in the Chromebar remains active to display it. For more information on TopMenu, go to Application page. -
Back button icon in Chromebar: When a "back" Action is active, it now appears as a left arrow icon in the Chromebar next to the title, instead of as a button in the action panel.
-
Chromebar upgrade: The Chromebar has been upgraded from a widget perspective to a component perspective, while maintaining its overall appearance . This change, along with updates to other page layout placeholders, enhances functionality and performance. For an upgrade guide on the these changes. go to Chromebar changes section.
-
Overflow panel: The right sidebar displays all Chromebar actions that overflow the screen width, ensuring that users have access to all available options.
-
Windowlist removal: The windowlist has been temporarily removed from the Chromebar in this release, as it is undergoing improvements.
- Enhanced modal window management: Multiple modal windows can now be viewed on top of the normal (non-modal) window, while the normal window continues to be displayed underneath. Each modal window is stacked on top, similar to any standard windowing system.
Main changes in GBC customization
There is a change in concept from widget to component that affects the GBC Main Page layout in particular. The sections on this page are now seen as components and are controlled differently, which will have implications for customizations.
MainContainerService
. - Main Container
- Chromebar
- Sidebars
- Overflow panel
The focus for customization will no longer be on overriding widgets and managing their lifecycle. Instead, static services are used to control a static page layout.
To this end, numerous theme variables have been reworked to allow you to customize these sections using just theme variables. You can change margins, padding, and item spacing in the application, as well as reduce spacing in sidebars.
-
$gbc-ChromeBar-show
: This variable can be used to control the visibility of the Chromebar. The default value for this variable isTRUE
, except when usingGDC-UR
. -
$gbc-ChromeBar-flow-gbc-items
: When set toTRUE
, the GBC menu items in the Chromebar will shift to the right sidebar if there is insufficient space and they overflow. This option isFALSE
by default. For more details on the changes to the Chromebar, go to Chromebar changes -
$gbc-SideBarDrawer-AppsSection-show
: This variable hides the "Application" section of the SideBarDrawer. Since application items are already accessible in the SideBarRail, hiding this section can help the SideBarDrawer focus solely on displaying the StartMenu. By default, this setting is enabled.
Removed, updated, and added classes
As described in Main changes in GBC customization, the GBC main page layout was primarily managed by widgets, but it is now mostly managed by static services. This new architecture has allowed us to simplify and refactor much of the code, resulting in the removal of many classes that can no longer be used. Here is a list of the major classes which have been updated, removed, or added and which may impact existing customizations:
This list isn’t exhaustive. Only main files that are used in customization have been listed, but many more internal classes have been removed or updated.
Removed | Comment |
---|---|
ApplicationHostSidebarBackdropWidget |
Unused class |
ApplicationHostSidebarWidget |
Unused class |
ChromeBarItemBackButtonWidget |
Unused class |
ChromeBarLayoutEngine |
Unused class |
ChromeBarTitleWidget |
Unused class |
ChromeBarWidget |
Unused class |
ChromeRightBarWidget |
Unused class |
HostLeftSidebarService |
Unused class |
RSidebarApplistWidget |
Unused class |
RSidebarTopMenuWidget |
Unused class |
RSidebarWidget |
Unused class |
SessionSidebarApplicationItemWidget |
Unused class |
SessionSidebarApplicationStackItemWidget |
Unused class |
SessionSidebarApplicationStackListWidget |
Unused class |
SessionSidebarWidget |
Unused class |
SessionSidebarWindowItemWidget |
Unused class |
Updated | Comment |
---|---|
MainContainerWidget.tpl.html | Changes to the HTML structure. |
Added | Comment |
---|---|
ApplicationListService.js | Service dedicated to navigation management. It displays app items (icon & text) for each running application in the SideBarRail and SideBarDrawer. |
ChromeActionService.js | Service responsible for managing Chromebar items for Genero actions in the action panel or in back button. |
MainContainerService.js | A static service providing helper methods to control, add, update, and remove content in different "static" areas of the main page. See New MainContainerService |
NavigationButtonService.js | Service responsible for the navigation button behavior. It creates/destroys buttons depending on available actions. |
StartMenuService.js | Service dedicated to managing start menu elements in the SideBarDrawer. |
TopMenuService.js | Service dedicated to managing TopMenus. |
WindowListService.js | Service dedicated to managing the window list. |
New MainContainerService
The MainContainerService
JavaScript class is a static service which provides
helper methods to control, add, update, and remove content in different "static" areas of the main
page, such as Chromebar and Sidebars.
The MainContainerService
is independent of Genero business rules and solely
provides entry points for managing various placeholders. Its method names do not reference business
titles like "ApplicationList"; instead, it uses purely placeholder names such as "SideBarRail",
"SideBarDrawer", and "ChromeBarStartContainer".
To understand the DOM elements referenced by this service, you should examine the HTML structure in the MainContainerWidget.tpl.html file.
The MainContainerService
is utilized internally by other services (refer to
Table 7) to populate the application list in the SideBarRail and
SideBarDrawer, update the Chromebar (including title and actions), add the StartMenu in the
SideBarDrawer, manage overflow actions in the Chromebar, and handle the back button, among other
functions.
New MainContainerWidget theme variable
The following new theme variables have been added to support the MainContainerWidget:
Variable | Description |
---|---|
$gbc-MainContainerWidget-icon-size |
Defines the ChromeBar and SideBar font size for icons. |
$gbc-MainContainerWidget-z-index |
z-index for MainContainer. |
Chromebar changes
- Name change
-
Note that the variables for the ChromeBar have been renamed from
gbc-ChromeBarWidget-*
togbc-ChromeBar-*
.This change reflects the fact that, from a strict GBC implementation perspective, the ChromeBar is not a widget but rather a component of the
MainContainerWidget
.We advice you to use the new naming for the theme variables but your current customization should work without making these changes.
Table 8. New gbc-ChromeBar variables Variable Alias (for compatibility) $gbc-ChromeBar-height
$gbc-ChromeBarWidget-height
$gbc-ChromeBar-item-height
$gbc-ChromeBarWidget-item-height
$gbc-ChromeBar-item-toggle-margin
$gbc-ChromeBarWidget-item-toggle-margin
$gbc-ChromeBar-title-margin
$gbc-ChromeBarWidget-title-margin
$gbc-ChromeBar-item-spacing
$gbc-ChromeBarWidget-item-spacing
$gbc-ChromeBar-visible-items
$gbc-ChromeBarWidget-visible-items
$gbc-ChromeBar-flow-gbc-items
$gbc-ChromeBarWidget-flow-gbc-items
$gbc-ChromeBar-item-error-color
$gbc-ChromeBarWidget-item-error-color
Apart from renaming of the existing variables, we have added the following new theme variable:
Variable Description $gbc-ChromeBar-color
Defines the ChromeBar text color. $gbc-ChromeBar-background-color
Defines the ChromeBar background color.
$gbc-ChromeBar-pin-close-button
Enabled or disabled the Close button in the ChromeBar. When enabled, ChromeBar icons do not overflow. $gbc-ChromeBar-show
Enable or disable the visibility of the ChromeBar. Following variables are removed:
gbc-ChromeBarWidget-inactive-window-background-color
gbc-ChromeBarWidget-right-item-height
gbc-ChromeBarWidget-right-item-margin
gbc-ChromeBarWidget-right-item-image-margin
New FloatingPanel theme variables
The following new theme variables have been added to support the Chromebar overflow menu and the TopMenu when displayed in the sidebar (when the TopMenu displays as a drop-down menu.)
Variable | Description |
---|---|
$gbc-FloatingPanel-min-width |
Defines the floating panel min width. |
$gbc-FloatingPanel-max-width |
Defines the floating panel max width. |
$gbc-FloatingPanel-z-index |
Defines the floating panel z-index. |
$gbc-FloatingPanel-color |
Defines the floating panel text color. |
$gbc-FloatingPanel-background-color |
Defines the floating panel background color. |
New MainContainer theme variables
Variable | Description |
---|---|
$gbc-MainContainerWidget-icon-size |
Defines the ChromeBar and SideBar font size for icons |
$gbc-MainContainerWidget-z-index |
Defines the z-index (stacking order of elements) in the MainContainer. |
New gbc create-test command
The gbc create-test
command generates a base .spec.ts
file for
writing TestCafe tests in a GBC project.
This command helps quickly scaffold new test files that follow the expected structure and import the necessary GBC test utilities.
gbc create-test --help
To use this tool to generate a test, the command is:
gbc create-test testname [
customApp ]
- testname: The name of the test or full path (for example,
GBC-1234
or tests/mydir/GBC-1234.spec.ts) - customApp: Is optional. The name of the Genero sample app the test targets.
For more information and examples of use, go to the gbc tool page.
New gbc testcafe command
The gbc testcafe
command runs tests using TestCafe, with configuration adapted
to GBC projects. It simplifies the execution of automated tests in your customization
environment.
gbc testcafe --help
To use this tool to run a specific test file (for example, myTest.spec.ts), the command is:
gbc testcafe -f myTest
For more information and examples of use, go to the gbc tool page.
New gbc testcase command
gbc testcase
command compiles and deploys one or more testcases
(.xcf) for your GBC project. It takes care of:- Compiling Genero source (.4gl) and form (.per) files.
- Building a Genero Archive (.gar).
- Deploying the Genero Archive to the GAS using the gasadmin command.
You can execute the tool from the command line of the folder where your tests are located in your GBC project.
gbc testcase --help
To use this tool to compile and deploy testcases matching a name filter (for example,
myTestcase.xcf
because a testcase must include a .xcf
configuration file) the command is:
gbc testcase -f myTestcase
For more information and examples of use, go to the gbc tool page.