CICS 313:

Visual Basic Programming

Developing Solutions Using

Visual Studio
Ghana Technology University College
Lecturer – Dr. Forgor Lempogo
2021
Objectives (1 of 2)

 Create a Visual Basic Windows Desktop Application

project

 Name and set the Title Bar text in a Windows Form

object and resize a Windows Form object

 Add a Label object to a Windows Form object, name the

Label object, set the text in the Label object, and change
the Font properties of the text in the Label object

 Add a PictureBox object to the Windows Form object,

name the PictureBox object, and resize the PictureBox
object
CICS 313:Visual Basic Programming - GTUC 2021 Delivery
Objectives (2 of 2)

 Add a Button object to the Windows Form object,

name the Button object, set the text in the Button
object, and change the Button object’s size

 Align objects on the Windows Form object

 Save, close, and open Visual Basic projects

 Understand and implement design principles of the

graphical user interface

 Understand and implement the first two phases of

the program development life cycle

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Using Visual Studio 2010 - 2017

 Before a program can be coded using Visual Basic, it

must be designed.
 When designing an event-driven program that uses a
graphical user interface (GUI), one of the first steps
after defining the purpose for the program is to design
the user interface itself
 Before beginning to design the user interface, the
developer should know how to use Visual Studio and
Visual Basic rapid application development (RAD)
tools in the design process

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Solutions, Projects, and Files
Solution:
A container that stores
projects and files for an
entire application

Project:
A container that stores files associated with a
specific part of the solution
A solution may contain one or more projects

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Solutions, Projects, and Files

 A Windows Classic Desktop project is a program that

includes a user interface whose windows are created
using the Windows operating system

 When the program is executed, the user interacts with

the program by using its windows and components (the
user interface)

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Starting Microsoft Visual Studio 2013

1. Click the start button on the taskbar.

2. Point to All Programs and click Microsoft Visual

Studio 2013 or Select your version.

3. If the Default Environment Settings dialog box

appears, choose Visual Basic Development
Settings.

4. Click Start Visual Studio.

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

 Option dialog box

Select these three

check boxes

Uncheck this check

boxes

CICS 313:Visual Basic Programming - GTUC

2021 Delivery
Visual Studio 2013’s Start-Up Page

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Creating a Windows-Based Application
1. Start Microsoft visual studio 2013.
2. Click file on the menu bar, then click New project to open the
New Project dialogue box.
3. If necessary, expand the Visual basic node in the Project
type list, then click Windows.
4. If necessary, click Windows Forms Application in the Visual
Studio installed templates section of the templates list.
5. Enter an appropriate name and location in the Name and
Location textboxes, respectively.
6. If necessary, select the create directory for solution check
box.
7. Enter an appropriate name in the Solution Name box.
8. Click the OK button.

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

New Project Dialogue Box

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

User Interface of the IDE

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Managing the Windows in the IDE
 To close an open window, click the Close button on its
title bar.

 To open a window, use an option on the View menu.

 To auto-hide a window, click the Auto Hide (vertical

pushpin) button on its title bar. When you do this, the
window is minimized and appears as a tab on the edge
of the IDE.

 To temporarily display an auto-hidden window, place

your mouse pointer on the window’s tab.
 To permanently display an auto-hidden window, click
the Auto Hide (horizontal pushpin) button on its title bar.
CICS 313:Visual Basic Programming - GTUC 2021 Delivery
The Form Designer Window (1/3)

 Windows Form Designer window:

 Allows you to create (design) the GUI

 Graphical user interface (GUI):

 What the user sees and interacts with when using the
application

 Windows Form object (or form):

 Adds other objects such as buttons and text boxes to the form
to create the GUI
 Has a title bar with caption and Minimize, Maximize, and Close
buttons
 Tab at top of designer windows has [Designer]

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

The Form Designer Window (2/3)

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

The Form Designer Window (3/3)

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

The Solution Explorer Window (1/2)
 Solution Explorer window:
Displays a list of projects contained in this solution
Displays the items contained in each project

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

The Solution Explorer Window (2/2)
Source file: - A file containing program

instructions
Code: - Program instructions

Form file: - A file containing code associated

with a windows form.
Give each form file a meaningful name
using the properties window

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

The Properties Window (1/6)

 Properties can describe a multitude of

characteristics about the object, including its color,
size, name, and position on the screen

 In the Properties window, the property names in

the left list appear in Alphabetical view

 Many developers find the Alphabetical view the

easiest to use when searching for properties

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

 The Properties Window (2/6)

 Properties:
 a set of attributes that determine an object’s
appearance and behavior

 Properties window:
 displays properties of selected object

 Default property values are assigned when an

object is created

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

The Properties Window (3/6)

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

The Properties Window (3/6)

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

 The Properties Window (5/6)
 Properties window includes an Object box and a Properties list

 Object box:
 Located immediately below Properties window title bar
 Contains the name of the selected object

 Properties list:
 Left column displays names of properties
 Use the Alphabetical or Categorized buttons to sort the
display of properties

 Settings box:
 Right column containing the current value of each property

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

