User:White Owl Hovering/sandbox

= NetBean Project - How to create a Calculator =

Theory behind the Calculator project
This is a fun simple little project to start getting the grasp of how programming works.

We all use calculators in our every day life but I'm sure you have never bothered to thing about how they are programed.

I hope by the end of this project you will stop thinking of programing as technological magic and start to see the logic behind the programming script.

The Basic concept of the program:

 * 1) The program first takes the value of the first number (X) and stores that value in the programs memory under the label 'X'.
 * 2) It then takes the value of the second number (Y) and stores that value in the programs memory under the label 'Y'.
 * 3) Next it inputs the two values into the equation you have selected. for example (if you picked the + symbol then the program will add the two values together.)
 * 4) The last step of the program is that it will get the result of the equation and then display that on screen for the user to then read.

Graphical Setup
Begin by opening your Java NetBeans program and create a new project. In that new project create a new JFrame Form and name it 'Calculator'.

You should should now see a grey blank rectangle, this is you graphical display for your program. Don't worry too much about looks for now I will run through customizing later.

First thing to add to the Graphical Display is a title. Over on the right side of the screen under the title 'Swing Controls' you will see a button labeled ' Label '. Move your mouse over your screen and click where you would like to place the Label.

Underneath the title click the text Field button and then click on the screen below the ' Calculator ' label. Left click the text field and select the '  Edit Text .' Delete all the text inside the field so the field is then completely blank. Then left click again and select the '' Change Variable Name.. '', replace the text with the Name ' txtX '.

Underneath the first Text field create a second and set the variable name to ' txtY '. Leave a gap for the buttons and then add another blank text field calling this one ' txtTotal .'

In this gap you have just left between text field Y and text field Total, we are going to add some buttons. The buttons tab is in the same place as the text field and you place them on your screen in the same fashion. Place four small ones all in a row. Left click the first one, select edit text and Put' + (Add).' Change the variable name to ' btnAdd.' Do the same for the second so it displays ' - (Minus) ' and is labeled ' btnMinus.' Same for the third one so it displays ' X (Times) ' and is labeled ' btnTimes.' And finaly for the last one ' / (Divide) ' and is labeled ' btnDivide.'

Programming the Buttons
Now that the graphical side of you calculator is complete we can get to the programming side of this project.

Double click the first button you have created and you should notice the screen will change. This screen is where the source code of the calculator will go. Up the top of the screen you will notice the tab has changed from ' Design ' into ' Source '.

Click the ' Design ' Tab and then double click on the next button. keep doing this till all the buttons have been clicked and then select the ' Source ' Tab. You did this because Netbeans is a helpfull little program and by clicking on the buttons you have created a home for your data to go.

If you scroll down the source page you will see this 'home' about half way down the page. You should notice some code that is highlighted in grey and the have the code " Private void btn( Name of your button )...". Bellow this is where your code will go and is currently occupied by a comment. Comments always start with a double forward slash (//), displays in light grey text and doesn't effect the program.

Delete this comment and replace it with the code provided before:

Type this code for all four buttons, making sure you type this code correctly including the case.

You should have notice in the code that there is a question mark (?) between x and y. Replace that question mark with the correct symbol for the button you are programming (+ for Add, - for Minus, / for Divide and * for Times).

Testing the Code
You are now ready for your first test but don't crack out the bubbly just yet. Programming is all about writting a little bit of code checking it and then amending the program.

On the left hand of the screen there is your project with the extention ' .JAVA '. Left click your project and then click ' Run File '. Type in some numbers and check that the calculator is working correctly.

Now type the numbers in as text instead of numeric values (One instead of 1). Notice that this Program doesn't like that at all.

Error Checking Code
To stop the Calculator crashing ever time it doesn't like the input we enter Error Checking Code. This code is encases the code you have already written and helps it run more smoothly.

Go back into the source code of your calculator and locate where you enter the code for each button. Now we are going to change the code so it looks like the example bellow:

Type this in for each of the buttons and then test your program again. You should notice that if there is a problem it will display this error code instead of crashing.

Customising the Graphical Display
Congradulations you now have a Working Calculator but you have to admit its a little plain.

Go back into the 'Display' Tab, left click the background and select ' Properties '.

The second box from the top is the title box. You can give your Calculator a title that will be displayed at the top of the programs window (just like the [JFrame] - Properties ontop of the screen).

Three lines bellow the title is the Background settings. Click on the '...' at the end of the line and from that screen you can change the color of the background display.

Close the Properties screen when you have finished messing with the settings. Another customization I would like to recomend is to enable the resizable feature of NetBeans. One the screen you will notice that there are some spaces that are darken and are seperating different parts of your design. Double click 'Spaces' around the edge of the program and click the ' Resizable ' checkbox.