Zum Hauptinhalt springen

Refresher

ChatGPT öffnen
Shadow dwc-refresher 25.00
Java API

Die Refresher-Komponente in webforJ ermöglicht eine Pull-to-Refresh-Interaktion innerhalb von Scrollbereichen – ideal für das dynamische Laden von Daten in mobilen oder berührungsgerechten Schnittstellen. Während Benutzer nach unten wischen und eine konfigurierbare Schwelle überschreiten, wechselt der Refresher durch visuelle Zustände: pull, release und refreshing. Jeder Zustand präsentiert ein anpassbares Symbol und lokalisierte Texte, um das Feedback klar zu kommunizieren.

Sie können Refresher in Kombination mit Komponenten wie InfiniteScroll verwenden, um Inhalte neu zu laden oder den Status über einfache gestenbasierte Eingaben zurückzusetzen. Die Komponente ist vollständig konfigurierbar in Bezug auf Interaktionsverhalten, Erscheinungsbild, Lokalisierung und Integration mit dem Rest Ihrer Benutzeroberfläche.

Instanziierung und Internationalisierung​

Fügen Sie einen Refresher hinzu, indem Sie ihn instanziieren und einen Refresh-Listener registrieren. Wenn die Refresh-Vorgänge abgeschlossen sind, rufen Sie finish() auf, um die Komponente in ihren Leerlaufzustand zurückzusetzen.

Aktivierung des Refresher

Um den Refresher zu aktivieren, klicken und ziehen Sie nach unten von der oberen Kante des scrollbaren Bereichs. Während diese Geste auf Mobilgeräten vertraut ist, ist sie auf Desktop weniger verbreitet – stellen Sie sicher, dass Sie mit der Maus halten und ziehen.

Code anzeigen

Dieser Ansatz wird häufig verwendet, um paginierte Listen zu aktualisieren oder das Laden unendlicher Scrolls neu zu starten.

Internationalisierung​

Jeder Zustandsbezeichner kann auch mithilfe des RefresherI18n-Objekts lokalisiert werden. Die drei Zustände sind:

  • Pull: Text für die anfängliche Geste (z. B. "Nach unten ziehen zum Aktualisieren")
  • Release: Auslöseschwelle erreicht (z. B. "Loslassen zum Aktualisieren")
  • Refresh: Ladezustand (z. B. "Aktualisiere")

Dies ermöglicht mehrsprachige Unterstützung und Anpassungen des Marketings nach Bedarf.

Code anzeigen

Symbolanpassung​

Sie können die Icons ändern, die für die pull/release- und refreshing-Phasen verwendet werden, entweder durch ein vordefiniertes Icon oder eine Icon-URL. Diese sind nützlich, wenn Sie Branding oder eine benutzerdefinierte Animation anwenden möchten.

Code anzeigen

Pull-Verhalten Konfiguration​

Schwelle​

Legen Sie fest, wie weit der Benutzer (in Pixeln) nach unten ziehen muss, bevor der Refresh ausgelöst wird:

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

Maximale Schwelle​

Um die maximale zulässige Ziehdistanz zu definieren, verwenden Sie die Methode setThresholdMax():

refresher.setThresholdMax(160);

Diese Schwellenwerte steuern die Sensitivität und Widerstandskurve der Geste.

Zustandsverwaltung​

Die Refresher-Komponente verwaltet ihren eigenen internen Zustand und kommuniziert Zustandsänderungen über Ereignisse. Wenn ein Benutzer über die definierte Schwelle nach unten zieht, gibt der Refresher ein Refresh-Ereignis aus, auf das Sie reagieren können, indem Sie einen onRefresh()-Listener registrieren.

Innerhalb dieses Listeners wird erwartet, dass Sie die erforderlichen Operationen ausführen – beispielsweise neue Daten abrufen oder eine Liste zurücksetzen – und dann explizit aufrufen:

refresher.finish();
Fehlendes finish()

Wenn Sie vergessen, finish() aufzurufen, bleibt der Refresher im Ladezustand, bis auf unbestimmte Zeit.

Sie können auch den Refresher jederzeit programmatisch deaktivieren, um zu verhindern, dass der Benutzer das Refresh-Verhalten auslöst:

refresher.setEnabled(false);

Dies ist nützlich, wenn Aktualisierungen vorübergehend nicht erlaubt sein sollten – zum Beispiel während eines Ladebildschirms oder während ein anderer kritischer Prozess läuft.

Styling​

Themen​

Die Refresher-Komponente unterstützt mehrere Themen, um verschiedene Zustände visuell zu unterscheiden oder dem Erscheinungsbild Ihrer App zu entsprechen. Themen können mit der Methode setTheme() angewendet werden.

Das folgende Beispiel durchläuft beim Aktualisieren jedes Mal alle verfügbaren Themen und bietet Ihnen eine Live-Vorschau, wie der Refresher in verschiedenen Themen aussieht:

Code anzeigen

Loading...