Updated date:

# Java 2D Tutorial II--JFrame, JPanel, Coordinate System, Custom Colors, Gradient Paint, and Testing Code

## Intro

This is Part Two of a Three Part Tutorial

In Java 2D Tutorial I, we created an abstract Model class and a Mystery class that extended the Model class.

In this Tutorial, I will cover JFrame class, JPanel class, Coordinate system, Creating custom colors, Gradient Paint, and a quick test of our code to see how it looks before we work on drawing the Graphics.

When you have completed all of the tutorials, the Mystery Drawing will be finally revealed.

## JFrame and JPanel

Before we continue on with our Mystery Class we are going to create a new Class which will extend the JFrame class.

The easiest way to explain JFrame and JPanel is to think of a painting hanging on the wall. The frame is what holds the painting. In that scenario the JFrame is the frame holding the painting and the JPanel is the painting.

Right click on com.java2D.mysterydrawing > New > Class

• In the Name text box type Frame
• click Finish
• Where it says public class Frame after the word Frame type extends JFrame

When you do this, you will notice the word Frame has a red squiggly line, hover your mouse over the word Frame you should receive a pop up, click on Import 'JFrame'(javax.swing).

## Coordinate system

Before we continue, I wanted to quickly explain how the coordinate system worked in Java. (x, y) This is important for you to know before we create our JFrame, JPanel, and Mystery drawing.

Looking at the picture to the right and lets say for the example that the width of the window is 400 and the height of the window is 800. (400, 800)

Notice that the x increases to the right and y the increases downwards.

Here are a few examples:

A the coordinates of the upper left hand corner is (0,0). x = 0 and y = 0

B the coordinates of the upper right hand corner is (400, 0). x = 400 and y = 0

C the coordinates of the lower left hand corner is (0, 800). x = 0 and y = 800

D the coordinates of the lower right hand corner is (400, 800). x = 400 and y = 800

If we looking for the center point, in this case, the coordinates of the center is (200, 400). x = 200 and y = 800

There is a lot of material to cover, so I am going to go step by step. The entire code will be posted after we finish the JFrame

import java.awt.Color;

import java.awt.Graphics;

import java.awt.Graphics2D;

import javax.swing.JFrame;

import javax.swing.JPanel;

public class Frame extends JFrame {

/*

* Notice we are calling our Model class and naming it model Think back to

* my House example when I was explaining classes. House Ranch or House

* Victorian or House Raised Ranch instead here it is Model model

*/

private Model model;

public Frame(Model m) {

model = m;

Now we are preparing our Panel, think about it as the Painting

JPanel panel = new JPanel() {

// Here were are creating a method paint and

//passing Graphics g as the argument

public void paint(Graphics g) {

super.paint(g);

//Here we are using the class Graphics2D

//inheritance, interfaces etc.

Graphics2D myGraphics = (Graphics2D) g;

Java has standard colors that you can use. Here I am using custom colors. If you want to play around with your own custom color, just open Paint (usually already installed on your PC--you can find it in the Accessories Folder), click on Colors > Edit Colors, click on Define custom colors, and notice you can find the RGB values.

//Here I am creating custom colors

//Below the numbers represent the RGB values (red, green, blue)

Color blue = new Color(33, 37, 92);

Color blue2 = new Color(57, 66, 164);

For fun, I thought I would quickly show you how to use GradientPaint.

Looking at the arguments passed, the 0,0, represents the x and y values where the Gradient Paint will start, the custom color blue we created is the first color used, 400, 700 represents the x and y values of where the second custom color blue2 will start and true allows the pattern to be repeated.

blue2, true);

//Here we are setting our Gradient Paint as the color we want to use

myGraphics.setPaint(gp);

/* Here we are creating a rectangle and filling it

* with our GradientPaint, this will serve as the background to our JPanel

*/

myGraphics.fillRect(0, 0, 900, 700);

//pulls the drawShape method from our abstract class Model

//and passes the argument myGraphics

model.drawShape(myGraphics);

}

};

This is the rest of the JFrame code adds the JPanel to the window, allows, the Mystery drawing to be seen, exits and closes the JFrame, sets the size of the window, and sets the title.

// adds the JPanel to this window

setContentPane(panel);

// this is so the Mystery drawing is seen

panel.setOpaque(true);

// exits and closes JFrame

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

// This sets the size of the window notice it is the same size as the

//myGraphics.fillRect(0,0,900,700) we

//used to act as the background.

setSize(900, 700);

// This sets the title shown on the JFrame

setTitle("Mystery Drawing");

}

}

The Frame Class is posted below, however I had to remove the comments so that the code formatted correctly. I also posted the text version below with the comments included.

## Text Version of the Frame Class

package com.java2D.mysterydrawing;

import java.awt.Color;

import java.awt.Graphics;

import java.awt.Graphics2D;

import javax.swing.JFrame;

import javax.swing.JPanel;

public class Frame extends JFrame {

/*

* Notice we are calling our Model class and naming it model Think back to

* my House example when I was explaining classes. House Ranch or House

* Victorian or House Raised Ranch instead here it is Model model

*/

private Model model;

public Frame(Model m) {

model = m;

// Now we are preparing our Panel, think about as the Painting

JPanel panel = new JPanel() {

// Here were are creating a method paint

// and passing Graphics g as the argument

public void paint(Graphics g) {

super.paint(g);

// Here we are using the class Graphics2D

// inheritance, interfaces etc.

Graphics2D myGraphics = (Graphics2D) g;

// Here I am creating custom colors

// Below the numbers represent the RGB values (red, green, blue)

Color blue = new Color(33, 37, 92);

Color blue2 = new Color(57, 66, 164);

blue2, true);

// Here we are setting our Gradient Paint as the color we want

// to use

myGraphics.setPaint(gp);

/*

* Here we are creating a rectangle and filling it with our

* GradientPaint, this will serve as the background to our

* JPanel

*/

myGraphics.fillRect(0, 0, 900, 700);

// pulls the drawShape method from our abstract class Model

// and passes the argument myGraphics

model.drawShape(myGraphics);

}

};

// adds the JPanel to this window

setContentPane(panel);

// this is so the drawing is seen

panel.setOpaque(true);

// exits and closes JFrame

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

// This sets the size of the window notice it is the same size as the

//myGraphics.fillRect(0,0,900,700) we

//used to act as the background.

setSize(900, 700);

// This sets the title shown on the JFrame

setTitle("Mystery Drawing");

}

}

## Testing Our Code

Originally I wasn't going to cover this in this Tutorial, however, you've worked hard and should see the results this far.

Open up the Mystery class and although I am not going to explain each line until the next tutorial, look at your public static void main(String[] args):

Add this in between the parenthesis:

Mystery a = new Mystery();

Frame v = new Frame(a);

v.setVisible(true);

}

Your Mystery class should now look like this:

Click on Run > Run As > 1 Java Application. Eclipse will ask to save, save, and then wait a moment, your JFrame and JPanel should appear and should look like the screenshot below. If you have any problems, check your code for any typos.

## This Concludes Tutorial II

In the next tutorial, I will cover Graphics 2D and if you finish the tutorial, the Mystery Drawing will finally be revealed.

I hope you find my tutorials informative and I hope they give you a better understanding of the subjects covered. If you do like my tutorials you might want to check out my other Hubs and perhaps learn something new.

THANK-YOU for taking the time to read this. GOOD LUCK!!!!