Thread: Flicker with JPanel in JApplet

I have an applet which I wanted to convert from AWT to Swing,
which went pretty well except for one thing.

The applet window is divided into two parts:
1) Top part is a Panel/JPanel with some labels, buttons, etc.
2) Bottom part is just drawing area (drawRect, fillRect, that sort of thing).

Part of the applet is 'drag and drop' whereby shapes are moved around
by dragging them with the mouse.

In order to eliminate flicker while doing that, I use an image buffer for the painting.

It all works fine with AWT.

With Swing, it seems I have two choices:
a) No panel appears
b) Panel appears, but flickers every time mouse is moved.

The difference is a call to repaint() for the Panel itself,
which wasn't necessary with AWT.

I tried making the JPanel a (regular) Panel,
which stopped the flicker problem, but caused some others -
like the controls added to it were painted incorrectly,
and some of them ceased functioning.

Any ideas?

Here is a simplified version of the applet.

See the line marked with ***** for the focus of my question.
It doesn't seem to matter where I try to put it, the results are the same.

The panel just has one button, and you can drag the blue rectangle around with the mouse.

/*
<applet code="sw1.class" codebase="./"
align="baseline" width="600" height="600">
alt=&quot;Applet not running&quot;
Applet tag ignored
</applet>
*/
 
import java.applet.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
 
public class sw1 extends JApplet
  implements MouseMotionListener
{
 JPanel p;
 JButton b;
 private Image im;
 private Dimension imsize;
 private Graphics g2;
 
 public void init()
 {
  setLayout(null);
  p = new JPanel();
  b = new JButton("Yo! A button");
  p.setBounds(50,50,160,40);
  p.add(b);
  setBackground(Color.gray);
  add(p);
  addMouseMotionListener(this);
 }
 
 int x = 50, y = 100;
 public void paint(Graphics g)
 {
 Dimension d = getSize(); 
 if ( (im == null) ||
      (d.width != imsize.width)|| (d.height !=imsize.height) ) 
  {
   im = createImage(d.width,d.height);    
   imsize = d; 
   g2 = im.getGraphics();
  } 
 
  g2.setColor(Color.gray);
  g2.fillRect(0,0,d.width, d.height); // Need this or dragged image gets left behind and replicated.
 
  // *****
  p.repaint(); // ***** This is the line in question: without it, no panel, with it, flickering panel.
  // *****
 
  paint2(g2);
  g.drawImage(im,0,0,null); 
 }
 
 public void paint2(Graphics g)
 {
  g.setColor(Color.blue);
  g.drawRect(x, y, 100, 60);
 }
 
 public void mouseMoved(MouseEvent e) { }
 public void mouseDragged(MouseEvent e) 
   {
    x = e.getX();
    y = e.getY();
    repaint();
   }
 
}

Thank you for your speedy reply.
Perhaps you could elaborate a little?

> Some recommendations
> a) I wouldn't recommend using a null layout.

That may be good advice in general,
but I don't see the relevance to this particular question.

Without the setBounds call, which I believe conflicts with Layout Managers,
the Panel seems to take over the whole window, and obscures anything else.

> b) Override paintComponent, not paint (there is a big difference when trying to add components to the component being painted)


How should I do that?

I changed paint to paintComponent, and it is never called,
and then only the panel shows up - nothing else.

I tried p.paintComponent(g) and it said I couldn't do that because it is protected.

> c) Calling repaint from within paint is a bad idea - it cues your painting into an infinite loop (repaint tells Swing to repaint the component - hence calling paint)

The repaint which is called within paint is for the Panel -
not the applet, and there is no recursion.
At various times in doing this, I did cause that, and of course
it dies with stack overflow, but not in version I presented.

Thank you for your patience and your help.

Sorry to have to keep going, but the variations on your last suggestion didn't improve anything.

If I remove the manual double buffering I get horrible flicker over the whole applet,
not just the controls JPanel.

I have not tried making the lower area of the window into another JPanel because
in the full applet it would be very complicated to do so.

The basic problem, it seems to me, stems from one thing:
having to repaint the background all the time, which is for two reasons.
1) I want a color other than the default.
2) I need to in any case to erase the previous incarnation of the dragged shape.
Even when I call repaint on a limited area far from the flickering panel,
it still flickers.

This example is similar to my test case, but everything is within the same JPanel and there are no subcomponents which appear/disappear. And there is no background fill, either.

> I have not tried making the lower area of the window into another JPanel because
in the full applet it would be very complicated to do so.

It looks like that will be the solution: it works quite well in the small test case,
but will be a lot of work in the full applet.

I'll let you know how it goes.

Thanks for sticking with this.

For the version of the program below, the behavior is as follows:
-the moving rectangle flickers as it moves
-the background remains the default
- the panel / button does not flicker.

(I changed the background to red to make it more obvious that it is not showing up.)

To avoid any ambiguity, here's the full program for this test.

 /*
 <applet code="sw1.class" codebase="./"
 align="baseline" width="600" height="600">
 alt=&quot;Applet not running&quot;
 Applet tag ignored
 </applet>
 */
 
import java.applet.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
 
    public class sw1 extends JApplet
      implements MouseMotionListener
    {
     JPanel p;
     JButton b;
     private Image im;
     private Dimension imsize;
     private Graphics g2;
 
     public void init()
     {
      setLayout(null);
      p = new JPanel();
      b = new JButton("Yo! A button");
      p.setBounds(50,50,160,40);
      p.add(b);
      setBackground(Color.red);
      add(p);
      addMouseMotionListener(this);
     }
 
     @Override
     public void paint(Graphics g){
	    super.paint(g); 
	    g.setColor(Color.blue);
	    g.drawRect(x, y, 100, 60);
     }
 
     int x = 50, y = 100;
 
     public void mouseMoved(MouseEvent e) { }
     public void mouseDragged(MouseEvent e)
       {
        x = e.getX();
        y = e.getY();
        repaint();
       }
    }

> As I mentioned above, draw to a JPanel. Remove the paint method, override the paintComponent method of said JPanel (for instance, your p object), and remove the null layout. At the risk of ruining the fun parts of trial and error, here is some code - try running the following:

That does work perfectly - but - I'll have to see if it scales up so to speak,
since it is not a perfect model of the full applet.

It will take some work to make the full applet fit this model.

Thanks for you help so far.

> As I mentioned above, draw to a JPanel. Remove the paint method, override the paintComponent method of said JPanel

THANKS again - that was the ticket - it's all working perfectly now!

Here's what I did (kinda kludgy, but I'll clean it up "later"):

I added a second JPanel the entire size of the applet, and put it underneath the other one.
In effect, the new JPanel is the applet for drawing purposes.

Then paintComponent() for that panel just calls the applets (former) paint(), now called paint2(),
passing the JPanel's graphics as the parameter.

And presto! no flicker, faster than it was before, and I'm happy as a clam!