H/W How to make a GUI 18/10/14

BY EUAN SARSON (10W)

In a word document / ppt (you pick):

1. Explain WHAT a GUI is
2. Explain HOW you would make one - step by step!
3. Show some evidence of what you have made (i.e. screenshots)
What is a GUI?
GUI stands for "Graphical User Interface. It refers to the graphical interface of a
computer that allows users to click and drag objects with a mouse instead of
entering text at a command line. Two of the most popular operating systems,
Windows and the Mac OS, are GUI-based. The graphical user interface was first
introduced to the public by Apple with the Macintosh in 1984. However, the idea
was actually taken from an earlier user interface developed by Xerox.
How would you make a GUI?
How to use JOptionPane
Java has a built in class that stores all the components you need. You just need to
tell it where to put it, what to do with it and they are created using different
methods. This particular method is called the JOptionPane class.
Firstly import the entire class:

Now we have access to it.
In the following you will learn how to create a program where you enter a
number in one box and then enter a second number in another box and it adds
them together.
Set a String equal to first number now call the class which is
JOptionPane.showInputDialog(message);
This one parameter the message, is what you are going to tell the user to do.
So now whatever the user enters, is going to be stored in the variable first number.

Now we need a second number so copy and paste this bit of code on to the next
line. Change the first number (fn) to be second number (sn) and change the
message to Enter second number.
Now every time the user enters a number showInputDialog only is able to get a
string. So we need to tell java that instead as viewing this as a string we want to
view it as an integer so that we can do some maths with it.
So simply convert the variables to integers.
Type:

So whatever we type into the brackets, stores it as an integer as num1. So put fn in
the brackets so that the string is taken and converts it into a real number.
Do the same for second number.

The last thing we need to do is show the sum.
Type:

Now we can display this, using showMessageDialog.
Its different to showInputDialog which is for inputting messages for displaying.
Type:

This takes four parameters. The first one is where it is positioned, null tells it to
be in the middle of the screen, the next is for what you want to say, the third is
what you want to appear on the title bar, the fourth is the message that is going to
pop up.
Type:

The Final code:

Run the program:
It should go as follows:
1. Press
2.
3.
4.