How to add 3 rectangles to Jpanel in java?

Question

I'm trying to add three rectangles to the center of BorderLayout and I'm completely lost. My finished program needs to increase the height of the rectangle as the sliders move but I'm trying to figure out how to intitally draw these three rectangles to the jpanel. I'm so lost. My code is below.

 import java.awt.*;
 import javax.swing.*;
 import javax.swing.event.ChangeEvent;
 import javax.swing.event.ChangeListener;

 public class ShowColors extends JPanel
 {

public static void main(String args[])
{
    JFrame frame = new JFrame();

    JPanel main = new JPanel(new BorderLayout());
    main.setSize(2000, 1000);
    frame.setContentPane(main);

    JPanel jp1 = new JPanel(new GridLayout(0, 1));
    JPanel jp2 = new JPanel(new GridLayout(2,3));
    JPanel jp3 = new JPanel(new GridLayout(1, 3));

    jp1.setPreferredSize(new Dimension(90, 800));
    jp2.setPreferredSize(new Dimension(1000, 150));
    jp3.setPreferredSize(new Dimension(800, 600));

    JRadioButton rb1 = new JRadioButton("Decimal", true);
    JRadioButton rb2 = new JRadioButton("Binary");
    JRadioButton rb3 = new JRadioButton("Hex");
    JRadioButton rb4 = new JRadioButton("Octal");
    JButton jb1 = new JButton("RESET");

    ButtonGroup group = new ButtonGroup();
    group.add(rb1);
    group.add(rb2);
    group.add(rb3);
    group.add(rb4);

    JSlider jRed = new JSlider(0,255);
    JSlider jGreen = new JSlider(0,255);
    JSlider jBlue = new JSlider(0,255);

    jRed.setPaintLabels(true);
    jRed.setPaintTicks(true);
    jRed.setMinorTickSpacing(5);
    jRed.setMajorTickSpacing(50);
    jRed.setValue(0);

    jGreen.setPaintLabels(true);
    jGreen.setPaintTicks(true);
    jGreen.setMinorTickSpacing(5);
    jGreen.setMajorTickSpacing(50);
    jGreen.setValue(0);

    jBlue.setPaintLabels(true);
    jBlue.setPaintTicks(true);
    jBlue.setMinorTickSpacing(5);
    jBlue.setMajorTickSpacing(50);
    jBlue.setValue(0);

    JLabel labelR = new JLabel("Red", JLabel.CENTER);
    JLabel labelG = new JLabel("Green", JLabel.CENTER);
    JLabel lableB = new JLabel("Blue", JLabel.CENTER);

    jp1.add(rb1);
    jp1.add(rb2);
    jp1.add(rb3);
    jp1.add(rb4);
    jp1.add(jb1);

    jp2.add(labelR);
    jp2.add(labelG);
    jp2.add(lableB);
    jp2.add(jRed);
    jp2.add(jGreen);
    jp2.add(jBlue);

    main.add(jp1, BorderLayout.WEST);
    main.add(jp2, BorderLayout.SOUTH);

    frame.pack();
    frame.setVisible(true);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

}
public void paint(Graphics g)
{
    super.paint(g);
    g.drawRect(0, 0, 10, 20);
    g.setColor(Color.RED);
    g.fillRect(0, 0, 10, 20);

    g.drawRect(10, 0, 10, 20);
    g.setColor(Color.GREEN);
    g.fillRect(10, 0, 10, 20);

    g.drawRect(20, 0, 10, 20);
    g.setColor(Color.BLUE);
    g.fillRect(20, 0, 10, 20);
}

}

here is my layout and i want the rectangles in the center.

Answer 1

1. Don't override paint, painting in Swing is achieved by a delicate and complicated chain of methods, which is easily broken. Instead, override it's paintComponent method instead. See Painting in AWT and Swing for more details
2. Having said that, don't add all your components to the same panel onto which you want to draw, you'll end up painting underneth all the components. Instead, create a separate JPanel which acts as the paint surface and another JPanel which acts as the controller (containing the controls and the paint surface). Use setters and getters to change the state of the paint surface. See Performing Custom Painting for more details.
3. Create some kind of "drawable" object, which knows how to paint itself and what it should use to paint itself (the color)
4. Create some kind of List (in the paint surface class) which can hold the objects which you want to paint. Within in it's paintComponent you will will loop through the list and request that each object paint itself, passing it the Graphics context. Take a look at 2D Graphics for more details

