Dambi Dollo university

College of Engineering and Technology

Department of Computer Science

Chapter 2
Introduction to Microsoft Visual Studio 2010/22

Lecture 2 part-II
Compiled By F.F
Outline
 Introduction to visual basic programming
 Manage the windows in the Integrated Development
Environment (IDE)
 Create a Visual Basic 2022 Windows-based application
 Set the properties of an object
 Add a control to a form
 Use the Label, Button, and Picture Box tools
 Use the options on the Format menu
 Enter code in the Code Editor window
 Save a solution
 Start and end an application
 Close and open an existing solution
 Find and correct a syntax error
What is visual programming?
 is a computer program that utilizing pictorial elements.
E.g. [Link]
 is PL in that users create programs by manipulating
program elements graphically rather than by specifying
them textually.
 is PL with visual expressions, spatial arrangements of
text and graphic symbols, used either as elements of
syntax or secondary notation.
Advantage VP:
• User friendly & interactive
• Easy to develop graphical user interfaces application
• Multiple vendor support
What is visual basic .NET([Link] )
 is an event driven programming language that allows to build
application for windows operating system and the web.
 is based on visual basic programming language.
 since it is one of the modern programming language ,it is more
object oriented.
 is available in a stand-alone edition i.e. visual basic .NET
standard Edition, a Professional Edition, an Enterprise developer
Edition , and an Enterprise Architect Edition,
 Also is package in several edition of Microsoft Visual [Link],
which is comprehensive set of programming languages and tools
for building:
• Windows application,
• web application and
• other programs and service.
Event driven program fundamentals
 Most visual basic .NET is an Event driven program that
communicates with the users through GUI.
• users employ the GUI objects to select options, to enter
data, and cause events to occur.
 Graphical User Interface - consists of graphical objects
such as icons that are used by the end user to interact with
the operating system.
• The most famous GUI program is the Microsoft
Windows desktop.
 Event driven programs are typically controlled by the end user
where the sequence of operations is partly under the control of
the programmer and partly under the control of the user.
Types of application that created with visual
[Link]:
What is application ?
 program or suite of programs.
 is a program that tells a computer how to accept instruction and data from users and
how to produce information in response to those instructions.
 Is a collection of one or more program that is designed to complete a specific task,
such as word processing.
 Visual [Link]- allows to develop different types of application.
Windows application
 [Link] allows developers to create windows applications with a graphical
user interface.
 program with graphical user interface that runs in the windows environment.
 Has a Windows user interface
 Runs on a personal computer
 User interface: what the user sees and interacts with when using an application
Types of application that created with visual
[Link]:
 graphical user interface provides visual cues such as menus,
button, and icons that allows a user to enter data and
instruction into a computer.
Web application
 A program that a user accesses through a web browser.
 Has a Web user interface
 Runs on a server
Console application
 A program that run in a text environment such as the windows
MS-DOS or command prompt interface.
 Both windows and console application are called stand-alone
application .
 A stand-alone application is an application that does not requires
other applications or data sources to run in the operating system.
Visual Studio 2010/22: Integrated Development Environment (IDE)

 Contains all the tools and features needed to create, run,

and test programs
 Includes Visual Basic, Visual C++, Visual C#.
 Is the visual studio development environment that used to
create and test the project.
Consists various tools including:-
• form designer: - which allow to crate a form.
• Editor:-for entering and modifying programming code.
• Compiler:- for translating the Visual Basic statements into the
intermediate machine code.
• Debugger:- which help to locate and correct program errors.
• Object browser:– which enables to view the available classes,
objects, properties, methods, and events.
Default Environment Settings

• The full version of Visual Studio 2010/22 provides an

option which allow the programmer to select the default
profile of the IDE.
• You may observe Default environment Settings dialog
box when opening visual studio for the first
• Then you must select the default environment settings
for a Visual Basic developer.
• Look the following picture for more clarification.
Visual Studio 2010 default Environment

Figure1: Visual Studio 2010

How to Create a Visual Basic 2010/22 Windows Application

Visual Studio 2022

default
Environment

here
Click

Figure 2-2: Create a Visual Basic 2022

Figure 2-3: Visual Basic 2022
The Solution Explorer Window

 Displays a list of projects contained in this

solution
 Displays the items contained in each
project
Windows applications consist of 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 portion of the
solution.
 A solution may contain one or more
Figure 2-4:
projects
solution Explorer
 Cont.

Figure 2-5: Illustration of a solution, project,

and file
The Windows Form Designer Window

 Windows Form Designer window:

 Allows you to create (design) the GUI.
 Graphical user interface (GUI):
 What the user sees and interacts with
 Windows Form object (or form):
 Foundation for the user interface.
 Add other objects such as buttons/text boxes to form.
 Title bar with caption and Minimize, Maximize, and Close
buttons.
 Tab at top of designer window has [Link] [Design]
Figure 2-6: Windows Form
Designer window
The Properties Window
 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.
 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.
 Pr es o
op
W w

er
in

ti
d
Figure 2-7: Properties window showing a listing of the
 Properties of a Windows Form
 Name: name of the form, used to refer to it in code.
 Text: text displayed in the title bar of the form.(form name)
 BackColor: background color of the form.
 ForeColor: foreground color (text color) of the form.
 Size: the size (width and height) of the form.
 BorderStyle: The border style of the form (e.g., None,
FixedSingle, Sizable).
 StartPosition: Specifies the initial position of the form
