PC SOFT

ONLINE HELP
 WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
This content has been translated automatically. Click here to view the French version.
  • 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.
  • It then indicates that you must release to refresh.
  • It also indicates that the refresh operation is in progress. A progress bar is displayed during the refresh operation.
  • The control is refreshed.
A simple finger movement refreshes the display
A simple finger movement refreshes the display
Versions 23 and later
Android This functionality is now available for windows in Android applications.
iPhone/iPad This feature is now available for windows in iPhone/iPad applications.
New in version 23
Android This functionality is now available for windows in Android applications.
iPhone/iPad This feature is now available for windows in iPhone/iPad applications.
Android This functionality is now available for windows in Android applications.
iPhone/iPad This feature is now available for windows in 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 "Detail" tab of the description window of the control, check the "Refresh by drag/release" option.
  3. Specify (if necessary) the internal window that will be used for "Pull to refresh". It is possible to:
    • use the native display of platform ("None" option).
    • 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.
      Remark: 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.

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". For more details, see Event "Refreshing by pull/release": managing the bar.
Customizing the "Pull to refresh" feature

Refresh bar

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 code 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.
PROCÉDURE ChangeReorder()
IF NOT gbReorderPerformed THEN
FOR i = 1_TO_ TABLE_Products..Count
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)
Remark: It takes as many calls to TableRefreshVisible(False) as it takes to TableRefreshVisible(True) to hide the blindfold.
See also
Minimum version required
  • Version 20
Comments
Click [Add] to post a comment