Using Graphics in a BorderLayout

[Brett Freedman]

Hello! I'm an experienced programmer but very new to Java. I'm working on a basketball game applet. The code is below. When the button is clicked, the ball is moved randomly.

I would like to use a BorderLayout instead of a FlowLayout and place the images/graphics in the Center Region, the button in the South Region. I think I need to use a Panel but can't figure out how to do it. Can anyone show me how to do this?

Thanks!

    
import java.awt.*;
import javax.swing.*;
import java.awt.event.*;
import java.net.*; 
import java.util.Random;


public class Test extends JApplet  implements ActionListener
{

    Graphics bufferGraphics;
    Image offscreen;
    Dimension dim;
    int curX, curY; 
    
    private int xPos;
    private int yPos;
    
    Button btn1;
    
    Image gifCourt; 
    Image gifBasketball; 
    URL base;
    MediaTracker mt; 

    public void init()
    {
        // this is a workaround for a security conflict with some browsers
        // including some versions of Netscape & Internet Explorer which do 
        // not allow access to the AWT system event queue which JApplets do 
        // on startup to check access. May not be necessary with your browser. 
        JRootPane rootPane = this.getRootPane();    
        rootPane.putClientProperty("defeatSystemEventQueueCheck", Boolean.TRUE);
    
        dim = getSize(); 
        offscreen = createImage(dim.width,dim.height);
        bufferGraphics = offscreen.getGraphics(); 
        
        setLayout(new FlowLayout());
        btn1 = new Button("Click");
        btn1.addActionListener(this);
        
        add(btn1);  
        
        mt = new MediaTracker(this);
        
        try {
            base = getDocumentBase();
        }
        catch (Exception e) {} 
        
        gifCourt = getImage(base,"accuratecourtdiagram.jpg");
        gifBasketball = getImage(base,"basketball.gif");
        
        mt.addImage(gifCourt,1); 
        mt.addImage(gifBasketball,2);

        try {
                mt.waitForAll();
        }
        catch (InterruptedException  e) {} 
   
    }


    public void paint(Graphics g)
    {

        bufferGraphics.setColor(Color.white);
        bufferGraphics.fillRect(0, 0, 500, 600);
        
        bufferGraphics.setColor(Color.black);
        
        btn1.setBounds(200,400,100,50);
        
        bufferGraphics.drawImage(gifCourt,10,100,this); 
        bufferGraphics.drawImage(gifBasketball,10 + xPos,100 + yPos,this);

        g.drawImage(offscreen,0,0,this); 
        
    }
    
    public void update(Graphics g)
    {
        paint(g);
    } 
    
    public void actionPerformed(ActionEvent evt)
    {
    
        if (evt.getSource() == btn1)
        {
        
        Random random = new Random();
        
        xPos = random.nextInt(400);
        yPos = random.nextInt(220);
        
        repaint();                
    
        }
        
    }
    
}

[Brett Freedman]

I've made some progress on this using a Panel. However I haven't figured out how to make the panel update the x and y coordinates and redraw when the button is clicked. Could anyone help?

Here are the image files that are used:
http://www.b1231.com/classichoops/accuratecourtdiagram.jpg
http://www.b1231.com/classichoops/basketball.gif

Thanks!

  

import java.awt.*;
import javax.swing.*;
import java.awt.event.*;
import java.net.*; 
import java.util.Random;

public class Test extends JApplet  implements ActionListener
{
   
    private int xPos;
    private int yPos;
    
    private JButton btn1, btn2;
    private JPanel panel, drawing_panel;
    
    Image gifCourt; 
    Image gifBasketball; 
    URL base;
    MediaTracker mt; 

