Tip:
Highlight text to annotate it
X
In this video, we’ll make a very simple GUI using NetBeans that adds and subtracts numbers.
We begin by creating a NetBeans project.
I’ll pick a Java Application.
You can select Java Desktop Application,
but that adds a status bar and other things I don’t want.
I’ll name the project SimpleCalculator,
and delete the project name from the beginning of the main class name.
At this point, I have a main class, with a main method.
I’ll need a separate class for the GUI,
so I add a new file to the project, and select Swing GUI Forms and JFrame Form.
Swing is a newer framework for GUIs than AWT,
and I think it is much better designed.
For the class name, I’ll pick “CalculatorForm” and press finish.
On the right, you’ll see a large palette of things I can add to my form.
We’ll need places to enter the numbers, so I’ll add two text fields.
You’ll note that NetBeans helps me line up the two boxes.
Now I can click on the right edge and make them bigger.
Again, NetBeans helps me make the second one the same size as the first.
A good user interface will tell the user what they are supposed to put in the boxes,
so I’ll add a couple of labels.
To change the text in the labels from “jLabel1” and “jLabel2”,
I need to modify the properties.
On the right side, I have a window for this.
Scrolling down to the “text” property, I can change the text.
The text fields have text in them that I don’t want,
and I can get rid of this by deleting what is in their text properties.
The window itself will have a title, even though you can see it right now.
I’ll click on the background to get to the properties of the frame.
Near the top, I can add the title of “Simple Calculator”.
Next I’ll add a couple of buttons for addition and subtraction.
Again, I will change the text property of these to be “ ” and “-“.
Just below that, you’ll see “toolTipText”,
which is what is displayed when you hover over the button with the mouse.
I’ll add some text here saying “add” and “subtract”.
Now I need a place for the answer. Again, I’ll use a label.
I set the text property to “The answer is:”.
The answer is pretty important, so I’ll make the font bigger.
Moving up to font, I click on it,
which brings up a dialog where I can select a font type, style and size.
Let’s go with Script, bold and 24 point font.
I’ll now drag the right edge over to make room for the answer.
OK, now we’re ready to make something happen when they push a button.
Clicking on the plus button, we’ll pick “code” in the properties window.
Here’s where I can change the name of the variable for the button to something more meaningful,
like “plusButton”.
Remember by convention, you don’t capitalize the first letter of a variable name.
I’ll go ahead and give meaningful names to the two text fields and the answer label.
Back to plus.
Also in the properties, we have events.
You might be tempted to pick the “mouseClicked” event,
but “actionPerformed” happens happens both when the mouse is clicked
and when you use the spacebar to push the button, so I’ll pick that.
Clicking the down arrow, it suggests a name of “plusButtonActionPerformed”
and when I pick this, it switches me to code view with the method ready for me to add code.
I’ll add code to parse the text from the two text fields into integer variables.
Since the user might not type a valid number, I’ll add a try-catch block.
If the number is bad, I’ll display an error dialog.
This can be done with the static method showMessageDialog from the JOptionPane class.
The parentComponent is this, the message will be “bad first number”,
the title will be “Error” and the message type is the constant ERROR_MESSAGE.
Note that I have a red exclamation point.
It can’t find JOptionPane.
Clicking on the lightbulb, I can have NetBeans add the import for me.
And if there is an error, I want to return and not try to compute an answer.
Now I can copy and paste this and do the second number.
I need to change the error message, the variable name, and also which text field I’m reading.
Now I can make the answer be number1 plus number2.
But I have an error again! This is because number1
and number2 were declared inside the try-catch blocks,
and go away when the try-catch is over.
To fix this, I’ll declare number1 and number2 at the beginning of the method.
Now we’re almost done!
All that’s left is to display the answer.
I’ll set the text of the answer field.
Now I can switch back to design view and do the same for minus.
Copy and paste the code.
Use Source, format to make it look pretty, and change the plus to minus.
Now we’ll run the program.
Nothing happened!
This is because I forgot to actually make a CalculatorForm.
Going to main, I add a variable of type CalculatorForm,
call the constructor, and then use the setVisible method to make sure the form is displayed.
Running it again, if I put something bad in the first number and push plus,
you can see the error.
But, if I put in a couple of good numbers in, then the right thing happens.