Aprende Java Aprende Php Aprende C++ Aprende HTML 5 Aprende JavaScript Aprende JSON Aprende MySQL Aprende SQLServer Aprende Visual Basic 6 Aprende PostgreSQL Aprende SQLite Aprende Redis Aprende Kotlin Aprende XML Aprende Linux VSC Aprende Wordpress Aprende Laravel Aprende VueJS Aprende JQuery Aprende Bootstrap Aprende Netbeans Aprende Android
Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube Sigueme en TikTok Sigueme en Whatsapp
Home / Componentes / Java / Crea un componente swing para cargar fotos en miniaturas

Crea un componente swing para cargar fotos en miniaturas

Por jc mouse domingo, enero 5, 2014

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:

WinPicture swing

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.

diseño

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.

template swing

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.

empty project

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í:

project full

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.

diseño swing

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.

propiedades

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

Tags

Artículos similares

Alda: Lenguaje de programación para composición musical

Alda es un lenguaje de programación desarrollado por Dave Yarwood el cual esta basado en texto para composición musical,[...]

Crea un servicio web REST con PHP y MYSQL

Servicio Web Un servicio web (en inglés, Web Service o Web services) es una tecnología que utiliza un conjunto de protoc[...]

Buscar dispositivos con Java Media Framework

Java Media Framwork ademas de permitir reproducir archivos multimedia, tambien permite trabajar con dispositivos de capt[...]

Instalador java con WinRar

En este videoTutorial veremos la forma mas sencilla de crear un instalador para programas hechos en Java utilizando el p[...]

Biblioteca Matemática avanzada para java

Java cuenta con la clase java.lang.Math  la cual contiene métodos para realizar operaciones numéricas básicas como[...]

Agregar soporte para JNLP en servidor Apache

Java Network Launching Protocol (JNLP) es una especificación usada por Java Web Start. Esta especificación, permite tene[...]