JFrame does not show anything - swing

Question

I am trying to make a RPG game in a GUI and it's not going so well.
Before I added the JButton everything worked and displayed in the window as it should. I'm not sure what happened after I added the JButton.
There is supposed to be the title displayed in the grey area and the button in the blue area. Ive tried running normally and running with debugger, none of the text or button shows up.
I am following the tutorial here step-by-step and I dont see anything out of place. (I know that i've changed the variable names).
What have I done wrong here? Do I need to add anything extra?
import javax.swing.*;
import java.awt.*;
public class Game {
JFrame window;
Container c;
JPanel titlePanel;
JPanel startButtonPanel;
JLabel titleLabel;
JButton startButton;
Font titleFont = new Font("Cooper Black", Font.PLAIN, 90);
Font buttonFont = new Font("Cooper Black", Font.PLAIN, 32);
public static void main(String[] args) {
new Game();
}
public Game() {
//Main Window
window = new JFrame();
window.setSize(800, 600);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.getContentPane().setBackground(Color.BLACK);
window.setLayout(null);
window.setVisible(true);
c = window.getContentPane();
//Title Panel
titlePanel = new JPanel();
titlePanel.setBounds(100, 100, 600, 150);
titlePanel.setBackground(Color.GRAY);
titleLabel = new JLabel("TEXT RPG");
titleLabel.setForeground(Color.WHITE);
titleLabel.setFont(titleFont);
//Start Button Panel
startButtonPanel = new JPanel();
startButtonPanel.setBounds(300, 400, 200, 100 );
startButtonPanel.setBackground(Color.BLUE);
//Start Button
startButton = new JButton("START");
startButton.setBackground(Color.BLACK);
startButton.setForeground(Color.WHITE);
startButton.setFont(buttonFont);
//Add Elements to Window
titlePanel.add(titleLabel);
startButtonPanel.add(startButton);
//Add Elements to Container
c.add(titlePanel);
c.add(startButtonPanel);
}
}

Answer 1

Do not follow tutorial teaching you to use null layout managers and setting bounds "manually". That is not a good practice.
Remove all bounds setting from the code.
Instead use Layout Managers, that is what they do, dynamically set bounds for you:
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Container;
import java.awt.Font;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
public class Game {
JFrame window;
Container c;
JPanel titlePanel;
JPanel startButtonPanel;
JLabel titleLabel;
JButton startButton;
Font titleFont = new Font("Cooper Black", Font.PLAIN, 90);
Font buttonFont = new Font("Cooper Black", Font.PLAIN, 32);
public static void main(String[] args) {
new Game();
}
public Game() {
//Main Window
window = new JFrame();
window.setSize(800, 600);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
c = window.getContentPane();
c.setBackground(Color.BLACK);
//window.setLayout(null);
//Title Panel
titlePanel = new JPanel(); //JPanel uses FlowLayout by default
//titlePanel.setBounds(100, 100, 600, 150)
titlePanel.setBackground(Color.GRAY);
titleLabel = new JLabel("TEXT RPG");
titleLabel.setForeground(Color.WHITE);
titleLabel.setFont(titleFont);
//Start Button Panel
startButtonPanel = new JPanel();
//startButtonPanel.setBounds(300, 400, 200, 100 );
startButtonPanel.setBackground(Color.BLUE);
//Start Button
startButton = new JButton("START");
startButton.setBackground(Color.BLACK);
startButton.setForeground(Color.WHITE);
startButton.setFont(buttonFont);
//Add Elements to Window
titlePanel.add(titleLabel);
startButtonPanel.add(startButton);
//Add Elements to Container
c.add(titlePanel, BorderLayout.CENTER); //JFrame content pane uses BorderLayout by default
c.add(startButtonPanel, BorderLayout.PAGE_END);
window.pack();
window.setVisible(true); //invoke after all added and pack() ed
}
}
Don't expect to get the exact desired look on first attempt. Learn how to use different Layout Managers and combinations of them to get what you want.

Answer 2

A friend of mine offfered to fix the problem. He added something called "extends Canvas".
Heres the fixed version:
import java.awt.Canvas;
import java.awt.Color;
import java.awt.Container;
import java.awt.Dimension;
import java.awt.Font;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
public class Game extends Canvas{
private static final long serialVersionUID = 1L;
public static JFrame window;
public static Container c;
JPanel titlePanel,startButtonPanel;
JLabel titleLabel;
JButton startButton;
Font titleFont = new Font("Cooper Black", Font.PLAIN,90);
private static int width = 800;
private static int height = 600;
public static String title ="Blueberry's Game";
/*----------------------------------------------------------------------------------------------------*/
public static void main(String[] args){
Game game = new Game();
Game.window.setResizable(false);
Game.window.setTitle(Game.title);
Game.window.add(game);
Game.window.pack();
Game.window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Game.window.setLocationRelativeTo(null);
Game.window.setVisible(true);
}
/*----------------------------------------------------------------------------------------------------*/
public Game(){
window = new JFrame();
setPreferredSize(new Dimension(width, height));
window.getContentPane().setBackground(Color.BLACK);
c = window.getContentPane();
//////////TITLE PANEL//////////////////////
titlePanel = new JPanel();
titlePanel.setBounds(100, 100, 600, 150);
titlePanel.setBackground(Color.BLACK);
titleLabel = new JLabel("TEXT RPG");
titleLabel.setForeground(Color.WHITE);
titleLabel.setFont(titleFont);
//////////START BUTTON PANEL//////////////////////
startButtonPanel = new JPanel();
startButtonPanel.setBounds(300, 400, 200, 100);
startButtonPanel.setForeground(Color.BLUE);
//////////START BUTTON//////////////////////
startButton = new JButton("START");
startButton.setBackground(Color.BLACK);
startButton.setForeground(Color.WHITE);
//////////ADD ELEMENTS TO WINDOW//////////////////////
titlePanel.add(titleLabel);
startButtonPanel.add(startButton);
//////////ADD ELEMENTS TO CONTAINER//////////////////////
c.add(titlePanel);
c.add(startButtonPanel);
}
/*----------------------------------------------------------------------------------------------------*/
}
EDIT: I Also managed to see why the window wasn't showing anything in my question. I just had to adjust the window size with the cursor.