PC SOFT

WINDEV, WEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
This content comes from an automatic translation.
  • 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
  • Animation of the Action Bar
  • Search in the 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
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.
Different elements of the Action Bar
The two interfaces are presented in preview: 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:
  • Android in Android: By default, the Action Bar displays the title of current window and a button corresponding to the application icon.
    Action Bar under Android
  • iPhone/iPad in iOS: By default, the Action Bar displays the title of the current window and a button.
    Action Bar under iOS
  • Universal Windows 10 App 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,
  • iPhone/iPad Button caption,
  • AndroidiPhone/iPadUniversal Windows 10 App Displayed icon.
Android Remark: 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.
The user can click the left button displayed in the Action Bar of a window. The event "Click on the left button" 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:
Description window
  • Code: Run the click process of the control: The event "Click on the left button" will then be automatically executed.
  • AndroidiPhone/iPad Return: Run the return code (ie: close the window) : In this case:
    • Android The application will execute the event "Click on the left button"..
    • The application will run the preset process used to go back to the previous window.
      Android This predefined processing will not be executed if the event "Click on the left button" returns False (this allows for example to ask the user for confirmation).
    • 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.
        Android Only the event "Click on the left button" will be executed.
      • If the current window is closed, its closing code will be run.
      • iPhone/iPad For this type of action, the icon specified for the button is not displayed.
      • iPhone/iPad The "Back" button can become an "OK" button at run time in the following cases:
        - the previous window has no Action Bar control.
        - the opening animation is not performed from right to left.
  • AndroidUniversal Windows 10 App Home: Go back to the first application window: In this case, the application:
    • Will execute the event "Click on the left button".
    • Will run the preset process: all the opened windows are closed except for the main window (that is re-opened if necessary). This predefined processing will not be executed if the event "Click on the left button" returns False (this allows for example to ask the user for confirmation).
      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 the left button" will be executed.
      • 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 execute the event "Click on the left button".
    • 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 execute the event "Click on the left button".
    • 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 execute the event "Click on the left button".
    • 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.
Menu options displayed in the Action Bar
Android

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.
Menu displayed by the button
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, we advise you to have a single level of options.
In Android, two types of menus can be managed in the Action Bar:
  • the drop-down menu,
    Drop-down menu
  • the options found in the Action Bar directly. Indeed, 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.
    Action Bar
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:
  1. Display the description window of the menu option ("Description" from the popup menu).
  2. In the "UI" tab, check the "Display this option as a button at the top right of the Action Bar (if there is enough space)." option.
  3. 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:
  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 the "Move this popup menu into the Action Bar if it exists (displayed at run time on the device or on the emulator)" option.
  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 "UI" tab, check "Move this option into the Action Bar if there is enough space".
  3. 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:
  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 the "Move this popup menu into the Action Bar if it exists (displayed at run time on the device or on the emulator)" option.
  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 "UI" tab, check "Move this option into the Action Bar if there is enough space".
  3. 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:
  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 the "Move this popup menu into the Action Bar if it exists (displayed at run time on the device or on the emulator)" option.
  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 "UI" tab, check "Move this option into the Action Bar if there is enough space".
  3. Validate.
Remark: If the menu option is associated with an image, only the image will be displayed in the Action Bar.
iPhone/iPad

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:
Action Bar under iOS
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).
Universal Windows 10 App

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
AndroidiPhone/iPad 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.
Android The navigation between the different panes can be done:
  • via buttons displayed on the left of the Action Bar.
    Navigation between flaps
    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).
iPhone/iPad The navigation between the different panes is performed via a tab bar found at the bottom of the window:
Navigation between flaps
Rnotes: 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:
  1. Display the description window of the Action Bar ("Description" from the popup menu).
  2. Click "4".
  3. Click the "New view" button.
    View descriptions
  4. Enter:
    • The caption of the view.
    • The internal window that will be loaded in the zone (if "With action bar zone" is checked).
    • The associated icon (strongly recommended in iOS).
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).
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 aspect of the Action Bar/NavBar.
  • Versions 21 and later
    AndroidiPhone/iPad The animation of the Action Bar.
    New in version 21
    AndroidiPhone/iPad The animation of the Action Bar.
    AndroidiPhone/iPad The animation of the Action Bar.
  • Versions 21 and later
    AndroidiPhone/iPad The search mode in the Action Bar.
    New in version 21
    AndroidiPhone/iPad The search mode in the Action Bar.
    AndroidiPhone/iPad The search mode in the Action Bar.

