Introduction to Visual Basic

Graphical User Interface

Getting Started with

Visual Basic

Visual Basic Window

Creating and Executing

Visual Basic application

Working with Variables

 Introduction to Visual Basic
• You have learnt quite a bit of Small Basic by now.

• As you know, Small Basic programs are executed one

command after another, i.e., sequentially.

• Programming is done in.

– TextWindow: working with text.
– GraphicsWindow: working with pixels.

©Oxford University Press Introduction to Visual Basic 2

 • Visual Basic (VB) is similar to Small Basic but has many
more features.

– Visual means that it uses a Graphical User Interface

(GUI) to create programs.

– Basic means that the language is based on the BASIC

programming language.

• In this chapter, you will learn Visual Basic 2013 Express.

– It is a version of Visual Basic that Microsoft supplies free

for students and beginners.

©Oxford University Press Introduction to Visual Basic 3

 Graphical User Interface (GUI)
• Visual Basic has a Graphical User Interface.

• As the name suggests, GUI software uses:

Windows Icons
All these are
Menus Dialog Boxes called controls

Buttons
• All programs written with Visual Basic have a Graphical
User Interface.
– So, Visual Basic is a GUI environment for writing
programs.

©Oxford University Press Introduction to Visual Basic 4

 Event-driven Programming
• Visual Basic programming is Event-driven
programming.

• An event is an action. E.g.,

Clicking the mouse

Double-clicking the mouse

Moving the mouse

Selecting an item from a list

©Oxford University Press Introduction to Visual Basic 5

 • When the user performs an action on a graphical
component.
– We say an event has occurred.

• In event-driven programming, the program responds to

events.
– It does not run step-by-step as in Small Basic.

• The user may click on any control at any time.

– So, each control is programmed independently.

• We write the code that will be executed in response to

different actions (events).

©Oxford University Press Introduction to Visual Basic 6

 Getting Started with Visual Basic
• To start Visual Basic, the steps are:

1
Click Start ► All
Programs.

2
Click Visual Studio
2013. 2
3
1
3
Click VS Express 2013.
A Visual Studio
screen appears.

©Oxford University Press Introduction to Visual Basic 7

 • To start Visual Basic, the steps are:
4
After a few seconds, click
Start Page.

7
5
Under Start, click New
46
Project.

6 5
Under Installed
Templates, click Visual
Basic.

7 Select Windows Forms

The Microsoft Visual Studio
Application in the middle The New Project
Express 2013 for Windows
pane. screen appears.
Desktop appears.

©Oxford University Press Introduction to Visual Basic 8

 • To start Visual Basic, the steps are:

Change the default

8 project name
WindowsApplication1
to a more meaningful
name, say Hello.

9
Click OK.
8

9
Visual Basic is referred to as Integrated Development Environment
The Integrated
Environment window
(IDE) software, because all the tools required forappears
the development of a
project are available on one screen.

©Oxford University Press Introduction to Visual Basic 9

 Visual Basic Window
• The Visual Basic IDE window integrates many different
D
functions, such
e as. E
s d
i i
g t
n i
i n
n g
g IDE
C window D
o e
m b
p u
i g
l g
i i
n n
g g
©Oxford University Press Introduction to Visual Basic 10
 • It has the following areas:

An empty form. The Toolbox tab.

The Solution
The Properties
Toolbox Explorer
window.
window.
Empty Form

Solution Explorer
Property Window
Window

©Oxford University Press Introduction to Visual Basic 11

 1
Click on the Toolbox tab.

1 2

2
Click the pin the tab
button.

The Common
The Form willControls
move tomenu
the right
of the Toolbox will appear
side so that Toolbox and Form are
visible together.

©Oxford University Press Introduction to Visual Basic 12

 Components of the Visual Basic
Window
• The Visual Basic window has many components:

Title bar

Menu bar

Tool bar

Toolbox

Form

Property Window Solution Explorer

Window

©Oxford University Press Introduction to Visual Basic 13

 • Title Bar: The title bar at the top of the window displays
the title of the project.

– By default, VB names your projects WindowsApplication1,

WindowsApplication2, etc.

• Tabs Above the Form: The tab at the top of the form
contains the word ‘[Design]’.

