Why are the paintComponents being called but not seen?

Question

I have a GridLayout of Cells that each extends JComponent. The GridLayout manages a Board class that extends JPanel and the Board object/panel is added to the main panel with two other panels.

Here's the Cell Class:

public class Cell extends JComponent{

    private int row;
    private int col;

    private int rowHeight;
    private int colWidth;

    private boolean active = false;

    private Color color;

    public Cell(int row, int col, Color color) {
        this.row = row;
        this.col = col;

        this.color = color;
    }

    public Cell(int row, int col, int rowHeight, int colWidth, Color color) {
        this.row = row;
        this.col = col;

        this.rowHeight = rowHeight;
        this.colWidth = colWidth;

        this.color = color;
    }

    protected void paintComponent(Graphics g) {
        super.paintComponent(g);

        paintSquare(g);
    }

    private void paintSquare(Graphics g) {
        g.setColor(color);
        g.fillRoundRect(
            (int) (col * colWidth),
            (int) (row * rowHeight),
            (int) (rowHeight),
            (int) (colWidth),
            10,
            10);

    }

    public int getCol()
    {
        return col;
    }

    public int getRow()
    {
        return row;
    }

    public boolean isActive() {
        return active;
    }

    public void setActive(boolean active) {
        this.active = active;
    }

    public Color getColor() {
        return color;
    }

    public void setColor(Color color) {
        this.color = color;
    }
}

Here's the Board Class:

public class Board extends JPanel {

    public Cell[][] gameBoard;

    public final int GAME_ROWS;
    public final int GAME_COLUMNS;

    public int rowHeight;
    public int columnWidth;

    public Color selectedColor;

    public Board(int GAME_ROWS, int GAME_COLUMNS) {
        this.GAME_COLUMNS = GAME_COLUMNS;
        this.GAME_ROWS = GAME_ROWS;

        calculateDimensions();

        createGameBoard();

        setUpBoardPanel();
    }

    private void calculateDimensions() {
        rowHeight = (int) this.getHeight() / GAME_ROWS;
        columnWidth = (int) this.getWidth() / GAME_COLUMNS;
    }

    private void createGameBoard() {
        Random random = new Random();
        int cellColor;
        gameBoard = new Cell[GAME_ROWS][GAME_COLUMNS];
        for (int row = 0; row < GAME_ROWS; row++) {
            for (int col = 0; col < GAME_COLUMNS; col++) {
                cellColor = random.nextInt(Properties.COLORS.length);
                Cell newCell = new Cell(row, col, rowHeight, 
                    columnWidth,Properties.COLORS[cellColor]);
                gameBoard[row][col] = newCell;
            }
        }
    }

    private void setUpBoardPanel() {
        setLayout(new GridLayout(GAME_ROWS, GAME_COLUMNS));
        setPreferredSize(Properties.BOARD_TABLE_SIZE);
        setBorder(new EmptyBorder(20, 10, 0, 0));
        setBackground(Properties.BACKGROUND_COLOR);

        addBoardPanelComponents();
    }

    private void addBoardPanelComponents() {
        for(int r = 0; r < GAME_ROWS; r++) {
            for(int c = 0; c < GAME_COLUMNS; c++) {
                add(gameBoard[r][c]);
            }
        }
    }
}

Everything on the main panel is showing up perfectly, and I can see that the Board panel was added because I when I change its background it shows up as it's set.

I've looked through a bunch of tutorials and am calling super right so I'm not sure how the components could be added and called correctly and just not show up.

To see the full program code you can go to my github, but the relevant code is above. TIA!

Answer 1

The "core" issue is, you don't understand how the coordinate space of a component works.

The x/y position of component is relative to its parent. The top/left corner of any component/container is always 0x0.

So when you do something like this...

g.fillRoundRect(
                (int) (col * colWidth),
                (int) (row * rowHeight),
                (int) (rowHeight),
                (int) (colWidth),
                10,
                10);

You're saying, fill a rect which starts at col * width x row * rowHeight relative to the top left corner of the component itself (which is always 0x0)

What you should be doing is something more like this...

g.fillRoundRect(
                0,
                0,
                getWidth() - 1,
                getHeight() - 1,
                10,
                10);

