NSB App Studio - User contributions [en]

Multiple Forms

2016-12-02T20:33:21Z

Debinbrier: /* Create Objects for Form 1 */

== Purpose ==

The purpose of this tutorial is to help learn a few more NS Basic/App Studio programming techniques. You should complete Tutorial #1 before beginning this tutorial. In this tutorial, the techniques of using multiple forms and Select controls will be covered.

=== Description of the Program ===

The program to be developed has two forms. Form #1 allows the user to enter a birth date and name. Form #2 shows the values of the previously entered birth date and name plus it tells on what day of the week the birth date occurred. There is a Title Bar and a button on each form that will switch between forms.

== Program Development ==

=== Startup ===

# Start AppStudio from the Start menu.
# At the initial screen select New Project dialog box, with the following settings:
# Form factor should be iPhone/iPad/Nexus.
# Language is BASIC.

[[File:TT01.03.JPG]] 

=== Create Objects for Form 1 ===

# Add a Title Bar (HeaderBar located under Jquery Mobile) for form1. In the properties window, set the leftButtonPos to "none", the leftButtonName to blank and change rightButtonName to "Next". Change the title to "Page 1" and put Form2 in changeform.
# Drag a label to the desired location and make it wider.
# Set its textContent in the Properties window to "Please Enter Your Name".
# Add a TextBox. It should name itself TextBox1. In this tutorial, we rename it to Text1.
# Add 4 more labels with textContent of "Enter Your Birthday","Select Month","Select Day" and "Select Year". There are some prettier date pickers we could have used, but we would learn less...
# Add 3 Select controls, drag into position and resize.
# Finally add a Button to the form. Resize and change the value property to read "Show Day of The Week".

Form 1 should now look like this:

[[File:TT02.02.png]] 

=== Add a new form ===

On the IDE menu select "Project" followed by "Add Form".

=== Create Objects for Form 2 ===

# Add a Title Bar (HeaderBar) for form2. In the Properties Window set the rightButtonIconPos to "none", the rightButtonName to blank and change leftButtonName to "Prev". Set the Title to Page 2. Set leftChangeForm to Form1.
# Add 3 labels, drag into position and resize.
# In the properties for each label change the Text property to "Welcome", "Your Birthday is" and "Your Birthday is on".
# Now add 3 Text boxes and drag into position.
# Lastly add a Button. Resize and change the value to read "Return to previous Page". Set changeform to Form1.

Form 2 should look like this:
[[File:TT02.03.png]] 

We have completed the visual design of our program so now it's time to add code to make it do something.

We can actually run the program now. Choose Run...Start in Desktop Browser.
It runs in your default browser: we recommend using Chrome or Safari, as these support the WebKit extensions which mobile devices use.
We could even run this on a device, but let's do a bit more first...

=== Add code to Form 1 ===

Open the code window for Form1 from the Project Explorer window and enter the following code:
<pre>
' Form1 Code
Dim birthday, dayofweek
Dim a,b,c

Sub Main()
Select1.clear()
For i=0 To 11
Select1.addItem(i+1)
Next
Select2.clear()
For i=0 To 30
Select2.addItem(i+1)
Next
Select3.clear()
For i=0 To 110
Select3.addItem(i+1900)
Next
End Sub
</pre>

The 3 Select control loops above set up the Months 1 to 12, the Days 1 to 31 and the Years 1900 to 2010.
<pre>
' Check to see if Select has recieved an input
' Select (combo box) for month
Function Select1_onchange()
a=Select1.selectedItem()
'MsgBox "selectedIndex is " & Select1.selectedIndex() & " with value " & a
End Function

Function Select2_onchange()
' Select (combo box) for day
b=Select2.selectedItem()
'MsgBox "selectedIndex is " & Select2.selectedIndex() & " with value " & b
End Function

Function Select3_onchange()
' Select (combo box) for year
c=Select3.selectedItem()
'MsgBox "selectedIndex is " & Select3.selectedIndex() & " with value " & c
End Function

</pre>
The three above functions assign the selections from the ComboBoxes to three variables a, b and c.

<pre>
Function Button1_onclick()
birthday = a & "/ " & b & "/ " & c
'MsgBox "Birthday = " & birthday
TextBox1.value = Text1.value
TextBox2.value = birthday
dayofweek = Weekday(birthday)
'MsgBox "Day of Week = " & dayofweek
TextBox3.value = WeekdayName (dayofweek)
ChangeForm(Form2)
End Function
</pre>

When Button1 is clicked, the following happens.