This previous answer may also help

Answer 2

I think you just need a simple subclass of JPanel and override paintComponent(). Something like this should get you going:

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

 public class Canvas extends JPanel {

   // TODO member variables for rectangle size/color

   public void paintComponent(Graphics g) {
     super.paintComponent(g);
     g.fillRect(10,10,100,50);
     g.drawRect(10,80,100,50);
  }
}

EDIT: Actually, I guess you really don't need a "Canvas" class, you can just use a plain JPanel as @MadProgrammer suggests. What you do need is a class that will encapsulate the Rectangle behavior, which can just be a simple JComponent that gets added to the JPanel that holds your three rectangles.

Here's a working solution, imports excluded for brevity:

public class ShowColors {

    class Rectangle extends JComponent implements ChangeListener {
        private JSlider slider; 
        private Color color;

        public Rectangle(JSlider slider, Color color) {
            this.slider = slider;
            this.color = color;
            this.setPreferredSize(new Dimension(250, 250));
            slider.addChangeListener(this);
        }

        public void paintComponent(Graphics g) {
            super.paintComponent(g);
            int value = slider.getValue();
            g.setColor(color);
            g.fillRect(10,10,100,value);

        }

        @Override
        public void stateChanged(ChangeEvent arg0) {
            this.repaint();
        }
    }

    public ShowColors() {
        JFrame frame = new JFrame();

        JPanel main = new JPanel(new BorderLayout());
        main.setSize(2000, 1000);
        frame.setContentPane(main);

        JPanel jp1 = new JPanel(new GridLayout(0, 1));
        JPanel jp2 = new JPanel(new GridLayout(2, 3));

        jp1.setPreferredSize(new Dimension(90, 800));
        jp2.setPreferredSize(new Dimension(1000, 150));

        JRadioButton rb1 = new JRadioButton("Decimal", true);
        JRadioButton rb2 = new JRadioButton("Binary");
        JRadioButton rb3 = new JRadioButton("Hex");
        JRadioButton rb4 = new JRadioButton("Octal");
        JButton jb1 = new JButton("RESET");

        ButtonGroup group = new ButtonGroup();
        group.add(rb1);
        group.add(rb2);
        group.add(rb3);
        group.add(rb4);

        JSlider jRed = buildSlider();
        JSlider jGreen = buildSlider();
        JSlider jBlue = buildSlider();

        JLabel labelR = new JLabel("Red", JLabel.CENTER);
        JLabel labelG = new JLabel("Green", JLabel.CENTER);
        JLabel lableB = new JLabel("Blue", JLabel.CENTER);

        jp1.add(rb1);
        jp1.add(rb2);
        jp1.add(rb3);
        jp1.add(rb4);
        jp1.add(jb1);

        jp2.add(labelR);
        jp2.add(labelG);
        jp2.add(lableB);
        jp2.add(jRed);
        jp2.add(jGreen);
        jp2.add(jBlue);

        JPanel canvas = new JPanel();
        canvas.setLayout(new FlowLayout());
        canvas.setPreferredSize(new Dimension(800, 600));
        canvas.add(new Rectangle(jRed, Color.RED));
        canvas.add(new Rectangle(jGreen, Color.GREEN));
        canvas.add(new Rectangle(jBlue, Color.BLUE));

        main.add(jp1, BorderLayout.WEST);
        main.add(jp2, BorderLayout.SOUTH);
        main.add(canvas, BorderLayout.EAST);

        frame.pack();
        frame.setVisible(true);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }

    private static JSlider buildSlider() {
        JSlider slider = new JSlider(0, 255);
        slider.setPaintLabels(true);
        slider.setPaintTicks(true);
        slider.setMinorTickSpacing(5);
        slider.setMajorTickSpacing(50);
        slider.setValue(50);
        return slider;
    }

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

}

And here's what it looks like: