Overslaan naar hoofdinhoud

Refresher

Openen in ChatGPT
Schaduw dwc-refresher 25.00
Java API

Pull-to-refresh is een veelvoorkomend patroon in mobiele en aanraakvriendelijke interfaces, en de Refresher component brengt dit naar scrollbare containers in webforJ. Terwijl gebruikers omlaag vegen voorbij een configureerbare drempel, verandert het door visuele toestanden: pull, release en refreshing, elk met een aanpasbaar pictogram en gelokaliseerde tekst. Het werkt goed samen met InfiniteScroll voor het herladen of opnieuw instellen van inhoud via gebaar-gebaseerde input.

Instantiatie en internationalisering​

Voeg een Refresher toe door deze te instantiëren en een refresh listener te registreren. Wanneer refresh-operaties zijn voltooid, roep je finish() aan om de component naar de idle-toestand te resetten.

Hoe je de Refresher activeert

Om de Refresher te activeren, klik en sleep omlaag vanaf de bovenkant van het scrollbare gebied. Terwijl dit gebaar vertrouwd is op mobiel, is het minder gebruikelijk op desktop—zorg ervoor dat je met je muis vasthoudt en trekt.

Toon Code

Deze benadering wordt vaak gebruikt om gepagineerde lijsten te vernieuwen of de loading van infinite scroll opnieuw te starten.

Internationalisering​

Elke statuslabel kan ook gelokaliseerd worden met behulp van het RefresherI18n object. De drie staten zijn:

  • Pull: Initiële gebaar tekst (bijv. "Trek omlaag om te vernieuwen")
  • Release: Drempel bereikt (bijv. "Laat los om te vernieuwen")
  • Refresh: Laadtoestand (bijv. "Bezig met vernieuwen")

Dit stelt meertalige ondersteuning en branding-aanpassingen mogelijk wanneer nodig.

Toon Code

Pictogram aanpassing​

Je kunt de Icons die worden gebruikt voor de pull/release en refreshing stadia wijzigen met behulp van een vooraf gedefinieerd Icon of een Icon URL. Deze zijn nuttig wanneer je branding of een aangepaste animatie wilt toepassen.

Toon Code

Pull-gedrag configuratie​

Drempel​

Stel in hoe ver de gebruiker moet omlaag trekken (in pixels) voordat de refresh wordt geactiveerd:

refresher.setThreshold(80); // standaard: 80px

Maximale drempel​

Om de maximale trekafstand te definiëren, gebruik je de setThresholdMax() methode:

refresher.setThresholdMax(160);

Deze drempels regelen de gevoeligheid van het gebaar en de weerstandcurve.

Toestandsbeheer​

De Refresher component onderhoudt zijn eigen interne status en communiceert statuswijzigingen via evenementen. Wanneer een gebruiker omlaag trekt voorbij de gedefinieerde drempel, zendt de Refresher een refresh-evenement uit waar je op kunt reageren door een onRefresh() listener te registreren.

Binnen deze listener wordt van je verwacht dat je de vereiste operatie uitvoert—zoals het ophalen van nieuwe data of het opnieuw instellen van een lijst—en vervolgens expliciet aanroept:

refresher.finish();
Ontbrekende finish()

Als je vergeet finish() aan te roepen, blijft de refresher in de laadtoestand tot in de eeuwigheid.

Je kunt ook op elk moment de Refresher programmatig uitschakelen om te voorkomen dat de gebruiker de verversingsgedrag activeert:

refresher.setEnabled(false);

Dit is nuttig wanneer verversingen tijdelijk niet mogen worden toegestaan—bijvoorbeeld tijdens een laadscherm of terwijl een ander kritisch proces aan het draaien is.

Stijlen​

Thema's​

De Refresher component ondersteunt meerdere thema's om verschillende toestanden visueel te onderscheiden of om overeen te komen met de look en feel van jouw app. Thema's kunnen worden toegepast met de setTheme() methode.

Het volgende voorbeeld doorloopt alle beschikbare thema's elke keer dat je sleept om te vernieuwen, zodat je een live preview krijgt van hoe de Refresher eruitziet in verschillende thema's:

Toon Code

Loading...