when the application starts (e.g., CenterScreen, Manual).
 Font: general shape of characters in text
 Recommended font is Segoe UI font
 Icon: The icon displayed in the title bar of the form.
The Toolbox Window
 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 a class from
which objects, called controls
 Controls:
 Objects displayed on a form
 Represented as icons in the
toolbox
 Controls on a form can be selected,
sized, moved, deleted, locked in place
on the form and unlocked
Figure 2-8: Properties window
The Toolbox Window

Figure 2-9: How to add a control to a form

 Common controls
 Button: a control used to trigger an action when clicked. It typically performs an
action such as submitting a form, initiating a process, or executing a command.
Buttons can display text, images, or both.
 CheckBox: a control allows users to select. It presents a small square box that can
either be checked or unchecked, indicating a binary choice. It's commonly used in
settings or preference menus.
 CheckedListBox: displays a list of items with checkboxes next to each item. Users
can check or uncheck individual items, allowing for multiple selections from a list.
It's often used when users need to select multiple items from a list.
 ComboBox: a control which presents a drop-down list of items for selection. Users
can click on the drop-down arrow to reveal the list of available options and select
one. It conserves space on the form while offering a list of choices.
Controls
 DateTimePicker: allows users to select dates and times. It provides a
calendar interface for selecting dates and a dropdown list or spin controls
for selecting times.
 Label: displays static text or captions. It's used to provide information or
descriptions for other controls on the form. Labels are typically non-
editable and serve as a way to display information to the user.
 LinkLabel: displays hyperlinks within text. It allows users to click on the
hyperlinks to navigate to a URL or perform an action. LinkLabels are
commonly used for displaying clickable links within forms.
 ListBox: displays a list of items for selection. It presents a list where users
can scroll through and select one or more items. ListBox controls can
display text or images, and they support single or multiple selection modes.
Figure 2-11: common control
Controls
 TextBox: allows users to input and edit text. It's a basic control for
accepting textual input from users. TextBox controls support
multiline input, password masking, and various formatting options.
 PictureBox: displays images. It's used to display static images on
a form. PictureBox controls support various image formats and
provide options for sizing and positioning the image.
 ProgressBar: indicates the progress of an operation. It visually
represents the progress of a task, such as file download, data
processing, or installation. ProgressBar controls can display
progress as a percentage or with a marquee animation.
 RadioButton: allows users to select one option from a group. It
presents a circular button that can be selected or deselected.
RadioButton are typically used when users need to make a single
selection from a set of mutually exclusive options.
Figure 2-12: common control
Figure 2-13: How to manipulate the
controls on a form
How to add forms to your project

Figure 2-14: add forms to your project

The Code Editor Window
 Events: user actions while program is running.
Examples: clicking, double-clicking, scrolling
 Event procedure: set of instructions to be processed when an event
occurs.
 Tells the object how to respond to an event.
 Code editor window: used to enter event procedure’s code.
Figure 2-15 : How to open the Code
Editor window
Figure 2-16: Code Editor
window
The Code Editor Window
 Class statement: used to define a class
• Begins with Public Class <class name>
• Ends with End Class
 Class Name list box: lists the names of objects
(controls) included in the user interface.
 Method Name list box: lists the events to which the
selected object is capable of responding.
• When you select a control from the Class Name list
box and a method name, a code template for the
event appears in the Code Editor window.
The Code Editor Window
 Keyword: a word with special meaning in a
programming language.
 Event code template has a procedure header and a
procedure footer.
 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.
 Sub procedure: block of code that performs a task.
procedu
re
header

Sub
procedur
e

procedu
re
Footer
Figure 2-17: Code template for the login Button’s Click event procedure
 [Link]()instruction: closes the current form at run time.
 If the current form is the only form, the application is
terminated.
 Me keyword: refers to the current form.
 Method: predefined VB procedure that can be invoked
(called) when needed.

Figure 2-18: [Link]() instruction entered in the Click

Starting and Ending an Application

Figure 2-19: How to start an

application
Starting and Ending an Application (cont'd.)
 When you start a VB application, the IDE creates an
executable file
 Executable file:
• Can be run outside of Visual Studio 2010/22
• Has a file extension of .exe
• Stored in the project’s bin\Debug folder
Starting and Ending an Application

Figure 2-20: How to end an

application
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.

Figure 2-21: How to close a

solution
Opening an Existing Solution
 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.

Figure 2-22: How to open an

existing solution
Coding Errors

 Bug: an error in a program’s code.

 Debugging: the process of locating and correcting bugs in
a program.
 Syntax error: occurs when you break one of the
programming language’s rules.
 Most syntax errors are caused by typing errors.
 Rest the mouse pointer on the mistyped instruction to see
details about the error.
Figure 2-23: Syntax error in the exit Button’s
Click event procedure
Figure 2-24: error message
Coding Errors (cont’d.)

• Syntax errors should be corrected before starting an

application.
• If you start an application with a syntax error, a dialog
box appears.
• Click No to open the Error List window.

Figure 2-25: Dialog box of

build error
Coding Errors (cont’d.)

Figure 2-26: Result of starting an application that

contains a syntax error
Design Time, Run Time, and Debug Time

Visual Basic has three distinct modes.

 Design time: the time when designing the
user interface and writing code.
 Run time: the time When testing and
running your project.
 Debug time: the time if you get a run-time
error or pause program execution.
End of chapter two part II

See you next class!