Keyboard Listeners and ImagePanel

Hey. I am working on a little programming in my free time. I like coding, but don't have much experience working with Java. I want to be able to move an image around a frame using keyboard buttons. I have two sets of code. In the first, I display a panel with an image for the background that adjusts size with the window. I also display a second image fixed in the window. This seems to work fine:

Code Java:

---

import java.awt.Graphics;
import java.awt.Image;
 
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
 
 
public class FrameTest3 extends JFrame{
	private static int xAxis = 10;
	private static int yAxis = 30;
	public static int getxAxis() {
		return xAxis;
	}
 
	public static void setxAxis(int xAxis) {
		FrameTest3.xAxis = xAxis;
	}
 
	public static int getyAxis() {
		return yAxis;
	}
 
	public static void setyAxis(int yAxis) {
		FrameTest3.yAxis = yAxis;
	}
 
	public FrameTest3(){
		add(new ImagePanel());
	}
 
	public static void main(String[] args){
 
 
		JFrame frame = new FrameTest3();
 
 
		frame.setSize(400, 300);
		frame.setLocationRelativeTo(null);
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		frame.setVisible(true);
	}
 
	static class ImagePanel extends JPanel{
		ImageIcon imageIcon = new ImageIcon("/Users/zerosdamnation/Documents/Projects/Photoshop/backgroundtest.gif");
		Image image = imageIcon.getImage();
		ImageIcon imageIcon2 = new ImageIcon("/Users/zerosdamnation/Documents/Projects/Photoshop/beagle.jpg");
		Image image2 = imageIcon2.getImage();
 
		//draw image on the panel
		public void paintComponent(Graphics g){
			super.paintComponent(g);
 
 
			if (image != null)
				g.drawImage(image, 0, 0, getWidth(), getHeight(), this);
 
			g.drawImage(image2, xAxis, yAxis, 100, 100, this);
		}
 
	}
}

---

Now I have taken the same code, but added a keyboard listener that I am trying to use to adjust the location of the second image in the panel. Somewhere in this code I am messing up and the program is not displaying either image at all. I am not really sure what I am doing wrong, as I am rather inexperienced with this.

Code Java:

---

import java.awt.Graphics;
import java.awt.Image;
import java.awt.event.KeyAdapter;
import java.awt.event.KeyEvent;
 
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
 
 
public class FrameTest4 extends JFrame{
	private KeyboardPanel keyboardPanel = new KeyboardPanel();
	private static int xAxis = 10;
	private static int yAxis = 30;
 
	public static int getxAxis() {
		return xAxis;
	}
 
	public static void setxAxis(int xAxis) {
		FrameTest4.xAxis = xAxis;
	}
 
	public static int getyAxis() {
		return yAxis;
	}
 
	public static void setyAxis(int yAxis) {
		FrameTest4.yAxis = yAxis;
	}
 
	public FrameTest4(){
		add(new ImagePanel());
		add(keyboardPanel);
		keyboardPanel.setFocusable(true);
	}
 
	public static void main(String[] args){
 
		FrameTest4 frame = new FrameTest4();
 
 
		frame.setTitle("Move me around the screen!");
		frame.setSize(400, 300);
		frame.setLocationRelativeTo(null);
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		frame.setVisible(true);
	}
 
	//inner class, keyboard panel for receiving key input
	static class KeyboardPanel extends JPanel{
		private int x = 10;
		private int y = 30;
 
		public KeyboardPanel(){
			addKeyListener(new KeyAdapter(){
				public void keyPressed(KeyEvent e){
					switch (e.getKeyCode()){
					case KeyEvent.VK_DOWN: y = getyAxis(); y += 5; setyAxis(y); break;
					case KeyEvent.VK_UP: y = getyAxis(); y -= 5; setyAxis(y); break;
					case KeyEvent.VK_LEFT: x = getxAxis(); x -= 5; setxAxis(x); break;
					case KeyEvent.VK_RIGHT: x = getxAxis(); x += 5; setxAxis(x); break;
 
					}
					repaint();
				}
			});
		}
	}
 
	static class ImagePanel extends JPanel{
		ImageIcon imageIcon = new ImageIcon("/Users/zerosdamnation/Documents/Projects/Photoshop/backgroundtest.gif");
		Image image = imageIcon.getImage();
		ImageIcon imageIcon2 = new ImageIcon("/Users/zerosdamnation/Documents/Projects/Photoshop/beagle.jpg");
		Image image2 = imageIcon2.getImage();
 
		//draw image on the panel
		public void paintComponent(Graphics g){
			super.paintComponent(g);
 
			if (image != null)
				g.drawImage(image, 0, 0, getWidth(), getHeight(), this);
 
			g.drawImage(image2, xAxis, yAxis, 100, 100, this);
		}
 
	}
}

---

Any help would be greatly appreciated!

Check how you are using the layout manager. When add components to a container, the layout manger controls where the components go. For some layout mangers you need tell it where to put components by a second parameter to the add method.

Did I mess something up in this section of code?

Code java:

---

	public FrameTest4(){
		add(new ImagePanel());
		add(keyboardPanel);
		keyboardPanel.setFocusable(true);
	}

---

Should I create a separate frame with the keyboard controls?

Yes that was the code I was talking about. You need to read up on how to use layout managers.
A Visual Guide to Layout Managers (The Java™ Tutorials > Creating a GUI With JFC/Swing > Laying Out Components Within a Container)

I wrote in a border layout, then applied the images to the center and the keyboard panel to the south frame. It shows up (with a small gap on the bottom), but the program is not repainting the image unless I try to re-size the window (which invokes the draw image re-size of the background image). The repaint() command in the KeyboardPanel() inner class is not doing the trick. I am probably missing something really obvious, but I cannot figure out what.

Make sure the JPanel is given a size for the layout manager to use. Try using the set preferred size method.

Thanks for the input. I haven't had a chance to get back to the program since last weekend. I got things working as far as moving stuff around the screen by putting in a timer and an action listener, and now the program refreshes the window every x seconds properly. The layout is still a little wonky though. I would prefer to have the keyboard panel not be visible for lower 30 pixels of the screen. Can I set the preferred size to 0 pixels to hide it? Could I use another frame that is not set to visible for the keyboard controls, or will that not let me use keyboard controls since the image panel would be the active window? I was thinking about adding in another frame that just didn't show that part of the window (make the image/keyboard frame 430 x 300 pixels, and then put that in a 400 x 300 frame), but there has got to be a better way to do it.

Try it and see what happens.