Natividad Robin O.

BSIT-2B

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 MyCalculator as the project name. At the bottom,
uncheck "Create main class". This is because a main method will be created for
us by NetBeans 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 this (If you can't see the Projects area, click Window > Projects from the
NetBeans menu at the top):

Normally, there's a .java file under the Source Packages name. But because we
unchecked the "Create main class" box, there's no java class file there.

1
Natividad Robin O. BSIT-2B

What we'll 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:

right-click to add a new Java form

Select New > JFrame Form from the menu. When you do, you should see the
following wizard appear:

2
Natividad Robin O. BSIT-2B

Adding a new Java class

Here, you are being asked for a name for your Class, and a package name. We've
already created the project, and called it MyCalculator. The package name and
class will go into the project. So, for your Class Name type JavaCalculator.
In the blank package text box, type jCalculator. So we're creating a class
called JavaCalculator, which is in the jCalculator package, which is in the
MyCalculator project.

When the wizard from the previous section has finished, it will create a blank
form in the main window:

3
Natividad Robin O. BSIT-2B

A default blank form created with NetBeans

The form is a blank, at the moment, and has an orange rectangle surrounding
it. The orange rectangle means that the form is the currently selected object.
Click away and you'll see a blue rectangle instead. This means that the form
is not selected. Click back onto the form to select it, and you'll see the
orange rectangle again.

Note the two buttons at the top, Source and Design. You're in Design at the
moment. Click on Source to see the following code:

4
Natividad Robin O. BSIT-2B

The default code for a Java form in NetBeans

You can expand and contract the plus symbols to reveal and hide code. Notice,
though, that a main method has been created. When the programme starts it's
the main method that will be called. It's creating a new object from our form,
and setting its visible property to true.

But NetBeans generates all this code for you. Otherwise, you'd have to do it
all yourself!

Have a look at the Projects area on the left again. You'll see that a package
and a class file have been added:

5
Natividad Robin O. BSIT-2B

A Java class file has now been created

Click back on the Design button at the top. You'll see your blank form again.
To the right, you'll have noticed two areas: a Palette with a lot of controls
in it, and a Properties area. The Palette should look like this:

The NetBeans Control Palette

And the Properties area should look like this:

6
Natividad Robin O. BSIT-2B

The Properties window

(If you can't see them, click Window> Palette and Window > Properties from the
NetBeans menu.)

A property of an object is a list of the things you can do with it, like set
the background colour, set the text, set the font, and lots more. Let's change
the title.

Make sure your form is selected. If it is, it will be surrounded with an

Click inside of the title area and type Calculator:

7
Natividad Robin O. BSIT-2B

Changing the Title property of the Java form

Then press the enter key.

To see what effect changing the title property has, run your programme in the
usual way. When you run the programme for the first time, NetBeans will
display a dialogue box asking you which main method you want to use:

8
Natividad Robin O. BSIT-2B

Run Project, selecting a main method

You only have one, which is in your JavaCalculator class, so just click OK.
Your form should then appear:

9
Natividad Robin O. BSIT-2B

The Java form is now running

The form has the title you just typed, plus some default icons for minimize,
maximize and close. Click the X to close your programme, and return to the
Design environment.

Add a Text Box to a Java Form

What our form needs now is a text box and some buttons. Let's add the text box
first.

Locate the Text Field control in the Palette:

The Text Field control in the NetBeans Palette

10
Natividad Robin O. BSIT-2B

Controls in the NetBeans Palette can be dragged onto a form. So click on Text
Field to select it. Now hold you left mouse button down on the Text Field.
Keep it held down and drag the control onto the form:

A Text Filed being dragged on to a Java Form

Let go anywhere on the form:

A Text Field dropped on to the form

11
Natividad Robin O. BSIT-2B

The squares around the text field are sizing handles. You can hold down your
left mouse button on one of the squares and drag to a new width or height. The
dotted lines are position indicators, one for the left position and one for
the top position. Notice that the default name for the text field is
jTextField1. Let's change that.

With the text field selected, have a look at the Navigator area in the bottom
left: (If you can't see an Navigator area, click Window > Navigator from the
NetBeans menu bar.)

Inspector area showing a default Text Field

As you can see, jTextField1 is selected in the Navigator. This area shows you
what objects you have on your forms. You can also rename an object from here.
To do so, right click on jTextField1. From the menu that appears, select
Change Variable Name.

12
Natividad Robin O. BSIT-2B

Renaming a Java Text Field

When you click on Change Variable Name, a dialogue box appears. Type a new
name for the Text Field. Call it txtDisplay:

Type a new name for the Text Field

Click OK. When you do, NetBeans will rename your text field:

The Text Field has now been renamed

Now have a look at your code again by clicking the Source button in the main
window. When your code appears, scroll down to the bottom. You'll see that a
new private field variable has been added:

