Click a button to display an image. Trouble with add panel to a frame. Help !!

[Thang Pham]

I try to create a GUI that when you click a button a image is display. Here is my approach. I create two panel call "imagePanel" and "btnPanel". I add the button in the btnPanel, then add btnPanel to the frame. I try to do the same with "imagePanel", but the program complaint. It pass the compile error, but when I run it, it give error "java.lang.NullPointerException". I create the "imagePanel" inside an dispatching event which is actionPerformed(). I have a feeling that you cant create a GUI inside an dispatching event. Here is my code.

    
import java.awt.*;
import java.io.*;
import java.awt.image.*;
import java.awt.event.*;
import javax.swing.*;

public class DisplayImageV2 extends JFrame{
   
   JPanel btnPanel;
   JPanel imagePanel;
   JButton button;
   JLabel image;
   public DisplayImageV2() {
      setTitle("Display Image");
      setSize(300, 300);
      setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      buildPanel();
      getContentPane().add(btnPanel);
      getContentPane().add(imagePanel);
   }

   private void buildPanel() {
      btnPanel = new JPanel();
      button = new JButton("Start");
      button.addActionListener(new StartBtnListener());
      btnPanel.add(button);
   }
   
   private class StartBtnListener implements ActionListener {
      public void actionPerformed(ActionEvent e) {
         image = new JLabel();
         imagePanel = new JPanel();
         image.setIcon(new ImageIcon("1.jpg"));
         imagePanel.add(image);
      }
   }

   public static void main (String args[]) {
      DisplayImageV2 di = new DisplayImageV2();
   }
}

[K. Tsang]

Hi Thang, I tried your program. and I did 2 things that could not produce NullPointerException. Either declare your imagePanel or put getContentPane().add(imagePanel) inside the actionPerformed() method. But either way I can't see the JFrame when I run it. Hope this helps.

[pete stein]

You are adding the imagePanel before you are creating it, and this cannot be done. It has nothing to do with GUI or creating GUI in events and everything to do with basic OOPs practice. Objects must be constructed before you can use them.

Also, on a side note: you never pack or setVisible(true) your JFrame.

Also, from a GUI standpoint, I'd recommend that you try using a CardLayout.

For instance:

import java.awt.CardLayout;
import java.awt.Dimension;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.net.MalformedURLException;
import java.net.URL;

import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JComponent;

public class DisplayImageV3
{
  private static final String IMAGE_ADDR = "http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/" +
  		"Schnepfenfliege_Rhagio_scolopaceus2.jpg/250px-Schnepfenfliege_Rhagio_scolopaceus2.jpg";
  private static final Dimension MAIN_SIZE = new Dimension(300, 300);
  private static final String BUTTON_PANEL = "Button Panel";
  private static final String IMAGE_PANEL = "Image Panel";
  private static final String IMAGE_PATH = "1.jpg";
  private JPanel mainPanel = new JPanel();
  private CardLayout cardlayout = new CardLayout();

  public DisplayImageV3()
  {
    mainPanel.setLayout(cardlayout);
    mainPanel.setPreferredSize(MAIN_SIZE);
    mainPanel.add(createBtnPanel(), BUTTON_PANEL);
    mainPanel.add(createImagePanel(), IMAGE_PANEL);
  }

  private JPanel createBtnPanel()
  {
    JButton startBtn = new JButton("Start");
    startBtn.addActionListener(new StartBtnListener());
    
    JPanel buttonPanel = new JPanel();
    buttonPanel.add(startBtn);
    return buttonPanel;
  }

  private JPanel createImagePanel()
  {
    BufferedImage image = null;
    try
    {
      image = ImageIO.read(new URL(IMAGE_ADDR));
    }
    catch (MalformedURLException e)
    {
      e.printStackTrace();
    }
    catch (IOException e)
    {
      e.printStackTrace();
    }
    JPanel imagePanel = new JPanel();
    
    if (image != null)
    {
      imagePanel.add(new JLabel(new ImageIcon(image)));
    }
    return imagePanel;
  }

  public JComponent getComponent()
  {
    return mainPanel;
  }
  
  private class StartBtnListener implements ActionListener
  {
    public void actionPerformed(ActionEvent e)
    {
      cardlayout.show(mainPanel, IMAGE_PANEL);
    }
  }

  private static void createAndShowUI()
  {
    JFrame frame = new JFrame("Display Image");
    frame.getContentPane().add(new DisplayImageV3().getComponent());
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.pack();
    frame.setLocationRelativeTo(null);
    frame.setVisible(true);
  }

  public static void main(String[] args)
  {
    java.awt.EventQueue.invokeLater(new Runnable()
    {
      public void run()
      {
        createAndShowUI();
      }
    });
  }
}

[Thang Pham]

