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.
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.
Keine Kommentare:
Kommentar veröffentlichen
Hinweis: Nur ein Mitglied dieses Blogs kann Kommentare posten.