Tutorial: Visor de Imagenes con Java [2/2]

Aquí esta la parte 2 del tutorial del Visor de Imágenes con Java.

Vamos ahora a crear la aplicacion que muestra las imagenes en una carpeta…

Crearemos un nuevo JFrame form, desde netbeans y le damos de nombre MainFrame, o como le quieran llamar. Luego nos vamos al a pestaña de diseño y agregamos de la paleta de componentes un Menu bar al JFrame.

Agregamos al menu File 2 Menu Items y les cambiamos el texto para que digan algo asi como esto:

Primero editaremos el codigo del menu salir, que cerrará la aplicacion. Para esto damos clic derecho en el menu salir y le damos en Events > Action > actionPerformed.
Nos manda al código de Java y vamos a borrar lo que dice //TODO y ponemos algo como esto

System.exit(0);

Vamos a agregar de la paleta de netbeans al JFrame un JPanel. Lo centramos, y agregamos 2 botones asi como en la figura:

Les cambiaremos el nombre a los botones en el Inspector de Netbeans:

Vamos al codigo de Java del MainFrame y en el constructor que dice algo como:

/** Creates new form MainFrame */
public MainFrame() {
initComponents();
}

Vamos a agregar la linea despues de initComponents();

this.centrar();

Que es un método que nos centrará la ventana en la pantalla al crearse el JFrame.

ahora aqui esta el método, lo pegan ahí abajo del constructor o donde quieran:

private void centrar()
{
Dimension pantalla = this.getToolkit().getScreenSize();
this.setLocation(pantalla.width / 2 – this.getWidth() / 2, pantalla.height / 2 – this.getHeight() / 2);
}

Ahora vamos a agregar los atributos del JFrame, en este caso, tendremos, un Arreglo de Archivos, File[] llamado fotos, que es donde se guardarán todos los archivos de una carpeta con fotos. También tendremos un contador para llevar control de en que imagen estamos actualmente y no causar una excepción al intentar acceder a una posición invállida del arreglo de archivos.

Colocaremos estos atributos justo despues de la declaración de la clase…

public class FrameImagenTest extends javax.swing.JFrame
{
//AQUI van atributos
private File[] fotos;
private int contador;

Ahora vamos a crear un método en nuestro MainFrame que muestre una imagen, este método recibira un Archivo (File) y creará un PanelImagen(la clase que ya tenemos creada y en el mismo paquete que MainFrame) con él, luego agregará este PanelImagen a su propio Panel llamado pnlImagen(recuerda renombrar el panel que agregaste desde la paleta de netbeans). Sería algo como esto:

private void mostrarImagen(File file)
{
ImagePanel imgPanel = new ImagePanel(file, this.pnlImagen.getWidth(), this.pnlImagen.getHeight());
this.pnlImagen.add(imgPanel);
this.repaint();
}

Este metodo lo usaremos cuando abramos una imagen desde el menu Archivo > Abrir.

Vamos a la pestaña de diseño y vamos Archivo, Abrir click derecho, Events > Action > ActionPerformed, igual que como lo hicimos con el menú salir, y en el codigo vamos a poner esto:

JFileChooser fc = new JFileChooser();
fc.setFileFilter(new FileNameExtensionFilter(«Archivos de imagen», «jpg», «jpeg», «png», «gif»));
int opcion = fc.showDialog(this, «Abrir»);
if (opcion == JFileChooser.APPROVE_OPTION)
{
File file = fc.getSelectedFile();
this.mostrarImagen(file);
this.cargaDirectorio(file.getParent());
}

Lo que hace este fragmento de código es llamar a un FileChooser, que nos va proporcionar el archivo que seleccionemos, le vamos a dar un «filtro» para que solamente nos muestre los archivos de imágenes (extensiones «jpg», «jpeg», «png», «gif»), ahí pueden agregar más extensiones de archivo… Entonces llamamos this.mostrarImagen mandandole el objeto File que seleccionamos, luego inmediatamente, se llama un método aun no creado, llamado this.cargaDirectorio, y le enviamos el directorio del archivo con file.getParent(), en forma de String.

Lo que va a hacer este método va a ser, cargar en el arreglo de File[] todas las imágenes que se encuentren en la carpeta, para despues poder ir cambiando de imagen con los botones «<» y «>». Aquí está el método que carga el directorio:

private void cargaDirectorio(String folder)
{
File dir = new File(folder);
if (dir.isDirectory())
{
this.fotos = dir.listFiles(new FilenameFilter()
{

public boolean accept(File file, String nombre)
{
if (nombre.endsWith(«.jpg») ||
nombre.endsWith(«.jpeg») ||
nombre.endsWith(«.gif») ||
nombre.endsWith(«.png»))
{
return true;
}
return false;
}
});
}
}

Lo que hace primero el método es preguntar si es un directorio el string que le mandaron, si sí es, entonces llama el metodo listFiles, que le devuelve un arreglo de File, y lo asignamos a this.fotos, que es nuestro arreglo de Archivos. Pero a listFiles le manda un FilenameFilter(), aquí creo una clase anónima de esta interfaz e implemento el único método que hay que implementar, el «accept» que recibe el Archivo y su nombre, y solo compruebo que tenga una terminación valida, si la tiene regreso true, si no false… Así ya tendríamos nuestro arreglo de fotos lleno de archivos de tipo imagen, y ya podemos empezar a picarle en los botones > y < para avanzar y retroceder entre las imágenes.

Vamos a implementar la funcionalidad de los botones > y < ,para esto vamos a ir a la pestaña de diseño y vamos a dar click derecho en el boton y hacer lo mismo que hicimos para los menús, Events > Action > ActionPerformed y en el código pondremos algo como esto:

if (this.fotos != null)
{
PanelImagen tmp = (PanelImagen) this.pnlImagen.getComponent(0);
this.contador++;
if (this.contador == this.fotos.length)
{
this.contador = 0;
}
tmp.setImagenFromFile(this.fotos[this.contador]);
}

Lo que se hace aquí es preguntar primero si el arreglo de fotos no es nulo, esto es por si no se han cargado fotos aún, y queremos presionar el botón, Esta parte la pueden mejorar escondiendo los botones, si no se ha cargado un folder de fotos, o si solo contiene 1 elemento el arreglo, pero bueno…
Luego obtiene el PanelImagen dede this.pnlImagen.getComponent(0), que devuelve el primer componente dentro de nuestro pnlImagen(que ya sabemos que sólo contiene un único elemento, asi que no hay problema), a este PanelImagen le va a cambiar la imagen por medio del método setImagenFromFile(), que recibe el archivo que este en this.fotos en la posición contador + 1, osea el que sigue… (contador por defecto se inicializa en 0, por ser de tipo int), antes de hacer esto, preguntamos si contador es igual al tamaño de nuestras fotos, para que no se vaya a salir del rango lo regresamos a 0, así entonces volvería a empezar el recorrido.

Haremos lo mismo para el boton < y en el codigo sería:

if (this.fotos != null)
{
PanelImagen tmp = (PanelImagen) this.pnlImagen.getComponent(0);
if (this.contador == -1)
{
this.contador = this.fotos.length -1;
}
tmp.setImagenFromFile(this.fotos[this.contador–]);
}

Casi lo mismo…

Formateamos el códifo con ctrl+alt+F en netbeans para que se acomode.

Bueno entonces ya tenemos un pequeño visor de imágenes, esta bastante sencillo, se puede mejorar mucho, pero aquí nadamás dejo las bases, bueno AQUI dejo link para el proyecto en netbeans…