Adding Two Numbers: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
No edit summary
No edit summary
Line 19: Line 19:




== Adding Two Numbers Using MessageBox ==  
== Adding Two Numbers Using MsgBox ==  


To demonstrate how simple it is to create a program to add two numbers together, we will enter code to add two numbers and display the answer in a MessageBox.
To demonstrate how simple it is to create a program to add two numbers together, we will enter code to add two numbers and display the answer in a MsgBox.


=== Creating the Code ===
=== Creating the Code ===
Line 27: Line 27:
First we declare three variables to hold our values:
First we declare three variables to hold our values:


FirstNumber, contains the first half of our math equation
* ''FirstNumber'', contains the first half of our math equation
SecondNumber, contains the second half of our math equation
* ''SecondNumber'', contains the second half of our math equation
Total, contains the answer
* ''Total'', contains the answer
Next we set FirstNumber to equal 10 and SecondNumber to 7.


We then add the two numbers and store the result in Total.
Next we set ''FirstNumber'' to equal 10 and ''SecondNumber'' to 7.


Finally, we display the result in a MessageBox using the CStr function to convert the number into a string we can display.
We then add the two numbers and store the result in ''Total''.
 
Finally, we display the result in a MsgBox using the CStr function to convert the number into a string we can display.


Your code should look like the following:
Your code should look like the following:
Line 75: Line 76:
Start App Studio from the Start menu. It will open the program you entered previously, Add2MsgBox.nsx. Select File and New Project, save it under the name Add2Form.nsx.
Start App Studio from the Start menu. It will open the program you entered previously, Add2MsgBox.nsx. Select File and New Project, save it under the name Add2Form.nsx.


=== Add a text box for entering the first number ===
Add a text box for entering the first number.
 
* Click on the TextBox object in the Toolbox ("ab" icon). This creates a new TextBox near the top left corner of the form, surrounded by a red border.
Click on the TextBox object in the Toolbox ("ab" icon). This creates a new TextBox near the top left corner of the form, surrounded by a red border.
* In the Properties window, change the id to "txtFirstNo".
In the Properties window, change the id to "txtFirstNo".
* In the Properties window change the inputType to number.
In the Properties window change the inputType to number.
* Use the mouse to change the size of the TextBox and reposition it on the form.
Use the mouse to change the size of the TextBox and reposition it on the form.
* Add a text label before the first number:
Add a text label before the first number:


Click on the label object in the Toolbox ("A" icon). A new label object will show in the top left corner of the form.
Click on the label object in the Toolbox ("A" icon). A new label object will show in the top left corner of the form.
Move it on the form before the text box. It should remain selected, shown by the red border; if not click on it to select.
* Move it on the form before the text box. It should remain selected, shown by the red border; if not click on it to select.
In the Properties window, change the id to "lblFirstNo" (This is optional since we will not need to refer to it in our program.)
* In the Properties window, change the id to "lblFirstNo" (This is optional since we will not need to refer to it in our program.)
In the Properties window, change the text to "First Number". Adjust the size of the label so that the text displays in 1 row.
* In the Properties window, change the text to "First Number". Adjust the size of the label so that the text displays in 1 row.
Add a text box for entering the second number:
* Add a text box for entering the second number:


Drag a TextBox object from the ToolBox to the Design Screen.
Drag a TextBox object from the ToolBox to the Design Screen.
In the Properties window, change the id to "txtSecondNo".
* In the Properties window, change the id to "txtSecondNo".
In the Properties window change the inputType to number.
* In the Properties window change the inputType to number.
Use the mouse to change the size of the TextBox and reposition it on the form.
* Use the mouse to change the size of the TextBox and reposition it on the form.
Add a text label before the second number:
* Add a text label before the second number:


Drag a Label object from the ToolBox to the Design Screen.
Drag a Label object from the ToolBox to the Design Screen.
Place it on the form before the text box. It should remain selected, shown by the red border; if not click on it to select.
* Place it on the form before the text box. It should remain selected, shown by the red border; if not click on it to select.
In the Properties window, change the Name to "lblSecondNo" (This is optional since we will not need to refer to it in our program.)
* In the Properties window, change the Name to "lblSecondNo" (This is optional since we will not need to refer to it in our program.)
In the Properties window, change the text to "Second Number". Adjust the size of the label so that the text displays in 1 row.
* In the Properties window, change the text to "Second Number". Adjust the size of the label so that the text displays in 1 row.
Add a text box for displaying the Total:
* Add a text box for displaying the Total:


Drag a TextBox object from the ToolBox to the Design Screen.
Drag a TextBox object from the ToolBox to the Design Screen.
In the Properties window, change the id to "txtTotal".
* In the Properties window, change the id to "txtTotal".
Scroll down in the Properties Window and change the value of readonly in the drop down box to readonly="readonly" (sets the readOnly property of the field to truemaking it read-only)
* Scroll down in the Properties Window and change the value of readonly in the drop down box to readonly="readonly" (sets the readOnly property of the field to truemaking it read-only)
In the Properties Window delete the value of placeholder
* In the Properties Window delete the value of placeholder
Use the mouse to expand the size of the TextBox and reposition on the form.
* Use the mouse to expand the size of the TextBox and reposition on the form.
Add a label before the Total field:
* Add a label before the Total field:


Drag a Label object from the ToolBox to the Design Screen.
Drag a Label object from the ToolBox to the Design Screen.
Using the mouse, move it on the form before the text box and click on it to select it if it isn't selected already.
* Using the mouse, move it on the form before the text box and click on it to select it if it isn't selected already.
In the Properties Window, change the id to "lblTotal" (optional)
* In the Properties Window, change the id to "lblTotal" (optional)
In the Properties window, change the text to "Total ="
* In the Properties window, change the text to "Total ="
Expand the label to hold the text
* Expand the label to hold the text
Add a button to add the two numbers:
* Add a button to add the two numbers:


Drag a Button object from the ToolBox to the Design Screen.
Drag a Button object from the ToolBox to the Design Screen.
In the Properties window, change the id to "cmdAdd".
* In the Properties window, change the id to "cmdAdd".
In the Properties window, change the value to "Add". This is the text that's shown on the button.
* In the Properties window, change the value to "Add". This is the text that's shown on the button.
Use the mouse to expand the size of the CommandButton to display the text all on the same line and reposition on the form.
* Use the mouse to expand the size of the CommandButton to display the text all on the same line and reposition on the form.





Revision as of 14:56, 11 November 2012

Introduction

The purpose of this tutorial is to demonstrate simply adding two numbers together using App Studio. You should have completed Tutorial #1 before beginning this tutorial.

The program to be developed will start out adding two numbers and displaying the answer in a message box. After that we will create a program that allows the user to enter the two numbers on a form and display the answer when the Add button is clicked.

Getting Started

  • Start App Studio from the Start menu.
  • At the initial screen select New Project dialog box, with the following settings:
    1. Framework should be Classic.
    2. Form factor should be iPhone/iPad/Nexus
    3. Name is Add2MsgBox.nsx
    4. Language is BASIC
    5. Then click on Code at the top of the Project Explorer window on the right. This will open a code window.

The form and the code below Form1 won't be used in this example.


Adding Two Numbers Using MsgBox

To demonstrate how simple it is to create a program to add two numbers together, we will enter code to add two numbers and display the answer in a MsgBox.

Creating the Code

First we declare three variables to hold our values:

  • FirstNumber, contains the first half of our math equation
  • SecondNumber, contains the second half of our math equation
  • Total, contains the answer

Next we set FirstNumber to equal 10 and SecondNumber to 7.

We then add the two numbers and store the result in Total.

Finally, we display the result in a MsgBox using the CStr function to convert the number into a string we can display.

Your code should look like the following:

Sub Main
   Dim FirstNumber
   Dim SecondNumber
   Dim Total
   
   FirstNumber = 10
   SecondNumber = 7
   
   Total = FirstNumber + SecondNumber
      
   MsgBox "And the total is: " + CStr(Total)
   
End Sub

Saving the Project

Save the project by selecting File from the top menu and select Save Project, or click on the disk symbol in the toolbar.

Testing the Program

Select Start in Desktop Browser from the Run menu (or press F5, or click on the Start in Desktop Browser button in the toolbar).


If you deploy this program to an iPhone, it will look like this:


Tip: You can make the MsgBox look better by using NSB.MsgBox.

Adding Two Numbers Using a Form

Displaying the total of two fixed numbers in a MessageBox is not very practical since you need to modify the program every time you want to change the numbers. We will create a new version of the program that will allow the user to enter the numbers on a form and display the total when the user clicks a button.

Creating the Form

Start App Studio from the Start menu. It will open the program you entered previously, Add2MsgBox.nsx. Select File and New Project, save it under the name Add2Form.nsx.

Add a text box for entering the first number.

  • Click on the TextBox object in the Toolbox ("ab" icon). This creates a new TextBox near the top left corner of the form, surrounded by a red border.
  • In the Properties window, change the id to "txtFirstNo".
  • In the Properties window change the inputType to number.
  • Use the mouse to change the size of the TextBox and reposition it on the form.
  • Add a text label before the first number:

Click on the label object in the Toolbox ("A" icon). A new label object will show in the top left corner of the form.

  • Move it on the form before the text box. It should remain selected, shown by the red border; if not click on it to select.
  • In the Properties window, change the id to "lblFirstNo" (This is optional since we will not need to refer to it in our program.)
  • In the Properties window, change the text to "First Number". Adjust the size of the label so that the text displays in 1 row.
  • Add a text box for entering the second number:

Drag a TextBox object from the ToolBox to the Design Screen.

  • In the Properties window, change the id to "txtSecondNo".
  • In the Properties window change the inputType to number.
  • Use the mouse to change the size of the TextBox and reposition it on the form.
  • Add a text label before the second number:

Drag a Label object from the ToolBox to the Design Screen.

  • Place it on the form before the text box. It should remain selected, shown by the red border; if not click on it to select.
  • In the Properties window, change the Name to "lblSecondNo" (This is optional since we will not need to refer to it in our program.)
  • In the Properties window, change the text to "Second Number". Adjust the size of the label so that the text displays in 1 row.
  • Add a text box for displaying the Total:

Drag a TextBox object from the ToolBox to the Design Screen.

  • In the Properties window, change the id to "txtTotal".
  • Scroll down in the Properties Window and change the value of readonly in the drop down box to readonly="readonly" (sets the readOnly property of the field to truemaking it read-only)
  • In the Properties Window delete the value of placeholder
  • Use the mouse to expand the size of the TextBox and reposition on the form.
  • Add a label before the Total field:

Drag a Label object from the ToolBox to the Design Screen.

  • Using the mouse, move it on the form before the text box and click on it to select it if it isn't selected already.
  • In the Properties Window, change the id to "lblTotal" (optional)
  • In the Properties window, change the text to "Total ="
  • Expand the label to hold the text
  • Add a button to add the two numbers:

Drag a Button object from the ToolBox to the Design Screen.

  • In the Properties window, change the id to "cmdAdd".
  • In the Properties window, change the value to "Add". This is the text that's shown on the button.
  • Use the mouse to expand the size of the CommandButton to display the text all on the same line and reposition on the form.


Saving the Project

Save the project by selecting File from the top main and select Save Project.

Testing the Form

At this point we have a finished form but have not entered any code to actually add the numbers and display the results. You can run the program to see how the form will appear on a device or in the browser. You may find that some tweaks are needed in the size and position of some of the controls and labels.

Select Start in Desktop Browser from the Run menu, or click on the Start in Desktop Browser button, the rightmost symbol in the toolbar. Note: As a shortcut, you can use F5 to Start the program.

If you deploy this program to an iPhone, it will look like this:


Creating the Code

We are now ready to add code to our form to make it actually do some work. We will use the same variables we declared in our first example but read their values from the fields entered by the user. Reading the user's input and adding the numbers will be performed when the user clicks on the Add button.

NS Basic will automatically open the Code Window and generate the Add button subroutine when you select the drop down box onclick in the properties window of the button. You can also open the Code Window by clicking on Code under Form1 in the Project Explorer.

Enter the code so it looks like the following screen.

Sub cmdAdd_onclick() 
  Dim FirstNumber
  Dim SecondNumber
  Dim Total

  FirstNumber  = CSng(txtFirstNo.value)
  SecondNumber = CSng(txtSecondNo.value)
  Total = FirstNumber + SecondNumber

  txtTotal.value = Total
End Sub

The CSng function is used to convert the number string the user enters into a single precision number.

Note: The code uses variables to hold the user's numbers and the total. You could also eliminate all the variables by directly accessing the fields and not storing anything.

txtTotal.value = CSng(txtFirstNo.value) + CSng(txtSecondNo.value)

Either way works but I feel the program is easier to understand when the variables are used.

Testing the Program

Select Start in Desktop Browser from the Run menu (or press F5).


There are three TextBox fields on the form. The first two accept user input and the third (Total) has its readonly property set to readonly, making it a read-only field. This property can be set in the Property window.

Error Checking

The above program is very simple in terms of its function and lack of any type of error checking. As an additional exercise, code was added to verify that the user has entered the proper values when the Add button is clicked. The IsNumeric function is used to verify that the user has entered a proper number into both text box fields. An error message is displayed if the field is left blank or does not contain a valid number. Setting the textbox type to number switches the keyboard to numbers initially, but it is possible to switch it to letter input! Or the user might be using an external keyboard, which would also allow him to enter letters into the numeric fields.

The final program with error checking:

Sub cmdAdd_Click()
   Dim FirstNumber
   Dim SecondNumber
   Dim Total

   If Not IsNumeric(txtFirstNo.value) or txtFirstNo.value="" Then
      MsgBox "First Number must be a number!",0
      Exit Sub
   End If

   If Not IsNumeric(txtSecondNo.value) Then
      MsgBox "Second Number must be a number!",0
      Exit Sub
   End If
         
   FirstNumber  = CSng(txtFirstNo.value)
   SecondNumber = CSng(txtSecondNo.value)
   
   Total = FirstNumber + SecondNumber
   
   txtTotal.value = Total
End Sub