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.
...
You can view the progress of a running process with an XdevProgressBar. The progress is specified with the help of a value between 0.0 and 1.0. To view the current progress of a process, you must first determine its complete scope. In many cases, it is sufficient to display a progress wheel, which simply lets the user know that a process of unspecified duration is currently running. This option is easy to implement.
However, if you want to display the progress in real time, want to update further UI components next to XdevProgressBar, or do not want to block the interface during a background process, you must execute the process in a separate, parallel running thread and must update the interface in the browser after each change.
Important events:
Include Page Event valueChange Event valueChange
...
Important properties:
- Value - Aktueller Fortschritt, der als Wert zwischen Current progress, which must be specified with value between 0.0 und and 1.0 angegeben werden muss.
- Indeterminate - Anstelle eines Fortschritt-Balkens wird ein ständig laufendes Fortschritts-Rad angezeigt. Der aktuelle Stand ist damit nicht erkennbar
- - Instead of a progress bar, a continuously running progress wheel is displayed. Thus, the current status cannot be identified.
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 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:
...
Opening a pop-up window for displaying the progress. The pop-up window blocks the entire user interface and closes automatically, as soon as the process closes in the background.
- Create a new ProgressView. Select the XdevGridLayout as an initial layout.
- Change the size of the view to 300 x 200 pixel. For this, click on px in the Toolbox under Width and enter 300, and under Height click on px and enter 200.
- Insert an XdevProgressBar in an empty view.
- Under Caption, enter Please Wait!
Create another view, insert an XdevButton, define a buttonClick event and open the ProgressView view as PopupWindow in it, which closes automatically as soon as the process ends:
Progress wheel during process - Only displays a progress wheel that shows the current progress in the XdevProgressBar.
Code Block language java theme Confluence private void button_buttonClick(Button.ClickEvent event) { Window popup = 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 Select XdevProgressBar > Properties > IndeterminateIndeterminate in the ProgressView.
Dynamically update 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 - Shows the current progress in the XdevProgressBar. The entire process must run in a separate thread. Since the thread runs on the server and the XdevProgressBar in the browser is not connected to it, a server push must be executed for every update of the XdevProgressBar through the invoking of getUI().access(()→progressBar.setValue(value)); ein Server Push durchgeführt werden method.
Code Block language java theme Confluence private void progressBar_attach(ClientConnector.AttachEvent event) { // Find out the lenght of your process in total. The value is 1.0. // Starts a new thread on the serverside Runnable task = ()->{ // Start your process. Find out the current progress and store it in 'value'. Value must be between 0.1 and 1.0. // Server Push to update in the ProgressBar in the Browser getUI().access(()->progressBar.setValue(value)); }; new Thread(new RunnableAccessWrapper(task)).start(); }
Zur Go to XdevProgressBar Javadoc