JavaFX ScrollBar y ScrollPane

El Framework JavaFX nos ofrece dos componentes para habilitar el desplazamiento, el contenedor ScrollPane y el control ScrollBar, usaremos alguno de ellos cuando deseemos mostrar un contenido que sea demasiado grande y no quepa en la ventana, puede ser texto, imagen, video, etc., las barras de desplazamiento nos permitirán visualizar un área determinada.

Primero veremos el uso y funcionamiento de las barras de desplazamiento y luego estudiaremos el contenedor que nos facilitará el uso de las mismas.

Tutorial ScrollBar en JavaFX

Para agregar este control a nuestra GUI utilizaremos la clase ScrollBar, el mismo se puede ubicar de manera horizontal o vertical, según nuestras necesidades, este control no desplaza por si solo el objetivo lo que hace es proveernos el valor de desplazamiento del mismo, cuando lo obtengamos entonces debemos desplazar el objetivo.

Un ScrollBar se puede desplazar de las siguientes maneras:

1. Usando los botones de incremento o decremento.
2. Haciendo clic en el área del track a la que deseamos movernos.
3. Desde programación usando los métodos: setValue(), increment(), decrement().
4. Arrastrando el thumb hasta la posición deseada.

En código Java tenemos:

ScrollBar vertical = new ScrollBar();
vertical.setOrientation(Orientation.VERTICAL);
vertical.setMin(0);
vertical.setMax(image.getHeight());
vertical.setVisibleAmount(height);

• Orientation: cambia el tipo, puede ser horizontal o vertical.
• Min y Max: establece el valor de desplazamiento mínimo y máximo.
• VisibleAmount: define el área visible, normalmente es igual al tamaño de la barra.

Este ejemplo nos permite visualizar una imagen cuyo tamaño es superior al de la ventana, en ese caso se puede visualizar el área deseada de la imagen usando las barras de desplazamiento, usaremos un objeto Canvas para dibujar las porciones de la imagen.

Image image = new Image(getClass().getResourceAsStream("gears.jpg"));

Canvas canvas = new Canvas(800, 600);

double width = canvas.getWidth();
double height = canvas.getHeight();

GraphicsContext gc = canvas.getGraphicsContext2D();
gc.drawImage(image, 0, 0, width, height, 0, 0, width, height);

ScrollBar vertical = new ScrollBar();
vertical.setOrientation(Orientation.VERTICAL);
vertical.setMin(0);
vertical.setMax(image.getHeight());
vertical.setVisibleAmount(height);

ScrollBar horizontal = new ScrollBar();
horizontal.setOrientation(Orientation.HORIZONTAL);
horizontal.setMin(0);
horizontal.setMax(image.getWidth());
horizontal.setVisibleAmount(width);

vertical.valueProperty().addListener((property, old, value) -> {
    double dy = vertical.getValue();
    double dx = horizontal.getValue();

    gc.drawImage(image, dx, dy, width, height, 0, 0, width, height);
});

horizontal.valueProperty().addListener((property, old, value) -> {
    double dy = vertical.getValue();
    double dx = horizontal.getValue();

    gc.drawImage(image, dx, dy, width, height, 0, 0, width, height);
});

HBox root = new HBox(new VBox(canvas, horizontal), vertical);

Scene scene = new Scene(root);

primaryStage.setTitle("JavaFX ScrollBar");
primaryStage.setScene(scene);
primaryStage.show();

Para responder a los cambios del valor de las barras agregamos un Listener a la propiedad valueProperty() y redibujamos la imagen.

Tutorial ScrollPane en JavaFX

Este panel contenedor nos facilita el trabajo, solo debemos agregar el contenido que deseamos mostrar, si es lo bastante grande se mostrarán las barras de desplazamiento, podemos controlar cuando se muestran las barras, por ejemplo, siempre, solo cuando se necesitan o nunca, para esto usamos la enumeración ScrollPane.ScrollBarPolicy y los métodos setHbarPolicy() y setVbarPolicy() para las barras horizontal y vertical respectivamente.

Un ejemplo similar al anterior:

Image image = new Image(getClass().getResourceAsStream("gears.jpg"));
ImageView view = new ImageView(image);

ScrollPane root = new ScrollPane();
root.setContent(view);
root.setHbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED);
root.setVbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED);
root.setPannable(true);

Scene scene = new Scene(root, 800, 600);

primaryStage.setTitle("JavaFX ScrollPane");
primaryStage.setScene(scene);
primaryStage.show();

Para indicar el contenido del panel usamos el constructor o el método setContent(), también vemos setPannable(true) esto nos permite desplazarnos al área deseado usando arrastrar u soltar del ratón.

Descargar proyecto: javafx-scrollbar.zip