Mostrar fotos desde botones en Java

Mostrar imágenes al pulsar botones en una ventana JFrame que implementa la interfaz ActionListener, detectar la pulsación del botón como un evento de acción (ActionEvent) y llamar a la acción prevista con el método actionPerformed,en Java

Introducción: responder a las acciones del usuario

Las aplicaciones han de responder a las acciones que realiza el usuario, por ejemplo: cerrar la ventana al pulsar un botón. Es necesario poder detectar las acciones de usuario y convertirlas en acciones de programa. Java dispone de varias formas de implementar este funcionamiento. En este ejercicio se mostrarán algunas de ellas. Todas se basan en el uso de Interfaces. Las Interfaces son clases “prefabricadas” con propósitos definidos
Cada Interface contiene declaraciones de métodos (nombre del método, lista de argumentos y tipo de retorno) pero estos métodos no están implementados (carecen de cuerpo) y deben ser desarrollados. Todos los métodos de las Interfaces son public. Las Interfaces también pueden declarar constantes (public final static).
En Java no existe la herencia múltiple como tal: una clase no puede heredar (extends) de más de una clase. Pero una clase puede implementar más de una Interface, ésta es una manera de tener herencia múltiple. En la clase que implementa una Interface han de ser sobrescritos (override) todos los métodos declarados en la Interface.

Respecto a la interfaz ActionListener:

  • ActionListener es una Interface del grupo de los Listeners
  • ActionListener tiene un sólo método: void actionPerformed(ActionEvent e)
  • ActionListener se usa para detectar y manejar eventos de acción (ActionEvent) que son los que tienen lugar cuando se produce una acción sobre un elemento del programa.

Un evento ActionEvent se produce:

  • al pulsar un botón (Button)
  • al hacer doble clic en un elemento de lista (List)
  • al pulsar INTRO en una caja de texto (TextField)
  • al elegir un menú (MenuItem).

Los distintos elementos del programa (botones, etc.) están  vigilados por Listeners que detectan las acciones que tienen lugar sobre el elemento supervisado. De manera que cuando el usuario pulsa un botón:

  • el botón sobre el que se produce una acción y genera un evento (event source, este dato se puede obtener con el método getSource) ha de estar previamente registrado con algún objeto que gestione el evento (ActionListener en este caso) mediante el método:
Button.addActionListener(this) // o tambien Button.addActionListener(ActionListener nombre_de_actionListener)
Lenguaje del código: JavaScript (javascript)

  • el botón genera un ActionEvent (clase del paquete java.awt.event)
  • ActionEvent invoca al método actionPerformed que realiza las acciones programadas
  • si la clase implementa ActionListener, ha de ser sobrescrito (override) el método public void actionPerformed(ActionEvent e).

Código principal del programa

Hay que importar estos paquetes e instanciar la clase principal:

import java.awt.*; import javax.swing.*; import java.awt.event.*; import java.awt.Color; import java.net.URL; // CLASE PRINCIPAL public class Botones_fotos extends JFrame implements ActionListener
Lenguaje del código: JavaScript (javascript)

Un objeto JPanel derivado de la clase Container va a contener el resto de objetos de la ventana. Container es un componente genérico AWT que puede contener otros componentes AWT. Swing proporciona 2 contenedores de primer nivel: JFrame y JDialog, cada uno de ellos contiene un panel principal o raíz (JRootPane) con varios elementos:

  • panel de contenido (contentPane): los componentes visibles del contenedor de primer nivel, excepto barra de menú; por defecto tienen BorderLayout()
  • barra de menú (menuBar): es opcional, fuera de contentPane
  • panel de cristal (glassPane): por encima de menuBar y contentPane, oculto por defecto, se encarga de interceptar acciones del usuario para JRootPane.

No se pueden agregar elementos directamente a JRootPane. Hay que agregarlos al contentPane de rootPane con el método getContentPane():

rootPane.add(elemento); // NO rootPane.getContentPane().add(elemento); // SI
Lenguaje del código: JavaScript (javascript)

Para agregar elementos a un Frame:

Frame.getContentPane().add(elemento);
Lenguaje del código: CSS (css)

El método getContentPane() devuelve un objeto Container, no un objeto JComponent, por ello es conveniente crear un componente personalizado para usar como contentPane. Para usar un componente como contentPane hay que:

