Week 7 Lab Tutorial (Step-by-Step)
Course: BIC1224 – Object-Oriented Programming (Java)
Topic: GUI Programming Basics (Java Swing) — JFrame, JPanel, Components, Layout
Managers
Learning Outcomes (Week 7 Lab)
By the end of this lab, students will be able to:
● Create a basic Java Swing application using JFrame
● Add components (JLabel, JTextField, JButton, etc.)
● Use layout managers (FlowLayout, GridLayout, BorderLayout)
● Design simple GUI forms (Login / Student Form / Calculator UI)
● Write clean GUI code with proper naming and structure
Note: Event handling (button click actions) will be implemented in Week 8. In Week
7 you focus on designing the interface only.
Part A — Setup & Project Structure
Step 1: Create a New Project
1. Open your IDE.
2. Create a Java project:
○ Project Name: BIC1224_Week7_GUI
3. Create a Java class:
○ [Link]
Step 2: Import Swing Packages
At the top of your file:
import [Link].*;
import [Link].*;
Part B — Build Your First Swing Window
Task 1: Create a JFrame (Main Window)
Step 3: Write the basic JFrame code
public class Main {
public static void main(String[] args) {
JFrame frame = new JFrame("Week 7 - My First GUI");
[Link](500, 350);
[Link](JFrame.EXIT_ON_CLOSE);
[Link](true);
}
}
✅ Output: a blank window appears.
Task 2: Add a JPanel and Components
Step 4: Create a panel and add a label
JPanel panel = new JPanel();
JLabel title = new JLabel("Welcome to Java Swing!");
[Link](title);
[Link](panel);
✅ Now the label appears inside the frame.
Part C — Understanding Layout Managers
Task 3: FlowLayout (Default)
Step 5: Add multiple components
[Link](new FlowLayout());
[Link](new JLabel("Name:"));
[Link](new JTextField(15));
[Link](new JButton("Submit"));
✅ Components appear left-to-right.
Task 4: GridLayout (Best for Forms)
Step 6: Switch to GridLayout
Replace the layout:
[Link](new GridLayout(4, 2, 10, 10));
Add form components:
[Link](new JLabel("Username:"));
JTextField tfUser = new JTextField();
[Link](tfUser);
[Link](new JLabel("Password:"));
JPasswordField pfPass = new JPasswordField();
[Link](pfPass);
JButton btnLogin = new JButton("Login");
JButton btnClear = new JButton("Clear");
[Link](btnLogin);
[Link](btnClear);
✅ You have created a basic login form UI.
Task 5: BorderLayout (Regions)
Step 7: Create a new frame with BorderLayout
JFrame frame2 = new JFrame("BorderLayout Demo");
[Link](500, 300);
[Link](JFrame.EXIT_ON_CLOSE);
[Link](new BorderLayout());
[Link](new JButton("NORTH"), [Link]);
[Link](new JButton("SOUTH"), [Link]);
[Link](new JButton("EAST"), [Link]);
[Link](new JButton("WEST"), [Link]);
[Link](new JLabel("CENTER AREA", [Link]),
[Link]);
[Link](true);
✅ Observe how regions behave when resizing.
Part D — Build a Complete GUI Form (No
Event Handling Yet)
Task 6: Student Information Form (UI Only)
Step 8: Design a clean Student Form
Create a new class file: [Link]
import [Link].*;
import [Link].*;
public class StudentForm {
public static void main(String[] args) {
JFrame frame = new JFrame("Student Form");
[Link](500, 350);
[Link](JFrame.EXIT_ON_CLOSE);
JPanel panel = new JPanel();
[Link](new GridLayout(6, 2, 10, 10));
[Link]([Link](20, 20, 20, 20));
[Link](new JLabel("Name:"));
JTextField tfName = new JTextField();
[Link](tfName);
[Link](new JLabel("Student ID:"));
JTextField tfId = new JTextField();
[Link](tfId);
[Link](new JLabel("Department:"));
JTextField tfDept = new JTextField();
[Link](tfDept);
[Link](new JLabel("CGPA:"));
JTextField tfCgpa = new JTextField();
[Link](tfCgpa);
JButton btnSave = new JButton("Save");
JButton btnReset = new JButton("Reset");
[Link](btnSave);
[Link](btnReset);
[Link](panel);
[Link](true);
}
}
✅ A complete form UI is created.
Part E — GUI Quality Improvements
Task 7: Add Spacing and Title Styling
Step 9: Improve UI presentation
Add to the panel:
[Link]([Link]("Student Registration"));
Use a title label:
JLabel heading = new JLabel("Student Registration Form", [Link]);
[Link](new Font("Arial", [Link], 18));
[Link](heading, [Link]);
Then add panel in CENTER:
[Link](panel, [Link]);
✅ UI becomes more professional.
Exercises (Week 7)
Exercise 1 — Registration Form UI (GridLayout)
Create a UI with:
● Full Name
● Email
● Phone
● Password
● Confirm Password
Buttons:
● Register
● Clear
(UI only, no actions.)
Exercise 2 — Calculator UI (Buttons + Display)
Design a calculator interface:
● One text field at the top (display)
● Buttons:
○ 0–9
○ +, –, ×, ÷
○ =, C (clear)
Use:
● GridLayout for buttons
● BorderLayout to place display at top
(UI only.)
Exercise 3 — Feedback Form UI
Include:
● Name (textfield)
● Rating (radio buttons: Good / Average / Poor)
● Interests (checkboxes: Programming / AI / Networking)
● Feedback (textarea)
● Submit button
Exercise 4 — Student Dashboard UI
Create a dashboard window with buttons:
● Add Student
● Search Student
● Update Student
● Delete Student
● Exit
Use GridLayout or BorderLayout.
Exercise 5 (Challenge) — Multi-Window GUI Navigation
(UI Only)
Create two forms:
1. Login Form UI
2. Student Form UI
For now, just create both windows (no event handling).
(Week 8 will connect them using button clicks.)