13
Natividad Robin O. BSIT-2B

Java code shows the name of the new Text Field

So a JTextField variable has been set up with the name txtDisplay. The
"javax.swing" part is a reference to a set of packages that are used for GUI
development. Swing makes it easier for you to create forms and the controls on
forms.

Click on the Design button at the top to return to your form. The text field
has some default text in, at the moment. You can add your own text by changing
the text property of the text field.

Make sure your text field is selected on the form. Now locate text in the
properties window:

14
Natividad Robin O. BSIT-2B

Default text for the Text Field property

Delete the default text of jTextField1 and leave it blank:

15
Natividad Robin O. BSIT-2B

Leave the text property blank

Then press the enter key on your keyboard. Have a look at your text field
object on the form. It may well have changed size. Use the sizing handles to
resize it. You'll see that it now has no text in it at all:

A blank text field on a Java form

16
Natividad Robin O. BSIT-2B

Add a Button to a Java Form

You add a button to a form in the same way you do for text fields - drag and
drop. However, as we're going to be adding lots of buttons, it's a good idea
to add the buttons to a control called a Panel. If you need to move the
buttons, you can then just move the Panel instead. All the buttons will then
move with the Panel.

So locate the Panel control in the Palette:

The Palette control in the NetBeans IDE

Drag one on to your form. You can't see a Panel, as they'll have the same
colour as the form. But you can select it:

17
Natividad Robin O. BSIT-2B

A Panel control has been added to the Java form

Drag the sizing handles so that the Panel fills most of the form:

The Panel has been resized

We can now add a button.

18
Natividad Robin O. BSIT-2B

Locate the Button control in the Palette:

The Button control

Drag one on to your Panel control:

19
Natividad Robin O. BSIT-2B

A button being dragged on to a Java form

You should then see a button with sizing handles and position lines:

A button dropped on to the form

The default name of the button is jButton1. Change this name just like you did
for the text field: right click in the Navigator area, and select Change
variable name. Change the name of the button to btnOne:

20
Natividad Robin O. BSIT-2B

Rename your button

The name of the button will have changed in the Navigator:

The button control in the Navigator area of NetBeans

A new line of code has also been added:

// Variables declaration

private javax.swing.JButton btnOn;

private javax.swing.JButton jPanel1;

private javax.swing.JTextField txtDisplay;

// End of variables declaration

Java Instance variables have been set up for the button and panel

The new variable name is btnOne, and it is a JButton object, which is a Swing
control. Note, too, that a variable has been set up for the panel (we've left
this on the default name).

21
Natividad Robin O. BSIT-2B

How to Change the Properties of a Button on a Java Form

Go back to Design view and make sure your button is selected. We can change
the text on the button. What we want is a number, one number for each button
on the calculator. The text property is used for button text. So locate this
property in the properties window. Delete the default and type the number 1
instead:

the Text property of a Java Button

Press the enter key on your keyboard and you should see the text change on
your button. It will also be resized:

22
Natividad Robin O. BSIT-2B

The button text has changed

You can change the size of the button in the properties window. Locate
Horizontal Size and Vertical Size, under the Layout heading:

The Size properties of buttons

Change these values from the default to 50, 30

23
Natividad Robin O. BSIT-2B

The Size properties have been changed

You can also change the font and font size in the properties window. Make sure
your button is selected. Now locate the font property. Click the small button
to the right of the font row:

The Font property of a Java button

24
Natividad Robin O. BSIT-2B

When you click the font button, you should see a dialogue box appear. Change
the font size to 14 points, and make it bold:

The Font dialogue box

Your form should now look like this (to see the outline of the panel, just
hover your mouse over it):

25
Natividad Robin O. BSIT-2B

The font has been changed on the button

You now need to add nine more buttons in the same way, for the numbers 2 to 9,
and a 0. Change each variable name to btnTwo, btnThree, btnFour, etc. Delete
the default text, and enter a number instead. Then change the size of each
button to 50, 30. Finally, change the font property of each button.

When you're finished, your Navigator area should look like this:

The number buttons in the Navigator area

(Note that the 0 button has the name btnZero.)

If your buttons are in the wrong place, click a button to select it. Hold down
your left mouse button. Keep it held down and drag to a new

26
Natividad Robin O. BSIT-2B

location in the panel. To move all the buttons at once, select the panel and
drag it to a new location:

Moving all the buttons at once

Only three more buttons to add: a plus button, an equals button, and a clear
button. We'll add these to a panel of their own, and move them to the right of
the calculator.

If your form calculator doesn't have any room on the right, you can easily
resize it.

Click on just the form, and not the panel or the text field. If you do it
right, you should see an orange rectangle surrounding the form. (You can
select the JFrame item in the Navigator to select your form.) Now move your
mouse to the edges of the form. The mouse pointer should change shape, as in
the image below (bottom right):

