Crea un componente swing para cargar fotos en miniaturas

En este tutorial crearemos un componente swing para java que podremos usar en cualquiera de nuestros proyectos, el componente sera un objeto que permita cargar imágenes y colocar una miniatura de esta en una especie de marco, la imagen en tamaño real estará almacenada también en el componente por lo que  se podrá recuperar en cualquier momento, este componente contara con sus propios métodos GET y SET lo que hace que su uso sea muy fácil ya sea desde código o desde el propio modo diseño de Netbeans.

A continuación una vista previa del componente ya terminado:

Herramientas

– Netbeans 7.3 o superior

– Editor de imágenes (Gimp, Photoshop, etc.)

Nivel: Intermedio trasnochado

Creando las imágenes para el componente

Utilizando el editor de imágenes de su preferencia, crearemos el diseño del marco de nuestro swing, en este ejemplo las dimensiones son de 122×122 pixeles, este componente tendrá un tamaño fijo.

Manejaremos dos estados dentro el componente, el primero cuando el puntero del mouse este fuera de el se mostrara el componente con un color blanco, cuando el puntero del mouse este dentro del componente, este tomara un color celeste, por tanto necesitamos dos imágenes para causar este efecto.

Dividiremos en 5 secciones y cortaremos en archivos individuales como se ve a continuación.

Los archivos generados  para el primer estado son:

A.- wp_top_a.png – 122×14 px

B.- wp_left_a.png – 14×94 px

C.- wp_right_a.png – 14×94 px

D.- wp_down_a.png – 122×14 px

La imagen central nos sirve para colocar como imagen por defecto en el componente, más adelante veremos como.

E.- vacio.jpg

Los archivos para el segundo estado son:

A.- wp_top_a.png – 122×14 px

B.- wp_left_a.png – 14×94 px

C.- wp_right_a.png – 14×94 px

D.- wp_down_a.png – 122×14 px

OJO: Los nombres de los archivos son importantes, debes escribirlos tal cual se ven.

Si prefieres usar los archivos de este tutorial, descarga y recorta las diferentes secciones del siguiente archivo.

Comenzando con Netbeans

Una vez que ya tenemos los archivos de imagen para el componente, podemos comenzar a trabajar en el IDE Netbeans.

1. Crea un nuevo proyecto FILE -> NEW PROJECT -> JAVA -> JAVA CLASS LIBRARY como nombre de proyecto colocaremos WinPicture , Netbeans crea un proyecto vacío, a continuación daremos estructura a este proyecto.

2. Crea los paquetes ORG.BOLIVIA.WP (minusculas)y dentro crea una clase de tipo JPanel con nombre WinPicture.java.

Crea ademas un paquete ORG.BOLIVIA.WP.RES y coloca todas las imágenes que se crearon en el principio de este tutorial.

Debes tener algo así:

3. Abre el JPanel WinPicture.java en modo diseño, utilizando los objetos JPanel y JLabel añade estos a la interfaz y haciendo uso de los layout BORDERLAYOUT y GRIDBAGLAYOUT alinea estos hasta obtener algo como la imagen siguiente.

Los nombres de los objetos son importantes, debes colocarlos tal cual se ven en la imagen

Al JPanel «__contenedor«, en sus propiedades, coloca en background un valor de 255,255,255 (blanco) y en border busca y selecciona el valor LINEBORDER, en sus propiedades cambia, en Color coloca 255,255,255, en Thickness un valor de 2.

4. Seguimos trabajando con el JPanel WinPicture, abre este en modo CÓDIGO.

Las librerías que se hará uso en el componente son:

import java.awt.Dimension;
import java.awt.Graphics2D;
import java.awt.GraphicsConfiguration;
import java.awt.GraphicsDevice;
import java.awt.GraphicsEnvironment;
import java.awt.Image;
import java.awt.image.BufferedImage;
import javax.swing.Icon;
import javax.swing.ImageIcon;

Agregamos las variables y añadimos un poco de código en el constructor de la clase.

