ScrollBar
Tags: java, programming, learning, beginners
Published: 2024-06-27 19:06:34

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6h3ufyfs6ibz3res03x.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3blfvu28c9r4eycxoy8q.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w619c9dhqkv07z5jv0yz.png)

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);
	}
}

```

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())));`