PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview of the Action Bar
  • Creating an Action Bar
  • To create a window with an Action Bar
  • Action Bar: aspect, title and icon
  • Aspect of the Action Bar
  • Title and icon
  • Managing the click on the icon
  • Action Bar: Managing the menu
  • Managing the main menu
  • Special case: displaying one or more menu options in the Action Bar directly
  • Special case: displaying the popup menu of a control in the Action Bar
  • Action Bar: Navigation by views (or panes)
  • Overview
  • Adding views into an Action Bar
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview of the Action Bar
The "Actions Bars" replace the title bar of a window and they are used to display various information:
  • the icon of the application,
  • the window title,
  • some menu options,
  • the drop-down menu of your window.
Notes:
  • Android 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
    iPhone/iPad 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
    iPhone/iPad 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.
    iPhone/iPad 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
WINDEV MobileiPhone/iPad The Action Bar control is now available for the iPhone/iPad applications.
New in version 19
WINDEV MobileiPhone/iPad The Action Bar control is now available for the iPhone/iPad applications.
WINDEV MobileiPhone/iPad The Action Bar control is now available for the iPhone/iPad applications.
Versions 21 and later
WINDEVWINDEV MobileUniversal Windows 10 App The Action Bar control is now available for the applications in Universal Windows 10 App mode.
New in version 21
WINDEVWINDEV MobileUniversal Windows 10 App The Action Bar control is now available for the applications in Universal Windows 10 App mode.
WINDEVWINDEV MobileUniversal Windows 10 App The Action Bar control is now available for the applications in Universal Windows 10 App mode.
Creating an Action Bar

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".
Notes:
  • 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. The 9-image mode 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 "Click on icon" process.
    • 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 icon" process returns False (this is used to ask confirmation from the user for example).
    • An arrow will be displayed in the top left corner of the icon to symbolize the navigation.
      Notes:
      • If the window displayed is the only application window, no default action will be run. Only the "Click on icon" process 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 "Click on icon" process.
    • 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" process returns False (this can be used to ask the user for confirmation for example).
      Notes:
      • 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 icon" process 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 "Click on icon" process.
    • 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 "Click on icon" process.
    • 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 "Click on icon" process.
    • 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:
  1. Display the description window of Action Bar.
  2. 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:
  1. Display the description window of the menu option ("Description" from the popup menu).
  2. In the "GUI" tab, check "Move this option into the Action Bar if there is enough space (displayed at run time only)".
  3. 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
Note: 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 the control. This popup menu can be displayed in the Action Bar directly.
To display a popup menu in the Action Bar directly:
  1. 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.
  2. Display the description window of the popup menu ("Description of popup menu" from the popup menu).
  3. In the "General" tab, check "Move this popup menu into the Action Bar if it exists".
  4. 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:
  1. Display the description window of each option found in the popup menu ("Option description").
  2. In the "GUI" tab, check "Move this option into the Action Bar if there is enough space".
  3. Validate.
Note: 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 the control. This popup menu can be displayed in the Action Bar directly.
To display a popup menu in the Action Bar directly:
  1. 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.
  2. Display the description window of the popup menu ("Description of popup menu" from the popup menu).
  3. In the "General" tab, check "Move this popup menu into the Action Bar if it exists".
  4. 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:
  1. Display the description window of each option found in the popup menu ("Option description").
  2. In the "GUI" tab, check "Move this option into the Action Bar if there is enough space".
  3. Validate.
Note: 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 the control. This popup menu can be displayed in the Action Bar directly.
To display a popup menu in the Action Bar directly:
  1. 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.
  2. Display the description window of the popup menu ("Description of popup menu" from the popup menu).
  3. In the "General" tab, check "Move this popup menu into the Action Bar if it exists".
  4. 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:
  1. Display the description window of each option found in the popup menu ("Option description").
  2. In the "GUI" tab, check "Move this option into the Action Bar if there is enough space".
  3. Validate.
Note: 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:
  1. Display the description window of the Action Bar ("Description" from the popup menu).
  2. Click the "New view" button.
  3. 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
Notes:
  • 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:
WM ToDo List 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.
Minimum required version
  • Version 17
This page is also available for…
Comments
video Action Bar
https://youtu.be/84vtPkkM188
amarildo
Aug. 06 2018