File Chooser JavaFX (Abrir Archivos)

File Chooser es un control utilizado por los usuarios para navegar por el sistema de archivos de nuestra PC, nos permite buscar o guardar un archivo en la carpeta deseada, además nos permite agregar filtros de búsquedas que facilitan y hacen más rápido el encontrar un determinado tipo de archivo.

Este no es control como los demás que hemos visto, el mismo se encuentra en el paquete javafx.stage, pero los vemos como un control por la funcionalidad que proporciona a las interfaces gráficas de usuario que diseñemos.

Buscar y Abrir Archivos


Normalmente en las aplicaciones que desarrollamos necesitamos que el usuario busque un archivo, nuestra aplicación lo abre y lo manipula de algún modo, para crear un ejemplo sencillo veremos como usar FileChooser para buscar y mostrar una imagen en nuestra aplicación.

1. Creamos una aplicación javafx 8, agregamos el correspondiente .fxml y la clase controladora respectiva, como lo hicimos en introducción a javafx.

2. Editamos el archivo .fxml con SceneBuilder, agregaremos un ImageView un control que nos permite mostrar una imagen y un Button que muestra el FileChooser para buscar la imagen que se mostrara.

filechooser-imageview
Creamos un GridPane con dos filas y dos columnas, agregamos un Label, un Button y un ImageView en las correspondientes celdas, con scene builder hacemos clic derecho sobre el GridPane y nos mostrara opciones para crear o eliminar filas y columnas.

En la imagen el ImageView ya muestra una imagen, esto es solo para que se vea donde lo hemos agregado, la idea es abrir la imagen con el FileChooser.

scenebuilder-javafx
En la siguiente imagen se muestra la estructura del documento que acabamos de crear, al lado derecho de cada control se muestra su nombre, los necesitamos para agregar la funcionalidad de los mismos en la clase controladora.

javafx-action-scenebuilder
Para agregar los nombre o identificadores de cada control primero seleccionamos el que deseamos nos vamos a las pestañas de la derecha ubicamos Code, la misma mostrara el tipo de control seleccionado, la opción fx:id es donde agregamos el nombre, hacemos lo mismo con el ImageView.

3. Vamos a Netbeans, seleccionamos el archivo fxml, creado y guardado previamente con scene builder, en el menú Source clic sobre Make Controller para actualizar la clase controladora.

public class FXMLDocumentController implements Initializable {

    @FXML
    private ImageView ivImagen;
    @FXML
    private Button btnBuscar;

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }
}

Al hacer clic en el botón necesitamos que abra el cuadro de búsqueda, agregamos un filtro para buscar facilitar la búsqueda de imágenes PNG y JPG solo imágenes, finalmente mostramos la imagen en el ImageView.

@Override
public void initialize(URL url, ResourceBundle rb) {
    btnBuscar.setOnAction(event -> {
        FileChooser fileChooser = new FileChooser();
        fileChooser.setTitle("Buscar Imagen");

        // Agregar filtros para facilitar la busqueda
        fileChooser.getExtensionFilters().addAll(
                new FileChooser.ExtensionFilter("All Images", "*.*"),
                new FileChooser.ExtensionFilter("JPG", "*.jpg"),
                new FileChooser.ExtensionFilter("PNG", "*.png")
        );

        // Obtener la imagen seleccionada
        File imgFile = fileChooser.showOpenDialog(stage);

        // Mostar la imagen
        if (imgFile != null) {
            Image image = new Image("file:" + imgFile.getAbsolutePath());
            ivImagen.setImage(image);
        }
    });
}

javafx-filechooser

imageView-mostrar imagen
FileChooser puede ser usado para abrir uno o varios archivos al mismo tiempo, en el ejemplo vemos como abrir un archivo, en caso de que deseemos abrir varios solo necesitamos cambiar el primer código por el segundo:

File imgFile = fileChooser.showOpenDialog(stage) 
List<File> list = fileChooser.showOpenMultipleDialog(stage);

Como podemos ver ahora tenemos una lista de archivos seleccionados, solo recorremos esta lista y hacemos con cada archivo lo que deseemos.

Si lo que deseamos es guardar un archivo en una carpeta establecida por el usuario solo nesecitamos: File file = fileChooser.showSaveDialog(stage); como en los casos anteriores file será null si el usuario no selecciona nada o contendrá el archivo que usaremos para guardar lo que deseemos.

Comentarios

  1. Excelente muy bien explicado y gracias por compartir me sirvio amigo solo como dato por si alguien tiene el mismo problema que yo .

    File imgFile = fileChooser.showOpenDialog(stage);

    cambiar en esta linea por null

    File imgFile = fileChooser.showOpenDialog(null);

    y listo.

    ResponderEliminar
  2. ¿cómo le hago para otros formatos de archivos?. Me interesa un video.

    ResponderEliminar
    Respuestas
    1. Igual que con las imágenes solo debes cambiar el filtro de archivos,
      ejemplo: new FileChooser.ExtensionFilter("MP4", "*.mp4") para buscar vídeos en formato MP4.

      Eliminar
  3. y como puedo hacer para guardar la imagen en una base de datos?

    ResponderEliminar
    Respuestas
    1. yo tambien quiero sabeeeeeer

      Eliminar
    2. Creo que tenes que guardar el nombre *jpg o *png en la base de datos, o sea la direccion de donde esta la imagen para que la busque cada vez que se abra la interfaz o se le llame

      Eliminar

Publicar un comentario

Temas relacionados

Entradas populares de este blog

tkinter Grid

tkinter Canvas

Histogramas OpenCV Python

Python Binance API