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 Android
In iOS
In Universal Windows 10 App
Views/Navigation Bar
Aspect of the Action Bar ("Details" tab)
Overview
Aspect of the Action Bar
Miscellaneous
Search in the Action Bar (system only)

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).
- Views.
Aspect of the Action Bar ("Details" tab).
- Aspect.
- Animation of the Action Bar.
- Search in the Action Bar(only available with a system Action Bar).

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 Android: By default, the Action Bar displays the title of the current window and a button.
in iOS: By default, the Action Bar displays the title of the current window and a button.
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,
Button caption.
Displayed icon.
Action performed.

Remark: These parameters can be modified through programming via the following properties:

Title used on the window.
Image used on the Action Bar.
If this property is an empty string (""), the application icon will be used by default.
Caution, this property is available from Android version 4.0 (Ice cream sandwich, API level 14). This property has no effect if it is used on an earlier version.

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.
Back: Run code to go back (i.e: close the window): In this case:
- The application will run the "Click on left button" event.
- The application will run the preset process used to go back to the previous window.
- An arrow will be displayed in the upper-left corner of the icon to symbolize the navigation.
  Remarks:
  - If the window displayed is the only application window, no default action will be run.
    Only the "Click on left button" event will be run.
  - If the current window is closed, its closing code will be run.
  - For this type of action, the icon specified for the button is not displayed.
  - The "Back" button can become an "OK" button at runtime in the following cases:
    - the previous window has no Action Bar control.
    - the opening animation is not performed from right to left.
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 Android

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 main menu is a drop-down menu, displayed on the right of the Action Bar.

In edit, a button with three lines is displayed. This button corresponds to the menu of the Action Bar. It is used to display the different menu options.

At runtime, this button displays the options on the first level of the menu. If an option includes sub-options, a click performed on the option will replace it by the sub-options. No cascading display will be performed.

Reminder: By convention, we advise you to have a single level of options.

In Android, you can use two types of menus in the Action Bar:

drop-down menu,
options directly in the Action Bar. The size of the Action Bar may change according to the device used. If the Action Bar includes enough space, it may be interesting to display one or more options of the drop-down menu in the Action Bar. The system automatically manages the space problems and the overlap problems.

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.
Case 2: A window with Action Bar is created and you want to create the drop-down 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 (see the next paragraph).
  - The "At bottom/in the menu" list is used to define the menu options displayed in the drop-down menu of 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: Another method can be used to display a menu option in the Action Bar directly:

Open the description window of the menu option ("Description" in the context menu).
In the "UI" tab, select "Display this option as a button at the top right of the Action Bar (if there is enough space).".
Validate.

Special case: open the context menu of a control in the Action Bar
A long press performed on a control is used to open the context menu of control. This context menu can be displayed in the Action Bar directly.

To display a context menu in the Action Bar directly:

Edit the context menu that will be displayed in the Action Bar: on the "Window" tab, in the "Bars and menus" group, expand "Popup menus" and select the context menu to edit.
Open the description window of the context menu ("Context menu description").
In the "General" tab, check "Move this popup menu into the Action Bar if it exists (displayed at run time on the device or on the emulator)".
Validate.

The context menu will be displayed in the drop-down menu of the Action Bar.

To display the different menu options of the context menu in the Action Bar directly:

Display the description window of each option in the context menu ("Option description").
In the "UI" tab, check "Display this option as a button at the top right of the Action Bar (if there is enough space).".
Validate.

Remark: If the menu option is associated with an image, only the image will be displayed in the Action Bar.

In iOS

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 (1).
found at the bottom of the window (recommended) (2).

Example:

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.
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).

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

The Action Bar allows you to add a system of navigation by views to a window. This allows you to only display some window sections.

This system of views (or panes) is operating like the Tab control.

The main difference is as follows: the controls included in each pane are created when the content of the pane is displayed on the screen. They are destroyed as soon as the content of the pane is no longer visible (change of pane for example).
The controls displayed in each pane can be accessed through programming when the pane to which they belong is displayed on the screen.

This allows you to build rich interfaces in the same window while limiting the impact on the performance of the application.

The navigation between the different panes is performed via a tab bar found at the bottom of the window:

Remark: If toolbar options are positioned at the bottom of the screen, we do not recommend that you use a navigation by view.

To add views into an Action Bar:

