Graphical user interfaces are the quintessential part of any commercially available software. Could you imagine buying Microsoft Word if you had to input via command line?

I certainly couldn’t. But, for many, making a GUI is tricky. Especially in Java. So, I’m going to shed the light on how to use Java’s Swing to create a basic Graphical User Interface for your program.

What You Will Learn About GUIs

  • Creating Windows.
  • Adding components; buttons, labels, fields.
  • Layout of Components in your GUI.

Firstly, How Do You Make A Blank Window in Java?

The answer is quite simple. JFrame. Of course, there are other ways, but for the purposes of this tutorial and general ease, we will start with JFrame.

  • JFrame is a “new window”.
  • You can declare various instances of JFrame.
  • JFrame is customizable.

Example of a Blank JFrame Window (for GUI)

//Import Swing for the GUI..
import javax.swing.*;

public class ExampleJFrame {

    public static void main(String[] args){
        // New Window (JFrame Instance)
        JFrame frame = new JFrame();

        // Set the size of the frame
        frame.setSize(500,500);

        // Set the title of the frame
        frame.setTitle("My Frame Title");

        // On close operation (when X clicked)
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        // Display the frame we have created
        frame.setVisible(true);
    }

}

This code will produce a blank window with the title that we’ve set. You can see this depicted below.

blank jframe window in java

Make a Blank Window using Inheritance (Extends) from JFrame

import javax.swing.*;

//We can make blank windows using Inheritance from JFrame!
public class ExtendedFrame extends JFrame {
    
    //We can set variables in our class...
    private static final int FRAME_WIDTH  = 480;
    private static final int FRAME_HEIGHT = 360;

    //We can also set things in our constructors...
    public ExtendedFrame(){
        this.setTitle("Frame from Class extending JFrame.");
        setSize(FRAME_WIDTH, FRAME_HEIGHT);
        this.setVisible(true);
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }

    public static void main(String[] args){
        
        //Then we create a new frame, everything is already ran!
        ExtendedFrame example = new ExtendedFrame();
    }
}

How To Add Components to JFrame , JPanel

Now that we’ve got blank window using JFrame, we want to add some components. So add some components we need a JPanel. Is panel sits on JFrame. We add components to the panel.

import javax.swing.*;

public class JPanelWithComponents {

    public static void main(String[] args){

        //Make some components

        JFrame myFrame = new JFrame("Me frame.");
        JPanel myPanel = new JPanel();// Panel doesn't have any text..
        JButton myButton = new JButton("Me button.");

        // Add them in reverse heirarchal order
        myPanel.add(myButton);
        myFrame.add(myPanel);

        // Show the frame...
        myFrame.setSize(500,500);
        myFrame.setVisible(true);

    }
}

This above code will produce a simple window, with a simple button on it.

jframe with jbutton

Using FlowLayout on your GUI, Adding Components & Aligning!

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

public class LayoutExamples {
    public static void main(String[] args){
        // new frame
        JFrame frame = new JFrame();

        // new panel with flowlayout (aligned to the left)
        JPanel panel = new JPanel();
        panel.setLayout(new FlowLayout(FlowLayout.LEFT));

        // new components
        JLabel myLabel = new JLabel ("My label");
        JTextField myField = new JTextField ("My text field");
        JButton myButton = new JButton ("My button");
        JLabel myResult = new JLabel("My result");

        // add components to panel
        panel.add(myLabel);
        panel.add(myField);
        panel.add(myButton);
        panel.add(myResult);

        // add panel to frame, resize and make visible
        frame.add(panel);
        frame.setSize(400,200);
        frame.setVisible(true);

    }
}

After using the above code you’ll end with something like the image below!

flowlayout java gui alignment

You should also note while the window is resizable, the components will collapse underneath each other. Left staying at the top, right at the bottom.

resizing jframe

Leave a Reply
You May Also Like

Hack This Site: Realistic 1 Solution

This is a simple step-by-step solution guide for Realistic Mission 1 on…

A Handful of Niches for Early 2016

Every time the new year comes around there’s a whole host of…