Action Bar of a window

WINDEV, WEBDEV AND WINDEV MOBILE
ONLINE HELP

Version:

Home | Sign in | English

Help

Editors

Controls (window/page/report)

Controls

Action Bar control

Action Bar of a window

Overview of Action Bar

Creating and configuring an Action Bar

Action Bar: aspect, title and icon

Action Bar: Managing the menu

Action Bar: Navigation by views (or panes)

Related examples

See also

Action Bar of a window

Overview of Action Bar

The "Actions Bars" replace the title bar of a window and they are used to display various information:

the application icon,
the window title,
some menu options,
the drop-down menu of your window.

Remarks:

The "Action Bars" are available for the phones and tablets running Android 3 (and later). If an Action Bar is used with an earlier version, a title bar is displayed.
Versions 19 and later
The "Action Bars" are available for all the iOS versions. If an Action Bar is used before iOS 7, the options regarding the aspect of the Action Bar (font color, background color, ...) are ignored.
New in version 19
The "Action Bars" are available for all the iOS versions. If an Action Bar is used before iOS 7, the options regarding the aspect of the Action Bar (font color, background color, ...) are ignored.
The "Action Bars" are available for all the iOS versions. If an Action Bar is used before iOS 7, the options regarding the aspect of the Action Bar (font color, background color, ...) are ignored.

Versions 19 and later
In version 19, the description window of the Action Bar controls has evolved. See Describing the Action Bar control for more details.

New in version 19
In version 19, the description window of the Action Bar controls has evolved. See Describing the Action Bar control for more details.

In version 19, the description window of the Action Bar controls has evolved. See Describing the Action Bar control for more details.

Versions 19 and later

The Action Bar control is now available for the iPhone/iPad applications.

New in version 19

The Action Bar control is now available for the iPhone/iPad applications.

Versions 21 and later

The Action Bar control is now available for the applications in Universal Windows 10 App mode.

New in version 21

The Action Bar control is now available for the applications in Universal Windows 10 App mode.

Creating and configuring an Action Bar

The windows are created with an Action Bar by default.

You have the ability to configure the bars used in the window:

Display the description window of the window ("Description" from the popup menu).
In the "Style" tab, specify the content of top bar:
- Full screen: no bar is displayed,
- System bar only: Only the system bar will be displayed.
- System bar + Action Bar: The system bar and the Action Bar will be displayed.
- Action Bar only: Only the Action Bar is displayed.
- System bar + Title: The system bar and the title bar of window are displayed.
- Title only: Only the title bar of window is displayed.

Versions 20 and later

Remarks:

If you are using the system bar, you have the ability to configure the transparency of system bar for iOS 7 and later.
Versions 23 and later
For a use in iPhone X, you have the ability to shift the bars according to the sensor area.
New in version 23
For a use in iPhone X, you have the ability to shift the bars according to the sensor area.
For a use in iPhone X, you have the ability to shift the bars according to the sensor area.

New in version 20

Remarks:

If you are using the system bar, you have the ability to configure the transparency of system bar for iOS 7 and later.
Versions 23 and later
For a use in iPhone X, you have the ability to shift the bars according to the sensor area.
New in version 23
For a use in iPhone X, you have the ability to shift the bars according to the sensor area.
For a use in iPhone X, you have the ability to shift the bars according to the sensor area.

Remarks:

If you are using the system bar, you have the ability to configure the transparency of system bar for iOS 7 and later.
Versions 23 and later
For a use in iPhone X, you have the ability to shift the bars according to the sensor area.
New in version 23
For a use in iPhone X, you have the ability to shift the bars according to the sensor area.
For a use in iPhone X, you have the ability to shift the bars according to the sensor area.

Versions 22 and later

If you are using the system bar, you have the ability to configure the color of system bar:

Specific color.
System color.
Transparent. The color of system bar is the one of Action Bar. This option is taken into account only if the window contains an Action Bar.
Adapted to Action Bar. In this case, if the "Material design" skin template is used, the color of system bar corresponds to the color of Action Bar in darker, otherwise the color of Action Bar is used.

Remarks:

This setting regarding the color of system bar is available from Android 5.0.
The bar color cannot be changed on the Nexus devices.
..SystemBarColor is used to modify this color by programming.

New in version 22

If you are using the system bar, you have the ability to configure the color of system bar:

Specific color.
System color.
Transparent. The color of system bar is the one of Action Bar. This option is taken into account only if the window contains an Action Bar.
Adapted to Action Bar. In this case, if the "Material design" skin template is used, the color of system bar corresponds to the color of Action Bar in darker, otherwise the color of Action Bar is used.

Remarks:

This setting regarding the color of system bar is available from Android 5.0.
The bar color cannot be changed on the Nexus devices.
..SystemBarColor is used to modify this color by programming.

If you are using the system bar, you have the ability to configure the color of system bar:

Specific color.
System color.
Transparent. The color of system bar is the one of Action Bar. This option is taken into account only if the window contains an Action Bar.
Adapted to Action Bar. In this case, if the "Material design" skin template is used, the color of system bar corresponds to the color of Action Bar in darker, otherwise the color of Action Bar is used.

