Image for Count with Swing

Count with Swing

Today we're gonna build a GUI for counting stuff up. In Java there's mainly two packages for building a user interface: Swing and JavaFX. In this mini-tutorial we are using Swing. It is the more opinionated version of the two, but kind of easy to use.

What do we need?


We are going to need a window with a container to keep our label and button. We are also going to need an event listener to react when the button is pressed. I am a huge fan of lamda expressions when it comes to event listeners so this means a minimum of Java 8 is required to run the code I'm using. Let's get building!

The window


Yay! a FRAME 😆 Actually it is JFrame we're talking about here. JFrame is a window in the world of Swing and can be found it the package javax.swing. Let's initialize it:


JFrame frame = new JFrame("Counting");


This gives us a reference to a new JFrame object. We're passing a String with the value "Counting" to the constructor. What this really does is giving us a text with "Counting" in the top of the window. Alas, this doesn't mean that it will actually show. We have to be explicit and tell Java what we want:


frame.setVisible(true);


We now have this cute little frame:
A Swing frame

There's a couple of more things we need for the window to behave as we want. We want the program to shutdown when we close the window, and we want to set some certain dimensions as well.

frame.setSize(200, 200);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);


EXIT_ON_CLOSE is a constant in the JFrame-class which tells the object how to behave when the close-button in the window is pressed. Using a constant named EXIT_ON_CLOSE is much clearer what it means as opposed to just passing the integer 3.

The Container


Everything that is going inside the frame needs to be organised. A container will help us with that. We are getting a container from the JFrame object but it is actually of a java.awt.Container type. Next we're setting a strategy for how the container should organise the objects by setting its layout.


Container container = frame.getContentPane();
container.setLayout(new FlowLayout());


FlowLayout is part of the java.awt-package and organizes components in a row. If the row doesn't have space enough for the next component to be added it starts adding to a new row.

Add Label and Button to Container


The container is ready to take some components. We are going to add a label that will contain the number of times a button is pressed and the button with an actionListener. We will also need a variable to contain the count so we are going to add that as a static variable for now.


// Inside our class but before the main-method.
private static int count = 0;


FlowLayout is part of the java.awt-package and organizes components in a row. If the row doesn't have space enough for the next component to be added it starts adding to a new row.

Add Label and Button to Container


he container is ready to take some components. We are going to add a label that will contain the number of times a button is pressed and the button with an actionListener. We will also need a variable to contain the count so we are going to add that as a static variable for now.


// Inside our class but before the main-method.
private static int count = 0;


Next we are creating a JLabel (from javax.swing-package) to display our count value and setting an appropriate size for it. I'm doing a simple conversion from int to String by appending the count variable with an empty string.


JLabel countLabel = new JLabel("" + count);
countLabel.setSize(200, 30);


We create a JButton (from javax.swing-package as well). When we create it we also supply it with the text to be displayed on the button: Increment. You will also see that I'm using a lambda-function for the actionListener that we add. This function will react upon a button event and update the text on our label. Two things to note when we set the text is that first the count-variable will be incremented by one value, and then the integer value will be converted to a string thanks to our empty string that we concatinate with.


JButton button = new JButton("Increment");
button.addActionListener(event -> countLabel.setText("" + (++count)));


Then finally we will add the components to our container.


container.add(countLabel);
container.add(button);


When we compile and run our little counter it will look like this.
Counter program

Some final words


So this was pretty easy but we have touched on some nice features to know of: Swing and GUI, static variable, actionListener and lambda functions. Below you will find how the final code looks like, or find the code over at github.


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

public class SimpleCounter {
private static int count = 0;
public static void main(String[] args) {

JFrame frame = new JFrame("counting");

JLabel countLabel = new JLabel("" + count);
countLabel.setSize(200, 30);

JButton button = new JButton("Increment");
button.addActionListener(event -> countLabel.setText("" + (++count)));

Container container = frame.getContentPane();
container.setLayout(new FlowLayout());
container.add(countLabel);
container.add(button);

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