Eine verbesserte UX mit AJUI_Progressbar

Haben Sie schon einmal eine Aktion ausgeführt, ohne dass etwas zu passieren schien, und wussten nicht, ob Sie erneut klicken oder weiter warten sollten? Es gibt keine Rückmeldung, selbst wenn die Anwendung eine Aktion im Hintergrund ausführt? Vielleicht braucht die Aktion einige Zeit, um ein Ergebnis zu liefern? Wie Sie vielleicht wissen, bietet 4D bereits eine eingebaute Fortschrittsanzeige, die die Ausführungszeit erträglicher macht, aber wenn Sie etwas mit einem mehr webähnlichen Design wollen, dann lesen Sie weiter, denn das ist es, was die AJUI_Progressbar Ihnen bietet!

Was ist AJUI_Progressbar

Die AJUI ProgressBar ist eine mit 4D 17 R3 entwickelte Komponente, die auf SVG und 4D Worker Technologie basiert. Sie ermöglicht es Ihnen, sehr einfach Fortschrittsbalken zu erzeugen. Die Komponente erstellt eine Reihe von Eigenschaften, um die Eigenschaften und das visuelle Rendering der Fortschrittsbalken zu definieren. Außerdem gibt es Formeln für den Zugriff auf Assessoren und Methoden zur Erzeugung von Fortschrittsbalken.

Die Komponente enthält zwei Arten von Instanzen, die zwei spezifische Varianten der verfügbaren Fortschrittsbalken darstellen. Das erste Design ist ein linearer Stil und das zweite ist kreisförmig. Jede Variante hat spezifische Eigenschaften für ihr Design.

Den Balken können numerische Werte zwischen 0 und 100 zugewiesen werden, aber da der angezeigte Text angepasst werden kann, ist es möglich, andere Werte visuell darzustellen. Die Komponente verwendet Worker, um die Seite bei der Erstellung von Fortschrittsbalken zu aktualisieren. Der Worker hat noch einen weiteren Nutzen: Er bietet die Möglichkeit, Animationen zu verwalten.

Die Komponente bietet mehrere Methoden, um den Fortschrittsbalken mithilfe eines Objekts und von Funktionen anzupassen und zu manipulieren. Außerdem bietet sie zwei Methoden zum Abrufen von Instanzen für jeden Typ von Fortschrittsbalken:

• Neu AJUI_ProgressBar: Linearer Fortschrittsbalken.
• Neu AJUI CircularProgressBar: Kreisförmiger Fortschrittsbalken.

Beide Methoden geben Obejcts zurück, die die Eigenschaften des Balkens, ihre Standardwerte sowie Formeln zu ihrer Manipulation enthalten.

Die anderen verfügbaren Methoden sind mit dem Präfix „HDI“ (How do I) versehen. Mit diesen Methoden können Sie Formulare aufrufen, die Beispiele für die Verwendung der Funktionen der Komponente enthalten.

Einrichten eines linearen Fortschrittsbalkens

• Fügen Sie zunächst ein Bildobjekt in ein Formular ein. Dieses Objekt wird als Host für den Fortschrittsbalken verwendet. Sie können mehrere Bildobjekte hinzufügen, wenn Sie mehrere Fortschrittsbalken gleichzeitig erzeugen möchten.
• Der zweite Schritt besteht darin, eine Instanz des Fortschrittsbalkens zu erstellen. Sie haben die Wahl, eine der beiden oben beschriebenen Methoden zu starten. Idealerweise sollte das Objekt, das von der Methode Ihrer Wahl zurückgegeben wird, in der Variablen „Form“ gespeichert werden. Es wird auch empfohlen, dem „Form“-Objekt eine Ebene hinzuzufügen.

Fügen Sie anschließend den Namen Ihres Bildobjekts zur Instanz hinzu. Zum Testen empfehlen wir Ihnen, den Wert des Fortschrittsbalkens zu ändern (Standard: 0) und die Animationen zu aktivieren. Um Ihren Fortschrittsbalken zu erzeugen, starten Sie einfach die entsprechende „Start“-Formel.

Wenn Sie mehrere Bildobjekte hinzugefügt haben, wiederholen Sie den zweiten Schritt für jedes einzelne (eine Instanz pro Bildobjekt).

So sieht der Code für einen linearen Fortschrittsbalken aus:

AJUI_Progressbar in der Tiefe

Weitere Details sowie eine Schritt-für-Schritt-Anleitung zur Verwendung und Konfiguration der Komponente finden Sie hier. Egal, ob Sie die AJUI_Progressbar oder die in 4D eingebaute Fortschrittsanzeige verwenden, Sie werden den Benutzern versichern, dass tatsächlich etwas passiert. Viel Spaß!