Describing the Action Bar control

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | English

This content has been translated automatically. Click here to view the French version.

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

The two interfaces are shown at a glance: on the left, the iOS interface; on the right, the Android interface..

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:

on Android: By default, the Action Bar displays the title of the current window and a.
on iOS: By default, the Action Bar displays the title of the current window and a.

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.

Note: These parameters can be modified programmatically using 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 have the ability to select one of the following options:

Code: Execute field click processing: The "Click on left button" event will then be automatically executed..
Return: Execute return code (ie: close 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: Return to the first application window: In this case, the:
- Will run the "Click on left button" event.
- executes the predefined treatment: all open windows are closed except the main window (which is reopened 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:
  - Will run the "Click on left button" event.
  - Executes the predefined treatment: the left sliding window defined in the description window is 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, it is recommended to have only one level of options.

In Android, two types of menus can be managed 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: You transform a window with a menu into a window with an Action Bar: the window menu is automatically displayed in the Action Bar..
Case 2: You create a window with Action Bar and 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 on "+" to add a new option: the added option can be modified in the lower part of the screen..
  If the menu option is associated with an image, only the image will be displayed in the Action Bar.

Note: There is another way of displaying a menu option directly in the Action Bar:

Open the description window of the menu option ("Description" in the context menu).
On 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: displaying a field context menu in Action Bar
A long press performed on a control is used to open the context menu of the 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 to be displayed in the Action Bar: in the "Window" pane, in the "Bars and menus" group, pull down "Popup menus" and select the context menu to be edited..
Open the description window of the context menu ("Context menu description").
On 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 a context menu in the Action Bar directly:

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

Note: 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: You transform a window with a menu into a window with an Action Bar: the window menu is automatically displayed in the Action Bar at the bottom of the window..
Case 2: You create a window with Action Bar and 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 on "+" to add a new option: the added option can be modified in the lower part of the screen..
  If the menu option is associated with an image, only the image will be displayed in the Action Bar.

Note: To edit options in the editor, click on the option: a drop-down menu appears 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 that the fields making up each pane are created only when the pane's contents are displayed on 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:

Note: If toolbar options are positioned at the bottom of the screen, view-based navigation is not recommended..

To add views into an Action Bar:

Display the Action Bar description window ("Description" option 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: "With action bar zone" option simplifies view management. 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 sFiltre = "" THEN
	SWITCH ACTB_ActionBar
		CASE 1
			ChangeSourceWindow(ZAB_Plat, FI_ListePlat, "Entrées", "")
		CASE 2
			ChangeSourceWindow(ZAB_Plat, FI_ListePlat, "Plats", "")
		CASE 3
			ChangeSourceWindow(ZAB_Plat, FI_ListePlat, "Desserts", "")
	END
ELSE
	ChangeSourceWindow(ZAB_Plat, FI_ListePlat, "", sFiltre)
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.
  Note: It is possible to choose the system bar characteristics: "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: "Bar displayed on top" option changes field origin. 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:
  // Permet d'avoir 30% d'opacité maximum à 150px en Y // L'opacité va de 0 à 30% nOpacitéMax is int = 30 nOpacité is int nOpacité = nOpacitéMax * ScrollbarPosition(MyWindow) / CoordinateEditorToScreen(150) IF nOpacité > nOpacitéMax THEN nOpacité = nOpacitéMax END ACTB_ActionBar.Opacité = nOpacité
  Caution: "Bar displayed on top" option changes field origin. 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 the Visible property is used on the Action Bar control, an animation is automatically performed when the Action Bar disappears..

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: "Search validation".. This event makes search possible.
If the "With search history" option is checked, the search history will be shown to the user.
Note: The "With button to clear the history" option is used to automatically manage history blanking..

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, "Client à rechercher")

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:

// Recherche d'un produit. 
// Le résultat est affiché dans un champ Zone répétée. 
// La valeur recherchée correspond à un paramètre de la requête de base du champ Zone répétée. 
REQ_Produits.ParamNom = ACTB_ActionBar.ValeurRecherche
LooperDisplay(ZR_REQ_Produits, 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.
Search cancellation: To find out whether the user has cancelled the search, test the value of the SearchValue property in the "Search validation" 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!