01 public class WinPicture extends javax.swing.JPanel {
02 
03     /* = Para guardar la imagen en tamaño real = */
04     private Icon original= new ImageIcon(getClass().getResource("/org/bolivia/wp/res/vacio.jpg"));
05     /* = Imagenes para los bordes = */
06     /* = Bordes blancos = */
07     private ImageIcon top_a  = new ImageIcon(getClass().getResource("/org/bolivia/wp/res/wp_top_a.png"));
08     private ImageIcon right_a = new ImageIcon(getClass().getResource("/org/bolivia/wp/res/wp_right_a.png"));
09     private ImageIcon left_a = new ImageIcon(getClass().getResource("/org/bolivia/wp/res/wp_left_a.png"));
10     private ImageIcon down_a = new ImageIcon(getClass().getResource("/org/bolivia/wp/res/wp_down_a.png"));
11     /* = Bordes azules = */
12     private ImageIcon top_b  = new ImageIcon(getClass().getResource("/org/bolivia/wp/res/wp_top_b.png"));
13     private ImageIcon right_b = new ImageIcon(getClass().getResource("/org/bolivia/wp/res/wp_right_b.png"));
14     private ImageIcon left_b = new ImageIcon(getClass().getResource("/org/bolivia/wp/res/wp_left_b.png"));
15     private ImageIcon down_b = new ImageIcon(getClass().getResource("/org/bolivia/wp/res/wp_down_b.png"));
16     /**
17  * Creates new form WinPicture
18  */
19     public WinPicture() {
20         initComponents();
21         
22         this.setPreferredSize(new Dimension(126,126));
23         this.setSize(new Dimension(126,126));
24         this.setVisible(true);        
25         this.repaint();   
26     }

No copies y pegues, ve donde va cada trozo de código en el código de la clase.

Debemos crear los métodos SET y GET para asignar y recuperar la imagen que se añada al componente.

El método setImagen(), tiene como parámetro de entrada un objeto de tipo Icon, este sera convertido a BufferedImage para ser escalado y recién asignado al componente

/**
 * Asigna imagen en miniatura al componente
 * @param Icon
 */ 
   public void setImagen( Icon icon ){        
       // guarda imagen original en variable para su posterior recuperacion
        original = icon;       
        //Convierte Icon en BufferedImage
        int w = icon.getIconWidth();
        int h = icon.getIconHeight();
        GraphicsEnvironment ge = GraphicsEnvironment.getLocalGraphicsEnvironment();
        GraphicsDevice gd = ge.getDefaultScreenDevice();
        GraphicsConfiguration gc = gd.getDefaultConfiguration();
        BufferedImage image = gc.createCompatibleImage(w, h);        
        Graphics2D g = image.createGraphics();
        icon.paintIcon(null, g, 0, 0);
        g.dispose();        
        //Obtiene imagen en miniatura y asigna a componente
        Image th_image = image.getScaledInstance(95, 94, Image.SCALE_AREA_AVERAGING);
        //se añade la imagen escalada al jlabel
        __picture.setIcon( new ImageIcon(th_image) );
        this.repaint();
    }

    /**
 * retorna la imagen en tamaño original
 * @return Icon */
    public Icon getImagen(){
        return original;
    }

Como se dijo al principio, este componente manejara dos eventos, cuando el cursor del mouse en encuentre dentro o fuera de ella el componente adquirirá un nuevo color, para ello y haciendo uso de las variables que se declararon mas arriba se hace uso de los métodos MOUSENETERED y MOUSEEXITED del objeto «__picture» de la siguiente forma:

    private void __pictureMouseEntered(java.awt.event.MouseEvent evt) {                                       
        //se coloca nuevos bordes 
        __marco_top.setIcon( top_b ); 
        __marco_right.setIcon( right_b );
        __marco_left.setIcon( left_b ); 
        __marco_down.setIcon( down_b ); 
        //se pinta fondo y bordes
        __contenedor.setBackground(new java.awt.Color(223, 242, 252));
        __contenedor.setBorder(javax.swing.BorderFactory.createLineBorder(new java.awt.Color(33, 177, 252), 2));
    }                                      

    private void __pictureMouseExited(java.awt.event.MouseEvent evt) {                                      
        //se pinta bordes blancos
        __marco_top.setIcon( top_a ); 
        __marco_right.setIcon( right_a );
        __marco_left.setIcon( left_a ); 
        __marco_down.setIcon( down_a ); 
        //se pinta fondo y borde blanco
        __contenedor.setBackground(new java.awt.Color(255, 255, 255));
        __contenedor.setBorder(javax.swing.BorderFactory.createLineBorder(new java.awt.Color(255, 255, 255), 2));
    }

5. Ya para terminar, debemos crear el JAR de nuestro proyecto, para esto, clic derecho sobre el nombre del proyecto CLEAN AND BUILD y después de un par de segundos y si no tenemos ningún error se crea dentro la carpeta DIST el archivo «WinPicture.jar«, este archivo debemos añadirlo a la ventana PALETTE para poder usarlo en nuestros proyectos.

COMO USAR ESTE COMPONENTE

Mediante código.

//SET
this.winPicture1.setImagen( new javax.swing.ImageIcon(getClass().getResource("/images/mi_imagen.jpg")) );
//GET 
Icon i = this.winPicture1.getImagen();

Mediante la ventana de propiedades.

Descarga el proyecto en Netbeans 7.3 + el Jar compilado gratis desde este enlace pobre 🙂