Sitemap

GUI in Java

6 min readFeb 28, 2022

--

Press enter or click to view image in full size

If we need to build Graphical User interfaces (GUIs), we can do that using Java. A GUI is a more effective way to communicate with the user with more visual data.

To create a GUI first we need a frame where all the other visual objects can fit in. To create a frame we can use a JFrame object. In this JFrame object we can include all the things that belong to the interface such as Buttons, text fields and checkboxes. The look of the JFrame could vary depending on the platform you are using.

An JFrame would look like this. And you can add components such as Text Boxes, Buttons and Labels to the frame.

You can create a JFrame as shown below.

JFrame frame = new JFrame(); // Creating the JFrame object
frame.setSize(300,300); // Adjusting the size
frame.setVisible(true); // Making the frame visible

If you want to add components to the frame. you can create an object of the component and then add that to the frame. If we need to add an Button, we can add it as shown below.

JFrame frame = new JFrame(); // Creating the JFrame object
JButton button = new JButton("Click Me"); // Creating the Button

frame.getContentPane().add(button); // Adding the button to the Frame
frame.setSize(300,300); // Adjusting the size of the Frame
frame.setVisible(true); // Making the frame visible

And the output would look like this.

Even though we close the frame it program will be still running. To stop the program running when we click the close button on the frame, we can use the following code.

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

Even though we have the Button, nothing happens when we click the button. to add functionality to the Button, We need to add a method that needs to be called when the user clicks the button and the program should know when to call that method. To do that we have to listen for the users action(an event). An event can be represented as an object of a event class. There are different event classes such as Mouse Event, KeyEvent, ActionEvent and more. An event source(Eg. A button) create an event object when the user interacts with the event source.

To listen to an event we can implement a listener interface. A listener interface can connect the event listener and the event source(button). For every event there is an event listener that matches the event. For example mouse events implement the mouseListener interface.

The following gives an idea on how to add functionality to a button. We create a JFrame and add the button as we did before. And then implement the listner method.

// Implements the ActionListner Interface
public class simpleGUI implements ActionListener {
JButton button;

// This function creates the JFrame and
// adds the button as we did before
public void createUI() {
JFrame frame = new JFrame();
button = new JButton("click me");
button.addActionListener(this);
frame.getContentPane().add(button);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(300, 300);
frame.setVisible(true);
}

// The Listener Method.
//When the user clicks on the button
//this method will be called
@Override
public void actionPerformed(ActionEvent e) {
button.setText("Clicked"); //Change the text of the button
}
}

What we have additionally done is that we have implemented the listener using the implements keyword and implemented the actionPerfromerd method.

When the user clicks the button the actionPerformed method will be executed.

When the button is clicked the text in the button is changed.

The event source(Button) get the event(clicking the button) from the user and calls the method which has the functionality on what should happen (actionPerformed method), which is in the listener class(simpleGUI Class).

The listener has to implement the listener interface(ActionListner interface). The listener will receive the event and the will execute the method which has the functionality on what should happen when the event occur (actionPerformed method).

Get Shashane Ranasinghe’s stories in your inbox

Join Medium for free to get updates from this writer.

The event object is the argument passed to the method(actionPerformed method) that we call when the button is clicked. The event object holds the information about the event.

Press enter or click to view image in full size

A frame consists of 5 regions. Namely North, South, East, West and Centre. We can add a widget so that the widget only occupies the space of the specified region.

frame.getContentPane().add(BorderLayout.NORTH,button);

We have added the button to the north reigon and it would look like this.

The Centre region is the default region. If we do not pass a parameter for the region the widget would be in the centre region.

If we need to add more than one widget into a frame, we can use these regions.

button = new JButton("click me");
frame.getContentPane().add(BorderLayout.NORTH,button);
button1 = new JButton("click me too");
frame.getContentPane().add(BorderLayout.EAST,button1);

Now If we need these two buttons to perform two different actions, we would need two methods, but when we implement the ActionListner interface we would only get one actionPerformed method.

To overcome this issue we can use inner classes. An inner class is a class inside another class.

class OuterClass {
private int x;

class InnerClass {
void innerClassMethod() {
x = 42;
} // End of inner class
}
}

The inner class will be able to access all the variables and the methods of the outer class. The inner class have access to even the private variables and the methods of the outer class.

To make an instance of the inner class. We first have to make an instance of the outer class, and then use that instance to make an instance of the inner class.

public class OuterClass {

//You can create an object of the inner Class
// in the outer class
InnerClass innerObject = new InnerClass();

//Inner Class
class InnerClass {
//Inner method inside the inner class
public void innerMethod(){
System.out.println("Inner Method");
}
}
}

and you can call the inner class using the outer class object like this.

//Creating the object of the outer class
OuterClass outerObject = new OuterClass();

//Using the outer class object to access
// the inner class methods
outerObject.innerObject.innerMethod();

Using inner classes we can have two buttons with two different implementations.

public class simpleGUI {
JButton button;
JButton button1;
// Doesn't implement the ActionListner Interface
public void createUI() {
JFrame frame = new JFrame();

button = new JButton("click me");
//We create a new instance of the class with the method
//instead of using the 'this' keyword.
// Button1Listener for the first Button
button.addActionListener(new Button1Listener());
frame.getContentPane().add(BorderLayout.NORTH, button);

button1 = new JButton("click me too");
// Button2Listener for the second Button
button1.addActionListener(new Button2Listener());
frame.getContentPane().add(BorderLayout.EAST, button1);

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(300, 300);
frame.setVisible(true);
}

// class with the method to called
// when the first button is clicked
class Button1Listener implements ActionListener {

@Override
public void actionPerformed(ActionEvent e) {
// Functionality of the first button
button.setText("Button 1 Clicked");
}
}

// class with the method to called
// when the second button is clicked
class Button2Listener implements ActionListener {

@Override
public void actionPerformed(ActionEvent e) {
//Functionality of the second button
button1.setText("Button 2 Clicked");
}
}
}
Press enter or click to view image in full size

You can get to know more about Java by checking out my list on introduction to Java, by clicking here

References

  1. Kathy Sierra and Bert Bates. 2005. Head First Java, 2nd Edition. O’Reilly & Associates, Inc., USA.

--

--