DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Développer une application ou un site / Spécificités Mobile
  • Présentation
  • Mise en place
  • Paramétrage du champ ou de la fenêtre
  • Evénement "Rafraîchissement par tirer/relâcher"
  • Personnalisation du "Pull To Refresh"
  • Bandeau de rafraîchissement
  • Evénement "Rafraîchissement par tirer/relâcher" : gestion du bandeau
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Présentation
La fonctionnalité "Pull to Refresh" permet à l'utilisateur de "tirer" un champ Table, un champ Zone répétée ou une fenêtre pour rafraîchir son contenu.
Lors de cette action, un bandeau de rafraîchissement apparaît automatiquement dans la zone découverte :
  • Le bandeau indique tout d'abord qu'il faut tirer pour rafraîchir.
  • Le bandeau indique ensuite qu'il faut relâcher pour rafraîchir.
  • Le bandeau indique que le rafraîchissement est en cours. Une jauge est affichée pendant la durée du rafraîchissement.
  • Le champ est mis à jour.
Un simple mouvement du doigt rafraîchit l'affichage
Un simple mouvement du doigt rafraîchit l'affichage
Mise en place

Paramétrage du champ ou de la fenêtre

Pour utiliser la fonctionnalité "Pull to Refresh" :
  1. Affichez la fenêtre de description du champ (Table ou Zone répétée) ou de la fenêtre.
  2. Dans l'onglet "Détail" de la fenêtre de description du champ, cochez l'option "Rafraîchissement par tirer/relâcher".
  3. Spécifiez si nécessaire la fenêtre interne à utiliser pour le "Pull to Refresh". Il est possible de :
    • utiliser l'affichage natif de la plateforme (option "Aucune").
    • utiliser une fenêtre prédéfinie. Dans ce cas (option "Fenêtre prédéfinie"), WINDEV Mobile propose d'importer une fenêtre prédéfinie. La fenêtre interne est alors immédiatement ajoutée dans le projet en cours et associée à la fonctionnalité. Cette fenêtre pourra être personnalisée si nécessaire.
      Remarque : La fenêtre interne s'appelle "FI_PULL_TO_REFRESH".
  4. Android Spécifiez si nécessaire la couleur de la jauge utilisée par défaut. Cette couleur est prise en compte lors de l'utilisation de l'affichage par défaut (option "Aucune").
  5. Validez si nécessaire la fenêtre de description.
Le paramétrage du "Pull to Refresh" a ajouté :
  • le bandeau de rafraîchissement qui sera affiché à l'utilisateur pendant l'opération. Par défaut, un bandeau de rafraîchissement est proposé. Si la personnalisation a été demandée, ce bandeau correspond à une fenêtre interne ajoutée au projet pour personnalisation.
  • l'événement "Rafraîchissement par tirer/relâcher" parmi les événements du champ (Table ou Zone répétée) ou de la fenêtre. Cet événement est automatiquement appelé lors de la gesture de rafraîchissement.

Evénement "Rafraîchissement par tirer/relâcher"

L'événement "Rafraîchissement par tirer/relâcher" doit contenir le code de mise à jour des données :
  • dans le champ Table ou Zone répétée.
  • dans la fenêtre.
Par défaut, à la fin de l'exécution de ce code, le bandeau de rafraîchissement sera automatiquement masqué.
Attention : Le bandeau de rafraîchissement affiche une jauge pendant l'exécution de l'événement "Rafraîchissement par tirer/relâcher". Cette jauge sera affichée uniquement si le thread principal peut s'exécuter pendant l'exécution de l'événement "Rafraîchissement par tirer/relâcher". Pour voir la jauge, il est nécessaire d'effectuer le traitement long du rafraîchissement (une requête HTTP, un parcours HFSQL par exemple) dans un thread exécuté depuis l'événement "Rafraîchissement par tirer/relâcher". Dans ce cas, il est nécessaire de gérer le bandeau via les fonctions suivantes :
Cas particulier : Table fichier ou Zone répétée fichier
Si le "Pull to Refresh" est activé sur une zone répétée ou une table fichier, la fonction TableAffiche ou ZoneRépétéeAffiche avec l'option taRéExécuteRequete sera automatiquement appelée à la fin de l'exécution de l'événement "Rafraîchissement par tirer/relâcher" (si celui-ci a été déclenché par un pull-to-refresh).
Pour désactiver ce comportement, il est nécessaire de renvoyer Faux dans l'événement "Rafraîchissement par tirer/relâcher". Pour plus de détails, consultez le paragraphe Evénement "Rafraîchissement par tirer/relâcher" : gestion du bandeau.
Personnalisation du "Pull To Refresh"

