Xpert.ivy Code Rezept: Lade-Indikatoren für Html User Dialog

Problem

Sie wollen dem Benutzer ein Visuelles Feedback geben während etwas am laden oder speichern ist.

Lösung

PrimeFaces bietet 2 Komponenten, p:ajaxStatus und p:blockUI, mit denen man dem Benutzer Lade-Indikatoren anzeigen kann.

Dieses Tutorial zeigt Ihnen, wie Sie die beiden Komponenten einsetzen können, um dem Benutzer Lade-Indikatoren wie auf Abbildung 1 anzuzeigen.
Abb. 1: p:ajaxStatus und p:blockUI in Aktion

SVN

Das fertige Projekt  kann per SVN von http://xpert-ivy-hacker-source-code.googlecode.com/svn/trunk/Forms in den Xpert.ivy Designer importiert werden.

Code

Hinweis: Sie benötigen den Preview Release 'Rothorn' von Xpert.ivy.

Starten Sie die Engine und probieren Sie die p:ajaxStatus and p:blockUI Demo aus. Wird der obere  Button gedrückt, sieht man, dass oberhalb des Button eine Lade Animation (p:ajaxStatus) angezeigt wird und über das ganze Panel ein grauer Layer mit einem Lade-Indikator (p:blockUI) gelegt wird.

Schauen wir uns den Code an der dazu nötig ist.


Code Snippet 1: Code für die Lade-Indikatoren

Zeilen 4 bis 12 zeigen, wie man p:ajaxStatus konfigurieren kann. p:ajaxStatus wird jedesmal getriggert, wenn ein Ajax Request gefeuert wird. Also z.B. wenn ein p:commandButton gedrückt wird. Sobald der Request abgefeuert wurde, wird der Inhalt der start facet (Zeile 5) eingeblendet. Wenn der Request fertig ist, wird der Inhalt von der complete facet (Zeile 9) angezeigt.

Wenn p:ajaxStatus nicht getriggert werden soll, muss das global Attribut des p:commandButton auf false gestellt werden. Dies ist auf dem p:commandButton auf Zeile 15 zu sehen.

p:blockUI (Zeilen 20 bis 23) funktioniert etwas anders: Man konfiguriert, welche Komponente blockiert werden soll (block="panel") und welche Komponente p:blockUI aktiviert (trigger="btn").

Es kann ein beliebiger Inhalt innerhalb von p:ajaxStatus und p:blockUI angezeigt werden.

Weiterführende Ressourcen

Keine Kommentare:

Kommentar posten

Hinweis: Nur ein Mitglied dieses Blogs kann Kommentare posten.