Creating a Simple GUI for Absolute Beginners (Java Tutorials)

An article by Prerak Pradhan    7 Comments

Everyone likes the motto, “Keeping it Simple” and the whole idea of a Graphical User Interface or GUI is based on those 3 words. Gone are the days when we use to type complex commands to do tasks, people love the power of doing complex tasks with a simple click and the attraction towards it is fairly obvious.  In this article I will teach you how to create simple User Interfaces using JAVA, so let’s dive into it then:

Generally there are two ways in JAVA to create a User interface, using Swing and AWT. Today most Java programmers employ Swing to create User interfaces since Swing provides richer implementation than does AWT of some common controls such as buttons, lists and checkboxes. So following the general trend I too will be using Swing.

The basic foundation of a User interface is a simple window; this can be done in JAVA using something called a Frame. Frame encapsulates what is commonly thought of as a “window”, it has title bar, menu bar, borders and resizing corners. The code to create this is fairly simple and is given below.

Firstly the class that is responsible for the frame creation:

package firstframe;
import javax.swing.JFrame;
import java.awt.Color;
public class frame {
JFrame Frame1 = new JFrame(“Test Frame”);
public frame()
    {
    Frame1.setSize(400,150);
    Frame1.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    Frame1.setVisible(true);
   }
}

This code is pretty self-explanatory; firstly you will need to import the swing libraries, then instantiate an object of the JFrame class. It is important here to note that the JFrame class has the following constructors:

The methods inside the constructor of the frame class, that are called by the frame1 object does the following:

Now the main class:

package firstframe;
public class Main {
  public static void main(String[] args) {
        new frame();
    }
}

This code results in the creation of a blank window, notice how I have put the two classes in a package named firstframe, I do this out of choice, if you are not comfortable with it you can put the main method in the frame class and avoid the main class altogether.

Now we proceed to the next section that will deal with creation of elements such as text-fields, label and buttons as well as laying them out in the window using Java’s layout manager, so let’s get into it right away.

Below is the code for the frame class:

package firstframe;
import javax.swing.*;
import javax.swing.JPanel;
import java.awt.*;
public class frame {
   JFrame Frame1 = new JFrame("Test Frame");
   JPanel j2 = new JPanel();
   JButton b1 = new JButton ("Click me");
   JTextField t1 = new JTextField(20);
   JPanel j1 = new JPanel (new FlowLayout());
   JLabel l1 = new JLabel("Name here: ");
public frame()
    {
    j1.add(l1);
    j1.add(t1);
    j2.add(b1);
    Frame1.add(j1);
    Frame1.add(j2);
    Frame1.setLayout(new FlowLayout());
    Frame1.setSize(400,150);
    Frame1.setVisible(true);
    Frame1.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  }
}

The code to create the window remains the same with further additions to it to add and layout the components in the frame.

   JFrame Frame1 = new JFrame("Test Frame");
   JPanel j2 = new JPanel();
   JButton b1 = new JButton ("Click me");
   JTextField t1 = new JTextField(20);
   JPanel j1 = new JPanel (new FlowLayout());
   JLabel l1 = new JLabel("Name here: ");

We first need to initialize the objects of the JButton, JPanel , JTextField and the JLabel class so that we can add it to the container

Here the initialization of JPanel is necessary because it is usually a good idea to group various components together so that they can be laid down in a proper way. To understand the way I have initialized the various components you will first need to understand about the various constructors each components have, below is a list of all the constructors of all the components I have used here:

JButton :

JTextField:

JPanel:

JLabel:

The initialization of the button, text-field, panel and label I have used here are in done accordance with the constructors described above. After initialization of the various components I have added them to the JPanel which is basically me grouping them. The text-field and the label have been grouped into JPanel j1 and the button is left alone in JPanel j2, of-course this is not necessary and can be do as per your own choice. This is done in the above code from line 14.

    j1.add(l1);
    j1.add(t1);
    j2.add(b1);

Then in Line 17-18, they have been added to the frame:

   Frame1.add(j1);
   Frame1.add(j2);

Line 19 is basically setting up the layout for the frame. Here we have used the Flow layout manager which is probably the most simple of layout managers; it just arranges components in a left-to-right flow, much like lines of text in a paragraph:

    Frame1.setLayout(new FlowLayout());

And so we are done, the output preview is right below and this is probably one of the simplest techniques of creating a User Interface in JAVA. It is important to note that here the button does nothing, I have just kept it there to illustrate how to insert it in the proper fashion, to make it do cool stuff you will need to learn about event-handling on which I will be doing a stone very soon here at @fortystones, so watch this space.

Final Ouput

Subscribe to fortystones.
Follow @fortystones on Twitter.
Get updated from our Facebook Fanpage.