– This means that the application is currently in design

mode.

©Oxford University Press Introduction to Visual Basic 14

 • Menu Bar and Tool Bar: The menu bar consists of
many drop-down menus.

– Clicking on any option of the menu bar makes it active.

– The tool bar has buttons that provide shortcuts to some

menu options.

©Oxford University Press Introduction to Visual Basic 15

 • Form Window: The form window is the primary work
area that forms the background of the application.

– The user can draw objects on the form.

©Oxford University Press Introduction to Visual Basic 16

 • Toolbox: The Toolbox contains controls.

– Controls are GUI components that can be added to the

form.

• Some commonly used controls are:

– Label.
– Button.
– ComboBox.
– ListBox.
– PictureBox.
– TextBox.

©Oxford University Press Introduction to Visual Basic 17

 • Solution Explorer: The Solution Explorer window
displays a list of all forms in the current project.

©Oxford University Press Introduction to Visual Basic 18

 • Properties Window: A form can have many controls
on it.

– Every control is associated

with some properties.

– The form also has its

own properties.

– The Properties window

lists the properties of
the selected control or
of the form.

©Oxford University Press Introduction to Visual Basic 19

 • Click the appropriate button in the Properties window
to display properties alphabetically or by category.

Displays properties
category-wise.

Displays properties
in alphabetical
order.

©Oxford University Press Introduction to Visual Basic 20

 Developing an Application
• In VB, you can use the following steps to develop an
application:

Add code to the

Place controls Set properties controls to
Create a form.
on the form. for the controls. handle the
events.

©Oxford University Press Introduction to Visual Basic 21

 • Every control is associated with its individual.

Properti
Events es

Methods

• Property: It is a named attribute of a control.

– For example, text boxes have properties named Colour,

Font, Enabled, Visible, etc.

©Oxford University Press Introduction to Visual Basic 22

 • Method: It is an action that can be performed on a
control.

• Event: A button supports various events such as click,

double-click, mouse over, etc.

– When an event occurs, a particular bit of code is executed.

– In event-driven programming, you write the code to be

executed when an event occurs.

©Oxford University Press Introduction to Visual Basic 23

 Placing Controls on the Form
• First method for placing controls on the form:

1
Double-click on the control 1
in the Toolbox.

• The control appears at the

top-left corner of the form.
• By default, buttons are named
Button1, Button2, etc.

©Oxford University Press Introduction to Visual Basic 24

 • To change the position
of the control:

1 Click on the control,

hold down the left mouse
button, and drag it to the
new location.
1
2
• To resize the control: 1

1 Drag the edges pointer for

changing the size either
horizontally or vertically.

The control is dragged

2 to new location.
Drag the corner pointers
for changing the size
diagonally.

©Oxford University Press Introduction to Visual Basic 25

 • Second method for placing controls on the form:

1 Click on the control in the

Toolbox, and with the left
mouse button pressed
down, drag and drop it
onto the form.

• To reposition and resize the control:

1 Reposition the control by
holding down the left
mouse button and dragging
it to a new location.

2
Resize the control by
dragging one of its edges or
corners.

©Oxford University Press Introduction to Visual Basic 26

 Deleting a Control
1
• To delete a control on
the form:
1 Select it by clicking it once and press
DEL.

Creating and executing VB

applications
• Suppose we wish to display a message ‘I am working in
GUI Environment’ on the form.

• Let us now understand how to create, execute, and save a

VB application that does this.
©Oxford University Press Introduction to Visual Basic 27
 • The steps to create, execute, and save a VB application
are:
1
Click New Project.

3
2
Under Installed 2
Templates, click Visual
Basic.

3 1
Select Windows Forms 4
Application in the middle
pane. 4

4 Change the default project

name
WindowsApplication1 to The New Project
some other name, say screen appears.
Message, and click OK.
©Oxford University Press Introduction to Visual Basic 28
 • The IDE window will appear.

• Notice the name of the project, Message, in the title bar.

• The project has one form, named Form1 by default.

• Make sure Form1 is selected.

• Add a Button control to the Form.

©Oxford University Press Introduction to Visual Basic 29

 • Select the Form and make the following changes in the