Display the description window of the Action Bar ("Description" in the context menu).
Click "4".
Click the "New view" button.
Specify:
- The caption of the view.
- The internal window to be loaded in the zone (if "With action bar zone" is checked).
- The associated icon (strongly recommended in iOS).

Specific option: The "With action bar zone" option makes it easier to manage views. This option is used to automatically create an Action Bar Zone control. This "Action Bar Zone" corresponds to an Internal Window control. By default, this zone has the dimensions of the window and it will display the specified internal window.

You can:

specify (in the description window of the Action Bar) the internal window that will be loaded in the zone.
specify (through programming) the internal window that will be loaded in the action zone.
IF sFilter = "" THEN
SWITCH ACTB_ActionBar
CASE 1
ChangeSourceWindow(ABZ_Dish, IW_ListDishes, "Starters", "")
CASE 2
ChangeSourceWindow(ABZ_Dish, IW_ListDishes, "Dishes", "")
CASE 3
ChangeSourceWindow(ABZ_Dish, IW_ListDishes, "Desserts", "")
END
ELSE
ChangeSourceWindow(ABZ_Dish, IW_ListDishes, "", sFilter)
END

Remarks:

Using internal windows allows you to limit the number of controls loaded by the application at a given time. However, you also have the ability to use the mechanism of planes.
For a multi-platform application, using internal windows allows you to share a content with the iOS applications but also with the Android applications that do not include any Action Bar (devices running a version earlier than Android 3).

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.
The animation of the Action Bar.
The search mode in the Action Bar.

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.
  Remark: It is possible to choose features of the system bar: "Dark text, transparent background" or "Light text, transparent background".
- 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 background image of the Action Bar. 9-slice scaling is available.
- 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.

Miscellaneous

The "Automatically hide the Action Bar when scrolling" option allows you to automatically hide the Action Bar when scrolling (in a window, internal window, supercontrol, Table or Looper control). In some cases, you may want not to hide the Action Bar even if this option is enabled. These settings can be defined with the AllowActionBarHiding property. This option is used to get a progressive disappearance of the Action Bar:

Remark: If Visible is used on the Action Bar control, an animation is automatically performed when the Action Bar disappear.

Search in the Action Bar (system only)

To allow a search in the Action Bar:

Check "Allow the search in the Action Bar". A new event is automatically associated with the Action Bar control: "Validating the search". This event makes search possible.
If the "With search history" option is checked, the search history will be shown to the user.
Remark: The "With button to clear the history" option is used to automatically clear the history.

To implement the search, perform the following operations for example:

Create a search button in the Action Bar (a "Magnifier" button for example).
In the code of this option, use ActionBarSearchVisible to display the search edit control. For example:
ActionBarSearchVisible(True, "Customer to find")
Open the WLanguage events associated with the Action Bar control. In the "Validating the search" event, enter the code used to perform the search and display the result. In this code, you have the ability to find out the value entered by the user via SearchValue.
For example:
// Find a product.
// The result is displayed in a Looper control.
// The searched value corresponds to a parameter of the base query of the Looper control.
QRY_Products.ParamName = ACTB_ActionBar.SearchValue
LooperDisplay(LOOP_QRY_Products, taReExecuteQuery)

Remarks:

If the history of searches is enabled:
- when the edit control is empty, the 10 last searches are proposed.
- when the edit is started, 10 suggestions are displayed according to what was already typed.
You have the ability to clear the history with ActionBarDeleteSearchHistory.
If the "With button to clear the history" option is selected, an option to clear the history will appear at the end of the search results.
Two WLanguage events are automatically added when search is enabled in the Action Bar:
- Validating the search.
- Modifying the search.
Canceling the search: To find out whether the search was canceled by the user, check the value of SearchValue in the "Validating the search" event. This value is set to "" (empty string) in case of cancellation.

Related Examples:

Cross-platform examples (WINDEV Mobile): WM Managing Contacts

[ + ] This example presents the management of contacts for Android et iOS.
It is used o:
- list the contacts found on the phone
- call the contacts
- send SMSs to the contacts
- ...

Cross-platform examples (WINDEV Mobile): WM Shopping

[ + ] WM Shopping allows you to manage several purchase lists.
To add a product:
- Scan the bar code to add it directly
- or find a product that was added beforehand and add it!
- or add a product from your purchase history!
Then, you will have the ability to edit the quantity, the image... and to add notes as reminders!