Bandeau de rafraîchissement

Si un bandeau de rafraîchissement est utilisé, ce bandeau correspond à une fenêtre interne spécifique qui peut être intégrée au projet pour personnalisation.
Cette fenêtre interne est composée de 3 plans affichés pendant les différentes étapes du "Pull To Refresh" :
  • Le premier plan est affiché pendant le scroll, tant que le bandeau de rafraîchissement n'a pas été affiché en totalité.
    Ce plan est composé d'une image et d'un libellé. Ce libellé décrit l'action associée à la gesture en cours.
  • Le second plan est affiché pendant le scroll lorsque le bandeau de rafraîchissement est affiché en totalité et tant que l'utilisateur n'a pas relâché le pointeur.
    Ce plan est composé d'une image et d'un libellé. Ce libellé décrit l'action associée à la gesture en cours. Lors du passage du plan 1 au plan 2, la flèche change de sens et le libellé devient "Relâcher pour rafraîchir".
  • Le dernier plan est affiché pendant le rafraîchissement des données.
    Ce plan est composé d'un champ Jauge et d'un libellé.
La fenêtre proposée contient trois événements spécifiques permettant de gérer le "Pull To Refresh" :
  • "Tirer pour rafraîchir : Début" : Cet événement est appelé lorsque la gesture du "Pull To Refresh" est détectée. Par défaut, cet événement positionne la fenêtre interne sur le plan 1 et modifie le libellé de l'action.
  • "Tirer pour rafraîchir : Attente du relâcher" : Cet événement est appelé lorsqu'un rafraîchissement peut être lancé. Par défaut, cet événement positionne la fenêtre interne sur le plan 2 et modifie le libellé de l'action.
  • "Tirer pour rafraîchir : Rafraîchissement" : Cet événement est appelé lors du lancement du rafraîchissement. Par défaut, cet événement positionne la fenêtre interne sur le plan 3 et modifie le libellé de l'action.
Lorsque la fenêtre interne a été intégrée au projet, il est possible de :
  • personnaliser l'interface du bandeau.
  • personnaliser les événements de gestion du "Pull To Refresh".
  • accéder aux champs de la fenêtre interne via la syntaxe :
    <Nom du champ Table ou Zone répétée>.<Nom de la fenêtre interne>.<Nom du champ>

Evénement "Rafraîchissement par tirer/relâcher" : gestion du bandeau

Cet événement peut gérer le rafraîchissement du champ (ou de la fenêtre) dans un thread spécifique. Dans ce cas, il est possible de gérer manuellement l'affichage du bandeau grâce aux fonctions suivantes :
Exemple : L'événement "Rafraîchissement par tirer/relâcher" du champ TABLE_Produits exécute la procédure automatique ChangeRéappro, une seule fois, en différé de 3 secondes.
// Affichage du bandeau de rafraîchissement
TableRafraîchissementVisible(TABLE_Produits, Vrai)
// Procédure automatique de mise à jour
ChangeRéappro()
A la fin de la procédure de mise à jour, le bandeau de rafraîchissement est effacé en utilisant à nouveau la fonction TableRafraîchissementVisible.
PROCÉDURE ChangeRéappro()
SI PAS gbReapproEffectuée ALORS
POUR i = 1 _À_ TABLE_Produits..Occurrence
SI TABLE_Produits[i].COL_ID = gnIDProduitReappro ALORS
TABLE_Produits[i].COL_EnStock = IMG_Stock_OK
FIN
FIN
FIN
// Suppression du bandeau de rafraîchissement
TableRafraîchissementVisible(TABLE_Produits, Faux)
Remarque : Il faut autant d'appels à TableRafraichissementVisible(Faux) que d'appels à TableRafraichissementVisible(Vrai) pour masquer le bandeau.
Version minimum requise
  • Version 20
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 25/05/2022

Signaler une erreur ou faire une suggestion | Aide en ligne locale