    public void init()
    {
        // this is a workaround for a security conflict with some browsers
        // including some versions of Netscape & Internet Explorer which do 
        // not allow access to the AWT system event queue which JApplets do 
        // on startup to check access. May not be necessary with your browser. 
        JRootPane rootPane = this.getRootPane();    
        rootPane.putClientProperty("defeatSystemEventQueueCheck", Boolean.TRUE);
 
        xPos = 0;
        yPos = 0;
        
        setLayout(new BorderLayout());
       
        mt = new MediaTracker(this);
        
        try {
            base = getDocumentBase();
        }
        catch (Exception e) {} 
        
        gifCourt = getImage(base,"accuratecourtdiagram.jpg");
        gifBasketball = getImage(base,"basketball.gif");
        
        mt.addImage(gifCourt,1); 
        mt.addImage(gifBasketball,2);

        try {
                mt.waitForAll();
        }
        catch (InterruptedException  e) {} 
        
        panel = new JPanel();
        panel.setLayout(new BoxLayout(panel, BoxLayout.X_AXIS));
        
        btn1 = new JButton("Click");
        btn1.addActionListener(this);
        

        DrawingPanel drawing_panel =  new DrawingPanel (gifCourt, gifBasketball, xPos, yPos);
        add(drawing_panel, BorderLayout.CENTER);
        
        panel.add(btn1);  

        add(panel, BorderLayout.SOUTH);
   
    }

    public void actionPerformed(ActionEvent evt)
    {
        if (evt.getSource() == btn1)
        {
       
            Random random = new Random();
            
            xPos = random.nextInt(400);
            yPos = random.nextInt(220);
            
            btn1.setText("Clicked");
         
        }
       
    }
    
}

 
import java.awt.*;
import javax.swing.*;
import java.awt.event.*;
import java.net.*; 
import java.util.Random;

public class DrawingPanel extends JPanel {

Image court, ball;
int xPos, yPos;


  DrawingPanel (Image court, Image ball, int xPos, int yPos) 
  {
   this.court = court; 
   this.ball = ball;

  } 

  public void paintComponent(Graphics g)   {
   // Paint background
        super.paintComponent(g);
        g.setColor(Color.white);
        g.drawImage(court,10,100,this);   
        g.drawImage(ball,10 + xPos,100 + yPos,this);  

  } // paintComponent

} 

[Rob Camick]

I've made some progress on this using a Panel.

Yes, your original approach of overriding paint() and update() is only used with AWT and NOT Swing. Overriding paintComponent() of a JPanel (or JComponent) is the proper approach.

I haven't figured out how to make the panel update the x and y coordinates and redraw when the button is clicked

panel.repaint();

[Brett Freedman]

I haven't figured out how to make the panel update the x and y coordinates and redraw when the button is clicked

panel.repaint();

Thanks! I also need to update the x and y variables to move the ball. I'm passing them as parameters when I create the DrawingPanel object. Maybe they should be somewhere in my Test class that the DrawingPanel can see. Or do I need to create a new method in DrawingPanel to move the ball?

[Brett Freedman]

Also I removed the doublebuffering to make it easier for me to understand. When I put the doublebuffering back, does it go in the Test class or DrawingPanel?

[Rob Camick]

Or do I need to create a new method in DrawingPanel to move the ball?

Yes, that would be the better approach.

When I put the doublebuffering back

Swing is already double buffered, you don't need to worry about that.

[Brett Freedman]

Rob Camick wrote:

Or do I need to create a new method in DrawingPanel to move the ball?

Yes, that would be the better approach.

Could you show me what that method should look like?

[Rob Camick]

This is your current code:

g.drawImage(ball,10 + xPos,100 + yPos,this);    

So the method would be:

xPos += 10;
yPos += 100;

And your painting code would be:

g.drawImage(ball, xPos, yPos, this);    

[Brett Freedman]

Rob Camick wrote:This is your current code:

g.drawImage(ball,10 + xPos,100 + yPos,this);    

So the method would be:

xPos += 10;
yPos += 100;

And your painting code would be:

g.drawImage(ball, xPos, yPos, this);    

Sorry, I'm still struggling.

I randomly generate a new x, y and want to use those values in my drawing panel. (The 10 and 100 increments are trivial to the logic. They were there to position the ball image more accurately on the court.)

Here is how I've changed my button click

  
    public void actionPerformed(ActionEvent evt)
    {
        if (evt.getSource() == btn1)
        {
       
            Random random = new Random();
            
            xPos = random.nextInt(400);
            yPos = random.nextInt(220);
          
            
            // repaint the drawing_panel using new xPos, yPos here 

            drawing_panel.moveBall(xPos,yPos);

        }
       
    }
  