Properties window:

– To change the title

displayed on the form:

1
Click the box to the right of
1
Text in the Properties
window and type Message.

Notice that the title appears

on top of the form.

©Oxford University Press Introduction to Visual Basic 30

 • Select the Form and make the following changes in the
Properties window:

– To change the background

colour of the form:

1
Click the box to the right of
BackColor. 1

2
Click the arrow and select
Highlight.

A drop-down menu
arrow will appear.

©Oxford University Press Introduction to Visual Basic 31

 • Select the button control by clicking it, and make the
following changes in the Properties window:

– To change the text

displayed on the button:

1 Click the box to the right of

Text in the Properties.
window and type
DisplayMessage. 1

Notice the text on the button

control is changed.

©Oxford University Press Introduction to Visual Basic 32

 • Select the button control by clicking it, and make the
following changes in the Properties window:

– To set the font, font style, and

font size displayed on the button:
1 Click the box to the right of
Font, and then on the 3
button with three dots. 1

2 Set Font to Tahoma, Font 2

style to Bold and Size to
12.

3 Notice that the default font is

Click OK.
The Font window will Microsoft Sans Serif.
appear.

©Oxford University Press Introduction to Visual Basic 33

 • Follow these steps to write the code:
1
Double-click the button
control.

2
Type the code between the
lines Private Sub and
End Sub. • The code window will appear.
• It already has a code template.
• You will add your own code to this.

• To save the VB application:

1 • This first saves the form and then the

project.
Select FILE ► Save All. • The file extension for forms is .vb.
• The extension for projects is .vbproj.

©Oxford University Press Introduction to Visual Basic 34

 • To run the application:
1 Click DEBUG ► Start
Debugging.

Or

Press F5.

Or 2
Click the Start 3
button on the
toolbar.

2
Click the button. A form titled Message with a single
It will display a message box stating
button
Youlabeled DisplayMessage
will return to the form.
I am working in GUI Environment
will appear on the screen
3
Click OK.

©Oxford University Press Introduction to Visual Basic 35

 Working with Variables
• Variables are the areas of computer memory allocated
to hold data.

• You have used variables in Small Basic.

• Now, let us see how to work with variables in Visual

Basic.

©Oxford University Press Introduction to Visual Basic 36

 Variable Names
• Must be less than 255 characters.
A Visual
Basic • Should not contain spaces or period (.)
variable
name:
• Must not begin with a digit.

• Examples of valid and invalid variable:

Valid Variable Invalid Variables
names names
Simple_ Interest Student.Name
EmployeeName 2ndTerm
Num1 Paper I

©Oxford University Press Introduction to Visual Basic 37

 Declaring Variables
• One must declare variables before using them. This is
done by assigning them names and data types.

• The general format of declaring a.

• variable is:
Dim VariableName As DataType

• For example:
Dim StuName As String
Dim Total As Integer
Dim Percentage As Single

©Oxford University Press Introduction to Visual Basic 38

 • There are many data types in Visual Basic but we will
discuss only three here:

– String: It holds alphabetic characters, numeric numbers,

and special characters with which calculation cannot be
performed.

– Integer: It holds whole numbers.

– Single: It holds whole or fractional numbers.

©Oxford University Press Introduction to Visual Basic 39

 • You can declare multiple variables in one line, separating
each with a comma:

Dim StuName As String, Total As Integer, Percentage As Single

• You can declare more than one variable of the same data
type like this:

Dim Num1, Num2, Num3 As Integer

©Oxford University Press Introduction to Visual Basic 40

 Assigning a Value to a Variable

• The general format of an assignment statement is:

Variable = Expression or Constant

• For example:
A = 100
A = B * C

©Oxford University Press Introduction to Visual Basic 41

 Arithmetic Operators
• The arithmetic operators used in Visual Basic are shown
below:

Operator Operation Examples

Addition 15 + 31 = 46
+
64 + 79 = 143
Subtraction 78 – 34 = 44
-
67 – 98 = -31
Multiplication 78 – 34 = 44
*
67 – 98 = -31
Exponent 5 ^ 2 = 25
^
3 ^ 3 = 27

