Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Componentes / Java / Crea un componente swing para cargar fotos en miniaturas

Crea un componente swing para cargar fotos en miniaturas

Autor 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

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Blog MVC – Iniciando el proyecto [p2]

Blog MVC – Iniciando el proyecto [p2]

Segunda parte del tutorial [Crea tu blog con el patrón MVC y php]. En esta 2da parte toca ver lo que es la creación del...

MVC: Modelo, Vista y Controlador en PHP

MVC: Modelo, Vista y Controlador en PHP

EL patrón MVC (Model, View, Controller) o Modelo, Vista Controlador, es un tipo de diseño que separa en capas bien defin...

Imprimir Swing

Imprimir Swing

Java Printing nos permite hacer uso de las impresoras del sistema para, valga la redundancia 🙂 imprimir los gráficos de...

Primeros pasos con Vue CLI: Crea tu Entorno de Trabajo

Primeros pasos con Vue CLI: Crea tu Entorno de Trabajo

En un post anterior [Introducción a VueJS framework para el desarrollo FrontEnd] realizamos una breve introducción a Vue...

Leer y Escribir registros en archivo de texto

Leer y Escribir registros en archivo de texto

A veces se necesita utilizar archivos de texto plano como contenedor de registros como si de una base de datos se tratar...

Tojorí – Java/MySQL

Tojorí – Java/MySQL

Tojorí es una libreria Java/Mysql para la creación de aplicaciones de base de datos utilizando el IDE de Netbeans desde...

16 comentarios en “Crea un componente swing para cargar fotos en miniaturas”

  1. Maria dice:

    HOLA!!! El tutorial es excelente muchas gracias me sirvió de mucho 🙂 la unica duda, la ultima clase que tu llamas worker alli es el mismo codigo que para restaurar la base de datos, podrias decirme en realidad que deberia hacer esa clase?

  2. LUIS MAYA dice:

    una pregunta para que sirve la columna v_nit en la tabla TVENTA y porque se crean dos tablas venta

  3. enrique dice:

    al ejecutar me sale este error

    com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure

    no se si sera por el puerto

    1. Mouse dice:

      ¿de que post es eso?

  4. enrique bolaños dice:

    al ejecutarlo me sale este error,

    com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure

    ya hice la base d datos y le asigne los valores, pero sera q el problema sea por el puerto con q se comunica mysql yo lo tengo 3307

  5. Jose Polonsky dice:

    El paquete vista.interface
    no lo pusiste )=
    no se que hacer no compila )=

  6. elber dice:

    Excelente tutorial, solo una pregunta, como utilizo esta librería para personalizar mi JTabbledPane en mi proyecto?

    Saludos…!!!

  7. Vladimir dice:

    Hola, la verdad muy buen el tuto me gusto mucho, queria saber si se puede hacer conexiones con puertos COM…..

  8. Jorge Hernandez dice:

    Una pregunta, es posible en tiempo de ejecuciion crear una tabla en mysql???, llamemosla de manera dinamica, qe mediante un formulario yo cree las tablas que me sean necesarias.

    1. Mouse dice:

      pues si

  9. Nelson Saloj dice:

    Hola JC Mouse, podrías ayudarme? estoy utilizando launch4j y pues va todo excelente pero, cuando creo un archivo desde mi jar me crea el archivo así «aplicacion.exeArchivo.extension» sabes porque sucede esto, que me sugerirías hacer?

  10. Rafael Martínez Murga dice:

    y para enviarlo con un adjunto?

  11. Hola Excelente, mil gracias…Aclare y aprendi mucho.
    El que sabe sabe….. muy bien

  12. Mauricio dice:

    POR FAVOR PODRIAS SUBIR CODIGO FUENTE?

  13. Roberto dice:

    Hola, buen tutorial.

    Sólo una duda, la foto se guarda también en la carpeta «Camera» (la galería por defecto del móvil), cómo hacer para que sólo se guarde en «misfotos»?

    Gracias. Un saludo

  14. erik dice:

    HEy EXELENTE CODIGO , MUY BONITO , ME GUSTA MUCHO LEER CODIGOS ASI TAN BUENOS Y FACILES DE ENTENDER , MEN UNA PREGUNTA , SE PUEDE CONVERTIR UN TEXTUREREGION EN UN TEXTURE? , ES QUE TENGO UNA IMAGEN PARA HACER EL ESPRITE PERO NO ME DAN LAS DIMENCIONES PARA SUBIRLA COMO UN TEXTURE , ENTONCES ME TOCA USAR UN FONDO TRANSPARENTE Y Q CUMPLA CON LAS DIMENSIONES QUE PIDE LIBGDX Q SEA MULTIPLO DE 2 , ENTONCES CUANDO LA CARGO LA CONVIERTO EN UN TEXTURE REGION LA PARTE DEL SPRITE DE LA IMAGEN , Y DESPUES HAGO EL RECORTE CON EL TEXTURE REGION , COMO SI FUERA LA TEXTURE ORIGINAL QUE SE USA CON EL METODO ESTATICO SPLIT DE TEXTURE REGION , EL PROBLEMA ES QUE ME DICE Q TIENE QUE SER UN TEXTURE Y NO UN TEXTURE REGION , YA INTENTE HACER UN CAST PERO NO ME FUNCIONO QUE ME RECOMIENDAS Q HAGA?

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...

En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...

Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...

Google Bard la inteligencia artificial de Google se actualiza con una mejora que entra a competir con el resto de IAs y...

Herramientas

Generador de Enlaces a Whatsapp