How do I change the color of a grid cell in java swing?

Question

I am working on a shortest path finding application for one of my classes, and as part of this project we need to make a very simple GUI. It only needs a 7 across and 5 down grid, an instructions box, a drop-down menu, and a few buttons to resize the grid and start each of the algorithms. We decided to build the GUI using java swing. But when the user clicks a square on the grid we need to color in that grid square. And we haven't been able to find a way to do this.

To build the grid we created an inner class that simply creates and draws a grid using a nested for loop. This part works perfectly.

 public static class Grid extends JPanel {
        public Grid() {
            setSize(400, 400);
           setVisible(true);
        }

        public void paint(Graphics g) {
            for (int x = 30; x <= 30*cols; x += 30)
                for (int y = 30; y <= 30*rows; y += 30)
                    g.drawRect(x,y, 30, 30);
        }
    }

We tried to do something similar for the cell we wanted to color, but it won't appear in our GUI Window. I saw from other's questions on here that you need to cast the Graphics object as a 2D Graphics object and when I ran some test code outside of taking the mouse input it worked. But when I tried to use the method I had created to color in the grid cell it doesn't appear. Here is the inner class Cell I created to draw and fill in the cell.

 public static class Cell extends JPanel {
      int x;
      int y;
      Color color;
        public Cell(int x, int y, Color color) {
            this.x = x;
            this.y = y;
            this.color = color;
            setVisible(true);
            
        }
        
        public void paintComponent(Graphics g) {
          System.out.println("here");
          super.paintComponent(g);
          Graphics2D g2d = (Graphics2D) g;
          g2d.setColor(color);
          g2d.drawRect(x,y, 30, 30);
          g2d.setColor(color);
          g2d.fillRect(x,y,30,30);
        }
        
    }

Do I need to somehow access the cell that we already drew in the grid instead of trying to draw on top of the grid? How could I do that? Can I even draw on top of the grid? Is it something with our mouse event that is preventing it from appearing? Should we re-draw the grid each time with the one cell colored in?

I also created this method that I was calling once a user clicked on our grid. This is the part we haven't really been able to figure out.

//input: the cell's id number and the color we want the cell to be
    public Cell colorCell(int cell, Color color){
       int gridTopX = 33; //this is how our grid is oriented in the window
       int gridTopY = 33; //this is how our grid is oriented in the window
       int cellX;
       int cellY;
       
       //this finds the row and colum of the cell (to find top left corner to draw it)
       int counter = 0; //row
       int holder = cell; //column
       while(holder > 7){
         holder -= 7; //subtract 7
         counter++; //increment counter
       }
       //once that is done we have the row and column -1 each
       holder++;
       counter++;
       cellX = 33 + (30 *holder);
       cellY = 33 + (30*counter);
       
       //create the cell
       Cell cellToColor = new Cell(cellX,cellY, color);
       return cellToColor;
    }

I thought that if I had this method create a cell, it would be able to draw and color in the cell on top of the grid. But the creation of the cell never makes it to the paintComponent(Graphics g) method of the Cell class. I am not sure how to call this method, since I don't believe there is a way to create a graphics object. Every other time I create a Cell from the cell class, it has automatically been called. Can it not be called from inside another method? Any help or advice would be greatly appreciated.

Answer 1

You could ditch the custom painting workflow and just make use of the functionality already available via JPanel

import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.LineBorder;

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

    public Main() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                JFrame frame = new JFrame();
                frame.add(new GridPane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class GridPane extends JPanel {

        public GridPane() {
            setLayout(new GridBagLayout());
            GridBagConstraints gbc = new GridBagConstraints();

            for (int row = 0; row < 5; row++) {
                gbc.gridy = row;
                for (int col = 0; col < 7; col++) {
                    gbc.gridx = col;
                    add(new CellPane(), gbc);
                }
            }
        }

    }

    public class CellPane extends JPanel {

        private boolean selected;

        public CellPane() {
            setBorder(new LineBorder(Color.DARK_GRAY));

            addMouseListener(new MouseAdapter() {
                @Override
                public void mouseClicked(MouseEvent e) {
                    toggleSelection();
                }
            });
        }

        public void setSelected(boolean selected) {
            this.selected = selected;
            if (selected) {
                setBackground(Color.BLUE);
                setBorder(new LineBorder(Color.WHITE));
            } else {
                setBackground(null);
                setBorder(new LineBorder(Color.DARK_GRAY));
            }
            repaint();
        }

        public void toggleSelection() {
            setSelected(!isSelected());
        }

        public boolean isSelected() {
            return selected;
        }

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

Of course, if you want to follow the custom painting workflow, you could look at:

• Creating a draw rectangle (filled with black color) function in Java for a grid
• How to draw grid using swing class Java and detect mouse position when click and drag
• Inaccurate grid's cells coordinates

as some ideas

Also...

Remember, the model is king. The state of the cell should be based on the state of the model