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~

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~

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 properties.  If 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:- Select  Label1  and in the property window, change the caption from Label1  to Simple Calculator Select each of the other labels in turn and change their Captions to:-  First Number Second Number Result Select each of textboxes and delete Text1 etc. from the Text property.  Notice what happens to the text inside the textboxes. Select the Command Button and change the Caption property value from CommandButton1 to Add. Notice what happens to the text displayed on the button. Select the first label again - the one with the caption Simple Calculator.  In 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~

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:-

Congratulation! You have now created your first program.