Tutorial 02: Multiple Forms

April 18, 2008

© NS BASIC Corporation. All rights reserved.

Contributed by Tom Newman, Mission Peak Designs

Purpose

The purpose of this tutorial is to help learn a few more NS Basic/Desktop programming techniques. You should complete Tutorial #1 before beginning this tutorial. In this tutorial, the techniques of using multiple forms 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 button on each form that will switch between forms.

Program Development

1. Startup

Start NS Basic/Desktop from the Start menu.
At the initial screen select Standard in the New Project dialog box and click OK

2. Modify the First Form's Parameters

You should now see a blank form with the title "Form1"
Select the form in the Project Explorer by clicking on it.
In the Properties window, change the Name to "My Form 1"

3. Create Objects for Form 1

Add a date selector for the birth date:

Click on the Date object in the Toolbox (calendar icon).
Move the cursor to the form where you want the object to appear and click the left mouse button.
Click on the object to select it.
Set the Name in the Properties window to "selDate"
Use the mouse to expand the size of Date object horizontally (about twice its current size) and reposition on the form.

Add a label for entering the birth date:

Select label object in the Toolbox ("A" icon)
Move the cursor to the form where you want the object to appear and click the left mouse button.
In the Properties window, change the Name to "lblDate
Change the Caption to "Enter your birth date"
Change FontBold to True
Click on the object to select it.
Use the mouse to expand the size of the label to display the text all on the same line and reposition on the form.

Add a text box to enter the user's name:

Click on the TextBox object in the Toolbox ("ab" icon)
Move the cursor to the form and click the left mouse button to place the object on the form
Click on the object to select it.
In the Properties window, change the Name to "txtName"
Scroll down in the Properties Window and change Text to "Enter your name here"
Use the mouse to expand the size of the TextBox to display the text all on the same line and reposition on the form.

Add a button to transfer to Form 2:

Select the CommandButton object in the Toolbox (blank rectangle box).
Place it on the form and click on it to select it.
In the Properties window, change the Name to "cmdShow"
In the Properties window, change the Caption to "Show the Day of the Week"
Use the mouse to expand the size of the CommandButton to display the text all on the same line and reposition on the form.

Name and save the project:

Select File from the menu at the top and select Save Project
Select/create a folder and save the project as MyProject02.nsd

5. Create the Second Form

Select "Project" from the top main menu
Select "Add Form" from the menu
In the Properties window, set the Name to "My Form 2"

6. Create Objects for Form 2

Add a text label before the birthday:

Select label object in the Toolbox ("A" icon)
Place it on the form and click on it to select.
In the Properties window, change the Name to "lblBirthday
In the Properties window, change the Caption to "Birthday ="

Add a field where the birthday will be shown:

Select label object in the Toolbox ("A" icon)
Place it on the form to the right of the last label and select it
In the Properties Window, change the Name to "lblDateField"
In the Properties window, change the Caption to "Date"
Expand the label to hold the date

Add a text label before the name:

Select label object in the Toolbox ("A" icon)
Place it on the form and click on it to select.
In the Properties window, change the Name to "lblName
In the Properties window, change the Caption to "Name ="

Add a field where the name will be shown:

Select label object in the Toolbox ("A" icon)
Place it on the form to the right of the last label and select it
In the Properties Window, change the Name to "lblNameField"
In the Properties window, change the Caption to "Name"

Add a text label before the day-of-the-week:

Select label object in the Toolbox ("A" icon)
Place it on the form and select it
In the Properties window, change the Name to "lblDayWeek
In the Properties windows, change the Caption to "Day of the week ="

Add a field where the day-of-the-week will be shown:

Select label object in the Toolbox ("A" icon)
Place it on the form and select it
In the Properties window, change the Name to "lblDayField"
In the Properties window, change the Caption to "DayWeek"

Add a button to transfer back to Form 1:

Select the CommandButton object in the Toolbox (blank rectangle box)
Place it on the form and select it
In the Properties window, change the Name to "cmdGoBack
In the Properties window, change the Caption to "Go Back"
Use the mouse to expand the size of the CommandButton to display the text all on the same line and reposition on the form.

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

7. Enter Code on Form 1 to Transfer to Form 2

When the user taps on the "Show the Day of the Week" button, we want Form 2 to appear.

Right click on My_Form_1 in the Project Explorer and select "View Object"
Double click the CommandButton ("Show the Day of the Week")
Enter these lines of code after the SUB line:
```
  My_Form_1_Hide
  My_Form_2_Show 
```

The two lines are used to hide form 1 (unloads the form) and show form 2 (loads the form). No further action is required. NS Basic/Desktop automatically displays the program's first form (My_Form_1) at the start of program execution.

8. Enter Code for Form 2 Objects

We need to add code that will execute when Form 2 loads.

Right click on My_Form_2 in the Project Explorer and select "View Object"
Double click on an empty area in form 2 to bring up the Code Window (you should see "Sub My_Form_2_Load")
Enter these lines of code after the SUB line:

  lblDateField.Text = FormatDateTime(selDate.Date,2)
  lblNameField.Text = txtName.Text
  lblDayField.Text = WeekDayName( DatePart("w",selDate.Date))

This routine is called when the user clicks the Form 1 button which cause Form 2 to load. This code transfers the date and name from the first form to the second form. It also computes the day of the week from the date selected by the user. The FormatDateTime statement converts the Date and Time value to a short date string for displaying on the form.

9. Enter Code on Form 2 to Transfer to Form 1

When the user clicks the "Go Back" button, we want Form 1 to reappear.

Right click on My_Form_2 in the Project Explorer and select "View Object"
Double click on the button ("Go Back") to bring up the Code Window
Enter these lines of code after the SUB line:

  My_Form_2_Hide
  My_Form_1_Show

This code hides Form 2 and shows (loads) Form 1.

10. Finishing the Code

Finish up the code for this project by entering the following lines of code at the top of the code page (before the first SUB line):

  Option Explicit
  ShowOKButton TRUE

The two lines are located outside the subroutine and executes when the program first loads. The Option Explicit is used to force explicit declarations of all variables. This means all variables used in the program must be defined with a DIM statement before they are used. It helps to catch mistyped variable names and should be included in every program you write.

The ShowOKButton TRUE only applies to NS Basic/CE programs and places a OK button in place of the X button in the menu bar of the output window. Tapping the X button minimizes the output window but doesn't stop the program. Tapping the OK button closes the output window and the program exits. The OK button is useful especially during program debugging because it allows the program to be closed so an updated version can be tested. Without the OK button the program will need to be shut down manually before an updated version can be tested. (You shut down running programs on PPC devices by Start->Settings->System->Memory->Running Programs and selecting the program and Stop or Stop All.) This statement can also be used on NS Basic/Desktop programs if the code is shared with /CE (the statement is a no-op on the Desktop).

Your code should look like the following:

Option Explicit
ShowOKButton True    ' Used for /CE, no-op for /Desktop

Sub cmdShow_Click
   My_Form_1_Hide
   My_Form_2_Show
End Sub

Sub My_Form_2_Load
   lblDateField.Text = FormatDateTime(selDate.Date,2)
   lblNameField.Text = txtName.Text
   lblDayField.Text = WeekDayName( DatePart("W",selDate.Date) )
End Sub

Sub cmdGoBack_Click
   My_Form_2_Hide
   My_Form_1_Show
End Sub

Close the Code Window.
Save the Project

Testing the Project

Now we are ready to test the project. Select Start from the File menu or press F5 to save and run the program.

Any errors will appear in a message box on the screen. The message box displays the error and line number where the error occurred. Errors must be corrected and Start repeated until there are no more errors.

Congratulations !! You have now written your second NS Basic/Desktop program.