动态地将JPanel添加到groupLayout

Question

I try to build a webcam app for a university project in java. Until now i never needed GUI so i have no experience with this and for that i used the gui builder inside of netbeans.

For now the GUI looks like that:

It's only a jPanel and a jButton added inside the gui builder.

The image i want to display is taken by using openCV. This works just fine and i get a bufferedImage. To display this image i created a subclass of jPanel and changed the paintComponent method.

package WebcamImageCapture;

import java.awt.Color;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import javax.swing.JPanel;

public class ImagePanel extends JPanel
{
    /**
     * Creates a new empty ImagePanel.
     */
    public ImagePanel()
    {
        this.image = null;
    }

    /**
     * Creates a new ImagePanel from BufferedImage img.
     * @param img The BufferedImage to display on the ImagePanel
     */
    public ImagePanel(BufferedImage img)
    {
        this.image = img;
    }

    @Override
    public void paintComponent(Graphics g)
    {
        super.paintComponent(g);
        g.drawImage(this.image, 0, 0, this.image.getWidth(), this.image.getHeight(), null);

        g.setColor(new Color(240, 160, 40));
        g.fillRect(10, 10, 25, 25);

        this.repaint();
    }

    /**
     * Sets the BufferedImage img to display on ImagePanel.
     * @param img The BufferedImage to display on the ImagePanel
     */
    public void setImage(BufferedImage img)
    {
        this.image = img;
    }

    private BufferedImage image;
}

The GUI class has the member openCameraButton and outputPanel , which are the elements you can see on the screenshot. I tryed the following to add my imagePanel to the outputPanel inside of the method which handles the ActionPerformed event of the button.

// create the custom jPanel
ImagePanel webcamFrame = new ImagePanel(img);
webcamFrame.setPreferredSize(new Dimension(640, 480));

this.outputPanel.getLayout().addLayoutComponent("webcamFrame", webcamFrame);
this.outputPanel.revalidate();
this.outputPanel.repaint();

this.revalidate();
this.repaint();

This doesn't work =(. I googled around and tested for 2 days (also reading the oracle documentation on layouts : documentation ) not finding a solution.

So the main questions are:

1. How do i add the ImagePanel?
2. Should i manually implement the GUI with an other layout?

Thanks in advance for your help.

Answer 1

2.Should i manually implement the GUI with an other layout?

Yes, code generated by an IDE is hard to maintain and change.

The JFrame is uses a BorderLayout by default so you could do something like:

ImagePanel = new ImagePanel();
frame.add(imagePanel, BorderLayout.CENTER);

JPanel south = new JPanel();
JButton load = new JButton("Load Image");
south.add(load);
frame.add(south, BorderLayout.PAGE_END);

So the idea is you add the panel to the frame at design time. Then whenever you capture an image you invoke the setImage() method. The code in your setImage() method would be:

this.image = img;
repaint();

Your paintComponent() code would change to:

if (image != null);
    g.drawImage(this.image, 0, 0, this.image.getWidth(), this.image.getHeight(), null);

Also get rid of the repaint(). This will cause an infinite loop.

Answer 2

i changed my code as you recommended ...

package WebcamImageCapture;

import java.awt.Color;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import javax.swing.JPanel;

public class ImagePanel extends JPanel
{
    /**
     * Creates a new empty ImagePanel.
     */
    public ImagePanel()
    {
        this.image = null;
    }

    /**
     * Creates a new ImagePanel from BufferedImage img.
     * @param img The BufferedImage to display on the ImagePanel
     */
    public ImagePanel(BufferedImage img)
    {
        this.image = img;
    }

    @Override
    public void paintComponent(Graphics g)
    {
        if(this.image != null)
        {
            super.paintComponent(g);
            g.drawImage(this.image, 0, 0, this.image.getWidth(), this.image.getHeight(), null);

            g.setColor(new Color(240, 160, 40));
            g.fillRect(10, 10, 25, 25);

            System.out.println("image drawn ...");
        }
        else
        {
            System.out.println("image not drawn ...");
        }
    }

    /**
     * Sets the BufferedImage img to display on ImagePanel.
     * @param img The BufferedImage to display on the ImagePanel
     */
    public void setImage(BufferedImage img)
    {
        this.image = img;
        this.repaint();
    }

    private BufferedImage image;
}

... and created the GUI by hand.

private void init()
{
    this.imageOutput = new ImagePanel();
    this.add(imageOutput, BorderLayout.CENTER);

    this.openCameraButton = new JButton("open camera");
    this.openCameraButton.addActionListener(new java.awt.event.ActionListener() {
        @Override
        public void actionPerformed(java.awt.event.ActionEvent evt) {
            openCameraButtonActionPerformed(evt);
        }
    });

    JPanel navigation = new JPanel();
    navigation.add(this.openCameraButton, BorderLayout.PAGE_END);

    this.add(navigation);
    this.setTitle("Webcam");
    this.setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);

    this.pack();
}

Inside the openCameraButtonActionPerformed method i took the image and used the setImage method of the ImagePanel to set it.

this.imageOutput.setImage(img);

But unfortunately nothing happens. If i do the following, i get a new window with the image inside.

JFrame myFrame = new JFrame("myFrame");
ImagePanel out = new ImagePanel(img);
myFrame.add(out);
myFrame.pack();
myFrame.setVisible(true);

What i am doing wrong?