This will fill the entire visible area of the component.

But why use getWidth and getHeight. Well, in this context, this ensures that the entire visible area of the component is filled, but how do you affect the size of the component?

The preferred way is to override the getPreferredSize method of the component and return the "preferred" size (all things been equal).

@Override
public Dimension getPreferredSize() {
    return new Dimension(colWidth, rowHeight);
}

This provides a hint to the parent layout manager about how the component would "like" to be laid out.

Another issue is...

    private void calculateDimensions() {
        rowHeight = (int) this.getHeight() / GAME_ROWS;
        columnWidth = (int) this.getWidth() / GAME_COLUMNS;
    }

This is pointless, because until the component has undergone a layout pass, it's size is 0x0, so, basically you're saying the rowHeight and columnWidth should be 0x0 :/

Honestly, best to just rid of it. If you need to, seed a known value to the Cell directly

Runnable example...

import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.GridLayout;
import java.util.Random;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
import javax.swing.border.EmptyBorder;
import javax.swing.border.LineBorder;

public class Test {

    public static void main(String[] args) {
        new Test();
    }

    public Test() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                    ex.printStackTrace();
                }

                JFrame frame = new JFrame("Testing");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.add(new Board(10, 10));
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class Board extends JPanel {

        public Cell[][] gameBoard;

        public final int GAME_ROWS;
        public final int GAME_COLUMNS;

        public int rowHeight = 50;
        public int columnWidth = 50;

        public Color selectedColor;

        public Board(int GAME_ROWS, int GAME_COLUMNS) {
            this.GAME_COLUMNS = GAME_COLUMNS;
            this.GAME_ROWS = GAME_ROWS;

            createGameBoard();

            setUpBoardPanel();
        }

        private void createGameBoard() {
            Random random = new Random();
            int cellColor;
            Color[] colors = new Color[]{Color.BLUE, Color.CYAN, Color.DARK_GRAY, Color.GRAY, Color.GREEN, Color.LIGHT_GRAY, Color.MAGENTA, Color.ORANGE, Color.PINK, Color.RED, Color.YELLOW};
            gameBoard = new Cell[GAME_ROWS][GAME_COLUMNS];
            for (int row = 0; row < GAME_ROWS; row++) {
                for (int col = 0; col < GAME_COLUMNS; col++) {
                    cellColor = random.nextInt(colors.length);
                    Cell newCell = new Cell(row, col, rowHeight,
                                    columnWidth, colors[cellColor]);
                    gameBoard[row][col] = newCell;
                }
            }
        }

        private void setUpBoardPanel() {
            setLayout(new GridLayout(GAME_ROWS, GAME_COLUMNS));
            setBorder(new EmptyBorder(20, 10, 0, 0));
            setBackground(Color.RED);

            addBoardPanelComponents();
        }

        private void addBoardPanelComponents() {
            for (int r = 0; r < GAME_ROWS; r++) {
                for (int c = 0; c < GAME_COLUMNS; c++) {
                    add(gameBoard[r][c]);
                }
            }
        }
    }

    public class Cell extends JComponent {

        private int row;
        private int col;

        private int rowHeight;
        private int colWidth;

        private boolean active = false;

        private Color color;

        public Cell(int row, int col, int rowHeight, int colWidth, Color color) {
            this.row = row;
            this.col = col;

            this.rowHeight = rowHeight;
            this.colWidth = colWidth;

            this.color = color;
            setBorder(new LineBorder(Color.BLACK));
        }

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(colWidth, rowHeight);
        }

        protected void paintComponent(Graphics g) {
            super.paintComponent(g);

            paintSquare(g);
        }

        private void paintSquare(Graphics g) {
            g.setColor(color);
            g.fillRoundRect(
                            0,
                            0,
                            getWidth() - 1,
                            getHeight() - 1,
                            10,
                            10);

        }

        public int getCol() {
            return col;
        }

        public int getRow() {
            return row;
        }

        public boolean isActive() {
            return active;
        }

        public void setActive(boolean active) {
            this.active = active;
        }

        public Color getColor() {
            return color;
        }

        public void setColor(Color color) {
            this.color = color;
        }
    }

}