27
Natividad Robin O. BSIT-2B

The form objects aligned

Hold down your left mouse button when the pointer changes shape. Now drag to a
new size.

Add a panel in the space you've just created:

Resizing the form

Add three buttons to the new panel. Change the variables names to: btnPlus,
btnEquals, and btnClear. For the text for the buttons, type a + symbol for the

28
Natividad Robin O. BSIT-2B

Plus button, a = symbol for equals button, and the word "clear" for the clear
button. Change the font to the same as the number buttons, 14 point bold. The
size for the plus and equals button should be the same as the number buttons:
50, 30. For the Clear button, change it to 70, 30. Your form should then look

like this:

Three more buttons added to the form

The Navigator area of NetBeans should look like this:

29
Natividad Robin O. BSIT-2B

Navigator area showing all buttons objects

You can run your form at this stage, just to see what it looks like:

30
Natividad Robin O. BSIT-2B

Java Form Events

In Design view in NetBeans, select your number 1 button. Now have a look at
the Navigator window in the bottom left. Locate your btnOne button. Now right
click to see the following menu appear:

NetBeans context menu

Select Event from the menu. From the submenu, click on Action, and then
actionPerformed:

31
Natividad Robin O. BSIT-2B

Adding a button event

Writing code for the numbers buttons on our Java Calculator

Private void btnOneActionPerformed(java.awt.event.ActionEvent evt) {

32
Natividad Robin O. BSIT-2B

String btnOneText = textDisplay.getText() + btnOne.getText();

textDisplay.setText(btnOneText);

Private void btnTwoActionPerformed(java.awt.event.ActionEvent evt) {

String btnTwoText = textDisplay.getText() + btnTwo.getText();

textDisplay.setText(btnTwoText);

Private void btnThreeActionPerformed(java.awt.event.ActionEvent evt) {

String btnThreeText = textDisplay.getText() + btnThree.getText();

textDisplay.setText(btnThreeText);

Private void btnFourActionPerformed(java.awt.event.ActionEvent evt) {

String btnFourText = textDisplay.getText() + btnFour.getText();

textDisplay.setText(btnFourText);

Private void btnFiveActionPerformed(java.awt.event.ActionEvent evt) {

String btnFiveText = textDisplay.getText() + btnFive.getText();

textDisplay.setText(btnFiveText);

Private void btnSixActionPerformed(java.awt.event.ActionEvent evt) {

String btnSixText = textDisplay.getText() + btnSix.getText();

textDisplay.setText(btnSixText);

Private void btnSevenActionPerformed(java.awt.event.ActionEvent evt) {

String btnSevenText = textDisplay.getText() + btnSeven.getText();

textDisplay.setText(btnSevenText);

Private void btnEightActionPerformed(java.awt.event.ActionEvent evt) {

33
Natividad Robin O. BSIT-2B

String btnEightText = textDisplay.getText() + btnEight.getText();

textDisplay.setText(btnEightText);

Private void btnNineActionPerformed(java.awt.event.ActionEvent evt) {

String btnNineText = textDisplay.getText() + btnNine.getText();

textDisplay.setText(btnNineText);

Private void btnZeroActionPerformed(java.awt.event.ActionEvent evt) {

String btnZeroText = textDisplay.getText() + btnZero.getText();

textDisplay.setText(btnZeroText);

Plus Button

public class JavaCalculator extends javax.swing.JFrame{

String button_text = btnPlus.getText();

getOperator(button_text);

Minus Button

public class JavaCalculator extends javax.swing.JFrame{

String button_text = btnMinus.getText();

getOperator(button_text);

Divide Button

public class JavaCalculator extends javax.swing.JFrame{

String button_text = btnDivide.getText();

getOperator(button_text);

Multiply Button

public class JavaCalculator extends javax.swing.JFrame{

34
Natividad Robin O. BSIT-2B

String button_text = btnMultiply.getText();

getOperator(button_text);

Equals Button

public class JavaCalculator extends javax.swing.JFrame{

private double total1 = 0.0;

private double total2 = 0.0;

private char math_operator;

total2 = total1 + Double.parseDouble( txtDisplay.getText( ) ) ;

switch ( math_operator ) {

case '+':

total2 = total1 + Double.parseDouble(txtDisplay.getText( ) );

break;

case '-':

total2 = total1 -Double.parseDouble(txtDisplay.getText( ) );

break;

case '/':

total2 = total1 /Double.parseDouble(txtDisplay.getText( ) );

break;

case '*':

total2 = total1 * Double.parseDouble(txtDisplay.getText( ) );

break;

txtDisplay.setText( Double.toString(total2) );

total1 = 0;

Clear Button

public class JavaCalculator extends javax.swing.JFrame{

35
Natividad Robin O. BSIT-2B

total2 = 0;

txtDisplay.setText("");

Public JavaCalculator() {

36