Java Graphical User Interface With JFrame: Drawing Graphics With Eclipse

What Will I Learn?

• The user will learn the concept of Graphics in Java programming
• The user will learn how to draw graphical objects in Java program.

Requirements

• A fully functional computer system is required for this tutorial
• On the computer system, Java Development Kit (JDK) must be installed.
• Also the computer system must have Java IDE installed. Probably Eclipse.

---

Get JDK here
Get Eclipse IDE here

---

Difficulty

• Intermediate.

Tutorial Contents

In this tutorial, we are going to learn the concept of Graphics in Java programming. Many programmers come into into programming world for the purpose of building games and I believe we all know that we can't make games without sweet graphics. Graphics is the main attribute of game. But nor just in gaming programming, graphics is an essential concept in programming in general. So what does graphics in Java mean?

Drawing Graphics In Java Programming.

Graphics includes lines, circles, rectangles and other primitive objects that are drawn with the use of Graphical User Interface. This extends to the point of positioning imaging objects within the borders of a component. To do this in Java, we make use of the Abstract Windowing Toolkit (AWT) and swing classes.

Sub-class tee.java

This is the first class we are going to create. This class will house our implementation codes and in there is where we will put our components. Take a quick glance on the class below.

Now that you have seen tee.java class, I will like us to work on it right away. I will be explaining every line of code as we progress in creating our program. This way,we will all be able to understand the concept really quick.

tee.java code

This class is the sub-class of our program in which our components are implemented.

The first thing we need to do is import the Java classes needed in this program. That is done below.

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

These classes imported above are used in preparing our graphics components as needed in the program.

Now that done, before we proceed to adding our components, we need to add something to our tee.java class. What we need to add is extend the class with JPanel. The JPanel is what we will be using in the program to attach our components.

public class tee extends JPanel{

So we have extended our tee class with JPanel.

Now in order to make graphics on the screen, we need a method called paintComponet. paintComponent in Java is used to draw graphics on the screen. Let's go ahead now and call the method. To do that, we use the code below.

public void paintComponent(Graphics graph){

As seen above, the paintComponent method takes an object from Graphics class and it goes alongside a parameter which I named graph. You can use any name for the variable. This is going to be used in setting our graphics color and this could be manipulated depending on what we want to use it for.

Now that we have our method needed to create our graphic, we can go ahead and start creating our graphics.

The first thing we need to do is to call the super class paintComponet method and add our parameter variable, graph.

super.paintComponent(graph);

The next thing is to set the background of our frame. Let's do that now.

this.setBackground(Color.WHITE);

this.setBackground is the parameter for setting background color and one just need to add the color one needs. Java already has some pretty much constant colors from which one can choose from. As I'm believing you can see, we set our frame background color as white color.

Now, we will be adding our objects or better still, components to the program. But before doing that, we first need to declare what color we want to draw with. See how we do that below.

graph.setColor(Color.BLUE);

As you can see, we want to draw an object with blue color. Now that we have declared the color we want to draw with, we can draw our object right away. Let's draw a rectangle. I want to show you how to do this in Java programming language. see it below.

graph.fillRect(25,  60,  100,  30);

Simple, right? that line of codes above is used to draw a rectangle object with blue being the color in our program. Let me quickly explain each parameter as used in the above code. 25 represents the position of our object on the x axis on our frame. I'm sure we all know what that means in Mathematics. 60 represents the position of our object on the y axis . 100 and 30 represent the width and height of the object respectively in pixels.

Now let us add another object but this time, it is going to be an oval shape and not rectangle. The following codes helps us with that.

graph.setColor(Color.GREEN);
graph.fillOval(150, 35, 75, 75);

Just as in the rectangular object, 150 represents the position of the object on the X-axis, 35 represents the position on the Y-axis, 75 represents the width in pixels and the other 75 represents the height. The color is set to be green.

We will add three more objects; one being a rectangular objects and the lat two being String texts.

graph.setColor(Color.YELLOW);
graph.fillRect(260,  60,  100, 30);
        
graph.setColor(Color.WHITE);
graph.drawString("Hello Utopian", 145, 130);
        
graph.setColor(Color.WHITE);
graph.drawString("I am @teekingtv and here is a tutorial on Java", 80, 155);

The rectangular object takes yellow color and is positioned at 260 and 60 on the X and Y axis respectively with width being 100 pixels and height being 30 pixels. After that, two objects of String are added with white color.

That is all about our sub-class, **tee.java**. Below is the full codes for **tee.java** class.

Sub-class tee.java full code

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

public class tee extends JPanel{

    public void paintComponent(Graphics graph){
        super.paintComponent(graph);
        this.setBackground(Color.RED);
        
        graph.setColor(Color.BLUE);
        graph.fillRect(25,  60,  100,  30);
        
        graph.setColor(Color.GREEN);
        graph.fillOval(150, 35, 75, 75);
        
        graph.setColor(Color.YELLOW);
        graph.fillRect(260,  60,  100, 30);
        
        graph.setColor(Color.WHITE);
        graph.drawString("Hello Utopian", 145, 130);
        
        graph.setColor(Color.WHITE);
        graph.drawString("I am @teekingtv and here is a tutorial on Java", 80, 155);
        
    }
        
}

Now the next thing for us to do is to create our main class with the main method.

Main class king.java

Our main class is created with the name king.java. This class has the program's main method and it is responsible for executing the entire program.

Now the first thing to do on our main class is to import the swing class. To do this, we follow the line of code given below.

import javax.swing.*;

The class imported above will help us in using the frame to output our program. Now we need to make a new frame and set the frame title. See how it is done below.

JFrame w = new JFrame ("Title");

I set the title as Title. we can set it to whatever we like. After the title, we need to set the deafult close operation. This is done manually as Java language doesn't do that automatically.

w.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

We put the argument EXIT_ON_CLOSE which enables to be able to terminate the program whenever we click on the close icon.

That done, the next thing we need to do is to create a new object to call in our sub class, tee.java. To do this, we use the following line of codes.

tee t = new tee();

Now we have linked our main class and the sub-class together with the above code. We are going to set the attributes for the Frame size (the height and the width) and also set the visibility to true.

w.setSize(400, 250);
w.setVisible(true);

And so that is it! we have successfully created our program. Below is the full code for the main class king.java.

king.java full code

import javax.swing.*;

public class king {

    public static void main(String[] args) {
        
        JFrame w = new JFrame ("Title");
        w.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        tee t = new tee();
        w.add(t);
        w.setSize(400, 250);
        w.setVisible(true);

    }
}

Now that we have created tit, the first

Output

Our components are as colourful as needed.

The above program shows the concept of drawing graphics in Java programming.

Source Code On GitHub

You can download the full source code on my GitHub to try this project out.

Curriculum

• Java Graphical User Interface With JFrame: Event Handling And Action Listening

---

Posted on Utopian.io - Rewarding Open Source Contributors

---