summaryrefslogtreecommitdiffstats
path: root/documentation/components/components-progressbar.asciidoc
diff options
context:
space:
mode:
authorIlia Motornyi <elmot@vaadin.com>2015-12-03 14:59:05 +0000
committerVaadin Code Review <review@vaadin.com>2015-12-03 14:59:12 +0000
commit2af72ba9636bec70046394c41744f89ce4572e35 (patch)
treeccb3dc2d2239585f8c3f79eb5f131ff61ca9ce86 /documentation/components/components-progressbar.asciidoc
parent8aa5fabe89f2967e966a64842a608eceaf80d08f (diff)
downloadvaadin-framework-2af72ba9636bec70046394c41744f89ce4572e35.tar.gz
vaadin-framework-2af72ba9636bec70046394c41744f89ce4572e35.zip
Revert "Merge branch 'documentation'"7.6.0.beta2
This reverts commit f6874bde3d945c8b2d1b5c17ab50e2d0f1f8ff00. Change-Id: I67ee1c30ba3e3bcc3c43a1dd2e73a822791514bf
Diffstat (limited to 'documentation/components/components-progressbar.asciidoc')
-rw-r--r--documentation/components/components-progressbar.asciidoc209
1 files changed, 0 insertions, 209 deletions
diff --git a/documentation/components/components-progressbar.asciidoc b/documentation/components/components-progressbar.asciidoc
deleted file mode 100644
index 4e50ae1b43..0000000000
--- a/documentation/components/components-progressbar.asciidoc
+++ /dev/null
@@ -1,209 +0,0 @@
----
-title: ProgressBar
-order: 27
-layout: page
----
-
-[[components.progressbar]]
-= [classname]#ProgressBar#
-
-The [classname]#ProgressBar# component allows displaying the progress of a task
-graphically. The progress is specified as a floating-point value between 0.0 and
-1.0.
-
-[[figure.components.progressbar.basic]]
-.The Progress Bar Component
-image::img/progressbar-basic.png[]
-
-To display upload progress with the [classname]#Upload# component, you can
-update the progress bar in a [interfacename]#ProgressListener#.
-
-When the position of a progress bar is done in a background thread, the change
-is not shown in the browser immediately. You need to use either polling or
-server push to update the browser. You can enable polling with
-[methodname]#setPollInterval()# in the current UI instance. See
-<<dummy/../../../framework/advanced/advanced-push#advanced.push,"Server Push">>
-for instructions about using server push. Whichever method you use to update the
-UI, it is important to lock the user session by modifying the progress bar value
-inside [methodname]#access()# call, as illustrated in the following example and
-described in
-<<dummy/../../../framework/advanced/advanced-push#advanced.push.running,"Accessing
-UI from Another Thread">>.
-
-
-[source, java]
-----
-final ProgressBar bar = new ProgressBar(0.0f);
-layout.addComponent(bar);
-
-layout.addComponent(new Button("Increase",
- new ClickListener() {
- @Override
- public void buttonClick(ClickEvent event) {
- float current = bar.getValue();
- if (current < 1.0f)
- bar.setValue(current + 0.10f);
- }
-}));
-----
-
-[[components.progressbar.indeterminate]]
-== Indeterminate Mode
-
-In the indeterminate mode, a non-progressive indicator is displayed
-continuously. The indeterminate indicator is a circular wheel in the built-in
-themes. The progress value has no meaning in the indeterminate mode.
-
-
-[source, java]
-----
-ProgressBar bar = new ProgressBar();
-bar.setIndeterminate(true);
-----
-
-[[figure.components.progressbar.indeterminate]]
-.Indeterminate Progress Bar
-image::img/progressbar-indeterminate.png[]
-
-
-ifdef::web[]
-[[components.progressbar.thread]]
-== Doing Heavy Computation
-
-The progress indicator is often used to display the progress of a heavy
-server-side computation task, often running in a background thread. The UI,
-including the progress bar, can be updated either with polling or by using
-server push. When doing so, you must ensure thread-safety, most easily by
-updating the UI inside a [methodname]#UI.access()# call in a
-[interfacename]#Runnable#, as described in
-<<dummy/../../../framework/advanced/advanced-push#advanced.push.running,"Accessing
-UI from Another Thread">>.
-
-In the following example, we create a thread in the server to do some "heavy
-work" and use polling to update the UI. All the thread needs to do is to set the
-value of the progress bar with [methodname]#setValue()# and the current progress
-is displayed automatically when the browser polls the server.
-
-
-[source, java]
-----
-HorizontalLayout barbar = new HorizontalLayout();
-layout.addComponent(barbar);
-
-// Create the indicator, disabled until progress is started
-final ProgressBar progress = new ProgressBar(new Float(0.0));
-progress.setEnabled(false);
-barbar.addComponent(progress);
-
-final Label status = new Label("not running");
-barbar.addComponent(status);
-
-// A button to start progress
-final Button button = new Button("Click to start");
-layout.addComponent(button);
-
-// A thread to do some work
-class WorkThread extends Thread {
- // Volatile because read in another thread in access()
- volatile double current = 0.0;
-
- @Override
- public void run() {
- // Count up until 1.0 is reached
- while (current < 1.0) {
- current += 0.01;
-
- // Do some "heavy work"
- try {
- sleep(50); // Sleep for 50 milliseconds
- } catch (InterruptedException e) {}
-
- // Update the UI thread-safely
- UI.getCurrent().access(new Runnable() {
- @Override
- public void run() {
- progress.setValue(new Float(current));
- if (current < 1.0)
- status.setValue("" +
- ((int)(current*100)) + "% done");
- else
- status.setValue("all done");
- }
- });
- }
-
- // Show the "all done" for a while
- try {
- sleep(2000); // Sleep for 2 seconds
- } catch (InterruptedException e) {}
-
- // Update the UI thread-safely
- UI.getCurrent().access(new Runnable() {
- @Override
- public void run() {
- // Restore the state to initial
- progress.setValue(new Float(0.0));
- progress.setEnabled(false);
-
- // Stop polling
- UI.getCurrent().setPollInterval(-1);
-
- button.setEnabled(true);
- status.setValue("not running");
- }
- });
- }
-}
-
-// Clicking the button creates and runs a work thread
-button.addClickListener(new Button.ClickListener() {
- public void buttonClick(ClickEvent event) {
- final WorkThread thread = new WorkThread();
- thread.start();
-
- // Enable polling and set frequency to 0.5 seconds
- UI.getCurrent().setPollInterval(500);
-
- // Disable the button until the work is done
- progress.setEnabled(true);
- button.setEnabled(false);
-
- status.setValue("running...");
- }
-});
-----
-
-The example is illustrated in <<figure.components.progressbar.thread>>.
-
-[[figure.components.progressbar.thread]]
-.Doing Heavy Work
-image::img/progressbar-thread.png[]
-
-endif::web[]
-
-[[components.progressbar.css]]
-== CSS Style Rules
-
-
-[source, css]
-----
-.v-progressbar, v-progressbar-indeterminate {}
- .v-progressbar-wrapper {}
- .v-progressbar-indicator {}
-----
-
-The progress bar has a [literal]#++v-progressbar++# base style. The animation is
-the background of the element with [literal]#++v-progressbar-wrapper++# style,
-by default an animated GIF image. The progress is an element with
-[literal]#++v-progressbar-indicator++# style inside the wrapper, and therefore
-displayed on top of it. When the progress element grows, it covers more and more
-of the animated background.
-
-In the indeterminate mode, the top element also has the
-[literal]#++v-progressbar-indeterminate++# style. The built-in themes simply
-display the animated GIF in the top element and have the inner elements
-disabled.
-
-
-
-