Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Componentes / Java / JTable con imágenes

JTable con imágenes

Autor jc mouse domingo, septiembre 1, 2013

En este post dejo una forma de como utilizar imágenes en un JTable ademas de implementar MouseListener para realizar diferentes acciones para cada celda.

Herramientas

– Netbeans 7.3

– imagenes JPG

Nivel: Intermedio

Duración: 15 minutos

Proyecto Netbeans

1. Partiremos de un proyecto netbeans con la siguiente estructura:

JTableImage
- Source Packages
-- com.bolivia.app
----- ImageRenderer.java
----- Interfaz.java
----- MyTableModel.java
-- com.bolivia.res
----- default.jpg

Interfaz: Es un JFrame que a su vez contiene un JButton (JButton1) y un JTable (JTable1)

jtable picture

MyTableModel: Es una clase que se extiende de DefaultTableModel y nos sirve para sobreescribir un método propio de este (isCellEditable) que nos des-habilitara la edición de contenido de cada celda.

ImageRenderer: Es una clase que nos permitirá trabajar con imágenes en las celdas de un JTable

default.jpg: Es una imagen *.JPG que se mostrara en las celdas del JTable cuando estas no tengan asignado un archivo imagen, en este ejemplo no es más que una imagen en blanco de dimensiones 256×256 pixeles.

2. A continuación las clases del proyecto

MyTableModel.java

package com.bolivia.app;
import javax.swing.table.DefaultTableModel;
/**
 * @web http://www.jc-mouse.net/
 * @author Mouse
 */
public class MyTableModel extends DefaultTableModel {

    @Override
    public boolean isCellEditable(int row, int column) {
        return false;
    }

}

ImageRenderer.java

package com.bolivia.app;
import java.awt.Component;
import java.io.File;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import javax.swing.ImageIcon;
import javax.swing.JLabel;
import javax.swing.JTable;
import javax.swing.table.DefaultTableCellRenderer;
/**
 * @web http://www.jc-mouse.net/
 * @author Mouse
 */
public class ImageRenderer extends DefaultTableCellRenderer{

  private JLabel lb = new JLabel();
  //imagen que se muestra cuando la celda esta vacia
  private ImageIcon icon = new ImageIcon( getClass().getResource("/com/bolivia/res/default.jpg") );
    //para contener las imagenes que se vayan cargando 
  private Map iconos = new HashMap() ;

  @Override
  public Component getTableCellRendererComponent(JTable table, Object value, boolean isSelected, 
                                                 boolean hasFocus, int row, int column)
  {
        lb.setText((String) value);
        File fichero;
        //
        if( value !=null )
        {
            fichero = new File( value.toString() );
            //comprueba que fichero exista
            if( fichero.exists() )
            {
                //busca la imagen en el MAP
                if( ya_existe( value.toString() ) )
                {
                    //si ya existe, extrae la imagen del MAP
                    lb.setIcon( getIcono( value.toString() ) );
                }
                else //No existe
                {
                //Agrega la imagen al map
                iconos.put(value.toString(), bToIcon(fichero) );
                //extrae y muestra
                lb.setIcon( getIcono( value.toString() ) );    
                }

            }
            else //si no existe, muestra imagen por default
            {
                lb.setIcon(icon);
            }        
        }
        else
        {
            lb.setIcon(icon);
        }
    return lb;
  }

 /**
 * Comprueba que una imagen ya exista en memoria
 * @param String key identificador 
 */
 private boolean ya_existe( String key )
 {
    Iterator it = iconos.entrySet().iterator();
    while (it.hasNext()) {
        Map.Entry e = (Map.Entry)it.next();        
        if( e.getKey().equals(key) )
            return true;
    }
    return false;
 }

 /**
 * Extrae una imagen del MAP dado su KEY
 * @param String key identificador unico
 * @return ImageIcon
 */
 private ImageIcon getIcono( String key )
 {
    ImageIcon imageIcon = icon;
    Iterator it = iconos.entrySet().iterator();
    while (it.hasNext()) {
        Map.Entry e = (Map.Entry)it.next();        
        if( e.getKey().equals(key) )
        {
           imageIcon = (ImageIcon) e.getValue();
           break;
        }            
    }
    return imageIcon;
 }

 /**
 * Dado la ruta de un archivo de imagen, carga este en un ImageIcon y retorna
 * @param File fichero
 */
private ImageIcon bToIcon( File fichero )
{        
    ImageIcon imageIcon = new ImageIcon( fichero.getAbsolutePath() );
    return imageIcon;
}

}//--> fin clase

Interfaz.java

Primeramente declaramos una nueva instancia a MyTableModel:

private MyTableModel modelo = new MyTableModel();

A continuación añadimos al constructor de clase lo siguiente:

01     public Interfaz() {
02         initComponents();
03         
04         //------------------------------------------------------------------------- 
05         String[] nombreColumnas = {"Imagen","Imagen","Imagen"};
06         Object[][] datosFila = { }; //vacio 
07         modelo.setDataVector(datosFila, nombreColumnas);
08         this.jTable1.setModel(modelo);
09         //se añade el ImageRenderer a cada columna del JTable
10         jTable1.getColumnModel().getColumn(0).setCellRenderer( new com.bolivia.app.ImageRenderer() );
11         jTable1.getColumnModel().getColumn(1).setCellRenderer( new com.bolivia.app.ImageRenderer() );
12         jTable1.getColumnModel().getColumn(2).setCellRenderer( new com.bolivia.app.ImageRenderer() );
13         jTable1.setRowHeight(256);//altura de celda 
14         //Evento MouseListener
15         jTable1.addMouseListener(new java.awt.event.MouseAdapter() {
16             
17             /**
18  * Cuando se haga clic en una celda que contenga una imagen, esta abrira un JDialog mostrando
19  * la imagen completa
20  */
21             @Override
22             public void mouseClicked(java.awt.event.MouseEvent evt) {
23                 int row = jTable1.rowAtPoint(evt.getPoint());
24                 int col = jTable1.columnAtPoint(evt.getPoint());
25                 if ( row >= 0 && col >= 0 ) 
26                 {   
27                     //si celda contiene imagen
28                     if( modelo.getValueAt(row, col) != null )
29                     {
30                         //obtiene la ruta que corresponde a la celda donde se hizo el clic
31                         File fichero = new File( modelo.getValueAt(row, col).toString() );
32                         //se carga la imagen en un jlabel
33                         JLabel picLabel = new JLabel(new ImageIcon( fichero.getAbsolutePath() ));
34                         //se muestra la imagen en el jdialog
35                         JOptionPane.showMessageDialog(null, picLabel, "Vista Previa", JOptionPane.PLAIN_MESSAGE, null);
36                     }                             
37                 }
38             }
39         });
40         //-------------------------------------------------------------------------
41     }

En este ejemplo estamos utilizando tres columnas por lo que debemos añadir a cada columna un ImageRenderer, si quisiéramos añadir más columnas, igualmente añadimos a cada columna nueva un ImageRenderer.

El JTable ademas implementa un MouseListener y el metodo mouseClicked para detectar cuando el usuario haga un clic sobre una celda, al realizar esta acción, se abrira un JDialog que mostrara la imagen completa

Finalmente, el código para el JButton1, este botón nos servirá para abrir un JFileChooser para añadir imágenes al JTable, las imágenes se añadirán una después de otra, cuando ya no hallan celdas disponibles, se añadirá una nueva fila.

01     private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {                                         
02         
03         JFileChooser fileChooser = new JFileChooser();
04         FileNameExtensionFilter filter = new FileNameExtensionFilter("Archivo de Imagen","jpg","png");
05         fileChooser.setFileFilter(filter);      
06         fileChooser.setCurrentDirectory( new File(System.getProperty("user.home")) );
07         //fileChooser.setCurrentDirectory( new File( "E:\\temporal\\" ) );
08         int result = fileChooser.showOpenDialog(this);
09         if (result == JFileChooser.APPROVE_OPTION) {
10             File selectedFile = fileChooser.getSelectedFile();            
11             //
12             int f = modelo.getRowCount();//cantidad de filas
13             int c = modelo.getColumnCount();//cantidad de columnas
14             boolean ok = true;
15             //recorre todo el TableModel buscando una celda vacia para agregar la imagen
16             for( int i=0; i<f;i++ )
17             {
18                 if( ok )
19                 {
20                     for( int j=0; j<c; j++ )
21                     {
22                         if( modelo.getValueAt(i, j) == null )
23                         {
24                             this.modelo.setValueAt( selectedFile.getAbsolutePath() , i, j );        
25                             this.jTable1.repaint();
26                             ok=false;
27                             break;
28                         }
29                     }
30                 }
31                 else
32                 {
33                     break;
34                 }
35             }
36             
37             //Si el TableModel esta lleno, agrega una nueva fila y en la primer posicion añade la imagen
38             if( ok ) //añade nueva fila
39             {
40                 modelo.setRowCount( modelo.getRowCount() + 1 );
41                 this.modelo.setValueAt( selectedFile.getAbsolutePath() , modelo.getRowCount()-1, 0 );        
42                 this.jTable1.repaint();
43             }            
44             
45         } 
46     }

Ejecutamos y listo

colorados

Yapa un videito de como queda todo

Descargate el proyecto completo en este enlace michi

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

Construye la interfaz de facebook

Construye la interfaz de facebook

En este tutorial veremos un poco lo que es el diseño de interfaces en android, en lugar de colocar el ejemplo de uso de...

Introducción a PHP con Netbeans

Introducción a PHP con Netbeans

NetBeans es un entorno de desarrollo integrado libre, hecho principalmente para el lenguaje de programación Java. Sin em...

Ejemplo RESTFul Webservice en Java

Ejemplo RESTFul Webservice en Java

En este post construiremos un Servicio Web en Java bajo el estandar REST (Representational State Transfer), el cual hace...

Tabla para inventarios de Entradas y Salidas