The Properties Window (6/6)

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Name the Windows Form (1/2)
 Tap or click anywhere in the Windows Form object to
select it and then tap or click View on the menu bar

 If necessary, tap or click Solution Explorer on the

View menu to display the Solution Explorer.

 In the Solution Explorer window, press and hold or

right-click the Form1.vb file name to display a shortcut
menu with the Rename command

 Tap or click Rename. Type frmExampleOne.vb and

press the ENTER key

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Name the Windows Form (2/2)

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Properties of a Windows Form (3/3)

 Text property:
controls the caption displayed on form’s title bar
 StartPosition property:
determines the form’s position on the screen when
application starts
 Font:
general shape of characters in text
Recommended font is Seqoe UI font
 Point:
 a measure of font sizes; one point = 1/72 inch

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

 Set the Title Bar Text in a
Windows Form (1/2)
 The Text property in the Properties window for the
Windows Form object contains the value displayed in
the title bar of the window

 Click the Windows Form object and then scroll in the

Properties window as necessary until you find the
Text property. Then, double-tap or double-click the
Text property in the right column

 Type “Example One” and then press the ENTER key

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Set the Title Bar Text in a Windows
Form Object (2 of 2)

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Resize a Form
 With the Windows Form object selected, double-click
the Size property in the right column. Type 730, 700
and then press the ENTER key

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Properties of a Windows Form (2/3)
 Name property:
 used to refer to an object in code
Give each object a meaningful name

 Hungarian notation:
naming convention using three or more character prefix
to represent the object type
 Pascal case:
First letter of each word in the name is uppercase
First part of name is object’s purpose
Second part of name is object’s class

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

The Toolbox Window (1/2)
Toolbox:
Contains objects that can be added to other
objects, such as a form
Each tool has an icon and a name to identify it
Each tool represents an object, called a control

Controls:
Objects displayed on a form
Represented as icons in the toolbox
Can be locked in place on the form

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

The Toolbox Window (2/2)

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Permanently Display the Toolbox
 If necessary, tap or click the Toolbox button in the left
margin of the window to display the Toolbox. Then, tap
or click the Auto Hide button (Pushpin icon) on the
Toolbox title bar

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

 Add a Control to the Form
Method 1
 Click a tool in the toolbox, but do not release the mouse
button.
 Hold down the mouse button as you drag the mouse pointer
to the form.
 You will see a solid box, as well as an outline of a rectangle and a plus
box, following the mouse pointer.
 Release the mouse button.

Method 2
 Click a tool in the toolbox and then click the form.

Method 3
 Click a tool in the toolbox, then place the mouse pointer on
the form, and then press the left mouse button and drag the
mouse pointer until the control is the desire size.
CICS 313:Visual Basic Programming - GTUC 2021 Delivery
 Manipulate Controls on a Form
 To select a control:
 Click it in the designer window. OR
 Click the list arrow button in the Properties windows Object box.

 To size a control, use the sizing handles that appear on the

control when it is selected.
 To move a control, drag the control to the desire location.
 To delete a control, select the control in the designer
window, then press the Delete key on your keyboard.
 To lock and unlock the controls:
 Right-click the form (or any control on the form), then click Lock
Controls on the Context Menu.
 The Lock Control option is a toggle option: clicking it once
activates it, and clicking it again deactivates it.
 You also can use the Lock Controls command on the Format
menu.
CICS 313:Visual Basic Programming - GTUC 2021 Delivery
The Label Control (1/2)
 Label control:
Displays text that user cannot edit
Used as “prompts” to explain controls or display output
Name should end with “Label”
 Control names use camel case

 Camel casing:
lowercase first word; uppercase first letter of each
subsequent word in the name
 Not necessary to assign meaningful names for labels
used as prompts because they are never used in code
 Labels used for output should have meaningful names

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

The Label Control (2/2)

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Enter Multiple Lines of Text in a Label
 With the Label object selected, tap or click the Text
property name in the left column of the Properties
window. Then, tap or click the arrow in the right column
of the Text property

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

 The Button Control

Button control:
Performs an immediate action when clicked

Text property:
 specifies the text that appears on the button’s
face

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

The Picture Box Control
Picture box control:
used to display an image on a form
Image property:
specifies the image to display

SizeMode property:
 handles how the image will be displayed
Settings: Normal, StretchImage,
AutoSize, CenterImage, or Zoom

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

The Code Editor Window (1/3)
Events:
user actions while program is running
Examples: clicking, double-clicking, scrolling

Event procedure:
set of instructions to be executed when an
event occurs
Tells the object how to respond to an event

Code editor:
used to enter programming code

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

The Code Editor Window (2/3)

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

 Open the Code Editor Window
Number of methods:
1. Right-click the form, and then click View Code on the
context menu.

2. Verify that the designer window is the active window,

then click view on the menu bar, and then click code.

3. Verify that the design window is the active window,

then press the F7 key on your keyboard.

4. Click the form or a control on the form, then click the

Events button in the Properties window, and then
double-click the desired event.

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

