DEV Community

Cover image for ScrollBar
Paul Ngugi
Paul Ngugi

Posted on

ScrollBar

ScrollBar is a control that enables the user to select from a range of values. Figure below shows a scroll bar. Normally, the user changes the value of a scroll bar by making a gesture with the mouse. For example, the user can drag the scroll bar’s thumb, click on the scroll bar track, or the scroll bar’s left or right buttons.

Image description

ScrollBar has the following properties, as shown in Figure below.

Image description

The width of the scroll bar’s track corresponds to max + visibleAmount. When a scroll bar is set to its maximum value, the left side of the bubble is at max, and the right side is at max + visibleAmount.

When the user changes the value of the scroll bar, it notifies the listener of the change. You can register a listener on the scroll bar’s valueProperty for responding to this change as follows:

ScrollBar sb = new ScrollBar();
sb.valueProperty().addListener(ov -> {
System.out.println("old value: " + oldVal);
System.out.println("new value: " + newVal);
});

The code below gives a program that uses horizontal and vertical scroll bars to move a text displayed on a pane. The horizontal scroll bar is used to move the text to the left and the right, and the vertical scroll bar to move it up and down. A sample run of the program is shown in Figure below.

Image description

Here are the major steps in the program:

  1. Create the user interface. Create a Text object and place it in the center of the border pane. Create a vertical scroll bar and place it on the right of the border pane. Create a horizontal scroll bar and place it at the bottom of the border pane.
  2. Process the event. Create listeners to move the text according to the bar movement in the scroll bars upon the change of the value property.
package application;
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.geometry.Orientation;
import javafx.scene.Scene;
import javafx.scene.control.ScrollBar;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.text.Text;

public class ScrollBarDemo extends Application {
    @Override // Override the start method in the Application class
    public void start(Stage primaryStage) {
        Text text = new Text(20, 20, "JavaFX Programming");

        ScrollBar sbHorizontal = new ScrollBar();
        ScrollBar sbVertical = new ScrollBar();
        sbVertical.setOrientation(Orientation.VERTICAL);

        // Create a text in a pane
        Pane paneForText = new Pane();
        paneForText.getChildren().add(text);

        // Create a border pane to hold text and scroll bars
        BorderPane pane = new BorderPane();
        pane.setCenter(paneForText);
        pane.setBottom(sbHorizontal);
        pane.setRight(sbVertical);

        // Listener for horizontal scroll bar value change
        sbHorizontal.valueProperty().addListener(ov -> text.setX(sbHorizontal.getValue() * paneForText.getWidth() / sbHorizontal.getMax()));

        // Listener for vertical scroll bar value change
        sbVertical.valueProperty().addListener(ov -> text.setY(sbVertical.getValue() * paneForText.getHeight() / sbVertical.getMax()));

        // Create a scene and place it in the stage
        Scene scene = new Scene(pane, 450, 170);
        primaryStage.setTitle("ScrollBarDemo"); // Set the stage title
        primaryStage.setScene(scene); // Place the scene in the stage
        primaryStage.show(); // Display the stage
    }

    public static void main(String[] args) {
        Application.launch(args);
    }
}

Enter fullscreen mode Exit fullscreen mode

The program creates a text (line 14) and two scroll bars (sbHorizontal and sbVertical) (lines 16–17). The text is placed in a pane (line 22) that is then placed in the center of the border pane (line 26). If the text were directly placed in the center of the border pane, the position of the text cannot be changed by resetting its x and y properties. The sbHorizontal and sbVertical are placed on the right and at the bottom of the border pane (lines 27–28), respectively.

You can specify the properties of the scroll bar. By default, the property value is 100 for max, 0 for min, 10 for blockIncrement, and 15 for visibleAmount.

A listener is registered to listen for the sbHorizontal value property change (lines 31). When the value of the scroll bar changes, the listener is notified by invoking the handler to set a new x value for the text that corresponds to the current value of sbHorizontal (lines 31).

A listener is registered to listen for the sbVertical value property change (lines 34). When the value of the scroll bar changes, the listener is notified by invoking the handler to set a new y value for the text that corresponds to the current value of sbVertical (lines 34).

Alternatively, the code in lines 31–34 can be replaced by using binding properties as follows:

text.xProperty().bind(sbHorizontal.valueProperty().
multiply(paneForText.widthProperty()).
divide(sbHorizontal.maxProperty()));
text.yProperty().bind(sbVertical.valueProperty().multiply(
paneForText.heightProperty().divide(
sbVertical.maxProperty())));

Top comments (0)