Thank you so much. It worked. However, since I am a newbie to Java Swing, as well as programming, I want to ask you couple questions about your code. First of all, is there a particular reason that you declare IMAGE_PANEL, BUTTON_PANEL... to be static variables. I understand that declaring a variable to be static so that the variable is not attach to a particular objects but rather to a class as a whole. But I think in this case, that is not the reason. Second, can you explain a bit about the differences in setPreferredSize and setSize, I google those two, but the differences are unclear. One last question, If I want to keep the start button after I click it, how do I do it? I know CardLayout make it disappear, I try to implement BoxLayout to keep it, but the result was unsuccessful. Again, thank you, and if any of my question appear to be stupid, please forgive me

[pete stein]

Thang Pham wrote:is there a particular reason that you declare IMAGE_PANEL, BUTTON_PANEL... to be static variables.

Those actually aren't variables. If you look closely you'll see that they are declared static final and are all-capitalized -- thus they are constants.

Second, can you explain a bit about the differences in setPreferredSize and setSize

Most layout managers will use the preferredSize value when deciding how to set a rendered component's size, not the size field, and so if you are using layout managers (and I suggest that you do so) it is the preferredSize field that you should set.

If I want to keep the start button after I click it, how do I do it? I know CardLayout make it disappear, I try to implement BoxLayout to keep it, but the result was unsuccessful.

If you want to preserve the start button, then don't have it held by a component that is swapped by the cardlayout. For instance you could have your main JPanel use a BorderLayout, have it hold a JPanel in the BorderLayout.SOUTH position that holds your start button, and hold another JPanel in the BorderLayout.CENTER position that uses a CardLayout that swaps JPanels. The possibilities here are endless.

Again, thank you, and if any of my question appear to be stupid, please forgive me

You're quite welcome. And most of us here believe that the only stupid question is the unasked question. Best of luck.

[Thang Pham]

If you want to preserve the start button, then don't have it held by a component that is swapped by the cardlayout. For instance you could have your main JPanel use a BorderLayout, have it hold a JPanel in the BorderLayout.SOUTH position that holds your start button, and hold another JPanel in the BorderLayout.CENTER position that uses a CardLayout that swaps JPanels.

I try to implement what you said above, but I could not get it to show up correctly. The image show up when I run the program. The image suppose to only show up after I click the start button

    
import java.awt.Dimension;
import java.awt.CardLayout;
import java.awt.BorderLayout;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import java.awt.image.BufferedImage;
import java.io.*;

import javax.imageio.ImageIO;
import javax.swing.*;

public class DisplayImageV2 {
   private static final Dimension MAIN_SIZE = new Dimension(300,300);
   private static final String IMAGE_PATH = "1.jpg";
   private static final String IMAGE_PANEL = "Image Panel";
   private static final String BUTTON_PANEL = "Button Panel";

   private JPanel mainPanel, imagePanel, btnPanel;
   private CardLayout cardlayout = new CardLayout();
   private BorderLayout borderlayout = new BorderLayout();

   public DisplayImageV2() {
      mainPanel = new JPanel();
      mainPanel.setLayout(borderlayout);
      mainPanel.setPreferredSize(MAIN_SIZE);
      createBtnPanel();
      createImagePanel();
      mainPanel.add(btnPanel, BorderLayout.SOUTH);
      mainPanel.add(imagePanel, BorderLayout.CENTER);
   }

   private void createBtnPanel() {
      JButton startBtn = new JButton("Start");
      startBtn.addActionListener(new StartBtnListener() );
      btnPanel = new JPanel();
      btnPanel.add(startBtn);
   }

   private void createImagePanel() {
      BufferedImage image = null;
      try {
         File input = new File(IMAGE_PATH);
         image = ImageIO.read(input);
      }catch(IOException ioe) {
         ioe.printStackTrace();
      }
      imagePanel = new JPanel();
      imagePanel.setLayout(cardlayout);
      if(image != null) {
         imagePanel.add(new JLabel(new ImageIcon(image)), IMAGE_PANEL);
      }
   }

   public JPanel getPanel() {
      return mainPanel;
   }

   private class StartBtnListener implements ActionListener {
      public void actionPerformed(ActionEvent e) {
         cardlayout.show(imagePanel, IMAGE_PANEL);
      }
   }
   
   private static void createAndShowUI() {
      JFrame frame = new JFrame("Display Image");
      frame.getContentPane().add(new DisplayImageV2().getPanel());
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      frame.pack();
      frame.setLocationRelativeTo(null);  //center the windows
      frame.setVisible(true);
   }

   public static void main (String args[]) {
      java.awt.EventQueue.invokeLater(new Runnable(){
         public void run() {
            createAndShowUI();
         }
      });      
   }
   

}

[Thang Pham]

Actually, I figure it out. The first component that add to the cardlayout is visible when the container first display. So I can add a another image in, and when I implement cardlayout.next(), it will show the next picture.