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 / JTable con imágenes

JTable con imágenes

Por 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 https://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 https://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

Artículos similares

Impresión de imágenes en PDF

Existen varias aplicaciones (free y de pago) que emulan una impresora virtual para generar archivos en PDF  (Portable Do[...]

El lenguaje de programación para Base de Datos de Google

Mangle es el lenguaje de programación de código abierto desarrollado por el gigante tecnológico Google presentado este a[...]

Subir imagen a un servidor web con REST/JSON

En este tutorial crearemos una sencilla aplicación para android que nos permitirá subir una imagen a un servidor web. La[...]

FOCA: Herramienta para recolección y análisis de Metadatos

La recolección de información (Information Gathering) es una de las partes más importantes en la planificación y ataques[...]

Uso de Arrays: Ejemplo práctico

En este post iremos conociendo de un modo práctico que es y como se utiliza un Array en java, para esto partiremos de un[...]

Introducción a la edición de imágenes con ImageMagick

ImageMagick es un software de código abierto multiplataforma que contiene una serie de herramientas para leer, mostrar,[...]