Software Development

  Lecture Notes

Introducing Visual Basic - A Simple Calculator Program

These notes guide you through creating your first program in Visual Basic.

Introduction

Visual Basic Environment

The Toolbox

The Project Explorer

The Properties Window

Running Your Program

Add Program Code


Introduction

Objectives

This tutorial will enable you to: -

      Become familiar with the Visual Basic environment

      Create your first simple calculator application


Visual Basic Environment

Visual Basic is a Windows based programming language that allows a programmer to build applications running under Windows.  

To start Visual Basic, click on the Windows Start button and select  Visual Basic from the Menu.  

The opening screen will look like the following

The Standard.EXE will be the one we want so just click on the Open button.

The development environment will then appear and will look similar to this:

The Visual Basic interface provides the following elements: -

  1. Form a window in which the application is designed.

  2. Toolbox for drawing controls on the form

  3. Project Explorer a list of any forms and other types of files in the project

  4. Properties Window a list of the property settings for a particular control

 

The Toolbox

The Toolbox looks like this: -

~Now try the activity~

Activity A

  1. Explore the toolbar controls.  Hover your mouse over each tool and you will see a tooltip appear with the name of the control. If you double click a control, it will appear on the form.  Draw the following controls on your form:-

  • 3 textboxes

  • 4 labels

  • a command button

  1. Move the controls so that your form looks similar to the picture below:-

 

The Project Explorer

The Project Explorer is useful for viewing all the different files in your project. When you first save your project, VB will save your project setting in a project file.  When you first save your form, VB will save the information about your form in a form file.

~Now try the activity~

Activity B

  1. Save your form by by selecting Form1 in the Project Explorer window.  Right-click the mouse and click Save Form.  A dialog box will appear... 

  • type in a name for your form file, such as calculatorForm

  • choose a folder to save the form file in

  • click Save

  1. Save your project by by selecting Project1 in the Project Explorer window.  Right-click the mouse and click Save Project.  A dialog box will appear... 

  • type in a name for your project, such as calculator

  • choose a folder to save the project file in

  • click Save

 

The Properties Window

The Properties window is used to set the properties of each control.  An example of a property is a font color or control width and height

Each control has it's own set of properties.  Every time you select a control, the properties for that control are displayed in the properties window.

The picture shows the form propertiesIf I select a different control such as a command button, the windows would show the command button properties.

An important property is the Name property.  Every control has a Name property.  

Another common property is the Caption property.  We will see what this does later. 

~Now try the activity~

Activity C

Now you need to change the properties of the controls you drew in Activity A, so that your form looks similar to the one shown below:-

  1. Select  Label1  and in the property window, change the caption from Label1  to Simple Calculator

  1. Select each of the other labels in turn and change their Captions to:- 

  • First Number

  • Second Number

  • Result

  1. Select each of textboxes and delete Text1 etc. from the Text property.  Notice what happens to the text inside the textboxes.

  1. Select the Command Button and change the Caption property value from CommandButton1 to Add. Notice what happens to the text displayed on the button.

  1. Select the first label again - the one with the caption Simple CalculatorIn the property window, select the Font property. click the little button at the right side of the row. the Font dialog should appear.  Change the font size to to 10 pt.  Notice what happens to the text displayed in the label.  It should be bigger..

 

Your form should look similar to the one above now.  

Don't forget to save your project file and form file.


Running Your Program

To execute a program in VB, just click on the Run button on the main horizontal toolbar near the top of the VB window, the little arrow. 

Alternatively, press F5.  Or, or select Start from the Run menu.

To stop your program running, click on the Stop button on the main horizontal toolbar near the top of the VB window, the little square. 

Alternatively, select End from the Run menu.

The quickest way is to just click your program's  button.   Don't click VB's button. 

~Now try the activity~

Activity D

  1. Run your Calculator program.

Your program doesn't do anything yet, does it? 

  1. Stop your Calculator program

 


Add Program Code

Visual Basic is an event driven language, which means that it it waits for events - such as user interaction to occur. So, once your form is created and the properties are set, the next step is to add code to make your program respond to events.  

In the calculator program, the only event we need to add code for is the user clicking the Add button.

When this happens, we need the program to:-

  • add together the two numbers the user typed in the first two textboxes

  • display the result in the third textbox.

 Here is the code that will do all this:-

The code is typed into the code window of your form.  To display the code window, click on the white icon  on the Project Explorer window.  Alternatively select Code from the View menu.

To display the form again, click on the gray icon on the  Project Explorer window.  Alternatively, select  Form from the View menu.

~Now try the activity~

Activity E

  1. Type the code shown above into your Calculator code window

Note: You may have problems if you have changed the Name of any of your textboxes.  If so, rename them back to Text1, Text2 and so on.

  1. Make sure your code is typed in exactly the same as shown above.  When you are satisfied -  Save everything.

  2. Now run your program.

Congratulation! You have now created your first program.

That's it!!

 

 

 

   

  Unit Information

Assessment

Syllabus

Scheme of Work

Notes &Tutorials

Assignments

Quizzes

Books & Things

Links