Aspect of the Action Bar/NavBar

The following elements can be configured:
  • the color of the font used.
    Versions 19 and later
    You have the ability to apply the font color to the icons. In this case, the selected icons must be monochrome.
    New in version 19
    You have the ability to apply the font color to the icons. In this case, the selected icons must be monochrome.
    You have the ability to apply the font color to the icons. In this case, the selected icons must be monochrome.
  • the background color used.
  • AndroidiPhone/iPad the background image of the Action Bar. 9-slice scaling is available.
Versions 19 and later
iPhone/iPad Remarks:
  • The options regarding the font color and the background color have no effect before iOS 7.
  • In IOS 7, you have the ability to choose the system characteristics for the Action Bar: "Dark text, transparent background" or "Light text, transparent background".
New in version 19
iPhone/iPad Remarks:
  • The options regarding the font color and the background color have no effect before iOS 7.
  • In IOS 7, you have the ability to choose the system characteristics for the Action Bar: "Dark text, transparent background" or "Light text, transparent background".
iPhone/iPad Remarks:
  • The options regarding the font color and the background color have no effect before iOS 7.
  • In IOS 7, you have the ability to choose the system characteristics for the Action Bar: "Dark text, transparent background" or "Light text, transparent background".
Versions 21 and later
AndroidiPhone/iPad

Animation of the Action Bar

Several options can be used to manage the animation of the Action Bar:
  • Automatically hide the Action Bar during the Scroll: This option is used to automatically hide the Action Bar during the scroll (in a window, internal window, supercontrol, table or looper). 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:

  • Make the bar background transparent: This option is used to manage the transparency of the Action Bar. When this option is checked, the Action Bar becomes transparent. You can:
    • configure the bars that will be modified: Action Bar only or Action Bar and system bar.
    • configure the opacity of the Action Bar with ..Opacity. This property can be used in the optional "Scrollbar move" process of the window. 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 option "Make the bar background transparent" modifies the origin of controls. In the editor, the controls found below the Action Bar are automatically moved.
Remarks:
  • If ..Visible is used on the Action Bar control, an animation is automatically performed when the Action Bar disappear.
  • iPhone/iPad The option "Automatically hide the Action Bar during the scroll" is available from iOS 8.
  • Android The option "Automatically hide the Action Bar during the scroll" is available from Android 5.
New in version 21
AndroidiPhone/iPad

Animation of the Action Bar

Several options can be used to manage the animation of the Action Bar:
  • Automatically hide the Action Bar during the Scroll: This option is used to automatically hide the Action Bar during the scroll (in a window, internal window, supercontrol, table or looper). 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:

  • Make the bar background transparent: This option is used to manage the transparency of the Action Bar. When this option is checked, the Action Bar becomes transparent. You can:
    • configure the bars that will be modified: Action Bar only or Action Bar and system bar.
    • configure the opacity of the Action Bar with ..Opacity. This property can be used in the optional "Scrollbar move" process of the window. 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 option "Make the bar background transparent" modifies the origin of controls. In the editor, the controls found below the Action Bar are automatically moved.
Remarks:
  • If ..Visible is used on the Action Bar control, an animation is automatically performed when the Action Bar disappear.
  • iPhone/iPad The option "Automatically hide the Action Bar during the scroll" is available from iOS 8.
  • Android The option "Automatically hide the Action Bar during the scroll" is available from Android 5.
AndroidiPhone/iPad

Animation of the Action Bar

Several options can be used to manage the animation of the Action Bar:
  • Automatically hide the Action Bar during the Scroll: This option is used to automatically hide the Action Bar during the scroll (in a window, internal window, supercontrol, table or looper). 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:

  • Make the bar background transparent: This option is used to manage the transparency of the Action Bar. When this option is checked, the Action Bar becomes transparent. You can:
    • configure the bars that will be modified: Action Bar only or Action Bar and system bar.
    • configure the opacity of the Action Bar with ..Opacity. This property can be used in the optional "Scrollbar move" process of the window. 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 option "Make the bar background transparent" modifies the origin of controls. In the editor, the controls found below the Action Bar are automatically moved.
