Umrabulo Session #01 – Basic JFrame

Author: Vuyisile Memani

Module: AOP216D/AOR216D

Date: 15 July 2023

Introduction

In this Mrabulo Session were are going to create a basic frame (form) using the JFrame class. The
JFrame class is located in the javax.swing package. We will also use some of JFrame’s methods to
initialise the created frame. The developed solution will be stored on GitHub. The tutorial will be
concluded with a DIY (Do It Yourself) exercise.

Problem statement

Create a frame and display it. The output must resemble the following frame:

Solution

The solution is divided into three parts, namely A, B and C. In part A we create the frame, in B we test
it, and in C we store our source code on GitHub.

1
Part A: Create the frame

In this section we create the actual frame in a backend class.

Step 1

Launch NetBeans.

Step 2

Create a Java Project. To do that, perform the following tasks:

• Click on File | New Project

2
• Select Java under Categories and Java Class Library under Projects.

• Click Next. Name the project BasicFrame.

3
 • Click Finish.

Step 3

Create the frame. To do that, perform the following tasks:

• Right click on the project and select New | Java class

4
• Name the class as MyFirstFrame and package it under za.ac.tut.ui

• Click Finish.

5
• Make the MyFirstFrame class a frame by extending the JFrame.

• Create a constructor for the frame.

6
 • Construct the frame.

Step 4

Compile the project. To accomplish the task, do the following:

• Right click on the project and select Clean and Build.

• Select the Files tab.

7
• Expand the folder. Under the dist folder you have a jar file that contains the
MyFirstFrame.class file.

8
Part B: Test the frame in an application

In this section we create an application executes the GUI class. To accomplish the task, we will do the
following:

• Create a frontend class.

• Include the frame’s library in the current project.
• Import the frame class.
• Instantiate the frame.
• Run the program.

Step 1

Create a Java project application. To do accomplish the task, do the following:

• Click on File | New Project.

• Select Java under Categories and Java Application under Projects.

9
• Click Next. Name the project as BasicFrameApp.

• Click Finish.

10
• Inside the main method, declare a BasicFrame.

• There’s an error. This is because MyFirstFrame is not yet visible inside the application. It is
currently located in the jar file. Let’s include the jar file library to the current project. Perform
the following tasks:
1. Right click on the Libraries folder and select Add Jar/Folder.

11
2. Navigate to the location of the BasicFrame.jar file.

3. Select the file and click on Open.

12
 4. Now the BasicFrame library is included in the current project. Import the class, and the
error disappears.

Step 2

Instantiate the frame.

13
Step 3

Run the program. Click on the green icon.

Output:

14
Part C: Store the source code on GitHub

In this section we are going to store the source code of MyFrame.java and MyFrameApp.java on
GitHub. To accomplish this, we will perform the following:

• Get to the GitHub website.

• Create a repository for our project.
• Upload the two files (MyFrame.java and MyFrameApp.java) onto the repository.
• Get a link of the repository. This we will share with anyone we want to access our repository.

Step 1

Go to the GitHub website.

Step 2

On the far upper right of the page, click on Sign in if you have an account, or Sign up to create a new
one.

15
After successful login you will see something along the lines:

Step 3

Click on New to create a new repository.

16
Step 4

Fill in the form.

17
Step 5

Click on Create repository.

Step 6

Under Quick setup, click on uploading an existing file.

18
Step 7

Upload the files (MyFirstFrame.java and BasicFrameApp.java) by clicking on the link: choose your
files.

19
Step 8

Click on the Commit changes button.

Step 9

Click on the Add a README button and add some comments.

20
Step 10

Go back to the main page.

Step 11

Click on Repositories.

21
Step 12

Click on the Basic-Frame project link.

Step 13

Click on Code dropdown menu.

Step 14

Copy the repository’s link by clicking on the corresponding icon . View the link (paste it here).

https://github.com/memanivbb/Basic-Frame.git

You can share this link with anyone you want to access your repository.

22
Conclusion

In this Mrabulo Session we managed to do three things, namely:

1. Created a basic frame in a backend class.

2. Tested the frame in a frontend class.
3. Uploaded our source code on GitHub.

Please do the DIY exercise below to test your knowledge. Thank you very much for having taken time
to do the tutorial. Enjoy the rest of your day and God bless you.

DIY

Create a frame that will have your name and surname as its title. Upload your source code on your
GitHub account.

23