JavaFX Tutorial - JavaFX ScrollPane








Scroll panes provide a scrollable view of UI elements.

We use scrollable panel when we need to show a large content with limited space. The scrollable pane has a viewport which will show a portion of the content and it provides a scroll bar when necessary. 

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
 //from   w ww .  j a va  2  s .  c  o  m
public class Main extends Application {
    @Override
    public void start(Stage stage) {
        stage.setWidth(500);
        stage.setHeight(500);
        Scene scene = new Scene(new Group());
    
        VBox root = new VBox();     
 
        final WebView browser = new WebView();
        final WebEngine webEngine = browser.getEngine();
        
     
        ScrollPane scrollPane = new ScrollPane();
        scrollPane.setContent(browser);
        webEngine.loadContent("<b>asdf</b>");
         
        root.getChildren().addAll(scrollPane);
        scene.setRoot(root);
 
        stage.setScene(scene);
        stage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

The code above generates the following result.

null




Creating a Scroll Pane

The following code creates an Image from a jpg file and add that image to a scroll pane. If the image is large the scroll pane will show the scroll bar by which we can use to view the hidden part.

Image img = new Image(getClass().getResourceAsStream("yourImage.jpg"));
ScrollPane sp = new ScrollPane();
sp.setContent(new ImageView(img));

Pannable ScrollPane

Call setPannable(true) method to preview the image by clicking it and moving the mouse cursor. 

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
//ww  w.  j ava  2 s. c  o  m
public class Main extends Application {
    @Override
    public void start(Stage stage) {
        Group root = new Group();
        Scene scene = new Scene(root, 500, 200);
        stage.setScene(scene);

        Rectangle rect = new Rectangle(200, 200, Color.RED);
        ScrollPane s1 = new ScrollPane();
        s1.setPannable(true);
        s1.setPrefSize(120, 120);
        s1.setContent(rect);

        root.getChildren().add(s1);
        stage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

The code above generates the following result.

null




Scroll Bar Policy

We can control the the policy of when to display scroll bars:

  • always
  • never
  • when necessary

The setHbarPolicy and setVbarPolicy methods specify the scroll bar policy for the horizontal and vertical scroll bars respectively. 

sp.setHbarPolicy(ScrollBarPolicy.NEVER);
sp.setVbarPolicy(ScrollBarPolicy.ALWAYS);

Resizing Components in the Scroll Pane

Set the setFitToWidth or setFitToHeight method to true to match a particular dimension.

By default, both FIT_TO_WIDTH and FIT_TO_HEIGHT properties are false, and the resizable content keeps its original size.

The following code shows how to set ScrollPane to fit to width. 

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
 //from   www.  j a  v a  2 s.  co  m
public class Main extends Application {

    @Override
    public void start(Stage stage) {
        stage.setWidth(500);
        stage.setHeight(500);
        Scene scene = new Scene(new Group());
    
        VBox root = new VBox();     
 
        final WebView browser = new WebView();
        final WebEngine webEngine = browser.getEngine();
        
     
        ScrollPane scrollPane = new ScrollPane();
        scrollPane.setFitToWidth(true);
        
        scrollPane.setContent(browser);
        webEngine.loadContent("<b>asdf</b>");
         
        
        root.getChildren().addAll(scrollPane);
        scene.setRoot(root);
 
        stage.setScene(scene);
        stage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

The code above generates the following result.

null

Scroll Action

The ScrollPane class allows us to retrieve and set the current, minimum, and maximum values of the contents in the horizontal and vertical directions.

The following code shows how to handle ScrollPane vertical value and horizontal value change event. 

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
//  w w  w  .j  a  v a 2s . com
public class Main extends Application {
    @Override
    public void start(Stage stage) {
        Group root = new Group();
        Scene scene = new Scene(root, 500, 200);
        stage.setScene(scene);

        Rectangle rect = new Rectangle(200, 200, Color.RED);
        ScrollPane s1 = new ScrollPane();
        s1.setPrefSize(120, 120);
        s1.setContent(rect);

        s1.vvalueProperty().addListener(new ChangeListener<Number>() {
          public void changed(ObservableValue<? extends Number> ov,
              Number old_val, Number new_val) {
                  System.out.println(new_val.intValue());
          }
        });
        s1.hvalueProperty().addListener(new ChangeListener<Number>() {
          public void changed(ObservableValue<? extends Number> ov,
              Number old_val, Number new_val) {
                  System.out.println(new_val.intValue());
          }
      });        
        root.getChildren().add(s1);
        stage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

The code above generates the following result.

null