Umrabulo Session #06 – Menus Frame
Author: Vuyisile Memani
Module: AOP216D/AOR216D
Date: 15 July 2023
Introduction
In this Mrabulo Session were are going to create a frame for selling soccer match tickets using the
JFrame class. The tutorial will introduce the student to a few Swing components, namely: JMenuBar,
JMenu and JMenuItem. We will conclude the tutorial with a DIY exercise.
Problem statement
Create a tickets frame and display it. The output must resemble the following frame:
1
2
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.
3
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. Perform the following tasks:
• Click on File | New Project
4
• Select Java under Categories and Java Class Library under Projects.
• Click Next. Name the project MenusFrameLibrary.
5
• Click Finish.
Step 3
Create the frame. Perform the following tasks:
• Right click on the project and select New | Java class
6
• Name the class as MenusFrame and package it under za.ac.tut.ui
• Click Finish.
7
• Make the MenusFrame class a frame by extending the JFrame.
• Create the frame.
8
9
10
11
Step 4
Compile the project. Perform the following tasks:
• Right click on the project and select Clean and Build.
• Select the Files tab.
• Expand the folder. Under the dist folder you have the MenusFrameLibrary.jar file that
contains the MenusFrame.class file.
12
Part B: Test the frame in an application
In this section we create an application that 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 this, perform the following tasks:
• Click on File | New Project.
• Select Java under Categories and Java Application under Projects.
13
• Click Next. Name the project as MenusFrameApp.
• Click Finish.
14
• Inside the main method, instantiate MenusFrame.
• There’s an error. MenusFrame is not visible inside the application. It is 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.
15
2. Navigate to the location of MenusFrameLibrary.jar file.
3. Select the file and click on Open.
16
4. Now the MenuFrame library is included in the current project. Import the class, and the
error disappears.
Step 2
Run the program. Click on the green icon image.
Output:
17
18
19
Part C: Store the source code on GitHub
In this section we are going to store the source code of MenusFrameLibrary.java and
MenuFrameApp.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 (MenusFrameLibrary.java and MenusFrameApp.java) to 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.
20
After successful login you will see something along the lines:
Step 3
Click on New to create a new repository.
21
Step 4
Fill in the form.
22
Step 5
Click on Create repository.
Step 6
Click on the Add file dropdown menu.
23
Step 7
Select the Upload files option.
Step 8
Upload the files (MenusFrame.java and MenusFrameApp.java) by clicking on the link: choose your
files.
24
Step 9
Click on the Commit changes button.
Step 10
Click on Code dropdown menu.
25
Step 11
Copy the repository’s link by clicking on the corresponding icon . View the link (paste it here).
https://github.com/memanivbb/Menus-Frame.git
You can share this link with anyone you want to access your repository.
Conclusion
In this Mrabulo Session we managed to do three things, namely:
1. Created a 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 similar to the one below.
Below are the options of the Help menu.
26