Zum Hauptinhalt springen

Loading

In ChatGPT öffnen
Schatten dwc-loading 24.10
Java API

Die Loading-Komponente zeigt ein Overlay über einer bestimmten Komponente oder Fläche an und signalisiert, dass ein Vorgang im Gange ist, und blockiert vorübergehend die Interaktion. Sie eignet sich gut für Aufgaben wie das Laden von Daten, Berechnungen oder Hintergrundprozesse. Für globale, appweite Prozesse überdeckt die BusyIndicator-Komponente stattdessen die gesamte Benutzeroberfläche.

Grundlagen​

Die einfachste Möglichkeit, eine Loading-Komponente zu erstellen, besteht darin, sie ohne zusätzliche Einstellungen zu initialisieren. Standardmäßig zeigt dies einen einfachen Spinner über dem übergeordneten Inhalt an. Sie können jedoch auch eine Nachricht zur weiteren Erklärung bereitstellen.

Hier ist ein Beispiel für die Erstellung einer Loading-Komponente mit einer Nachricht:

Code anzeigen

Bereichszuweisung​

Die Loading-Komponente in webforJ kann sich auf einen bestimmten übergeordneten Container wie ein Div beschränken und dabei sicherstellen, dass sie nur die Benutzerinteraktion innerhalb dieses Elements blockiert. Standardmäßig ist die Loading-Komponente relativ zu ihrem Elternelement, was bedeutet, dass sie die übergeordnete Komponente überlagert, anstatt die gesamte App.

Um die Loading-Komponente auf ihr übergeordnetes Element zu beschränken, fügen Sie die Loading-Komponente einfach dem übergeordneten Container hinzu. Wenn Sie sie beispielsweise zu einem Div hinzufügen, gilt das Ladeoverlay nur für dieses Div:

Div parentDiv = new Div();  
parentDiv.setStyle("position", "relative");
Loading loading = new Loading();
parentDiv.add(loading);
loading.open();  // Loading blockiert nur die Interaktion innerhalb des parentDiv

Hintergrund​

Die Loading-Komponente in webforJ ermöglicht es Ihnen, einen Hintergrund anzuzeigen, um die Benutzerinteraktion zu blockieren, während ein Prozess im Gange ist. Standardmäßig aktiviert die Komponente den Hintergrund, aber Sie haben die Möglichkeit, ihn bei Bedarf auszuschalten.

Für die Loading-Komponente ist der Hintergrund standardmäßig sichtbar. Sie können ihn mithilfe der Methode setBackdropVisible() explizit aktivieren oder ausschalten:

Loading loading = new Loading();
loading.setBackdropVisible(false);  // Deaktiviert den Hintergrund
loading.open();
Hintergrund aus

Selbst wenn Sie den Hintergrund deaktivieren, blockiert die Loading-Komponente weiterhin die Benutzerinteraktion, um sicherzustellen, dass der zugrunde liegende Prozess ununterbrochen abgeschlossen wird. Der Hintergrund steuert lediglich die visuelle Überlagerung, nicht das Verhalten der Interaktionsblockierung.

Spinner​

Die Loading-Komponente in webforJ enthält einen Spinner, der visuell anzeigt, dass ein Hintergrundvorgang im Gange ist. Sie können diesen Spinner mit mehreren Optionen anpassen, einschließlich seiner Größe, Geschwindigkeit, Richtung, Thema und Sichtbarkeit.

Hier ist ein Beispiel, wie Sie den Spinner innerhalb einer Loading-Komponente anpassen können:

Code anzeigen

Anwendungsfälle​

  • Datenabruf
    Beim Abrufen von Daten von einem Server oder einer API überlagert die Loading-Komponente einen bestimmten Abschnitt der Benutzeroberfläche, wie z. B. eine Karte oder ein Formular, um die Benutzer darüber zu informieren, dass das System im Hintergrund arbeitet. Dies ist ideal, wenn Sie den Fortschritt nur in einem Teil des Bildschirms anzeigen möchten, ohne die gesamte Benutzeroberfläche zu blockieren.

  • Inhalte laden in Karten/Abschnitten
    Die Loading-Komponente kann auf bestimmte Bereiche einer Seite beschränkt werden, wie z. B. einzelne Karten oder Container. Dies ist nützlich, wenn Sie anzeigen möchten, dass ein bestimmter Abschnitt der Benutzeroberfläche noch geladen wird, während Benutzer mit anderen Teilen der Seite interagieren können.

  • Komplexe Formularübermittlungen
    Bei längeren Formularübermittlungen, bei denen die Validierung oder Verarbeitung Zeit in Anspruch nimmt, bietet die Loading-Komponente visuelles Feedback für die Benutzer und beruhigt sie, dass ihre Eingaben aktiv verarbeitet werden.

Styling​

Loading...