Overslaan naar hoofdinhoud

Refresher

Openen in ChatGPT
Schaduw dwc-refresher 25.00
Java API

Pull-to-refresh is een veelvoorkomend patroon in mobiele en tikvriendelijke interfaces, en de Refresher component brengt het naar scrollbare containers in webforJ. Terwijl gebruikers naar beneden swipen 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 opnieuw laden of resetten van inhoud via gebaar-gebaseerde invoer.

Instantiatie en internationalisatie​

Voeg een Refresher toe door deze te instantiëren en een verversingsluisteraar te registreren. Wanneer de verversingsoperaties zijn voltooid, roep je finish() aan om de component weer in de inactieve staat te zetten.

Hoe de Refresher te activeren

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

Toon Code

Deze benadering wordt vaak gebruikt om gepagineerde lijsten te verversen of de oneindige scroll-lading opnieuw te starten.

Internationalisatie​

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

  • Pull: Initiële gebaar tekst (bijv. "Trek naar beneden om te verversen")
  • Release: Drempel bereikt (bijv. "Laat los om te verversen")
  • Refresh: Laadstatus (bijv. "Bezig met verversen")

Dit maakt meertalige ondersteuning en merkaanpassingen mogelijk indien nodig.

Toon Code

Pictogram aanpassing​

Je kunt de gebruikte Icons voor de pull/release en refreshing fasen wijzigen met een vooraf gedefinieerde Icon of een Pictogram-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 verversing 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 beheersen de gevoeligheid van de gebaren en de weerstandscurve.

Statusbeheer​

De Refresher component behoudt zijn eigen interne status en communiceert statuswijzigingen via gebeurtenissen. Wanneer een gebruiker naar beneden trekt voorbij de gedefinieerde drempel, geeft de Refresher een verversingsevent af waar je op kunt reageren door een onRefresh() luisteraar te registreren.

Binnen deze luisteraar wordt verwacht dat je de vereiste operatie uitvoert—zoals het ophalen van nieuwe gegevens of het resetten van een lijst—en dan expliciet aanroept:

refresher.finish();
Ontbrekende finish()

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

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

refresher.setEnabled(false);

Dit is nuttig wanneer verversingen tijdelijk niet zijn toegestaan—bijvoorbeeld tijdens een laadscherm of terwijl een ander kritisch proces bezig is.

Stijlen​

Thema's​

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

Het volgende voorbeeld cycled door alle beschikbare thema's elke keer dat je trekt om te verversen, wat je een live preview geeft van hoe de Refresher eruitziet in verschillende thema's:

Toon Code

Loading...