JavaFX Code Recipes - JavaFX: Developing Rich Internet Applications - page 325

Progress Bar

A progress bar is fairly simple to implement. There are two classes, the Progress-
Bar that is a control and the ProgressBarSkin that is the ProgressBar 's skin
class. ProgressBar contains a percent variable that holds the fraction repre-
senting the percent complete and an optional message variable that is centered in
the display. If this message is not defined, the actual percent will be displayed as
a percentage. Listing 12.20 shows the ProgressBar class.

Listing 12.20 ProgressBar

public class ProgressBar extends Control {
public var percent : Number;
public var message :String;
package var useMessage :Boolean = bind (message != "");
protected override var skin = ProgressBarSkin{};
}

ProgressBarSkin defines a rectangle for the entire background area, and another
rectangle that grows in width based on the percent complete. This second rectan-
gle graphically depicts the percent complete. Each of these two rectangles has its
own fill color.
What is interesting about this implementation is that the message is displayed in
a different color when the progress bar is over it. If you look carefully at Figure
12.9, you will notice the letters P, r, o, g are painted in a different color from the
remaining characters that fall outside of the progress bar.

Figure 12.9 Progress Bar

To accomplish this, the ProgressBarSkin class uses two text shapes for the
same string and font located in identical positions centered in the ProgressBar
space on top of each other. The first Text object uses one color, whereas the sec-
ond Text class uses another color. By using the progress rectangle as a clipping
region, we can control when and what part of this second text is displayed. List-
ing 12.21 shows how this is done.