Creating Basic GUI Applications with Swing

Tutorial 1 of 5

1. Introduction

1.1 Goal Of The Tutorial

This tutorial aims to guide you on how to create basic Graphical User Interface (GUI) applications using Swing in Java.

1.2 Learning Outcome

By the end of this tutorial, you will be able to:
- Understand the basics of Swing
- Create simple GUI applications
- Interact with users through GUI

1.3 Prerequisites

Basic knowledge of Java programming
An installed Java Development Kit (JDK) and a text editor or Integrated Development Environment (IDE) like Eclipse or IntelliJ IDEA

2. Step-By-Step Guide

2.1 Understanding Swing

Swing is a part of Java Foundation Classes (JFC), used for creating window-based applications. It is built on top of the AWT (Abstract Window Toolkit) API and entirely written in Java.

2.2 Creating a Simple Swing Application

Let's create a simple Swing application. A typical Swing application involves the following steps:
1. Import necessary Swing packages
2. Declare your class as a subclass of one of Swing's top-level containers (like JFrame)
3. Add UI components to the container
4. Write code to handle events that interact with your GUI

3. Code Examples

3.1 Simple Swing Application

Here's a simple program that creates a JFrame with a single JButton on it.

// 1. Import necessary Swing packages
import javax.swing.*;

public class SimpleGUIApp {

    public static void main(String[] args) {
        // 2. Declare your class as a subclass of JFrame
        JFrame frame = new JFrame("Simple GUI App");

        // Create a button with text "Click me"
        JButton button = new JButton("Click me");

        // 3. Add UI components to the container
        frame.getContentPane().add(button);

        // Set the operation that will be performed when the user closes the window
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        // Set the frame size
        frame.setSize(300, 200);

        // Make the frame visible
        frame.setVisible(true);
    }
}

When you run the program, it will open a window with a single button labeled "Click me".

3.2 Handling Events

Now, let's add some interaction to our button.

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

public class InteractiveGUIApp {
    public static void main(String[] args) {
        JFrame frame = new JFrame("Interactive GUI App");
        JButton button = new JButton("Click me");

        // 4. Write code to handle events
        button.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                button.setText("You've clicked me!");
            }
        });

        frame.getContentPane().add(button);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(300, 200);
        frame.setVisible(true);
    }
}

This time, when you click the button, the button's text changes to "You've clicked me!".

4. Summary

In this tutorial, we've learned about the basics of Swing, how to create a simple GUI application, and how to handle user interactions. The next step is to explore more complex GUI components like text fields, checkboxes, radio buttons, and sliders. For further reading, Oracle's official Swing tutorial is a great place to start.

5. Practice Exercises

Try to complete the following exercises to reinforce your understanding:

Exercise 1: Create a GUI application with a JLabel that changes its text when a JButton is clicked.
Exercise 2: Create a GUI application with a JTextField. When a JButton is clicked, the text entered in the JTextField should be displayed in a JLabel.

Solutions

Solution 1:

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

public class Exercise1 {
    public static void main(String[] args) {
        JFrame frame = new JFrame("Exercise 1");
        JButton button = new JButton("Click me");
        JLabel label = new JLabel("Initial text");

        button.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                label.setText("Button clicked");
            }
        });

        frame.getContentPane().add(button);
        frame.getContentPane().add(label, BorderLayout.NORTH);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(300, 200);
        frame.setVisible(true);
    }
}

Solution 2:

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

public class Exercise2 {
    public static void main(String[] args) {
        JFrame frame = new JFrame("Exercise 2");
        JButton button = new JButton("Submit");
        JLabel label = new JLabel("Your text will appear here");
        JTextField textField = new JTextField(20);

        button.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                label.setText(textField.getText());
            }
        });

        frame.getContentPane().add(button, BorderLayout.SOUTH);
        frame.getContentPane().add(label, BorderLayout.NORTH);
        frame.getContentPane().add(textField, BorderLayout.CENTER);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(300, 200);
        frame.setVisible(true);
    }
}