Ga naar hoofdinhoud

Refresher

Open in ChatGPT
Shadow dwc-refresher 25.00
Java API

De Refresher component in webforJ maakt een pull-to-refresh interactie mogelijk binnen scrollbare containers—ideaal voor het dynamisch laden van gegevens op mobiele of touch-vriendelijke interfaces. Terwijl gebruikers naar beneden vegen voorbij een configureerbare drempel, doorloopt de refresher visuele toestanden: pull, release en refreshing. Elke toestand presenteert een aanpasbaar pictogram en gelokaliseerde tekst om duidelijk feedback te communiceren.

Je kunt Refresher gebruiken in combinatie met componenten zoals InfiniteScroll om inhoud opnieuw te laden of de staat te resetten via eenvoudige gebaargebaseerde invoer. De component is volledig configureerbaar wat betreft interactiegedrag, uiterlijk, lokalisatie en integratie met de rest van je gebruikersinterface.

Instantiatie en internationalisatie​

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

Hoe je de Refresher activeert

Om de Refresher te activeren, klik en sleep naar beneden vanaf de bovenkant van het scrollbare gebied. Hoewel deze gebaar bekend is op mobiele apparaten, is het minder gebruikelijk op desktop—zorg ervoor dat je met de muis vasthoudt en trekt.

Toon code

Deze aanpak wordt vaak gebruikt om gepagineerde lijsten te vernieuwen of het oneindige scrollen opnieuw te starten.

Internationalisatie​

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

  • Pull: Initiële gebaartekst (bijv. "Trek naar beneden om te verversen")
  • Release: Triggerdrempel bereikt (bijv. "Laat los om te verversen")
  • Refresh: Laadstatus (bijv. "Verfrissen")

Dit maakt meertalig ondersteuning en aanpassingen aan branding mogelijk indien nodig.

Toon code

Pictogramaanpassing​

Je kunt de Icons die worden gebruikt voor de pull/release en refreshing fasen wijzigen met behulp van een vooraf gedefinieerde 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 naar beneden moet trekken (in pixels) voordat de refresh wordt geactiveerd:

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

Maximale drempel​

Om de maximale pull-afstand die is toegestaan te definiëren, gebruik de setThresholdMax() methode:

refresher.setThresholdMax(160);

Deze drempels bepalen de gevoeligheid van de gebaren en de weerstandscurve.

Statusbeheer​

De Refresher component behoudt zijn eigen interne status en communiceert statuswijzigingen via evenementen. Wanneer een gebruiker naar beneden trekt voorbij de gedefinieerde drempel, genereert de Refresher een vernieuwingsevenement waar je op kunt reageren door een onRefresh() listener te registreren.

Binnen deze listener wordt van je verwacht dat je de benodigde bewerking uitvoert—zoals het ophalen van nieuwe gegevens of het resetten van een lijst—en vervolgens expliciet aanroept:

refresher.finish();
Ontbrekende finish()

Als je vergeet finish() aan te roepen, blijft de refresher eindeloos in de laadstatus.

Je kunt de Refresher ook op elk moment programmatisch uitschakelen om te voorkomen dat de gebruiker de refresh-gedraging activeert:

refresher.setEnabled(false);

Dit is nuttig wanneer refreshen tijdelijk niet is toegestaan—bijvoorbeeld tijdens een laadscherm of terwijl een ander kritisch proces actief is.

Stijlgeving​

Thema's​

De Refresher component ondersteunt meerdere thema's om verschillende staten visueel te onderscheiden of om aan te sluiten bij de uitstraling van je app. Thema's kunnen worden toegepast met behulp van de setTheme() methode.

Het volgende voorbeeld doorloopt alle beschikbare thema's elke keer dat je trekt om te verversen, waardoor je een live voorbeeld krijgt van hoe de Refresher eruitziet in verschillende thema's:

Toon code

Loading...