// crear un panel y agregar componentes JPanel panel = new JPanel(new BorderLayout()); panel.setBorder(elegirBorde); panel.add(unComponente, BorderLayout.CENTER); panel.add(otroComponente, BorderLayout.PAGE_END); // hacer que panel sea contentPane de un contenedor de nivel superior panel.setOpaque(true); topLevelContainer.setContentPane(panel);
Lenguaje del código: JavaScript (javascript)

Se crean los diferentes paneles contenedores.

// panel1 es el contenedor de todos los elementos de la ventana private JPanel panel1 = new JPanel(new BorderLayout()); // panel para la etiqueta rutaLabel y pBotones private JPanel panelSup = new JPanel(new GridLayout(2,0)); // panel que agrupa los botones superiores private JPanel pBotones = new JPanel(new GridLayout(1,0)); // panel para la etiqueta rutaLabel private JPanel pLabel = new JPanel(); // panel para los botones inferiores private JPanel pBotones2 = new JPanel(new GridLayout(1,0));
Lenguaje del código: PHP (php)

Se crean botones y etiquetas y se configura el tipo de letra.

// Array de botones con el nombre de la imagen en cada uno de ellos private JButton[] strBotones = {new JButton("Pelosas"), new JButton("Tux"), new JButton("Ctr"), new JButton("Gato"), new JButton("Milu")}; // fuente para botones y etiqueta Font letra = new Font("Verdana", Font.BOLD, 12); // etiqueta para mostrar las imagenes JPG private JLabel imgLabel = new JLabel(); // etiqueta para mostrar la ruta a los archivos private JLabel rutaLabel = new JLabel(); // botones de la parte inferior private JButton Codigo = new JButton("Archivo fuente java"); private JButton Salir = new JButton("Salir del programa"); // Cadena para usar en setLabelPicture(), coincide con el nombre de la imagen JPG y con el texto del boton private String nombreFoto;
Lenguaje del código: PHP (php)

Métodos de entrada al programa y creación de la interfaz gráfica.

// METODO DE ENTRADA AL PROGRAMA public static void main(String[] args) { // instancia de la clase principal, hereda de JFrame new Botones_fotos(); } // METODO CONSTRUCTOR QUE CREA Y MUESTRA LA INTERFAZ public Botones_fotos() { // la variable especial this se usa en metodos de instancia para hacer referencia // al objeto que contiene al metodo, aqui equivale a JFrame // lo que pasa al cerrar la ventana: salir del programa this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);}
Lenguaje del código: JavaScript (javascript)

Mostrar los botones, configurar la fuente y enlazarlos con addActionListener.

// mostrar los botones inferiores, configurar la fuente y enlazarlos con addActionListener Codigo.setActionCommand ("Codigo"); Codigo.addActionListener(this); Salir.setActionCommand ("Salir"); Salir.addActionListener(this); // mostrar los botones superiores, configurar la fuente y enlazarlos con addActionListener for(int i = 0; i < strBotones.length; i++) { pBotones.add(strBotones[i]); strBotones[i].setFont(letra); strBotones[i].addActionListener(this); }
Lenguaje del código: JavaScript (javascript)

El aspecto de las etiquetas también se puede configurar.

// configurar la etiqueta imgLabel imgLabel.setHorizontalAlignment(JLabel.CENTER); imgLabel.setOpaque(true); imgLabel.setBackground(Color.gray);
Lenguaje del código: JavaScript (javascript)

Rellenar los paneles contenedores.

// colocar elementos en los paneles, panel1 es contentPane del JFrame panel1.setOpaque(true); this.setContentPane(panel1); panel1.add(panelSup, BorderLayout.NORTH); panelSup.add(pBotones); panelSup.add(pLabel); panel1.add(imgLabel, BorderLayout.CENTER); panel1.add(pBotones2, BorderLayout.SOUTH); pBotones2.add(Codigo); pBotones2.add(Salir); pLabel.add(rutaLabel); // mostrar la ventana this.setTitle("Botones y Fotos"); this.setSize(new Dimension(720,582)); // ajustar el marco a sus contenedores //this.pack(); // centrar el formulario en la pantalla this.setLocationRelativeTo(null); this.setResizable(false); this.setVisible(true);
Lenguaje del código: JavaScript (javascript)

Método setLabelPicture. Carga la imagen cuyo nombre coincide con el texto del botón y muestra la ruta quitando los caracteres %20 que Java coloca en lugar de los espacios en blanco.