Tabla para inventarios de Entradas y Salidas

A veces navegando en la internet buscando novedades , investigando o simplemente perdiendo el tiempo 🙂 se encuentran cos...

Crear y mover objetos en tiempo de ejecución

Crear y mover objetos en tiempo de ejecución

Dando respuesta a una interrogante sobre el como crear objetos en tiempo de ejecución y como manipular estos, desarrolle...

MAUS :- Simulador y Editor de exámenes para dispositivos móviles

MAUS :- Simulador y Editor de exámenes para dispositivos móviles

MAUS es una aplicación para dispositivos móviles con el Sistema Operativo Android que te permite realizar exámenes desde...

14 comentarios en “JTable con imágenes”

  1. Claudia dice:

    No dejare de decir que eres un maestro! te queria preguntar, es posible cargar los datos desde la BD al jtable y que esta ademas tenga checkbox??

    1. Mouse dice:

      claro que si, pero cuando trabajas con imágenes dentro la base de datos, estos deben estar en formato BLOOB si utilizas MySql y cuando los extraigas, debes convertir previamente a imagen, dependiendo de la cantidad y/o tamaño de las imágenes, esto puede convertir tu aplicación un poco lenta, solo es recomendable para pocas imágenes de tamaño pequeño como iconos.

  2. David dice:

    Hola…Estoy comenzando a programar en java y necesitaban saber como modificar los datos de un jtable, decidí buscarlo en Internet y me encontré con su pagina web.
    Descargue el código y cree la base de datos todo perfecto hasta que ejecute el programa intente modificar un dato y me sale “error:No se puede actualizar”…
    Mi pregunta es si se puede modificar nada mas clickeando en algún dato y cambian delo???

  3. Diego dice:

    Hola porfavor podrias crear un tutorial para guardar imagenes junto con otros datos en una base postgresql desde jsp, y luego como seria para mostrar estos datos y la imagen dentro de una tabla html usando jsp.
    Gracias de antemano.

  4. rene aguilar dice:

    me da un error dice que no encuentra la libreria reportes me puede ayudar que es este error gracias.

  5. Wilmer dice:

    Hola:

    Vi el video está al parecer muy interesante, pero tengo un problema para correr el ejemplo, no me carga las librerias de jasperreport, segui las instrucciones de LEEME.txt e importe las librerias que alli indican pero logro que funcione, por lo tanto no he podido probarlo si me dieras una mano por favor.

  6. Mariani dice:

    me ha servido mucho este sitio para despejar algunas dudas acerca de la programacion en java, pero hasta ahora me he animado a preguntarle, sobre como puedo generar una aplicacion que me permita guardar una imagen en cual se le insertan botones con icons, este biene siendo un diseño de un rack y se le insertan los botones q tiene por icon dispositivosy que al darle click al boton con icono me manda a otra ventana, lo que quiero es guardar este diseño creado cuando ya se esta ejecutando y que pueda abrir esa misma ventana y pueda seguir modificando y que los botones no pierdan sus acciones. Espero me pueda ayudar 🙁

    1. Mouse dice:

      disculpa pero no te entendi bien 🙁 te refieres a crear controles en tiempo de ejecución y darles alguna acción o te refieres a crear y guardar configuraciones del programa :/

  7. Ulises dice:

    Hola!
    Soy un novato en esto de programar por lo que hare la sig pregunta:
    Ya implemente todo el codigo pero al momento de poner la clase JMail en la interfaz me aparece un error aqui: mail.setPassword( this.txtPWD.getPassword() );
    no puedo hacer que aparezca el getPassword en el jtextfield de la contraseña!!
    como le hago?

    de antemano gracias!

    1. Mouse dice:

      ¿cual es el error?, con las tres primeras lineas es suficiente 🙂

  8. VladElf dice:

    Mi consulta es la siguiente, si es posible en un reporte añadir lo que son las cajas de selección, asi si un campo es true que salga el cuadro tikeado. Por favor si podrias iluminarnos en esto.

    1. Mouse dice:

      busca reportes condicionales con ireport

  9. Hector Zeledon dice:

    Magnifico proyecto, me ha aclarado muchas dudas, se agradece infinitamente.

  10. Estergema dice:

    Desde ya muchas gracias por todos tus aportes , me han ayudado un monton . Tengo una duda al respecto al archivo. dat, cada vez q corro la aplicacion , el archivo se sobreescribe y la informacion q habia guardado en la corrida anterior se borra. Me gustaria saber como puedo evitar que se sobreescriba y la informacion se borre, quisiera que en cada corrida de la aplicacion la informacion del .dat este alli. Agradezco tu ayuda

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

Netbeans es uno de los entornos de desarrollo integrado (Integrated Development Environment – IDE)  más conocidos...

Geany es un editor de texto para Sistemas Operativos Linux, windows y MAC que utiliza el kit de herramientas GTK+ con ca...

En este post te hablaremos sobre una interesante herramienta para le lectura y edición de metadatos que no te debe de fa...

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

Android Bolivia

MAUS