Course Name : Principles of Programming II
Course Code : CPTR242
Lecturer : John Williams
Unit : 11
Tutorial : GUI (Swing)
Date : 19/11/2020
Most IDEs used for developing Java applications provides us with the capabilities of creating
GUIs by “dragging and dropping” the controls that are needed (Similar to working with GUI in
Visual Studio for C#). It is also a very common practice to write the code needed to create a
GUI.
For our first tutorial activity, we will create the following GUI application:
Create a class called Login that extends to the frame class.
a. Create a frame with the title “Login”.
b. Add a panel to the frame with “Flow Layout”.
c. Add two labels to the panel that displays Username and Password respectively.
d. Add a text field to the panel.
e. Add a Password field to the panel
f. Add a button to the panel with the name “Login”.
Getting Started
Create a new project for this by clicking File > New Project from the NetBeans menu at the top.
Select Java > Java Application from the list boxes, and then click the Next button.
On step 2 of the wizard, type FirstGUI as the project name. At the bottom, uncheck "Create
main class". This is because NetBeans will create a main method for us when we add a form.
Step 2 of the wizard should look like this:
Click the Finish button, and NetBeans will create the project, but not much else. Have a look at
the Projects area on the left in NetBeans and you should see the following (If you can't see the
Projects area, click Window > Projects from the NetBeans menu at the top):
Normally, there is a .java file under the Source Packages name. But because we unchecked the
"Create main class" box, there is no java class file there.
What we will do is to add a Form to the project. When the form is created, it will be created in its
own Java class file.
To add a form, right click the project name in the Projects window. A menu will appear:
Select New > JFrame Form from the menu. When you do, you should see the following wizard
appear:
Here, you are being asked for a name for your Class, and a package name. We have already
created the project, and called it FirstGUI. The package name and class will go into the project.
So, for your Class Name type Login. In the blank package text box, type jLogin. So we are
creating a class called Login, which is in the jLogin package, which is in the FirstGUI project.
Click the Finish button to complete the process. The following should be generated:
We will now drag and drop the following container and controls from the Palette on to our form:
a. Add a panel to the frame with “Flow Layout”.
b. Add two labels to the panel that displays Username and Password respectively.
c. Add a text field to the panel.
d. Add a Password field to the panel
e. Add a button to the panel with the name “Login”.
Drag the controls from the Palette pictured above.
****Continue designing your GUI application until it looks like the form below****
Next, double click on the “Login” button or click on the source tab and type the following code:
Finally run your application and enter the username (test) and the password (12345), click the
login button and you should see the following:
