Describing the Action Bar control

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | English

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Action Bar control

Overview
Description of the different elements in the Action Bar ("General" tab)
Lhe left button of the Action Bar
Left button
Menu options displayed in the Action Bar (system Action Bar only)
In Universal Windows 10 App
Views/Navigation Bar
Aspect of the Action Bar ("Details" tab)
Overview
Aspect of the Action Bar

WINDEV

WEBDEV

WINDEV Mobile

Others

See also

Describing the Action Bar control

Overview

An Action Bar can be:

A system Action Bar: The Action Bar depends on the system used. It can vary depending on the platform used.
A custom Action Bar, to get the same behavior across all platforms. In this case, you can:
- Change the height of the Action Bar,
- Insert controls in the Action Bar.

This help page presents the main aspects of the Action Bar description window:

Description of the different elements in the Action Bar ("General" tab).
- Left button.
- Menu options displayed in the Action Bar(only available with a system Action Bar).
Aspect of the Action Bar ("Details" tab).
- Aspect.

Description of the different elements in the Action Bar ("General" tab)

The "General" tab is used to define the different elements of the Action Bar according to the platform used. These elements are the same in iOS and Android but they are organized in a different way.

Both interfaces are presented side by side: the iOS interface on the left, the Android interface on the right.

If your project is available on a single platform, only the corresponding interface will be enabled.

To define the different elements of the Action Bar, all you have to do is click the numbers.

Lhe left button of the Action Bar

Left button

The Action Bar replaces the title bar of the window:

in Universal Windows 10 App: By default, the Action Bar displays the title of the current window.

The title may not be displayed according to the elements displayed in the Action Bar.

The option "1" of the "General" tab found in the description window of the Action Bar control is used to configure the different elements:

Button visible or not,
Displayed icon.

The user can click the left button displayed in the Action Bar of a window. The "Click on left button" event of the Action Bar is associated with this action.

The description window of the Action Bar is used to configure the action of the click on the left button. You can select one of the following options:

Code: Run control click process: The "Click on left button" event will be automatically run.
Home: Go back to the first application window: In this case, the application:
- Will run the "Click on left button" event.
- Will run the preset process: all windows still open are closed, except for the main window (which is re-opened if necessary). This preset process will not be run if the "Click on left button" event returns False (used to ask the user for confirmation, for example).
  Remarks:
  - If the main window is already displayed or if the application has no main window, no default action will be run. Only the "Click on left button" event will be run.
  - The closing code of closed windows will not be run.
Left sliding window: Opens the left sliding window: In this case, the application:
- Will run the "Click on left button" event.
- Will run the preset process: the left sliding window defined in the description window will be displayed with the specified effect.
  For more details, see Sliding window (sliding menu).

Menu options displayed in the Action Bar (system Action Bar only)

In Universal Windows 10 App

In a window without Action Bar, the main menu of the application is displayed at the bottom of the window.

In a window with Action Bar, the menu options can be:

found at the top right of the Action Bar.
found at the bottom of the window

The position of the options depends on the device where the application is run.

If the application is run on PC, all the options are displayed in the Action Bar at the top of the screen. If the options are associated with images, only the image is displayed in the Action Bar. A drop-down menu is displayed as soon as there is not enough space in the Action Bar to display an additional option or as soon as an option is not associated with an image. This drop-down menu can be opened via a "..." button.

If the application is run on Mobile, all the options are displayed in the Action Bar at the top of the screen or in a menu bar at the bottom of the screen (according to the position chosen in the interface). The display rules are identical in the Action Bar and in the menu bar:

If the options are associated with images, only the image is displayed in the Action Bar or in the menu bar.
A drop-down menu is displayed as soon as there is not enough space in the Action Bar or in the menu bar to display an additional option or as soon as an option is not associated with an image. This drop-down menu can be opened via a "..." button.

To manage the menu options found in the Action Bar:

Case 1: A window with menu is changed into a window with Action Bar: the menu of the window is automatically displayed in the Action Bar, at the bottom of the window.
Case 2: A window with Action Bar is created and you want to create the menu:
1. In the "General" tab of the description window of the Action Bar, click "2" or "3" (toolbar options).
2. Two lists are displayed.
  - The "At the top right" list is used to define the options displayed in the Action Bar directly.
  - The "At bottom/in the menu" list is used to define the menu options displayed in the menu at the bottom of the window.
    Reminder: If the application is run on PC, these options are displayed after the ones of the "Top right" list in the Action Bar.
3. Click "+" to add a new option: the added option can be modified in the lower section of the screen.
  If the menu option is associated with an image, only the image will be displayed in the Action Bar.

Remark: To edit the options in the editor, click the option: a drop-down menu is displayed with the corresponding options. The context menu is used to configure the options (and to edit the code).

Views/Navigation Bar

Aspect of the Action Bar ("Details" tab)

Overview

The "Details" tab in the description window of the Action Bar is used to define its aspect. You can choose:

The appearance of the Action Bar/NavBar.

Aspect of the Action Bar

The appearance of the Action Bar can be configured via:

the "Edit bar style" option, which allows you to configure the style of the system bar and the Action Bar.
the height of the Action Bar (custom only). This option allows you to get the same Action Bar height regardless of the system used. This height is expressed in pixels.

The style settings window includes:

The system bar settings:
The following elements can be configured:
- background color used.
- text color.
- the overlay mode. The "Bar overlay" option allows you to set the transparency of the system bar. When this option is checked, the system bar becomes transparent. You can then set the opacity of the system bar using the Opacity property. This property can be used in the "Moving the scrollbar" optional window event, for example.
  Caution: The "Bar overlay" option changes the origin of controls. In the editor, the controls below the system bar are automatically moved.
The Action Bar settings:
The following elements can be configured:
- background color used.
- the color of the font used.
  the "Apply font color to active icons (Action Bar and navigation bar)" option allows you to apply the font color to the icons. In this case, the selected icons must be monochrome.
- the overlay mode. The "Bar overlay" option allows you to set the transparency of the Action Bar. When this option is checked, the Action Bar becomes transparent. You can then set the opacity of the Action Bar using the Opacity property. This property can be used in the "Moving the scrollbar" optional window event, for example. Example:
  // Used to get up to 30% opacity at 150px in Y
  // The opacity goes from 0 to 30%
  nMaxOpacity is int = 30
  nOpacity is int
  nOpacity = nMaxOpacity * ScrollbarPosition(MyWindow) / CoordinateEditorToScreen(150)
  IF nOpacity > nMaxOpacity THEN
  nOpacity = nMaxOpacity
  END
  ACTB_ActionBar.Opacity = nOpacity
  
  Caution: The "Bar overlay" option changes the origin of controls. In the editor, the controls below the Action Bar are automatically moved.