Adding Buttons to Jframe app, Help Please!

[doodleswift]

I'm making a paint program for my end of the year project and my teacher has no idea how to do graphics/apps, so i was wondering if anyone here could tell me the proper way to add a button with a color changing ability? (I'd assume add an action listener that sets color, but that hasn't been working). My main issue is whenever i do get a button successfully in the program, it covers up my drawing area so it is just a button and the drawing doesn't work. It just draws by making lots of small vectors.
Here is the code (Sorry if i'm adding it wrong)

import java.awt.*;
import javax.swing.*;
import java.awt.event.*;
import java.util.Vector;

public class Paint_Area extends JFrame{

private final int WIDTH = 500, HEIGHT = 400;
int x1,y1;
int x2,y2;
Vector lines = new Vector();
Vector colors = new Vector();
JButton red;

public Paint_Area()
{
super("Dave's Drawing Program");
getContentPane().add(new JLabel("Draw in this Area"), BorderLayout.SOUTH);

addMouseListener(
new MouseAdapter(){

public void mouseDragged(MouseEvent event){
event.consume();
colors.addElement(getForeground());
lines.addElement(new Rectangle(x1, y1, event.getX(), event.getY()));
x1 = event.getX();
y1 = event.getY();
repaint();
}
public void mousePressed(MouseEvent event){

event.consume();
colors.addElement(getForeground());
lines.addElement(new Rectangle(event.getX(), event.getY(), -1, -1));
x1 = event.getX();
y1 = event.getY();
repaint();

}
}
);
addMouseMotionListener(
new MouseMotionAdapter(){

public void mouseDragged(MouseEvent event){
event.consume();
colors.addElement(getForeground());
lines.addElement(new Rectangle(x1, y1, event.getX(), event.getY()));
x1 = event.getX();
y1 = event.getY();
repaint();
}
public void mousePressed(MouseEvent event){

event.consume();
colors.addElement(getForeground());
lines.addElement(new Rectangle(event.getX(), event.getY(), -1, -1));
x1 = event.getX();
y1 = event.getY();
repaint();

}
}
);
setSize(WIDTH, HEIGHT);
setBackground(Color.white);
setVisible(true);
}

public void paint(Graphics g) {
int np = lines.size();

/* draw the current lines */
// g.setColor(getForeground());
for (int i=0; i < np; i++) {
Rectangle p = (Rectangle)lines.elementAt(i);
g.setColor((Color)colors.elementAt(i));
if (p.width != -1) {
g.drawLine(p.x, p.y, p.width, p.height);
} else {
g.drawLine(p.x, p.y, p.x, p.y);
}
}
}

public static void main(String args[])
{
Paint_Area application = new Paint_Area();
application.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}

[doodleswift]

I also added a Label in there i just realized, but it only shows up if i resize the app and it erases everything on it.

[dlorde]

You need to separate out the different areas of your GUI into separate panels. Don't paint on the content pane, use it to hold the panels that you will put your components on. The default layout manager is a FlowLayout, which places the panel's contents in a row. You need to set the layout manager to a BorderLayout if you want use the Borderlayout options. The recommended way to do this is to create a new panel, set its layout to the one you want, and set it in the frame as the new content pane. This is explained here.

Subclass a JPanel for the drawing and put your paint method and the mouse listener there (remember to call the superclass paint method before adding your own paint code in the paint method). Add your painting panel to the middle of the frame with BorderLayout.CENTER (you don't actually need to do it via the content pane, you can add it directly to the frame - it handles adding it to the content pane for you). Set the preferred size of the painting panel to what you would like.
Add your button to the south of the frame (preferably put it in its own panel).

Don't use Vector unless you're multi-threading, use ArrayList instead, it works the same, but it's more efficient.

You may find these links useful:

Creating a GUI with Swing
Laying Out Components
Painting In AWT & Swing

Learning how to learn is life's most important skill...
T. Buzan