How to put 1 JPanel and 1 Custom JPanel in a JFrame

Question

I want to have 2 JPanels in my app, side by side. One that will have some info about my custom board on the right and one about painting that custom board on the left. The first JPanel is a classic, but the second is a custom panel. It seems that im having problems with putting my custom panel into the frame.

I've created a class named BoardPanel within my gui class to draw my custom board. I don't know if this is the best approach. Should i create a separate class instead?

This is the code of the gui class:

public class BattleshipGUI extends JFrame {

    private BoardPanel mainPanel;


    ///////////////////////////////////////////////////////////////////////////////////////////////
    // Create my frame
    ///////////////////////////////////////////////////////////////////////////////////////////////
    public BattleshipGUI() {

        JPanel container = new JPanel(new BorderLayout()); //the container panel that contains the 2 other panels

        mainPanel = new BoardPanel(); //main panel with my custom painting
        JPanel detailsPanel = new JPanel(new BorderLayout()); //secondary panel with various details about the game

        container.add(mainPanel, BorderLayout.CENTER); //add the 2 panels in the container
        container.add(detailsPanel, BorderLayout.EAST);

        this.add(container); //add container to my frame
        //this.setContentPane(container);



        this.setIconImage(Toolkit.getDefaultToolkit().getImage(BattleshipGUI.class.getResource("/resources/battleship_128.png")));
        this.setTitle("My Battleship Game");
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        //this.setBounds(100, 100, 850, 700);
        //this.pack();
        this.setSize(850, 600);

        this.setVisible(true);

    }

And this is the code of the inner class for the custom painting

class BoardPanel extends JPanel {

        private static final int ROWS = 20;
        private static final int COLUMNS = 20;


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

            int sqSize = this.getHeight()/ROWS;

            for(int i=0; i<ROWS; i++) {
                for(int j=0; j<COLUMNS; j++) {
                    int x = j * sqSize;
                    int y = i * sqSize;
                    g.drawRect(x, y, sqSize, sqSize);

                }
            }

        }
    }

Aside from all these, i have a question. If i want to have a custom painting, is it possible to work along side with the WindowsBuilderPro? I begun using that tool at first. But, i saw that i cant draw something custom with the tool and i had to write code to do that. Is it possible to write code for a custom paint AND use the tool at the same time for different purposes, like adding a simple text label, or even to edit that custon paint? The expected result that i want to see, appears when i run the program. My frame with the two panels. But when i open the WindowsBuilderPro, my custom panel does not appear and the result is a bit wrong. Thit is the reason why i have a question about my approach and if i can write code and use the tool at the same time. Thank you and sorry for the long text guys. I am too confused about this.

Answer 1

import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

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 TestPane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class TestPane extends JPanel {

        public TestPane() {
            setLayout(new GridBagLayout());
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.fill = gbc.BOTH;
            gbc.gridx = 0;
            gbc.gridy = 0;

            JPanel filler = new JPanel() {
                @Override
                public Dimension getPreferredSize() {
                    return new Dimension(200, 300);
                }
            };
            filler.setBackground(Color.BLUE);

            add(filler, gbc);
            gbc.gridx++;
            add(new BoardPanel(), gbc);
        }

    }

    class BoardPanel extends JPanel {

        private static final int ROWS = 20;
        private static final int COLUMNS = 20;
        private int sqSize = 20;

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(COLUMNS * sqSize, ROWS * sqSize);
        }

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

            for (int i = 0; i < ROWS; i++) {
                for (int j = 0; j < COLUMNS; j++) {
                    int x = j * sqSize;
                    int y = i * sqSize;
                    g.drawRect(x, y, sqSize, sqSize);

                }
            }

        }
    }

}

Take the time to read through Laying Out Components Within a Container to get a better understanding how the layout management API works