Mit einer XdevProgressBar lässt sich der Fortschritt eines laufenden Prozesses visualisieren. Der Fortschritt wird mit Hilfe eines Wertes zwischen 0.0 und 1.0 angegeben. Um den aktuellen Fortschritt eines Prozesses anzeigen zu können, müssen Sie zuvor dessen Gesamtumfang ermitteln. In vielen Fällen ist das Anzeigen eines Fortschritt-Rads ausreichend, das dem Anwender lediglich signalisiert, dass gerade ein Prozess mit unbestimmter Dauer läuft. Diese Variante ist einfacher umzusetzen.
Wenn Sie den jedoch den Fortschritt in Echtzeit anzeigen, neben der XdevProgressBar noch weitere UI-Komponenten aktualisieren oder die Oberfläche während eines Hintergrundprozesses nicht sperren möchten, müssen Sie den Prozess in einem eigenen, parallel ablaufenden Thread ausführen und bei jeder Änderung die Oberfläche im Browser aktualisieren.
Wichtige Events:
- valueChange - Wird ausgelöst, wenn sich der Fortschritt ändert.
Include Page Event valueChange Event valueChange
Wichtige Properies:
Value - Aktueller Fortschritt, der als Wert zwischen 0,.0 und 1,.0 angegeben wirdwerden muss.
Indeterminate - Anstelle eines Fortschritt-Balkens wird ein ständig laufendes Fortschritts-Rad angezeigt. Der aktuelle Stand ist damit nicht erkennbar.
Examples:
...
:
Aufrufen eines PopupWindow zum Anzeigen des Fortschritts. Das PopupWindow sperrt die gesamte Benutzeroberfläche und wird automatisch geschlossen sobald der Prozess im Hintergrund abgeschlossen ist.
- Legen Sie eine neue View ProgressView an. Wählen Sie das XdevGridLayout als initiales Layout.
- Ändern Sie die Größe der View auf 300 x 200 Pixel. Klicken Sie dazu in der Toolbox bei Width auf px und geben Sie 300 ein, klicken Sie bei Height auf px und geben Sie 200 ein.
- Fügen Sie einen XdevProgressBar in die View ein.
- Geben Sie bei Caption > Please Wait! ein.
Legen Sie eine weitere View an, fügen Sie einen XdevButton ein, definieren Sie ein Event buttonClick und rufen Sie darin die View ProgressView als PopupWindow auf, das automatisch geschlossen wird, sobald der Prozess beendet ist:
Fortschritts-Rad solange Prozess dauert - Zeigt lediglich ein Fortschritts-Rad an, dasden aktuellen Fortschritt in der XdevProgressBar an.
Code Block language java theme Confluence private void progressBarbutton_attachbuttonClick(ClientConnectorButton.AttachEventClickEvent event) { Window Runnablepopup task = ()->{ for(int i=0; i<=100; i++) { float value = (float)i/100f; System.out.println(value); getUI().access(()->progressBar.setValue(value)); try { Thread.sleep(10); } catch (InterruptedException e) { } } }; new Thread(new RunnableAccessWrapper(task)).start(); } private void progressBar_attach(ClientConnector.AttachEvent event) { // Find out the value of the total progress. It is 1.0 // Starts a new thread Runnable task = ()->{ // Repeat until value is 1.0 // Find out the value of the current progress and convert into a float between 0.1 and 1.0 // Sets the value of the ProgressBar PopupWindow.For(new ProgressView()).closable(false).draggable(false).resizable(false).modal(true).show(); UI.getCurrent().push(); // Start your process here popup.close(); }
Selektieren Sie in der ProgressView bei XdevProgressBar > Properties > Indeterminate.
XdevProgressBar dynamisch aktualisieren - Zeigt den aktuellen Fortschritt in der XdevProgressBar an. Der gesamte Prozess muss in einem eigenem Thread laufen. Da der Thread auf dem Server abläuft und die XdevProgressBar im Browser davon nichts mitbekommt, muss für jede Aktualisierung der XdevProgressBar durch den Methodenaufruf getUI().access(()
->progressBar→progressBar.setValue(value));
}; new Thread(new RunnableAccessWrapper(task)).start(); }ein Server Push durchgeführt werden.
Code Block language java theme Confluence private void progressBar_attach(ClientConnector.AttachEvent event) { // Find out the valuelenght of your process thein total. progress.The Itvalue is 1.0. // Starts a new thread on the serverside Runnable task = ()->{ // Start your process. Find Storeout the current progress and store it in 'value'. Value must be between 0.1 and 1.0. // Sets Server Push to update in the valueProgressBar ofin the Browser ProgressBar getUI().access(()->progressBar.setValue(value)); }; new Thread(new RunnableAccessWrapper(task)).start(); }
...