Java Reference
In-Depth Information
Showing progress with the progress
controls
As a rich client platform, you will undoubtedly create long-running processes in JavaFX. You
will, for instance, need to connect to a remote web server in order to download images or
access large data set from a database server. In either case, it is imperative that the user's
expectation is managed properly during the execution of these processes, or your application
runs the risk of being labeled broken.
One of the most popular ways by which rich client applications manage the user experience
during long-running processes is through the use of progress indicator widgets. This recipe
shows you how to use JavaFX's built-in progress indicator controls to show progress of a
long-running processes.
Getting ready
The progress controls are part of the standard GUI controls offered by JavaFX in the
javafx.
scene.control
package. If you have not used the JavaFX controls, it may be helpful to
review the recipe
Creating a form with JavaFX controls
for some background information.
JavaFX offers two progress controls that you can use to provide feedback on the progress
of long running processes:
ProgressBar
and the
ProgressIndicator
. Both controls
function in the same way, but render their feedback to the user differently.
For this recipe, we are going to simulate a long-running process using a
Timeline
instance.
The
Timeline
class lets us implement a timer that counts and pauses in-between counts,
which is perfect for simulating long-running activities that can update a progress control.
You can find out how to use the Timeline as a timer in the recipe
Building animation with
the KeyFrame API
in
Chapter 3
,
Transformations, Animations, and Effects
.
How to do it...
The code presented here shows you how to use the
ProgressBar
component to track the
progress of a long running process. As mentioned earlier, to keep things manageable, the long
running process is simulated by a
Timeline
instance used as a timer. You can get the full
listing of the code from
ch04/source-code/src/controls/ProgressBarDemo.fx
.
var w = 400;
var h = 200;
var total = 400;
var counter = 0;
def
prog
=
ProgressBar
{
progress: bind
ProgressBar.computeProgress
(total, counter)
effect:DropShadow{offsetY:3 offsetX:3}