Remarks:
  • If ..Visible is used on the Action Bar control, an animation is automatically performed when the Action Bar disappear.
  • iPhone/iPad The option "Automatically hide the Action Bar during the scroll" is available from iOS 8.
  • Android The option "Automatically hide the Action Bar during the scroll" is available from Android 5.
Versions 21 and later
AndroidiPhone/iPad

Search in the Action Bar

To allow a search in the Action Bar:
  1. Check "Allow the search in the Action Bar". A new process is automatically associated to the Action Bar control: "Validating the search". This process is used to perform the search.
  2. If "Search history" is checked, the history of the last searches performed will be proposed to the user.
    iPhone/iPad Remark: The option "With button to clear the history" is used to automatically manage the history reset.
To implement the search, perform the following operations for example:
  1. Create a search button in the Action Bar (a "Magnifier" button for example).
  2. In the code of this option, use ActionBarSearchVisible to display the search edit control. For example:
    ActionBarSearchVisible(True, "Customer to find")
  3. Display the processes associated with the Action Bar control. In the "Search validation" event, enter the code 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 value searched corresponds to a parameter of the Looper control basic query.
    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.
  • iPhone/iPad If the option "With button to clear the history" is selected, the history proposes a choice to clear the history at the end of the list of suggestions.
  • Two processes are automatically added when the search is enabled in the Action Bar:
    • Validating the search.
    • Modifying the search.
  • Canceling the search: To find out if 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 cancelation.
Related Examples:
WM Managing Contacts 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
- ...
WM Shopping 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
AndroidiPhone/iPad

Search in the Action Bar

To allow a search in the Action Bar:
  1. Check "Allow the search in the Action Bar". A new process is automatically associated to the Action Bar control: "Validating the search". This process is used to perform the search.
  2. If "Search history" is checked, the history of the last searches performed will be proposed to the user.
    iPhone/iPad Remark: The option "With button to clear the history" is used to automatically manage the history reset.
To implement the search, perform the following operations for example:
  1. Create a search button in the Action Bar (a "Magnifier" button for example).
  2. In the code of this option, use ActionBarSearchVisible to display the search edit control. For example:
    ActionBarSearchVisible(True, "Customer to find")
  3. Display the processes associated with the Action Bar control. In the "Search validation" event, enter the code 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 value searched corresponds to a parameter of the Looper control basic query.
    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.
  • iPhone/iPad If the option "With button to clear the history" is selected, the history proposes a choice to clear the history at the end of the list of suggestions.
  • Two processes are automatically added when the search is enabled in the Action Bar:
    • Validating the search.
    • Modifying the search.
  • Canceling the search: To find out if 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 cancelation.
Related Examples:
WM Managing Contacts 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
- ...
WM Shopping 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!
AndroidiPhone/iPad

Search in the Action Bar

To allow a search in the Action Bar:
  1. Check "Allow the search in the Action Bar". A new process is automatically associated to the Action Bar control: "Validating the search". This process is used to perform the search.
  2. If "Search history" is checked, the history of the last searches performed will be proposed to the user.
    iPhone/iPad Remark: The option "With button to clear the history" is used to automatically manage the history reset.
To implement the search, perform the following operations for example:
  1. Create a search button in the Action Bar (a "Magnifier" button for example).
  2. In the code of this option, use ActionBarSearchVisible to display the search edit control. For example:
    ActionBarSearchVisible(True, "Customer to find")
  3. Display the processes associated with the Action Bar control. In the "Search validation" event, enter the code 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 value searched corresponds to a parameter of the Looper control basic query.
    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.
  • iPhone/iPad If the option "With button to clear the history" is selected, the history proposes a choice to clear the history at the end of the list of suggestions.
  • Two processes are automatically added when the search is enabled in the Action Bar:
    • Validating the search.
    • Modifying the search.
  • Canceling the search: To find out if 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 cancelation.
Related Examples:
WM Managing Contacts 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
- ...
WM Shopping 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!
See also
Minimum version required
  • Version 19
This page is also available for…
Comments
Click [Add] to post a comment