Describing the Action Bar control

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | English

Overview
Describing the different elements found in the Action Bar ("General" tab)
Lhe left button of the Action Bar
Left button
Menu options displayed in the Action Bar
In Android
In iOS
In Universal Windows 10 App
Views/Tab bar
Aspect of the Action Bar ("Details" tab)
Overview
Aspect of the Action Bar/NavBar
Miscellaneous
Search in the Action Bar

WINDEV

WEBDEV

WINDEV Mobile

Others

See also

Describing the Action Bar control

Overview

This help page presents the important points of the description window of the Action Bar control:

Describing the different elements found in the Action Bar ("General" tab).
Aspect of the Action Bar ("Details" tab).
- Aspect.
- Versions 21 and later
  Animation of the Action Bar.
  New in version 21
  Animation of the Action Bar.
  Animation of the Action Bar.
- Versions 21 and later
  Search in the Action Bar.
  New in version 21
  Search in the Action Bar.
  Search in the Action Bar.

Describing the different elements found 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 current window and a button corresponding to the application icon.
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.

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 the click process of the control: The "Click on left button" event will be automatically run.
Return: Run the return code (ie: 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.
  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).
- An arrow will be displayed in the top 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.
Versions 19 and later
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).
New in version 19
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).
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

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

Versions 18 and later
Special case: display the popup menu of a control in the Action Bar
A long press performed on a control is used to display the popup menu of control. This popup menu can be displayed in the Action Bar directly.

To display a popup menu in the Action Bar directly:

Edit the popup 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.
Display the description window of the popup menu ("Description of popup menu" in the context menu).
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 popup menu will be displayed in the drop-down menu of the Action Bar.

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

Display the description window of each option found in the popup 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.

New in version 18
Special case: display the popup menu of a control in the Action Bar
A long press performed on a control is used to display the popup menu of control. This popup menu can be displayed in the Action Bar directly.

To display a popup menu in the Action Bar directly:

Edit the popup 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.
Display the description window of the popup menu ("Description of popup menu" in the context menu).
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 popup menu will be displayed in the drop-down menu of the Action Bar.

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

Display the description window of each option found in the popup 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.

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

To display a popup menu in the Action Bar directly:

Edit the popup 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.
Display the description window of the popup menu ("Description of popup menu" in the context menu).
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 popup menu will be displayed in the drop-down menu of the Action Bar.

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

Display the description window of each option found in the popup 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 popup 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 popup menu is used to configure the options (and to edit the code).

Views/Tab 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 can be done:

via buttons displayed on the left of the Action Bar.
The underlined pane is used to identify the active view.
via a drop-down list presenting the different panes.

The navigation mode is automatically chosen according to the size of the screen for the device on which the application is run (navigation by list for the small-sized screens).

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.
Enter:
- 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, "Appletizers", "")
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 select:

The appearance of the Action Bar/NavBar.
Versions 21 and later
The animation of the Action Bar.
New in version 21
The animation of the Action Bar.
The animation of the Action Bar.
Versions 21 and later
The search mode in the Action Bar.
New in version 21
The search mode in the Action Bar.
The search mode in the Action Bar.

Aspect of the Action Bar/NavBar

The appearance of the Action Bar can be configured via "Edit bar style".

The settings window allows you to configure:

the system bar.
the Action Bar.

You can configure the following elements of a system bar:

background color used.
text color.
Versions 19 and later
Remark: You can select system characteristics for the system bar: "Dark text, transparent background" or "Light text, transparent background".
New in version 19
Remark: You can select system characteristics for the system bar: "Dark text, transparent background" or "Light text, transparent background".
Remark: You can select system characteristics for the system bar: "Dark text, transparent background" or "Light text, transparent background".
the overlay mode. The "Bar overlay" option makes it possible to set the bar transparency. 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 the controls. In the editor, the controls below the system bar are automatically moved.

You can configure the following elements of an Action Bar:

the background color used.
the color of the font used.
Versions 19 and later
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.
New in version 19
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 "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 makes it possible 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 the controls. In the editor, the controls below the Action Bar are automatically moved.

Versions 21 and later

Miscellaneous

The Automatically hide the Action Bar during the Scroll 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. This setting can be performed by AllowActionBarHiding. 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.

New in version 21

Miscellaneous

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

Miscellaneous

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

Versions 21 and later

Search in the Action Bar

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!

New in version 21

Search in the Action Bar

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

Search in the Action Bar

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