Question

This is my first question, so please bear with me.

I am working on an application (which I have already fully-designed). Now I am at the coding stage and I am having trouble placing a background image on the JFrame while still allowing it to play its role as a Container so I can put buttons on it and things of that nature.

I have created this JFrame class file in Netbeans 7.0 and if someone could tell me how to do this through the interface of Netbeans that would be great (if not, just the code would be fine).

I already know that I am supposed to override the paintComponent method (which I have done already, but my image file is not showing). Also I have a second questions, I don’t want to put the full file-path for the image, I have my source files in packages and now I am quite confused as to where I am to put my image files.

EDIT: initComponoents() is the generated method by Netbeans that determines the properties of the JFrame.

public class TinyTowerOrganizerInterface extends javax.swing.JFrame {

/** Creates new form TinyTowerOrganizerInterface */
    Image backgroundImage = Toolkit.getDefaultToolkit().getImage("D:/Java/TinyTowerOrganizer/Images/Background.jpg");

public TinyTowerOrganizerInterface() throws IOException {

    initComponents(); 
    class BackgroundPanel extends javax.swing.JPanel{
        private Image image;
        public BackgroundPanel(Image image){
            this.image = image;
        }
        @Override
        public void paintComponent(Graphics g){
            super.paintComponent(g);
            g.drawImage(image, 0, 0, null);

        }

    }

}

@SuppressWarnings("unchecked")
// <editor-fold defaultstate="collapsed" desc="Generated Code">
private void initComponents() {

    setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
    setTitle("Tiny Tower Organizer");
    setFont(new java.awt.Font("Pixelated", 0, 18)); // NOI18N
    setMinimumSize(new java.awt.Dimension(900, 500));
    setName("frame"); // NOI18N
    setResizable(false);
    setUndecorated(true);

    javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());
    getContentPane().setLayout(layout);
    layout.setHorizontalGroup(
        layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
        .addGap(0, 900, Short.MAX_VALUE)
    );
    layout.setVerticalGroup(
        layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
        .addGap(0, 500, Short.MAX_VALUE)
    );

    pack();
}


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

        @Override
        public void run() {
            try {
                new TinyTowerOrganizerInterface().setVisible(true);
            } catch (IOException ex) {
                Logger.getLogger(TinyTowerOrganizerInterface.class.getName()).log(Level.SEVERE, null, ex);
            }
        }
    });
}

Answer 1

I already know that I am supposed to override the paintComponent method

JFrame does not have a paintComponent(…) method.

Instead you should extend JPanel (or JComponent) and add your custom painting in the paintComponent() method. Then you add the panel to the frame.

Also, don’t forget to override the getPreferredSize() method of the panel to return the size of the image.

Edit:

First of all when you post code post a SSCCE so we can copy and execute the code. I’ve include a simple SSCCE below.

There are different problems.

The first problem is that the getImage() method reads the image async so when the frame is displayed, the image is not completely loaded and there is nothing to display as you can see when run the code. Instead use ImageIO to read the image.

What is it that I even want to get accomplished

When you make the above change and run the code you will still only see a small frame even though pack() have been invoked. That is because you haven’t added any components to the poanel so the default preferred size is (10, 10) because you are using a FlowLayout. So you need to override the getPreferredSize() method to return the size of the image so the panel can be packed properly.

import java.awt.*;
import javax.swing.*;
import java.io.*;
import javax.imageio.*;

public class MyApplication extends javax.swing.JFrame
{

/** Creates new form MyApplication */
    Image backgroundImage = Toolkit.getDefaultToolkit().getImage("mong.jpg");

    public MyApplication() throws IOException
    {

        this.setContentPane(new JPanel()
        {

            @Override
            public void paintComponent(Graphics g)
            {
                super.paintComponent(g);
                g.drawImage(backgroundImage, 0, 0, null);
            }
        });

        pack();
        setVisible(true);
    }


    public static void main(String[] args)
        throws Exception
    {
        new MyApplication();
    }
}