JPanel within JFrame

Question

I've just started learning Java and now I'm making a GUI for Tetris. I want to have something like that: 1 http://desmond.imageshack.us/Himg846/scaled.php?server=846&filename=tetrisf.png&res=landing

But I get:

EDIT: Could someone tell me how to fix this?

It is the part of a TetrisFrame's (extending JFrame) constructor:

setLayout(new BorderLayout());

/* adding a panel of the left side */
left = new TetrisPanel(Constants.WIDTH, Constants.HEIGHT);
getContentPane().add(BorderLayout.LINE_START, left);
left.setSize(Constants.WIDTH * Constants.BLOCK_SIZE,
             Constants.HEIGHT * Constants.BLOCK_SIZE);

/* adding a panel on the right side */
JPanel right = new JPanel();
getContentPane().add(BorderLayout.LINE_END, right);

nextPiecePreview = new TetrisPanel(4 , 4);
points = new JLabel("0");

right.add(nextPiecePreview);

setSize(Constants.WIDTH * Constants.BLOCK_SIZE + Constants.RIGHT_MENU_SIZE,
        Constants.HEIGHT * Constants.BLOCK_SIZE + Constants.BOTTOM_MARGIN);

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setResizable(false);
setVisible(true);

It is a part of my TetrisPanel class:

public void paintComponent(Graphics g) { 
  super.paintComponent(g);
  setBounds(0, 0, Constants.BLOCK_SIZE * width ,
            Constants.BLOCK_SIZE * height);

  for(int i = 0; i < width; ++i) {
    for(int j = 0; j < height; ++j) {
      drawSquare(g, i, j, colorsMap.get(BlocksType.Z_SHAPED));
    }
  }
}

private void drawSquare (Graphics g, int x_temp, int y_temp, Color color) {
  int x = x_temp * Constants.BLOCK_SIZE;
  int y = y_temp * Constants.BLOCK_SIZE;

  g.setColor(color);
  g.fillRect(x + 1,  y + 1, Constants.BLOCK_SIZE - 2, Constants.BLOCK_SIZE - 2);

  g.setColor(color.brighter());

  g.drawLine(x, y + Constants.BLOCK_SIZE - 1, x, y);
  g.drawLine(x, y, x + Constants.BLOCK_SIZE - 1, y);

  g.setColor(color.darker());
  g.drawLine(x + 1, y + Constants.BLOCK_SIZE - 1,
         x + Constants.BLOCK_SIZE - 1, y + Constants.BLOCK_SIZE - 1);

  g.drawLine(x + Constants.BLOCK_SIZE - 1, y + Constants.BLOCK_SIZE - 1,
             x + Constants.BLOCK_SIZE - 1, y + 1);

Answer 1

The TetrisPanel is the main panel, then you should add it with BorderLayout.CENTER instead of BorderLayout.LINE_START.

And, parameters correct order is getContentPane(component, layoutOrientation);

Below, a layout sample:

public class GuiExample extends JPanel {
    public GuiExample() {
        JPanel gamePanel = new JPanel();
        gamePanel.setBackground(Color.GREEN);
        gamePanel.setPreferredSize(new Dimension(300, 400));

        JPanel infoPanel = new JPanel();
        infoPanel.setBackground(Color.WHITE);

        JPanel previewPanel = new JPanel();
        previewPanel.setBackground(Color.BLUE);
        previewPanel.setPreferredSize(new Dimension(100, 100));

        JPanel pointsPanel = new JPanel();
        pointsPanel.setBackground(Color.RED);
        pointsPanel.setPreferredSize(new Dimension(100, 50));

        infoPanel.setLayout(new BoxLayout(infoPanel, BoxLayout.Y_AXIS));
        infoPanel.setPreferredSize(new Dimension(100, 400));
        infoPanel.add(previewPanel);
        infoPanel.add(pointsPanel);

        add(gamePanel, BorderLayout.CENTER);
        add(infoPanel, BorderLayout.EAST);
    }
    public static void main(String s[]) {
        JFrame frame = new JFrame("Java Rules");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setContentPane(new GuiExample());
        frame.pack();
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}

Answer 2

I don't really see a question any where, but I assume that your question would be, "Why does my GUI not look like I expect?" or something along the lines of "How do I fix the layout?"

What you could do, is get a GUI Builder, like NetBeans, and make your GUI in there. Then manipulate the components with your code as you do above. At least then you are guranteed a GUI layout as you want. The rest is functionality.

Answer 3

Just a side note, when you override paintComponent(...) method of the said JPanel/JComponent make it a customary habbit of overriding it's getPreferredSize() as well. When using a Layout Manager, prefer not to use any setXxXSize() methods of any sorts. Let Layout Manager handles that aspect. Is this what you looking for :

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

public class Tetris extends JFrame
{
    private void createAndDisplayGUI()
    {
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        GamePanel gp = new GamePanel();
        gp.createGUI();

        JPanel rightPanel = new JPanel();
        rightPanel.setLayout(new BorderLayout());
        PreviewPanel pp = new PreviewPanel();
        pp.createGUI();

        JPanel pointsPanel = new JPanel();
        pointsPanel.setOpaque(true);
        pointsPanel.setBackground(Color.DARK_GRAY);
        JLabel pointsLabel = new JLabel("Points");
        pointsPanel.add(pointsLabel);
        rightPanel.add(pp, BorderLayout.PAGE_START);
        rightPanel.add(pointsPanel, BorderLayout.CENTER);

        getContentPane().add(gp, BorderLayout.CENTER);
        getContentPane().add(rightPanel, BorderLayout.LINE_END);

        pack();
        setLocationByPlatform(true);
        setVisible(true);
    }

    public static void main(String... args)
    {
        SwingUtilities.invokeLater(new Runnable()
        {
            public void run()
            {
                new Tetris().createAndDisplayGUI();
            }
        });
    }
}

class GamePanel extends JPanel
{
    public Dimension getPreferredSize()
    {
        return (new Dimension(500, 500));
    }

    protected void createGUI()
    {
        setOpaque(true);
        setBackground(Color.BLUE);
    }
}

class PreviewPanel extends JPanel
{
    public Dimension getPreferredSize()
    {
        return (new Dimension(200, 200));
    }

    protected void createGUI()
    {
        setOpaque(true);
        setBackground(Color.WHITE);
        JLabel label = new JLabel("Preview of the next Block.");
    }
}

And the output is :

Answer 4

Instead of adding your left and right panels with BorderLayout.LINE_START and BorderLayout.LINE_END, try using BorderLayout.CENTER and BorderLayout.EAST (respectively).