Problem with custom painting and multiple JPanel

[Thang Pham]

I am learning some custom painting and I encounter some problems. I want to create a frame that when I click a button, the component of the frame get redraw. It worked, however, since I add all the components onto 1 panel, I cant control its layout. So I put every component onto a separate panel, and add all these panel to one main panel, and at the end, add that main panels to the frame. Now my paintComponent(Graphics g), dont work anymore. I think since I create multiple panel, when I call repaint(), it does not know what panel to repaint any more.

Here is when I only have one panel. Custom painting work fine

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;
import javax.swing.SwingUtilities;


public class Image
{
	
	public static void main(String args[])
	{
		SwingUtilities.invokeLater(new Runnable(){
			public void run()
			{
				createAndShowGUI();
			}
		});
	}
	private static void createAndShowGUI()
	{
		JFrame f = new JFrame("Image");
		f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		f.getContentPane().add(new MyPanel());
		f.pack();
		f.setVisible(true);
	}
}

/*
 * Holding all the panel of the program
 */

class MyPanel extends JPanel
{
	private int x = 80;
	private int y = 80;
	
	public MyPanel()
	{
		createTFPanel();
		createBtnPanel();
	}
	/*
	 *	return the dimension of the panel 
	 */
	public Dimension getPreferredSize()
	{
		return new Dimension(250, 250);
	}
	
	protected void paintComponent(Graphics g)
	{
		super.paintComponent(g);
		g.setColor(Color.RED);
		g.drawString("MyString", x, y);
		x += 10;
		y += 10;
	}
	private void createTFPanel()
	{
		JLabel label = new JLabel("Enter Number Of Seconds");
		JTextField tf = new JTextField(3);		
		add(label);
		add(tf);
	}
	private void createBtnPanel()
	{
		JButton startBtn = new JButton("start");
		//Add the button to the main panel
		add(startBtn);
		//create an event listener for the button
		startBtn.addActionListener(new startBtnListener());
	}
	private class startBtnListener implements ActionListener
	{
		public void actionPerformed(ActionEvent e)
		{
			//repaint the component
			repaint();
		}
	}
}

Here is the code with multiple panels. Custom painting stop working

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;
import javax.swing.SwingUtilities;


public class Image
{
	
	public static void main(String args[])
	{
		SwingUtilities.invokeLater(new Runnable(){
			public void run()
			{
				createAndShowGUI();
			}
		});
	}
	private static void createAndShowGUI()
	{
		JFrame f = new JFrame("Image");
		f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		f.getContentPane().add(new MyPanel().getMainPanel());
		f.pack();
		f.setVisible(true);
	}
}

/*
 * Holding all the panel of the program
 */

class MyPanel extends JPanel
{
	private int x = 80;
	private int y = 80;
	
	private JPanel mainPanel = new JPanel();
	private JPanel tfPanel = new JPanel();
	private JPanel btnPanel = new JPanel();
	
	public MyPanel()
	{
		createTFPanel();
		createBtnPanel();
		mainPanel.setLayout(new BorderLayout());
		mainPanel.add(tfPanel, BorderLayout.SOUTH);
		mainPanel.add(btnPanel, BorderLayout.NORTH);
	}
	/*
	 *	return the dimension of the panel 
	 */
	public Dimension getPreferredSize()
	{
		return new Dimension(250, 250);
	}
	
	protected void paintComponent(Graphics g)
	{
		super.paintComponent(g);
		g.setColor(Color.RED);
		g.drawString("MyString", x, y);
		x += 10;
		y += 10;
	}
	private void createTFPanel()
	{
		JLabel label = new JLabel("Enter Number Of Seconds");
		JTextField tf = new JTextField(3);		
		tfPanel.add(label);
		tfPanel.add(tf);
	}
	private void createBtnPanel()
	{
		JButton startBtn = new JButton("start");
		//Add the button to the main panel
		btnPanel.add(startBtn);
		//create an event listener for the button
		startBtn.addActionListener(new startBtnListener());
	}
	private class startBtnListener implements ActionListener
	{
		public void actionPerformed(ActionEvent e)
		{
			//repaint the component
			repaint();
		}
	}
	public JPanel getMainPanel()
	{
		return mainPanel;
	}
}

[Bartek Myszkowski]

