Coding 3: JPanels and JLabels

In this coding lesson, we will be making a JPanel and some Label components

What is a JPanel?

A JPanel is a container that can hold objects inside it. In order to display something on our game window (JFrame) we need to create a content panel - which is, as the name suggests, the container that displays the content of the game window.

The content panel is the top-layer which will contain all the objects that are displayed on the game window.

Create a content pane (JPanel)

In our constructor:

public Game() {
    setTitle("Whack A Mole");
    setResizable(false);
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    setBounds(100, 100, 608, 720);
}

Let's create a JPanel object

JPanel contentPane = new JPanel();

Did you forget to do something?

That's right. We need to import the JPanel first...

import javax.swing.JPanel;

It is quite tedious to have to import everytime we want to use a new Swing component.. so there is a quick shortcut/trick to this: Press ctrl+shift+o to automatically import all the libraries we need.

We can also customize our content panel, by setting a few attributes:

contentPane.setBackground(new Color(0, 51, 0));
contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
contentPane.setLayout(null);

Finally, let's set the Content Panel of our JFrame (window) to this contentPane object we just created

setContentPane(contentPane);

Now our constructor should look like this:

public Game() {
    setTitle("Whack A Mole");
    setResizable(false);
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    setBounds(100, 100, 608, 720);

    JPanel contentPane = new JPanel();
    contentPane = new JPanel();
    contentPane.setBackground(new Color(0, 51, 0));
    contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
    contentPane.setLayout(null);

    setContentPane(contentPane);
}

If you run the program now, it should display a window with a green background.

The content panel will contain all of the objects that are displayed on the screen, including the title, score, time remaining and moles.

Create a JLabel

To create a JLabel is very simple, it is the same procedure as creating a JPanel:

JLabel label = new JLabel();

So what is the purpose of a JLabel?

We can use the JLabel for displaying things such as: images, icons, titles, descriptions, etc.

For our WhackAMole game, we will be using JLabels to display the Mole images and to display some text

Add a title

Let's now use the JLabel component to display a title on our game window:

JLabel lblTitle = new JLabel("Whack A Mole");

Now let's set some attributes to it:

lblTitle.setForeground(new Color(153, 204, 0));
lblTitle.setHorizontalAlignment(SwingConstants.CENTER);
lblTitle.setFont(new Font("Century Gothic", Font.BOLD, 20));
lblTitle.setBounds(0, 0, 602, 47);

And finally add it to the content panel:

contentPane.add(lblTitle);

Now our game should look like this:

Coding 3: Source Code

import java.awt.Color;
import java.awt.Font;

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.SwingConstants;
import javax.swing.border.EmptyBorder;


public class Game extends JFrame{

    public Game() {
        setTitle("Whack A Mole");
        setResizable(false);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setBounds(100, 100, 608, 720);

        JPanel contentPane = new JPanel();
        contentPane = new JPanel();
        contentPane.setBackground(new Color(0, 51, 0));
        contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
        contentPane.setLayout(null);

        JLabel lblTitle = new JLabel("Whack A Mole");
        lblTitle.setForeground(new Color(153, 204, 0));
        lblTitle.setHorizontalAlignment(SwingConstants.CENTER);
        lblTitle.setFont(new Font("Century Gothic", Font.BOLD, 20));
        lblTitle.setBounds(0, 0, 602, 47);
        contentPane.add(lblTitle);

        setContentPane(contentPane);
    }

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