* The values of a, b and c are concatenated together with "/ " to form MM/ DD/ YYYY which is assigned to birthday.
* The internal WeekDay function is called and the Weekday value is assigned to dayofweek.
* The internal WeekdayName function is called and the WeekDayName value is assisgned to Text4 which will appear on the form2.
* Form1 is hidden and Form2 appears.

=== Save the project ===

From the IDE menu select "File" then "Save Project" or "Ctrl S" or the Save Icon from the Tool Bar.

=== Run the program ===

We can run the program again. Choose Run...Start in Desktop Browser.
If all goes well the forms should appear similar to those shown below.

[[File:TT02.04.png]] 

=== Deploy the App ===

Congratulations...
The only thing left to do is deploy the program.

Adding Two Numbers

2016-11-22T16:08:47Z

Debinbrier: /* Error Checking */

== 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 AppStudio from the Start menu.
* At the initial screen select New Project dialog box, with the following settings:
*# Form factor should be iPhone/iPad/Nexus
*# Language is BASIC
*# 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.

[[File:TT01.03.JPG]] 

== 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.

Your code should look like the following:
<pre>
Sub Main
Dim FirstNumber
Dim SecondNumber
Dim Total

FirstNumber = 10
SecondNumber = 7

Total = FirstNumber + SecondNumber

MsgBox "And the total is: " & Total

End Sub
</pre>

[[File:TT03.2.png]] 

=== 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).

[[File:TT03.3a.png]] 
If you deploy this program to an iPhone, it will look like this:

[[File:TT03.3b.png]] 
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 ("Tb" icon). This is located under JQuery Mobile. 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 ("Lb" icon). This is located under Common. 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.

[[File:TT03.4.png]] 

=== 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.
* As a shortcut, you can use F5 to Start the program.

[[File:TT03.5.png]] 

=== 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.

App Studio will automatically open the Code Window and generate the Add button subroutine when you select the Events drop down box in the properties window of the button and choose 'onclick'. 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.
<pre>
Sub cmdAdd_onclick()
Dim FirstNumber
Dim SecondNumber
Dim Total

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

txtTotal.value = Total
End Sub
</pre>

[[File:TT03.6.png]] 
The Number function is used to convert the string the user enters into a 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.
<pre>
txtTotal.value = Number(txtFirstNo.value) + Number(txtSecondNo.value)
</pre>

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).

[[File:TT03.7.png]] 
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:

<pre>
Sub cmdAdd_onClick()
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) or txtSecondNo.value="" Then
MsgBox "Second Number must be a number!",0
Exit Sub
End If

FirstNumber = Number(txtFirstNo.value)
SecondNumber = Number(txtSecondNo.value)

Total = FirstNumber + SecondNumber

txtTotal.value = Total
End Sub
</pre>

[[File:TT03.8.png]]

Adding Two Numbers

2016-11-22T16:06:21Z

Debinbrier: /* Creating the Form */

== 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 AppStudio from the Start menu.
* At the initial screen select New Project dialog box, with the following settings:
*# Form factor should be iPhone/iPad/Nexus
*# Language is BASIC
*# 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.

[[File:TT01.03.JPG]] 

== 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.

Your code should look like the following:
<pre>
Sub Main
Dim FirstNumber
Dim SecondNumber
Dim Total

FirstNumber = 10
SecondNumber = 7

Total = FirstNumber + SecondNumber

MsgBox "And the total is: " & Total

End Sub
</pre>

[[File:TT03.2.png]] 

=== 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).

[[File:TT03.3a.png]] 
If you deploy this program to an iPhone, it will look like this:

[[File:TT03.3b.png]] 
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 ("Tb" icon). This is located under JQuery Mobile. 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 ("Lb" icon). This is located under Common. 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.

[[File:TT03.4.png]] 

=== 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.
* As a shortcut, you can use F5 to Start the program.

[[File:TT03.5.png]] 

=== 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.

App Studio will automatically open the Code Window and generate the Add button subroutine when you select the Events drop down box in the properties window of the button and choose 'onclick'. 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.
<pre>
Sub cmdAdd_onclick()
Dim FirstNumber
Dim SecondNumber
Dim Total

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

txtTotal.value = Total
End Sub
</pre>

[[File:TT03.6.png]] 
The Number function is used to convert the string the user enters into a 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.
<pre>
txtTotal.value = Number(txtFirstNo.value) + Number(txtSecondNo.value)
</pre>

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).

[[File:TT03.7.png]] 
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:

<pre>
Sub cmdAdd_onClick()
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 = Number(txtFirstNo.value)
SecondNumber = Number(txtSecondNo.value)

Total = FirstNumber + SecondNumber

txtTotal.value = Total
End Sub
</pre>

[[File:TT03.8.png]]

Adding Two Numbers

2016-11-22T16:05:17Z

Debinbrier: /* Creating the Form */

== 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 AppStudio from the Start menu.
* At the initial screen select New Project dialog box, with the following settings:
*# Form factor should be iPhone/iPad/Nexus
*# Language is BASIC
*# 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.

[[File:TT01.03.JPG]] 

== 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.

Your code should look like the following:
<pre>
Sub Main
Dim FirstNumber
Dim SecondNumber
Dim Total

FirstNumber = 10
SecondNumber = 7

Total = FirstNumber + SecondNumber

MsgBox "And the total is: " & Total

End Sub
</pre>

[[File:TT03.2.png]] 

=== 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).

[[File:TT03.3a.png]] 
If you deploy this program to an iPhone, it will look like this:

[[File:TT03.3b.png]] 
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 ("Tb" icon). This is located under JQuery Mobile. 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. This is located under Common.
* 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.

[[File:TT03.4.png]] 

=== 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.
* As a shortcut, you can use F5 to Start the program.

[[File:TT03.5.png]] 

=== 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.

App Studio will automatically open the Code Window and generate the Add button subroutine when you select the Events drop down box in the properties window of the button and choose 'onclick'. 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.
<pre>
Sub cmdAdd_onclick()
Dim FirstNumber
Dim SecondNumber
Dim Total

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

txtTotal.value = Total
End Sub
</pre>

[[File:TT03.6.png]] 
The Number function is used to convert the string the user enters into a 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.
<pre>
txtTotal.value = Number(txtFirstNo.value) + Number(txtSecondNo.value)
</pre>

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).

[[File:TT03.7.png]] 
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:

<pre>
Sub cmdAdd_onClick()
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 = Number(txtFirstNo.value)
SecondNumber = Number(txtSecondNo.value)

Total = FirstNumber + SecondNumber

txtTotal.value = Total
End Sub
</pre>

[[File:TT03.8.png]]

Multiple Forms

2016-11-22T15:55:05Z

Debinbrier: Corrections to code for version 6.0.3

== Purpose ==

The purpose of this tutorial is to help learn a few more NS Basic/App Studio programming techniques. You should complete Tutorial #1 before beginning this tutorial. In this tutorial, the techniques of using multiple forms and Select controls will be covered.

=== Description of the Program ===

The program to be developed has two forms. Form #1 allows the user to enter a birth date and name. Form #2 shows the values of the previously entered birth date and name plus it tells on what day of the week the birth date occurred. There is a Title Bar and a button on each form that will switch between forms.

== Program Development ==

=== Startup ===

# Start AppStudio from the Start menu.
# At the initial screen select New Project dialog box, with the following settings:
# Form factor should be iPhone/iPad/Nexus.
# Language is BASIC.

[[File:TT01.03.JPG]] 

=== Create Objects for Form 1 ===

# Add a Title Bar (HeaderBar) for form1. In the properties window, set the leftButtonPos to "none", the leftButtonName to blank and change rightButtonName to "Next". Change the title to "Page 1" and put Form2 in changeform.
# Drag a label to the desired location and make it wider.
# Set its textContent in the Properties window to "Please Enter Your Name".
# Add a TextBox. It should name itself TextBox1. In this tutorial, we rename it to Text1.
# Add 4 more labels with textContent of "Enter Your Birthday","Select Month","Select Day" and "Select Year". There are some prettier date pickers we could have used, but we would learn less...
# Add 3 Select controls, drag into position and resize.
# Finally add a Button to the form. Resize and change the value property to read "Show Day of The Week".

Form 1 should now look like this:

[[File:TT02.02.png]] 

=== Add a new form ===

On the IDE menu select "Project" followed by "Add Form".

=== Create Objects for Form 2 ===

# Add a Title Bar (HeaderBar) for form2. In the Properties Window set the rightButtonIconPos to "none", the rightButtonName to blank and change leftButtonName to "Prev". Set the Title to Page 2. Set leftChangeForm to Form1.
# Add 3 labels, drag into position and resize.
# In the properties for each label change the Text property to "Welcome", "Your Birthday is" and "Your Birthday is on".
# Now add 3 Text boxes and drag into position.
# Lastly add a Button. Resize and change the value to read "Return to previous Page". Set changeform to Form1.