In "multiple panels" code, in class called MyPanel, You extend JPanel and override paintComponent to create custom painting but also You create mainPanel where You add other panels and You use only mainPanel which method paintComponent is not overridden! mainPanel is not object of MyPanel!

I have fixed Your code (and it works - it does custom painting) - compare it with code You have provided!!!

import javax.swing.JFrame;
import javax.swing.SwingUtilities;

public class Image {

	public static void main(String args[]) {
		SwingUtilities.invokeLater(new Runnable() {
			public void run() {
				createAndShowGUI();
			}
		});
	}

	private static void createAndShowGUI() {
		JFrame f = new JFrame("Image");
		f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		// f.getContentPane().add(new MyPanel().getMainPanel());
		f.getContentPane().add(new MyPanel());
		f.pack();
		f.setVisible(true);
	}
}

/////////////////////////////////////////////////////////////////////

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;

class MyPanel extends JPanel {
	private int x = 80;
	private int y = 80;

	// private JPanel mainPanel = new JPanel();
	private JPanel tfPanel = new JPanel();
	private JPanel btnPanel = new JPanel();

	public MyPanel() {
		createTFPanel();
		createBtnPanel();
		// mainPanel.setLayout(new BorderLayout());
		// mainPanel.add(tfPanel, BorderLayout.SOUTH);
		// mainPanel.add(btnPanel, BorderLayout.NORTH);
		this.setLayout(new BorderLayout());
		this.add(tfPanel, BorderLayout.SOUTH);
		this.add(btnPanel, BorderLayout.NORTH);
	}

	/*
	 * return the dimension of the panel
	 */
	public Dimension getPreferredSize() {
		return new Dimension(250, 250);
	}

	protected void paintComponent(Graphics g) {
		super.paintComponent(g);
		g.setColor(Color.RED);
		g.drawString("MyString", x, y);
		x += 10;
		y += 10;
	}

	private void createTFPanel() {
		JLabel label = new JLabel("Enter Number Of Seconds");
		JTextField tf = new JTextField(3);
		tfPanel.add(label);
		tfPanel.add(tf);
	}

	private void createBtnPanel() {
		JButton startBtn = new JButton("start");
		// Add the button to the main panel
		btnPanel.add(startBtn);
		// create an event listener for the button
		startBtn.addActionListener(new startBtnListener());
	}

	private class startBtnListener implements ActionListener {
		public void actionPerformed(ActionEvent e) {
			// repaint the component
			repaint();
		}
	}

	// public JPanel getMainPanel() {
	// return mainPanel;
	// }
}

[Thang Pham]

Thank you.

[Thang Pham]

Hi Bartek Myszkowski, your help was great. So after I fix that problem, I develop a bit more and ran into another problem. Before I have a Textfield on SOUTH, a button on NORTH. Now if I add a panel that contain a image to the CENTER, now I cannot see my string that draw by my paintComponent(). I know that the Image Panel cover it, is there a way that I can draw the string on top of that Image Panel. Or, if I want to draw graphics on the top panel layer, how can I do it? Thank you. Let me know if you need me to provide the code. Here is the baisc layout

class MyPanel extends JPanel{
    JPanel textfieldPanel = new JPanel();
    JPanel buttonPanel = new JPanel();
    JPanel imagePanel = new JPanel();
    int x = 50;
    int y = 50;
    public MyPanel()
    {
          //create TextField Panel
          //create Button Panel
          //create Image Panel
          this.add(textfieldPanel, BorderLayout.NORTH);
          this.add(buttonPanel, BorderLayout.SOUTH);
          this.add(imagePanel, BorderLayout.CENTER);
    }
    .....
    protected void paintComponent(Graphics)
    {
          super.paintComponent(g);
          g.setColor(Color.RED);
          g.drawString("here", x, y);
          x = x + 10;
          y = y + 10;
    }
    .....
}

[Michael Dunn]

> Now if I add a panel that contain a image to the CENTER, now I cannot see my string that draw by my paintComponent().
> I know that the Image Panel cover it, is there a way that I can draw the string on top of that Image Panel.

combine the two.

on this forum's main page there is a link to the faq, which has a background image faq.
add your drawString to it's paintComponent(..)

[pete stein]

Cross-posted: forums.sun.com Swing Section

[Thang Pham]

Thanks Michael, I solve the problem already. I need to set the opaque to false