Click on JButton to display image

Question

As the title suggests, I am trying to create a program that has a few buttons, each of which displays a picture when clicked on. I would however, like to know if this is possible without the use of the graphic class as shown here and without making the Container global. I attempted this however, my program doesn't seem to add the image to my Panel.

Here is the code:

import javax.swing.*;

import java.awt.*;
import java.awt.event.*;

public class PhotoAlbum extends JFrame implements ActionListener{

private JPanel imagePanel;
private JPanel labelPanel;
public PhotoAlbum(){
    super();
    Container contentPane = getContentPane();
    setSize(1800, 1000);
    setDefaultCloseOperation(EXIT_ON_CLOSE);

    setTitle("Button Demo"); //Theme here
    contentPane.setBackground(Color.blue);
    contentPane.setLayout(new BorderLayout());

    createButtons(contentPane);
    instruction(contentPane);
    createImageLabel(contentPane);
}

public void instruction(Container contentPane){
    JPanel instruction = new JPanel();
    instruction.setLayout(new FlowLayout());
    instruction.setBackground(Color.yellow);
    Font fontType1 = new Font("Comic Sans MS", Font.BOLD, 40);
    JLabel instruction1 = new JLabel("Click on the button to view a"
            + " photo.");
    instruction1.setForeground(Color.BLUE);
    instruction1.setFont(fontType1);
    instruction.add(instruction1);
    contentPane.add(instruction, BorderLayout.SOUTH);
}

public void createButtons(Container contentPane){
    labelPanel = new JPanel();
    labelPanel.setBackground(Color.pink);
    labelPanel.setLayout(new GridLayout(9,1));

    String[] imageLabel = new String[9];
    imageLabel[0] = "Image 1";
    imageLabel[1] = "Image 2";
    imageLabel[2] = "Image 3";
    imageLabel[3] = "Image 4";
    imageLabel[4] = "Image 5";
    imageLabel[5] = "Image 6";
    imageLabel[6] = "Image 7";
    imageLabel[7] = "Image 8";
    imageLabel[8] = "Exit";

    Color[] color = new Color[9];
    color[0] = Color.cyan;
    color[1] = new Color(242, 121, 234);
    color[2] = Color.red;
    color[3] = Color.green;
    color[4] = Color.blue;
    color[5] = new Color(1, 255, 248);
    color[6] = Color.magenta;
    color[7] = new Color(205, 255, 1);
    color[8] = new Color(205, 255, 1);

    Font fontType = new Font("Times New Roman", Font.BOLD, 30);


    JButton[] button = new JButton[9];
    for (int i=0; i<button.length; i++)
    {
        button[i] = new JButton(imageLabel[i]);
        button[i].addActionListener(this);
        button[i].setBackground(color[i]);
        button[i].setFont(fontType);
        labelPanel.add(button[i]);
    }

    contentPane.add(labelPanel, BorderLayout.WEST);
}

public void createImageLabel(Container contentPane){
    imagePanel = new JPanel();
    imagePanel.setBackground(Color.magenta);
    contentPane.add(imagePanel, BorderLayout.CENTER);
}

public void actionPerformed(ActionEvent event){
    String actionCommand = event.getActionCommand();
    if(actionCommand.equals("Image 1")) {
        JLabel addImage = new JLabel();
        ImageIcon image = new ImageIcon("picture1.jpg");
        addImage.setIcon(image);
        imagePanel.add(addImage);
        imagePanel.setBackground(Color.yellow);
    }

    else if(actionCommand.equals("Exit"))
        System.exit(0);
    else System.out.println("Error in button interface.");

}

public static void main(String[] args)
{
    PhotoAlbum buttonGui= new PhotoAlbum();
    buttonGui.setVisible(true);
}


}

A better (easier) approach than to create & add a label in the action performed method is to do that when the GUI is constructed. A label with no text or image is invisible to the user. On button click, set the icon for the existing label. — Andrew Thompson, Jun 13 '16 at 06:06
`new ImageIcon("picture1.jpg");` Application resources will become embedded resources by the time of deployment, so it is wise to start accessing them as if they were, right now. An [tag:embedded-resource] must be accessed by URL rather than file. See the [info. page for embedded resource](http://stackoverflow.com/tags/embedded-resource/info) for how to form the URL. — Andrew Thompson, Jun 13 '16 at 06:06
By "when the GUI is constructed", do you mean at the beginning of the code? Also, I was just testing it out, when I noticed that at first when I click on the button, the image doesn't display however, when I press the button and then maximize/minimize the window, the image shows up. I do not know if that has anything to do with my problem. — blaze077, Jun 13 '16 at 06:20
This is the constructor `public PhotoAlbum(){` do it some place between that and the `}` that ends the constructor. — Andrew Thompson, Jun 13 '16 at 06:22

Beniton Fernando · Accepted Answer · 2016-06-13T07:27:01.033

0

As Andrew suggested in his comments. Refactor your code like below.

if(actionCommand.equals("Image 1")) {
    JLabel addImage = new JLabel();
    URL url = getClass().getResource("picture1.jpg");
    if (url != null) {
        ImageIcon image = new ImageIcon(url);
        addImage.setIcon(image);
        imagePanel.add(addImage);
        imagePanel.setBackground(Color.yellow);
        this.revalidate();
    }
}

And picture1.jpg is in the same place where i have PhotoAlbum.java.

Otherwise your code is working fine. Though large images are not displayed properly.

edited Jun 13 '16 at 07:27

answered Jun 13 '16 at 07:00

Beniton Fernando

1,533
1
14
21

That is supposed to be in the `if(actionCommand.equals("Image 1"))` between the `{` and `}` ? I tried using this however, it changes the background to yellow but doesn't add the image. – blaze077 Jun 13 '16 at 07:13
@blaze077 Can you put a breakpoint and check if the url is not null. Your code is working for me and displaying the image. – Beniton Fernando Jun 13 '16 at 07:25
I am not familiar with breakpoints. I do know how to add them but I do not know how I would check if the url is null or not. – blaze077 Jun 13 '16 at 07:39
The picture has to be in my Java Project, yes? – blaze077 Jun 13 '16 at 07:55
@blaze077 _The picture has to be in my Java Project_ That is ok, but the path should be proper. – Beniton Fernando Jun 13 '16 at 09:11
I got what the problem was. The url path was wrong as you said. I tried the code I posted (slightly modified) after adding `this.revalidate()` and it works all good now. – blaze077 Jun 13 '16 at 11:40
@blaze077 Great. Happy coding. – Beniton Fernando Jun 13 '16 at 11:55

Click on JButton to display image

1 Answers1