Pagination control JavaFX

El control Pagination de JavaFX puede ser utilizado para mostrar un conjunto de elementos uno a uno, por ejemplo, para nuestra demostración usaremos dicho control para mostrar una serie de imágenes seleccionadas por el usuario de su sistema de archivos, la imágenes seleccionadas se presentarán una a una y el usuario podrá navegar entre los distintos elementos.

Un Pagination está formado por dos partes, la superior que muestra el contenido deseado y la inferior que le permite al usuario navegar sobre dicho contenido, es posible establecer, la cantidad de elementos a mostrar, el elemento seleccionado actualmente.

Este control puede ser creado se estas formas:

Pagination pagination1 = new Pagination();
Pagination pagination2 = new Pagination(5);
Pagination pagination3 = new Pagination(5, 1);
Pagination pagination4 = new Pagination(Pagination.INDETERMINATE, 1);

En el primer caso se selecciona el primer elemento y la cantidad es indeterminada, en el segundo se establece la cantidad a 5 y se selecciona el primer elemento, el tercero es similar al segundo, salvo que ahora indicamos que se debe seleccionar el elemento número 1, el último es similar al primero, la cantidad es indeterminada e indicamos que se seleccione el primer elemento.

Para programar nuestro ejemplo demostrativo primero agregamos un botón que nos permite abrir un cuadro de dialogo para seleccionar las imágenes que deseemos visualizar en nuestra aplicación.

FileChooser fileDialog = new FileChooser();
fileDialog.getExtensionFilters()
        .add(new ExtensionFilter("Imagen", "*.jpg", "*.png", "*.bmp", "*.gif"));

Button btn = new Button("...");
btn.setOnAction(e -> {
    fileDialog.setTitle("Abrir imagenes");
    imageList = fileDialog.showOpenMultipleDialog(stage);
    if(imageList != null) {
        pagination.setPageCount(imageList.size());
        tf.setText(imageList.get(0).getParent());
    }
});

He añadido un filtro de extensiones para solo permitir la selección de archivos de imagen, JPG, PNG, GIF, BMP, también debes tener presente que abrimos el cuadro de dialogo usando el método showOpenMultipleDialog() esto nos permite seleccionar varios archivos a la vez, para finalizar solo guardamos la lista de archivos seleccionada, si no se ha seleccionado archivo alguno la misma será null.

En cuanto al control Pagination se refiere solo incluimos el código que nos permite establecer la cantidad de elementos que se mostrarán, si lo deseamos podemos dejarlo en indeterminado, solo debemos tener presente que el texto de navegación mostrará algo parecido a esto: "#/...".

pagination.setPageCount(imageList.size());

La parte más importante de nuestro código en la que indica como se muestran las imágenes en nuestra aplicación, para hacer esto debemos establecer el PageFactory, una función callback que es invocada cada vez que se cambia el contenido del control, esta función recibe como parámetro el índice que indica el elemento actual y debe devolver un objeto Node que indica el contenido a mostrar.

pagination.setPageFactory(index -> {
    if (imageList != null && index < imageList.size()) {

        String url = imageList.get(index).toURI().toString();
        
        ImageView imageView = new ImageView(url);
        imageView.setPreserveRatio(true);
        imageView.setFitHeight(400);
        imageView.setFitWidth(600);

        return imageView;

    } else {
        return new Label("No hay imagen seleccionada.");
    }
});

Podemos ver que primero que nada verificamos si existe la lista imágenes, en caso contrario devolvemos una etiqueta de texto con el mensaje respectivo, si tenemos una lista de imágenes disponibles accedemos al File que representa el archivo actual usando el índice, y creamos el objeto ImageView con la URI del archivo.

Tenemos la aplicación que se muestra en seguida, al presionar el botón de selección de imagen:

Si seleccionamos un grupo de imágenes y presionamos abrir:

Es todo por ahora, nos vemos en la siguiente publicación.

Descargar proyecto: pagination-javafx.zip