And this is the method I've added to the DrawingPanel class (empty because I'm not sure what to put in it)

 
  public void moveBall(int xPos, int yPos)   {




  } 

   

Unfortunately, I am now getting a compile error of "cannot find symbol - method moveBall(int, int)" on the line "drawing_panel.moveBall(xPos,yPos);" - which I don't understand at all. I thought I had created a DrawingPanel object called drawing_panel. Additionally I'm not sure what code goes into my moveBall method in DrawingPanel.

I appreciate your time and patience. Java is gradually seeping in to me but it's slow going.

[pete stein]

Your current code has some non-graphic problems. You declare a JPanel drawing_panel field but never use it, and then in the init method you have a method-local DrawingPanel drawing_panel variable that is placed inside the applet and visualized, but since there's no field with class scope associated with this object, you have no way to reference it easily. So when a method tries to use the class-scope field drawing_panel, it is both null, and since it is declared as a JPanel variable, none of the methods found in DrawingPanel will be available for it to use (unless you cast).

Solution: create a DrawingPanel field called drawingPanel and construct it as a DrawingPanel object so it is not null. Do not redeclare a DrawingPanel object in your init method but rather use the one that has class scope.

e.g.,

import java.awt.*;
import javax.imageio.ImageIO;
import javax.swing.*;
import java.awt.event.*;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Random;

public class Test extends JApplet implements ActionListener {
  private int xPos;
  private int yPos;

  private JButton btn1;
  private JPanel panel;
  private DrawingPanel drawingPanel;
  private Random random = new Random();

  Image gifCourt;
  Image gifBasketball;

  public void init() {
    JRootPane rootPane = this.getRootPane();
    rootPane.putClientProperty("defeatSystemEventQueueCheck", Boolean.TRUE);

    xPos = 0;
    yPos = 0;

    setLayout(new BorderLayout());

    try {
      gifCourt = ImageIO.read(getClass().getResourceAsStream("accuratecourtdiagram.jpg"));
      gifBasketball = ImageIO.read(getClass().getResourceAsStream("basketball.gif"));
    } catch (IOException e1) {
      e1.printStackTrace();
    }
    panel = new JPanel();
    panel.setLayout(new BoxLayout(panel, BoxLayout.X_AXIS));

    btn1 = new JButton("Click");
    btn1.addActionListener(this);

    // DrawingPanel drawing_panel = new DrawingPanel(gifCourt, gifBasketball,
    // xPos, yPos);
    drawingPanel = new DrawingPanel(gifCourt, gifBasketball, xPos, yPos);

    add(drawingPanel, BorderLayout.CENTER);

    panel.add(btn1);

    add(panel, BorderLayout.SOUTH);

  }

  public void actionPerformed(ActionEvent evt) {
    if (evt.getSource() == btn1) {

      xPos = random.nextInt(400);
      yPos = random.nextInt(220);

      drawingPanel.moveBall(xPos, yPos);

    }

  }

}

Also, the moveBall method is pretty basic. Just update the xPos and yPos fields (be sure to use this.xPos and likewise for yPos so you aren't setting the parameter = to itself) and then call repaint(). Nothing to it really.

[Brett Freedman]

Perfect! Thanks Pete for finding and explaining my mistakes. I'm still at the stage where everytime I see code like "Panel panel = new Panel()", my brain kind of goes blank for a second. I probably would have got stuck on this.xPos = xPos, too.

One more question. What is the proper way to replace the drawingPanel component in my layout with another component?

I was thinking it would be something like "remove(drawingPanel, BorderLayout.CENTER)" followed by "add(newPanel, BorderLayout.CENTER)" but apparently not so.

Thanks!

[Rob Camick]

What is the proper way to replace the drawingPanel component in my layout with another component?

panel.remove(...);
panel.add(...);
panel.revalidate();

Or you can also look into the CardLayout, which manages this for you.

[Brett Freedman]

Thanks Rob! I'm going to experiment with CardLayout. Very helpful forum you guys got here.