Passer au contenu principal

Refresher

Ouvrir dans ChatGPT
Ombre dwc-refresher 25.00
Java API

Le pull-to-refresh est un motif courant dans les interfaces mobiles et adaptées aux tactiles, et le composant Refresher l'apporte aux conteneurs défilables dans webforJ. Lorsque les utilisateurs glissent vers le bas au-delà d'un seuil configurable, il passe par des états visuels : pull, release et refreshing, chacun avec une icône personnalisable et un texte localisé. Il s'associe bien avec InfiniteScroll pour recharger ou réinitialiser le contenu par le biais d'entrées Gestuelles.

Instantiation et internationalisation​

Ajoutez un Refresher en l'instanciant et en enregistrant un écouteur de rafraîchissement. Lorsque les opérations de rafraîchissement sont terminées, appelez finish() pour réinitialiser le composant à son état inactif.

Comment activer le Refresher

Pour activer le Refresher, cliquez et faites glisser vers le bas depuis le haut de la zone défilable. Bien que ce geste soit familier sur mobile, il est moins courant sur bureau—assurez-vous de maintenir et tirer avec votre souris.

Afficher le code

Cette approche est couramment utilisée pour rafraîchir des listes paginées ou redémarrer le chargement infini.

Internationalisation​

Chaque étiquette d'état peut également être localisée à l'aide de l'objet RefresherI18n. Les trois états sont :

  • Pull : Texte de geste initial (par exemple, "Tirez vers le bas pour rafraîchir")
  • Release : Seuil déclencheur atteint (par exemple, "Relâchez pour rafraîchir")
  • Refresh : État de chargement (par exemple, "Rafraîchissement")

Cela permet un support multilingue et des ajustements de marque au besoin.

Afficher le code

Personnalisation des icônes​

Vous pouvez changer les Icônes utilisées pour les étapes pull/release et refreshing en utilisant soit une Icône prédéfinie, soit une URL d'icône. Celles-ci sont utiles lorsque vous souhaitez appliquer une marque ou une animation personnalisée.

Afficher le code

Configuration du comportement de tirage​

Seuil​

Définissez jusqu'où l'utilisateur doit tirer vers le bas (en pixels) avant de déclencher le rafraîchissement :

refresher.setThreshold(80); // par défaut : 80px

Maximum de seuil​

Pour définir la distance de tirage maximale autorisée, utilisez la méthode setThresholdMax() :

refresher.setThresholdMax(160);

Ces seuils contrôlent la sensibilité du geste et la courbe de résistance.

Gestion de l'état​

Le composant Refresher maintient son propre état interne et communique les changements d'état par le biais d'événements. Lorsqu'un utilisateur tire vers le bas au-delà du seuil défini, le Refresher émet un événement de rafraîchissement auquel vous pouvez répondre en enregistrant un écouteur onRefresh().

À l'intérieur de cet écouteur, vous êtes censé effectuer l'opération requise—comme extraire de nouvelles données ou réinitialiser une liste—et ensuite appeler explicitement :

refresher.finish();
Manquant finish()

Si vous oubliez d'appeler finish(), le réfresh restera indéfiniment dans l'état de chargement.

Vous pouvez également désactiver le Refresher par programme à tout moment pour empêcher l'utilisateur de déclencher le comportement de rafraîchissement :

refresher.setEnabled(false);

Cela est utile lorsque les rafraîchissements doivent être temporairement interdits—par exemple, pendant un écran de chargement ou pendant qu'un autre processus critique est en cours d'exécution.

Stylisation​

Thèmes​

Le composant Refresher prend en charge plusieurs thèmes pour distinguer visuellement les différents états ou pour s'adapter à l'apparence et à la sensation de votre application. Les thèmes peuvent être appliqués à l'aide de la méthode setTheme().

L'échantillon suivant fait défiler à travers tous les thèmes disponibles chaque fois que vous tirez pour rafraîchir, vous donnant un aperçu en direct de l'apparence du Refresher à travers différents thèmes :

Afficher le code

Loading...