AN INTRODUCTION TO

VISUAL BASIC 2010

CHAPTER 2 : LESSON 2
OBJECTIVES
• Create a Visual Basic 2010 Windows-based application
• Manage the windows in the Integrated Development Environment
(IDE)
• Set the properties of an object
• Add a control to a form
• Use the Label, Button, and PictureBox tools
• Use the options on the Format menu

2
OBJECTIVES (CONT'D.)
• Enter code in the Code Editor window
• Save a solution
• Start and end an application
• Print an application’s code and interface
• Write an assignment statement
• Print an application’s code and interface
• Close and open an existing solution
• Find and correct a syntax error
3
VISUAL STUDIO 2010
• Visual Basic 2010 is an object-oriented programming language
• Object: anything that can be seen, touched, or used
• Class: a pattern used to create an object
• Instance: an object created from a class; object is said to be instantiated
• Integrated Development Environment (IDE):
• Contains all the tools and features needed to create, run, and test
programs
• Includes Visual Basic, Visual C++, Visual C#, and Visual F#
4
VISUAL STUDIO 2010 (CONT'D.)
• Application: program or suite of programs
• Windows-based application:
• Has a Windows user interface
• Runs on a personal computer
• User interface: what the user sees and interacts with when using an
application
• Web-based application:
• Has a Web user interface
• Runs on a server
• Accessed with a computer browser 5
 CREATING A VISUAL BASIC 2010 WINDOWS
APPLICATION
• 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 projects

6
SOLUTIONS, PROJECTS, AND FILES (CONT'D.)

Figure 1-1: Illustration of a solution, project, and file

7
STARTING MICROSOFT VISUAL STUDIO 2010

Figure 1-2: How to start Visual Studio 2010 or Visual Basic 2010 Express
Edition
8
Figure 1-3: Visual Studio 2010 Professional startup screen
9
Figure 1-4: Visual Basic 2010 Express startup screen
10
HOW TO CREATE A VISUAL BASIC 2010
WINDOWS APPLICATION

Figure 1-5: How to create a Visual Basic 2010 Windows application 11

HOW TO CREATE A VISUAL BASIC 2010
WINDOWS APPLICATION (CONT’D.)

Figure 1-5: How to create a Visual Basic 2010 Windows application (cont’d.)

12
HOW TO CREATE A VISUAL BASIC 2010
WINDOWS APPLICATION (CONT’D.)

Figure 1-6: Options dialog box

13
HOW TO CREATE A VISUAL BASIC 2010 WINDOWS
APPLICATION (CONT’D.)

Figure 1-7: Completed New Project dialog box in Visual Studio 2010 14
HOW TO CREATE A VISUAL BASIC 2010
WINDOWS APPLICATION (CONT’D.)

Figure 1-8: Completed New Project dialog box in

Visual Basic 2010 Express Edition 15
HOW TO CREATE A VISUAL BASIC 2010
WINDOWS APPLICATION (CONT’D.)

Figure 1-9: Solution and Visual Basic Project

MICROSOFT VISUAL BASIC 2010: RELOADED, FOURTH EDITION 16
MANAGING THE WINDOWS IN THE IDE

Figure 1-10: How to manage the windows in the IDE 17

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 Form1.vb [Design]
18
THE WINDOWS FORM DESIGNER WINDOW
(CONT’D.)

Figure 1-11: Windows Form Designer window 19

THE SOLUTION EXPLORER WINDOW
• Solution Explorer window:
• Displays a list of projects contained in this solution
• Displays the items contained in each project

Figure 1-12: Solution Explorer window

20
THE SOLUTION EXPLORER WINDOW
(CONT'D.)
• 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

21
 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

22
 The Properties Window (cont'd.)

Figure 1-13: Properties window showing the Form1.vb file’s properties

23
THE PROPERTIES WINDOW

• 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
24
PROPERTIES OF A WINDOWS FORM

Figure 1-14: Properties window showing a partial listing of the form’s properties 25
PROPERTIES OF A WINDOWS FORM

• Class definition: block of code that defines the attributes and

behaviors of an object
• All class definitions are contained in namespaces
• Namespace: defines a group of related classes
• Dot member access operator: the period that separates words
in an object’s name to indicate a hierarchy of namespaces
• Name property: used to refer to an object in code
• Give each object a meaningful name

26
PROPERTIES OF A WINDOWS FORM
• 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
• 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 27
THE TOOLBOX WINDOW
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, can
be created
• 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 29
Figure 1-15: Toolbox window 30
THE TOOLBOX WINDOW (CONT'D.)

Figure 1-16: How to add a control to a form 31

THE TOOLBOX WINDOW (CONT'D.)

Figure 1-17: How to manipulate the controls on a form

32
THE LABEL CONTROL
• 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 case: 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

33
THE LABEL CONTROL (CONT'D.)

Figure 1-18: Wizard application’s user interface 34

THE BUTTON CONTROL
• Button control:
• Performs an immediate action when clicked
• Its name should end with “Button”
• Text property: specifies the text that appears on the
button’s face

35
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
36
USING THE FORMAT MENU
• Format menu: provides options for manipulating controls on the
form
• Align option: aligns two or more controls by left, right, top, or bottom
borders
• Make Same Size option: makes width and/or height of two or more controls
the same
• Center in Form option: centers controls horizontally or vertically on the form
• Multi-select controls by clicking the first, then using Ctrl-click for
each additional control
• First control selected is the reference control
37
• Its size/position is used to adjust the others
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
38
THE CODE EDITOR WINDOW (CONT'D.)

Figure 1-19: How to open the Code Editor window

39
THE CODE EDITOR WINDOW (CONT'D.)

Figure 1-20: Code Editor window

40
THE CODE EDITOR WINDOW (CONT'D.)
• 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
• Syntax: rules of the language 41
THE CODE EDITOR WINDOW (CONT'D.)
• 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

42
THE CODE EDITOR WINDOW (CONT'D.)

Figure 1-21: Code template for the exitButton’s Click event procedure

43
THE ME.CLOSE() INSTRUCTION
• Me.Close() 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
• Sequential processing: each line is executed in sequence
• Also called a sequence structure
44
THE ME.CLOSE() INSTRUCTION (CONT'D.)

Figure 1-22: Me.Close() instruction entered in the Click event procedure

45
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

Figure 1-23: How to save a solution

46
STARTING AND ENDING AN APPLICATION
• Startup form: the form to be displayed when the application starts

Figure 1-24: How to specify the startup form 47

STARTING AND ENDING AN APPLICATION
(CONT'D.)

Figure 1-25: Project Designer window 48

STARTING AND ENDING AN APPLICATION
(CONT'D.)

Figure 1-26: How to start an application

49
STARTING AND ENDING AN APPLICATION
(CONT'D.)

Figure 1-27: Result of starting the Wizard Viewer application 50

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
• Has a file extension of .exe
• Stored in the project’s bin\Debug folder

51
STARTING AND ENDING AN APPLICATION
(CONT'D.)

Figure 1-25: How to end an application

52
ASSIGNING A VALUE TO A
PROPERTY
DURING RUN TIME
• 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 = sign
• Value of the expression on the right of the = sign is assigned to
the object and property on the left of the = sign

53
USING AN ASSIGNMENT STATEMENT
(CONT'D.)

Figure 1-29: Assignment statements entered in the Code Editor window

54
PRINTING THE CODE AND USER INTERFACE

Figure 1-30: How to print the code and interface during design time 55
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 1-31: How to close a solution

56
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 1-32: How to open an existing solution 57

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
58
CODING ERRORS (CONT’D.)

Figure 1-33: Syntax error in the exitButton’s Click event procedure

59
CODING ERRORS (CONT’D.)

Figure 1-34: Syntax error message

60
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 1-35: Dialog box 61

CODING ERRORS (CONT’D.)

Figure 1-36: Result of starting an application that contains a syntax error

62
PROGRAMMING TUTORIAL 1

Figure 1-54: Result of starting the Wizard application 63

PROGRAMMING TUTORIAL 2

Figure 1-67: Result of clicking the Abby button

64
PROGRAMMING EXAMPLE

Figure 1-68: User interface

65
SUMMARY

• Object-oriented programming language allows programmers to use objects to

accomplish a goal
• Object: can be seen, touched, or used and has attributes that control its appearance and
behavior
• Class: a pattern from which an object can be created
• Applications created in Visual Studio 2010 are composed of solutions, projects, and files
• Windows Form Designer window: used to create GUI applications

66
SUMMARY (CONT'D.)

• A form is the foundation for the user interface

• Windows Form object is instantiated from the Windows Form class
• Solution Explorer window: displays names of projects and files in the solution
• Properties window: lists an object’s properties
• All class definitions are contained in namespaces
• System.Windows.Forms namespace contains definition of the Windows Form class
and class definitions for objects added to a form
67
SUMMARY (CONT'D.)

• Name property: used to refer to an object in code

• Text property of a form: specifies the text to be displayed in the title bar of the form and in
the taskbar when running
• Form’s StartPosition property sets the position of the form when it first appears at run time
• Recommended font is Segoe UI in 9-point size
• Toolbox: contains tools for creating the GUI
• A control’s Text property value is displayed inside the control

68
SUMMARY (CONT'D.)

• Controls on a form can be selected, sized, moved, deleted, or locked at design time
• Label control: contains text that a user cannot edit
• Button control: performs an immediate action when clicked
• Picture box control: displays an image on a form
• Format menu provides options for aligning and sizing controls on a form
• Event procedure: the code that tells an object how to respond to an event

69
SUMMARY (CONT'D.)

• Use the Class Name and Method Name list boxes to select an object and event to
code
• Code Editor: provides code templates for each object’s event procedures
• Me.Close() instruction: can terminate an application
• Computer automatically creates an executable file when you start a Visual Basic
application in the IDE
• Use an assignment statement to assign a value to a property during run time
70
SUMMARY (CONT'D.)

• You should print your application’s code and its user interface
• Closing a solution closes all projects and files in it
• The process of locating and correcting errors (bugs) in a program is called
debugging

71