Weeks 11 & 12: GUI Development and

Advanced Event Handling in Java

Week 11: GUI Development in Java (Swing & AWT)

Topic: Design Graphical User Interfaces (GUIs) using Swing and AWT

Learning Outcomes:

By the end of Week 11, students should be able to:

1. Understand the basics of Graphical User Interface (GUI) development using Swing and
AWT.

2. Create a simple Java GUI using common Swing components such as JFrame, JButton,
JTextField, and more.

3. Handle basic events triggered by user actions (like clicking buttons).

1. Introduction to Swing and AWT

In Java, Swing and AWT (Abstract Window Toolkit) are two popular libraries for creating
graphical user interfaces (GUIs). AWT is Java's original GUI toolkit, while Swing is an extension of
AWT that provides a richer set of components and greater flexibility for building user-friendly
applications.

 AWT: The older toolkit, which is lightweight but platform-dependent.

 Swing: A more modern toolkit that is built on top of AWT but provides more powerful and
customizable components. It is platform-independent and more commonly used today for
building GUIs.

Basic Components of a GUI:

 JFrame: The main window of your application.

 JButton: A clickable button.

 JLabel: A text label to display information.

 JTextField: A field where users can input text.

2. Creating a Basic GUI with Swing

Let's start by building a simple GUI that contains a window with a label, a text field, and a button.
When the user clicks the button, the text they enter into the text field will be displayed in the
console.

Example of a Basic GUI using Swing:

Explanation:

 JFrame: Creates the main window (300x200 pixels).

 JLabel: Displays text prompting the user to enter their name.

 JTextField: Allows the user to input their name.

 JButton: A button labeled "Submit" that, when clicked, triggers an event to read and print
the name from the JTextField.

 ActionListener: Captures the button click event and executes the code in the
actionPerformed() method.

Lab Exercise for Week 11:

Task:

1. Create a GUI with a label, a text field, and a button.

2. When the user enters text into the text field and clicks the button, display the text in the
console.

Extra Task:
 Add a second label that dynamically updates to show what the user entered (instead of
printing it only in the console).
Week 12: Advanced GUI Layouts and Event Handling

Topic: Manage Layout Managers and Advanced Event Handling

Learning Outcomes:

By the end of Week 12, students should be able to:

1. Understand and apply different layout managers (such as FlowLayout, BorderLayout).

2. Manage more complex GUIs with multiple components.

3. Handle advanced event handling for multiple components, including buttons, text fields,
and combo boxes.

1. Introduction to Layout Managers

In Java, layout managers are used to arrange GUI components within a container. Instead of
manually positioning each component (like in Week 11), layout managers automatically arrange
components based on a specific layout style. Common layout managers include:

1. FlowLayout: Arranges components in a line, either horizontally or vertically.

2. BorderLayout: Divides the container into five regions: North, South, East, West, and
Center.

3. GridLayout: Arranges components in a grid of equally sized cells.

Example: Using FlowLayout:

Explanation:

 FlowLayout arranges the buttons in a row. When the window is resized, the buttons will
adjust their position automatically based on the size of the window.

2. Advanced Event Handling

In more complex GUIs, you often need to handle events from multiple components. For example,
you may want to handle button clicks, text field changes, and combo box selections all within the
same program.

Example: Using Event Handling with Multiple Components:

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

public class AdvancedGUI {

public static void main(String[] args) {
// Create a new JFrame
JFrame frame = new JFrame("Advanced GUI Example");
frame.setSize(400, 300);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

// Set layout manager to FlowLayout

frame.setLayout(new FlowLayout());

// Create components
JLabel label = new JLabel("Choose an option:");
JComboBox<String> comboBox = new JComboBox<>(new String[]{"Option 1",
"Option 2", "Option 3"});
JButton button = new JButton("Click Me");

// Add event handling for the combo box

comboBox.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
String selected = (String) comboBox.getSelectedItem();
System.out.println("Selected: " + selected);
}
});

// Add event handling for the button

button.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
System.out.println("Button clicked!");
}
});

// Add components to the frame

frame.add(label);
frame.add(comboBox);
frame.add(button);

// Make the frame visible

frame.setVisible(true);
}
}
Explanation:

 JComboBox: A drop-down list where the user can select one of several options.
  ActionListener for JComboBox: Detects when the user selects an option from the combo
box and prints the selected option to the console.

 ActionListener for JButton: Detects when the button is clicked and prints "Button
clicked!" to the console.

3. Using BorderLayout

The BorderLayout manager divides the container into five regions: North, South, East, West, and
Center. You can place components in these regions to organize them on the screen.

Example: Using BorderLayout:

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

public class BorderLayoutExample {

public static void main(String[] args) {
// Create a new JFrame
JFrame frame = new JFrame("BorderLayout Example");
frame.setSize(400, 300);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

// Set layout manager to BorderLayout

frame.setLayout(new BorderLayout());

// Add buttons to different regions

frame.add(new JButton("North"), BorderLayout.NORTH);
frame.add(new JButton("South"), BorderLayout.SOUTH);
frame.add(new JButton("East"), BorderLayout.EAST);
frame.add(new JButton("West"), BorderLayout.WEST);
frame.add(new JButton("Center"), BorderLayout.CENTER);

// Make the frame visible

frame.setVisible(true);
}
}
Explanation:

 Each button is placed in a different region of the frame (north, south, east, west, center).

 The center region expands to fill any remaining space.

Lab Exercise for Week 12:

Objective: In this exercise, you will create an advanced Java GUI that utilizes the BorderLayout
layout manager to organize components on the screen. You will also implement event handling
to interact with a combo box and a button. The exercise will help you understand how to manage
GUI components, layout managers, and event handling in a more structured way.

Instructions:

1. Create a Java GUI using BorderLayout:

o Design a GUI that uses the BorderLayout manager.

 o Place at least five components (e.g., buttons, labels, text fields) in the different
regions of the BorderLayout: North, South, East, West, and Center.

2. Add a Combo Box and Button:

o Place a JComboBox in one of the regions (you can choose where it fits best).

o Place a JButton in another region.

o Populate the combo box with at least three options (e.g., “Option 1,” “Option 2,”
“Option 3”).

3. Implement Event Handling:

o When the user selects an item from the combo box, display the selected item in
the console.

o When the user clicks the button, display a message in the console, such as
“Button clicked!”.

Additional Features (Optional):

 Dynamically update the text in one of the labels based on the selection from the combo
box.

 Add a JTextField to allow the user to enter text, and when the button is clicked, display
the entered text in the console.

Step-by-Step Breakdown:

1. Set up the JFrame:

o Create a JFrame as the main window for your application.

o Set the layout manager to BorderLayout.

2. Add Components to BorderLayout:

o Add a label to the North region, prompting the user to interact with the GUI.

o Add a button to the South region.

o Add a combo box to the West region, and populate it with options.

o Add a text field to the East region to allow the user to input data.

o Add another component of your choice (e.g., another label or button) to the
Center region.

3. Add Event Handlers:

o Implement the ActionListener interface to handle user interactions.

o Add event handling for the combo box to display the selected item in the console
when the user selects an option.

o Add event handling for the button to print a message to the console when it is
clicked.