The Code Editor Window (3/3)
 Keyword:
 a word with special meaning in a programming language

 Event code template has a procedure header and

procedure footer

 Sub procedure:
 block of code that performs a task

 Event’s procedure header:

 Begins with keywords Private Sub
 Procedure name includes object name and event name
 Handles clause indicates for which objects’ events this
code will execute

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

The Me.Close() Instruction (1/2)
 Me.Close() instruction:
 closes the current form at run time
If the current form is the main form, the application is
terminated

 Me keyword: refers to the current form

 Method:
predefined VB procedure that can be invoked (called)
when needed
 Sequential processing: each line is executed in
sequence
Also called a sequence structure

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

The Me.Close() Instruction (2/2)

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Saving a Solution
An asterisk appears on the designer and
Code Editor tabs if a change was made
since the last time the solution was saved.

To save a solution:

Click File on the menu bar, and then click
Save All.
Click the Save All button on the Standard
toolbar.
CICS 313:Visual Basic Programming - GTUC 2021 Delivery
The Startup Form
 Startup form:
 the form to be displayed when the application starts.

 Specify the startup form

1. Open the Project Window.
 Method 1:
 Right-click My Project in the Solution Explorer window.
 Click open on the context menu
 Method 2:
 Click Project on the menu bar, and then click <<Project Name>>
Properties on the menu.
 Method 3:
 Right-click the project names in the Solution Explorer window and
click Properties.
2. Click the application tab, if necessary, then click the startup form list
arrow in the Application pane. Select the appropriate from name from
the list.

3. Click the Close button on the Project Designer window.

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

The Project Window

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Starting / Running an Application (1/2)
Method 1
Save the solution.
Click debug on the menu bar,
Click start Debugging.

Method 2
Save the solution
Press the F5 key on your keyboard.

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Starting / Running an Application (2/2)

When you start a VB application, the IDE

creates an executable file

Executable file:
Can be run outside of Visual Studio 2013
Has a file extension of .exe
Stored in the project’s bin\Debug folder

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Ending an Application
Method 1
Click an exit button in the interface.

Method 2
Click File on the application’s menu bar,
then click exit.

Method 3
Click the close button on the application’s
title bar.
CICS 313:Visual Basic Programming - GTUC 2021 Delivery
Using an Assignment Statement (1/2)
 Properties window is used to set property values at
design time

 Assignment statement:
assigns a value to a variable or property of a control
Used to set property values at run time

 String:
zero or more characters enclosed in quotation
marks

 Assignment operator: the = symbol

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Using an Assignment Statement (2/2)

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Closing the Current Solution
Closing a solution closes all projects and
files in that solution
You are prompted to save any files that
have unsaved changes

Close a Solution
Click File on the menu bar.
Click Close Solution

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Opening an Existing Solution (1/2)

Only one solution can be open at any one

time

If a solution is already open, opening a

different one will close the currently open
solution

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Opening an Existing Solution (2/2)
Click File on the menu bar, then click Open
Project to open the Open Project dialogue box.
Locate and then click the solution filename,
which is contained in the application’s solution
folder.
The solution filename has an .sln filename
extension, which stands for “solution”.
Click the Open button in the Open Project
dialogue box
If the Windows Form Designer window is not
displayed, click View on the menu bar, and then
click Designer.
CICS 313:Visual Basic Programming - GTUC 2021 Delivery
Programming Example One

Create a New windows application

Drop two Buttons and one Label on the form

Change the Name property of Button1 to

btnClick, Button2 to btnClose and Label1 to
lblGreetings

Change the Text property of Form1 to Example

One, Button1 to Click Me and Button2 to Close

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Programming Example One (2)
 Arrange Controls As Follows:

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

 Programming Example One (3)

 Double click on “Click Me” and type the following

between Private Sub btnClick_Click and End Sub

lblGreetings.Text = "Hello World “

 Double click on “Close” and type the following between

Private Sub btnClose_Click and End Sub

Me.Close()

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Programming Example One (4)
 Save and Run
 Click on “Click Me”
 Results….

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

 Programming Example Two

 Create a New windows application

 Drop two Buttons, two Textboxes and four Label on the

form

 Change the Name property of Button1 to btnClick,

Button2 to btnClose, Label1 to lblGreetings, Textbox1
to txtFirstName and Textbox2 to txtLastName

 Change the Text property of Form1 to Example Two,

Button1 to Click Me, Button2 to X, Label2 to Please Write
your Name, Label3 to First Name and label4 to Last
Name

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

Programming Example Two (2)
 Arrange Controls As Follows:

CICS 313:Visual Basic Programming - GTUC 2021 Delivery

 Programming Example Two (3)

 Double click on “Click Me” and type the following

between Private Sub btnClick_Click and End Sub

lblGreetings.Text = "Hello " & txtFirstName.Text & " " &

txtLastName.Text & "!"

 Double click on “X” and type the following between

Private Sub btnClose_Click and End Sub

Me.Close()

CICS 313:Visual Basic Programming - GTUC 2021 Delivery