// MOSTRAR LA IMAGEN EN LA ETIQUETA private void setLabelPicture() { imgLabel.setText(""); // texto del boton con extension jpg = nombre del archivo JPG String nombreCompleto = "/img/" + nombreFoto + ".jpg"; // buscar el archivo JPG dentro del archivo JAR, // para poder usar la clase URL hay que importar el paquete java.net.URL URL url = this.getClass().getResource( nombreCompleto ); String urlS = url.toString(); // Java coloca los caracteres %20 en lugar de los espacios en blanco de la ruta, se quitan para mejorar su aspecto urlS = urlS.replace("%20"," "); // informar de la ruta a la imagen seleccionada, para ver la presentacion de URL rutaLabel.setText("" + urlS); // informar tambien con cuadro de mensaje //JOptionPane.showMessageDialog(null, "Ruta a la imagen seleccionada: " + urlS, "URL de la imagen", JOptionPane.PLAIN_MESSAGE); // JLabel.setIcon(Icon) define el icono mostrado en la etiqueta, centrado en horizontal y en vertical imgLabel.setIcon(new ImageIcon(url)); }
Lenguaje del código: JavaScript (javascript)

Si se desea que el programa arranque con una de las imágenes visible, se llama al método durante la carga del programa, Si se prefiere que arranque en blanco, se comentan estas 2 líneas.

// llamar al metodo setLabelPicture() si se prefiere que el programa arranque ya con imagen cargada // comentar las 2 lineas si se prefiere que arranque vacio sin imagen cargada nombreFoto = "Milu"; // imagen que aparece al arrancar el programa setLabelPicture();
Lenguaje del código: JavaScript (javascript)

Al pulsar en el botón Codigo se muestra la segunda ventana en la que se ha añadido un objeto JEditorPane al que se le pasa el texto del archivo .html con el código Java de la ventana principal, con la sintaxis coloreada. Al pulsar el botón Salir se sale del programa. A l pulsar cualquier otro botón se desencadena el evento que lleva al método que muestra las fotos.

// LO QUE SUCEDE AL PULSAR UNO DE LOS BOTONES public void actionPerformed(ActionEvent e) { // si se ha pulsado en el boton con el texto Archivo fuente Java // (si ActionCommand es Codigo) mostrar la ventana con codigo Java if ("Codigo".equals(e.getActionCommand())) { // mostrar un objeto Botones_fotos_code, es el marco para la segunda ventana Botones_fotos_code codeForm = new Botones_fotos_code(); //codeForm.show(); } --> obsoleto codeForm.setVisible(true); } // si se ha pulsado en el boton Salir (si ActionCommand es Salir) else if ("Salir".equals(e.getActionCommand())) { System.exit(0); } // si se ha pulsado en cualquier otro boton else { // e.getActionCommand() equivale al texto del boton // para pasarle al metodo e.getActionCommand() el nombre de la imagen // que es el texto del boton on extension jpg nombreFoto = e.getActionCommand(); setLabelPicture(); } }
Lenguaje del código: PHP (php)

Crear el archivo JAR

Es necesario incorporar al archivo todos los elementos: las clases como se hace habitualmente, las imágenes de la carpeta img y el archivo .html de la carpeta code.

>jar -cmfv manifest.txt Botones_fotos.jar *.class img/*.jpg code/*.html manifiesto agregado agregando: Botones_fotos.class(entrada = 3910) (salida = 2165)(desinflado 44%) agregando: Botones_fotos_code.class(entrada = 2045) (salida = 1177)(desinflado 42%) agregando: img/Ctr.jpg(entrada = 17811) (salida = 17753)(desinflado 0%) agregando: img/Gato.jpg(entrada = 35997) (salida = 35934)(desinflado 0%) agregando: img/Milu.jpg(entrada = 24794) (salida = 24153)(desinflado 2%) agregando: img/Pelosas.jpg(entrada = 27348) (salida = 27272)(desinflado 0%) agregando: img/Tux.jpg(entrada = 20834) (salida = 20774)(desinflado 0%) agregando: code/Botones_fotos_code.html(entrada = 13061) (salida = 3312)(desinflado 74%).
Lenguaje del código: CSS (css)

Código fuente de ambas clases: java1 y java2.

Programa completo en zip.