Form 2 should look like this:
[[File:TT02.03.png]] 

We have completed the visual design of our program so now it's time to add code to make it do something.

We can actually run the program now. Choose Run...Start in Desktop Browser.
It runs in your default browser: we recommend using Chrome or Safari, as these support the WebKit extensions which mobile devices use.
We could even run this on a device, but let's do a bit more first...

=== Add code to Form 1 ===

Open the code window for Form1 from the Project Explorer window and enter the following code:
<pre>
' Form1 Code
Dim birthday, dayofweek
Dim a,b,c

Sub Main()
Select1.clear()
For i=0 To 11
Select1.addItem(i+1)
Next
Select2.clear()
For i=0 To 30
Select2.addItem(i+1)
Next
Select3.clear()
For i=0 To 110
Select3.addItem(i+1900)
Next
End Sub
</pre>

The 3 Select control loops above set up the Months 1 to 12, the Days 1 to 31 and the Years 1900 to 2010.
<pre>
' Check to see if Select has recieved an input
' Select (combo box) for month
Function Select1_onchange()
a=Select1.selectedItem()
'MsgBox "selectedIndex is " & Select1.selectedIndex() & " with value " & a
End Function

Function Select2_onchange()
' Select (combo box) for day
b=Select2.selectedItem()
'MsgBox "selectedIndex is " & Select2.selectedIndex() & " with value " & b
End Function

Function Select3_onchange()
' Select (combo box) for year
c=Select3.selectedItem()
'MsgBox "selectedIndex is " & Select3.selectedIndex() & " with value " & c
End Function

</pre>
The three above functions assign the selections from the ComboBoxes to three variables a, b and c.

<pre>
Function Button1_onclick()
birthday = a & "/ " & b & "/ " & c
'MsgBox "Birthday = " & birthday
TextBox1.value = Text1.value
TextBox2.value = birthday
dayofweek = Weekday(birthday)
'MsgBox "Day of Week = " & dayofweek
TextBox3.value = WeekdayName (dayofweek)
ChangeForm(Form2)
End Function
</pre>

When Button1 is clicked, the following happens.

* The values of a, b and c are concatenated together with "/ " to form MM/ DD/ YYYY which is assigned to birthday.
* The internal WeekDay function is called and the Weekday value is assigned to dayofweek.
* The internal WeekdayName function is called and the WeekDayName value is assisgned to Text4 which will appear on the form2.
* Form1 is hidden and Form2 appears.

=== Save the project ===

From the IDE menu select "File" then "Save Project" or "Ctrl S" or the Save Icon from the Tool Bar.

=== Run the program ===

We can run the program again. Choose Run...Start in Desktop Browser.
If all goes well the forms should appear similar to those shown below.

[[File:TT02.04.png]] 

=== Deploy the App ===

Congratulations...
The only thing left to do is deploy the program.

Testing and Deploying

2013-02-26T13:46:33Z

Debinbrier:

The easiest way to test your app is in your desktop browser. Use “Start in Desktop Browser” under the Run menu. It will run in your default browser, which should support WebKit. At this time, Chrome and Safari support WebKit.

You can debug your program using the desktop browser. For more information, see “[[Using the Chrome Debugger]]”.

Once your program runs well in the desktop browser, you can deploy it to a server. Devices can then load your program from that server.

''''Start Up Time''''

There are two parts to the startup: the Translation (which happens on the desktop) and the actual startup on the device.

The Translation time will increase as the size of the app increases. Each time you run, any modules which have changed need to be retranslated. If you run twice in a row without changing your app, no translation needs to be done.

You can make Translation faster by splitting your project into more modules. That way, not as much needs to be translated each time. It's also a good way to organize your code to make it more maintainable.

'''Deploying'''

App Studio provides a server for testing apps, called the nsbapp.com. When you choose Deploy from the menu, your program and any files listed on the manifest are copied to the server. When the upload is complete, the IDE will give you the URL to open the app from.

The first time the app is run on the device, the files on the manifest are copied to the device. Your app can then be run locally, without an internet connection.

If you change your program and upload it again, there is a pause while the files are moved into place on nsbapp.com.

The next time you run the program (or refresh), the device runs its current version from memory while it gets the latest manifest from the server. It compares them: if the manifest has changed, it then downloads the whole application again and saves it to the device. Once this is complete, the new version of the app will run next time you do a refresh.

For more information, see [[Distributing_your_App|Tech Note 05, “Distributing your App”]].