©Oxford University Press Introduction to Visual Basic 42

 • The arithmetic operators used in Visual Basic are shown
below:

Operator Operation Examples

Division 20/3 = 6.3333333333
/
11/4 = 2.75
Integer Division 20 \ 3 = 6
\ (Discard the decimal 11 \ 4 = 2
places).
Modulus 10 Mod 3 = 1
(returns the remainder 20 Mod 6 = 2
Mod
from an integer
division).

©Oxford University Press Introduction to Visual Basic 43

 Creating an Application with
Numeric Variables
• Let us create an application to add two numbers.

• For this we will add the following controls to the form:

– Two text box controls to enter the two numbers.

– Four label controls to display the heading and the captions

for the two input numbers and for the output
– One button control.

©Oxford University Press Introduction to Visual Basic 44

 Place four label controls,
1
three text box controls, and
one button control on the
form.
Controls Properties
Label1 Text: Add Two Numbers, Font: Bold, 14
Label2 Text: Enter First Number Font: Bold, 12
2 Set the properties given
Label3 Text: Enter Second Number, Font: Bold,
here for the form and
12
controls.
Text: Sum, Font: Bold, 12
Label4
TextBox1 BorderStyle: FixedSingle
4
3 TextBox2 BorderStyle: FixedSingle
Resize Button1 as
necessary. TextBox3 BorderStyle: FixedSingle, Enabled:
• The code template will
False
appear.
Button1 Text: Add, Font: Bold, 14
• TheThe Form
cursor willwill
be look
between
as shown here
the Private Sub and End
4 Sub lines.

Double-click the Add

button.

©Oxford University Press Introduction to Visual Basic 45

 5
Enter the code as shown
here.

6
Select FILE ► Save All to
save the VB application.

7 8
Press F5 to run the
application.

The sum of the

numbers will appear in
8 Text box.

Enter numbers in the text

boxes and click Add.

©Oxford University Press Introduction to Visual Basic 46

 Concatenation
• With Strings, you can use the ‘+’ or ‘&’ operator for
adding strings one after another.

– This is called string concatenation.

• To understand this concept, let us create a VB project to

enter the First Name, Middle Name, and Last Name.

– On being clicked, the button will display the Full Name in

the corresponding text box.

©Oxford University Press Introduction to Visual Basic 47

 Start Microsoft Visual
1 Basic 2013 Express and
create a Windows Forms
Application named
“Concatenation Example”. Controls Properties
Label1 Text: Concatenation, Font: Bold, 14

Place five label controls, Label2 Text: Enter First Name, Font: Bold, 12
four text box controls, and Label3 Text: Enter Middle Name, Font: Bold, 12
2 one button control on the
Label4 Text: Enter Last Name, Font: Bold, 12
form.
Label5 Text: Full Name, Font: Bold, 12
TextBox1
TextBox2
Set the properties given
3 here for the form and TextBox3 4
controls. TextBox4 Enabled: False
The code template
Button1 Text: Click, Font: Bold, 14
will appear.

4 The Form will look

Double-click the Click as shown here.
button.

©Oxford University Press Introduction to Visual Basic 48

 5
Add the code as shown
here.

6
Select FILE ► Save All to
save the VB application. Sohail

7
Press F5 to run the 8
application.

8
Enter your First Name,
The information will
Middle Name, and Last appear in the Full
Name in the respective text Name text box.
box and click the Click
button.
©Oxford University Press Introduction to Visual Basic 49
 Fill in the blanks
1. IDE
The __________ window contains all the tools for the development of a
project on one screen.

2. The default extension of Visual Basic form is _____

.vb

3. property
The ______________ is a named attribute of a control.

4. Variables are areas of computer memory allocated to hold data.

_________

5. The operator _____

+ is also used with the String data type for
concatenation.

©Oxford University Press Introduction to Visual Basic 50

 True or False?
1. True
Clicking the mouse is an event: ________

2. False
The Toolbox tab appears on the right side of the screen: ________

3. The declaration of the variable starts with the keyword Dimension:

________
False

False
4. The Event driven programming is sequential: ________

5. The / operator always gives you the result as whole number: ________
False

©Oxford University Press Introduction to Visual Basic 51