Remarks:

This setting regarding the color of system bar is available from Android 5.0.
The bar color cannot be changed on the Nexus devices.
..SystemBarColor is used to modify this color by programming.

To create a window with an Action Bar

To create an Action Bar in a window, select "Insert .. Action Bar (Android)".To create an Action Bar in a window, on the "Window" pane, in the "Bars and menus" group, expand "Other bars" and click "Action Bar (Android)".To create an Action Bar in a window, on the "Window" pane, in the "Bars and menus" group, expand "Other bars" and click "Action Bar".

Remarks:

To implement an "Action Bar" in your window, you also have the ability to perform the following operations:
1. Display the description window of the window ("Description" from the popup menu).
2. In the "Style" tab, select "With Action Bar".
3. Validate. The title bar is replaced by an Action Bar.
To delete an Action Bar from your window:
1. Display the description window of the window ("Description" from the popup menu).
2. In the "Style" tab, select "With title bar" or "Without title bar".
3. Validate.

Action Bar: aspect, title and icon

Aspect of the Action Bar

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

the color of the font used.
the background color used.
the background image of the Action Bar. 9-slice scaling is available.

Title and icon

The Action Bar replaces the title bar of the window. By default, the Action Bar displays the title of the current window and the icon of the application.

These parameters can be modified by programming via the following properties:

..Title used on the window.
..Image used on the Action Bar.
If this property corresponds to an empty string (""), the application icon will be used (default case).
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.

Managing the click on the icon

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

The "Details" tab in the description window of the Action Bar is used to configure the action of the click on the icon. You can:

Run the click process of the control: The "Click on icon" process will be automatically run.
Run the action of the "Back" key: In this case:
- The application will run the event "Click on icon".
- The application will run the preset process used to go back to the previous window. This preset process will not be run if the event "Click on icon" returns False (this is used to ask user 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 event "Click on icon" will be run.
  - If the current window is closed, its closing code will be run.
Go back to the first application window: In this case, the application:
- Will run the event "Click on icon".
- Will run the preset process: all the opened windows are closed except for the main window (that is re-opened if necessary). This preset process will not be run if the "Click on icon" event returns False (this can be 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 event "Click on icon" will be run.
  - The closing code of the 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 event "Click on icon".
- Will run the preset process: the left sliding window defined in the description window will be displayed with the specified effect.
  See Sliding window (sliding menu) for more details.
New in version 19
Left sliding window: Opens the left sliding window: In this case, the application:
- Will run the event "Click on icon".
- Will run the preset process: the left sliding window defined in the description window will be displayed with the specified effect.
  See Sliding window (sliding menu) for more details.
Left sliding window: Opens the left sliding window: In this case, the application:
- Will run the event "Click on icon".
- Will run the preset process: the left sliding window defined in the description window will be displayed with the specified effect.
  See Sliding window (sliding menu) for more details.

Action Bar: Managing the menu

Managing the main menu

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.

In the editor, a right click performed on this button (or on the options) is used to display the different options for managing the menu options.

At run time, this button displays the options found 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, in the Android applications, we advise you to have a single level of options.

To display a menu in the Action Bar:

Display the Action Bar description window.
In the "Details" tab, check "With menu".

Special case: displaying one or more menu options in the Action Bar directly

At run time, depending on the device used, the size of the Action Bar may change. 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 display a menu option in the Action Bar directly:

Display the description window of the menu option ("Description" from the popup menu).
In the "UI" tab, check "Move this option into the Action Bar if there is enough space (displayed at run time only)".
Validate.

At run time, the options will be displayed before the drop-down menu (if it still contains options).

For example:


Drop-down menu	Options in the Action Bar

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

Versions 18 and later

Special case: displaying 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" pane, in the "Bars and menus" group, expand "Popup menus" and select the popup menu to edit.
Display the description window of the popup menu ("Description of popup menu" from the popup menu).
In the "General" tab, check "Move this popup menu into the Action Bar if it exists".
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 "Move this option into 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: displaying 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" pane, in the "Bars and menus" group, expand "Popup menus" and select the popup menu to edit.
Display the description window of the popup menu ("Description of popup menu" from the popup menu).
In the "General" tab, check "Move this popup menu into the Action Bar if it exists".
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 "Move this option into 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: displaying 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" pane, in the "Bars and menus" group, expand "Popup menus" and select the popup menu to edit.
Display the description window of the popup menu ("Description of popup menu" from the popup menu).
In the "General" tab, check "Move this popup menu into the Action Bar if it exists".
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 "Move this option into 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.

Action Bar: Navigation by views (or panes)

Overview

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

Adding views into an Action Bar

To add views into an Action Bar:

Display the description window of the Action Bar ("Description" from the popup menu).
Click the "New view" button.
Enter the caption of the view.

Specific option: The option "With action bar zone" is used to simplify the management of 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 (by 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).

Related Examples:

Cross-platform examples (WINDEV Mobile): WM ToDo List

[ + ] This example is a manager of To-Do Lists.
The project is using the gestures in the loopers in order to move and delete the lists and tasks.
The data is stored in a HFSQL database.