PC SOFT

WINDEV, WEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • Overview
  • Implementation
  • Configuring the control or the window
  • Event "Refreshing by pull/release"
  • Customizing the "Pull to refresh" feature
  • Refresh bar
  • Event "Refreshing by pull/release": managing the 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
The "Pull to refresh" feature allows the user to "pull" a Table control, a Looper control or a window in order to refresh its content.
During this action, a refresh bar automatically appears in the exposed area:
  • The bar indicates that you must pull to refresh.
  • Then, the bar indicates that you must release to refresh.
  • The bar indicates that the refresh operation is in progress. A progress bar is displayed during the refresh duration.
  • The control is updated.
A simple finger movement refreshes the display
A simple finger movement refreshes the display
Versions 23 and later
Android This feature is now available for the windows in the Android applications.
iPhone/iPad This feature is now available for the windows in the iPhone/iPad applications.
New in version 23
Android This feature is now available for the windows in the Android applications.
iPhone/iPad This feature is now available for the windows in the iPhone/iPad applications.
Android This feature is now available for the windows in the Android applications.
iPhone/iPad This feature is now available for the windows in the iPhone/iPad applications.
Implementation

Configuring the control or the window

To use the "Pull to Refresh" feature:
  1. Display the description window of control (Table or Looper) or window.
  2. In the "Details" tab of the description window of control, check "Pull to refresh".In the "Details" tab of the description window of control, check "Refresh by pull/release".
  3. Specify (if necessary) the internal window that will be used for "Pull to refresh". You can:
    • use the window proposed by default by WINDEV Mobile ("None" option).
      Versions 23 and later
      use the native display of platform ("None" option).
      New in version 23
      use the native display of platform ("None" option).
      use the native display of platform ("None" option).
    • import into the project the preset window proposed by WINDEV Mobile in order to customize it ("Preset window" option). If this option is selected, the internal window is immediately added into the current project and it is associated with the feature.
      Note: We advise you to copy the window into the directory of current project. The internal window is named "IW_PULL_TO_REFRESH".       use a preset window. In this case ("Preset window" option), WINDEV Mobile proposes to import a preset window. The internal window is immediately added into the current project and it is associated with the feature. This window can be customized if necessary.
      Note: The internal window is named "IW_PULL_TO_REFRESH".
  4. Versions 23 and later
    Android Specify (if necessary) the color of progress bar used by default. This color is taken into account when using the default display ("None" option).
    New in version 23
    Android Specify (if necessary) the color of progress bar used by default. This color is taken into account when using the default display ("None" option).
    Android Specify (if necessary) the color of progress bar used by default. This color is taken into account when using the default display ("None" option).
  5. Validate (if necessary) the description window.
The setting of "Pull to refresh" has added:
  • the refresh bar that will be displayed to the user during the operation. A refresh bar is proposed by default. If the customization was requested, this bar corresponds to an internal window added to the project for customization.
  • the "Refreshing by pull/release" event among the (Table or Looper) control or window events. This event is automatically called during the refresh gesture.
Note: The implementation on a window is available from version 23.

Event "Refreshing by pull/release"

The event "Refreshing by pull/release" must contain the code for refreshing data:
  • in the Table or Looper control.
  • Versions 23 and later
    in the window.
    New in version 23
    in the window.
    in the window.
At the end of code execution, the refresh bar will be automatically hidden.
Caution: The refresh bar displays a progress bar during the execution of the event "Refreshing by pull/release". This progress bar will be displayed only if the main thread can be run during the execution of "Refreshing by pull/release". To see the progress bar, you must perform the long refresh process (HTTP request or HFSQL browse for example) in a thread run from the event "Refreshing by pull/release". In this case, the bar must be managed by the following functions:
Special case: Browsing Table or Looper
If "Pull to refresh" is enabled on a browsing looper or table, TableDisplay or LooperDisplay associated with the taReExecuteQuery constant will be automatically called at the end of "Refreshing by pull/release" (if it was triggered by a pull-to-refresh).
To disable this behavior, you must return False in the event "Refreshing by pull/release". See Event "Refreshing by pull/release": managing the bar for more details.
Customizing the "Pull to refresh" feature

Refresh bar

The refresh bar corresponds to a specific internal window. A standard internal window is used by default but it can be included in the project for customization. If a refresh bar is used, this bar corresponds to a specific internal window that can be included in the project for customization.
This internal window includes 3 planes displayed during the different steps of "Pull to refresh":
  • The first plane is displayed during the scroll, as long as the refresh bar is not entirely displayed.
    This plane includes an image and a caption. This caption describes the action associated with the current gesture.
  • The second plane is displayed during the scroll when the refresh bar is entirely displayed and as long as the user did not release the pointer.
    This plane includes an image and a caption. This caption describes the action associated with the current gesture. When going from plane 1 to plane 2, the arrow changes direction and the caption becomes "Release to refresh".
  • The last plane is displayed during the data refresh.
    This plane includes a Progress Bar control and a caption.
The proposed window contains three specific events to manage the "Pull to refresh" gesture:
  • "Pull to refresh: Start": This event is called when the "Pull to refresh" gesture is detected. By default, this event positions the internal window on plane 1 and modifies the caption of the action.
  • "Pull to refresh: Wait for release": This event is called when a refresh can be started. By default, this event positions the internal window on plane 2 and modifies the caption of the action.
  • "Pull to refresh: Refresh": This event is called when starting the refresh. By default, this event positions the internal window on plane 3 and modifies the caption of the action.
When the internal window was included in the project, you can:
  • customize the bar interface.
  • customize the events for managing "Pull to refresh".
  • access the controls of internal window via the following syntax:
    <Name of Table or Looper control>.<Name of Internal Window>.<Control name>

Event "Refreshing by pull/release": managing the bar

This event can manage the control (or window) refresh in a specific thread. In this case, the bar display can be managed manually by the following functions:
Example: The event "Refreshing by pull/release" of TABLE_Products runs the automatic procedure named ChangeReorder, once, with a 3-second delay.
// Display the refresh bar
TableRefreshVisible(TABLE_Products, True)
// Automatic refresh procedure
ChangeReorder()
At the end of refresh procedure, the refresh bar is erased by using TableRefreshVisible again.
PROCEDURE ChangeReorder()
IF NOT gbReorderPerformed THEN
FOR i = 1_TO_ TABLE_Products..Occurrence
IF TABLE_Products[i].COL_ID = gnReorderProductID THEN
TABLE_Products[i].COL_InStock = IMG_Stock_OK
END
END
END
// Delete the refresh bar
TableRefreshVisible(TABLE_Products, False)
Note: To hide the bar, you must perform as many calls to TableRefreshVisible(False) as the number to calls to TableRefreshVisible(True).
See also
Minimum version required
  • Version 20
Comments
Click [Add] to post a comment