How to use a Java GUI panel?

I would like to have the image appear on top of the grid however they seem to be packed into to different panels.

import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.*;
import javax.imageio.ImageIO;
import javax.swing.*;

@SuppressWarnings("serial")
public class test4 extends JPanel {

BufferedImage image;
Dimension size = new Dimension();

public test4(BufferedImage image) {
    this.image = image;

JPanel content = new JPanel(new GridLayout(8,8)); 

for (int i = 0; i < 8*8; ++i) { 
    JPanel panel = new JPanel(); 

    if ( i % 2 == i/8 % 2) {
        panel.setBackground(Color.WHITE); 
    } else {
        panel.setBackground(Color.DARK_GRAY); 
    }
        content.add(panel); 
    } 
        this.add(content); 
    }

protected void paintComponent(Graphics g) {
    int x = 100;
    int y = 300;
    g.drawImage(image, x, y, this);
}

public static void main(String[] args) throws IOException {
String path = "images/Untitled.png";
BufferedImage image = ImageIO.read(new File(path));

test4 test = new test4(image);
    JFra开发者_JAVA百科me f = new JFrame();
    f.setDefaultCloseOperation(JFrame.EXIT_O…
    f.add(test);
    f.setSize(400,400);
    f.setLocationRelativeTo(null);
    f.setVisible(true);
    }
}

however they seem to be packed into to different panels.

This is because by default a JPanel uses a FlowLayout. A FlowLayout respects the size of any component added to it. An empty JPanel will default to a size of 10 X 10, which is the default horizontal/vertical gap of the FlowLayout. Therefore your chessboard is centered at its preferred size in the top of the panel.

You can fix this easily by adding:

setLayout( new BorderLayout() );

i would like to have the image appear on top of the grid

This doesn't make any sense to me? Why would you want an image painted on top of the chess board?

If you want chess pieces, the create a JLabel and add the label to the individual chess squares.

If you want an image displayed at the start of your game, then use a modal JDialog to display the image in a JLabel.

If you want to understand painting better then normally you would override paintComponent to draw the image. However in this case the image would be drawn and THEN the chess panels would be painted over top of the image, so you would never see the image.

As suggested earlier, the proper way to do this is to use a layered pane, but this can still be done by overriding the paint() method of the panel:

public void paint(Graphics g)
{
    super.paint(g);
    int x = 50;
    int y = 50;
    g.drawImage(image, x, y, this);
}

To understand how this works read the section from the Swing tutorial on Understanding the Paint Mechanism. Now you should see that the image is painted AFTER the child components are painted.

Instead of creating so many Panels, it would be more efficient to just draw the grid using graphics.fillRect in a loop. Something like this:

public void paint(Graphics g){
    int x = 0 ;
    int y = 0 ;
    g.setColor(Color.WHITE);
    while (y <= getHeight()) {
        //flip the color
        g.setColor(g.getColor() == Color.WHITE ? Color.DARK_GRAY : Color.WHITE);

        g.fillRect(x, y, 8, 8);

        x += 8;
        if (x >= getWidth()) {
            x = 0;
            y += 8;
        }
    }

    //now the image
    int xi = 100;
    int yi = 300;
    g.drawImage(image, xi, yi, this);
}