“Everyday life is like

PROGRAMMING, if you
Love Something you can
put beauty into it.”
DONALD KNUTH
OBJECTIVES
After studying this chapter, you should be able to:
• 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

MICROSOFT VISUAL BASIC 2010: RELOADED, FOURTH EDITION

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
MICROSOFT VISUAL BASIC 2010: RELOADED, FOURTH EDITION
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#
MICROSOFT VISUAL BASIC 2010: RELOADED, FOURTH EDITION
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
MICROSOFT VISUAL BASIC 2010: RELOADED, FOURTH EDITION
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
MICROSOFT VISUAL BASIC 2010: RELOADED, FOURTH EDITION
✓Title Bar – It contains the name of the Visual
Basic

✓Menu Bar – It contains group of menus such

as File, Edit, View, Project, Debug, Data,
Format, Tools, Window and Help.

Visual Basic Screen Elements

✓Toolbar – It contains tools such as New Project, Open File,
Add New Item, Save, Save All, Cut, Copy, Paste, Find, Undo,
Redo, Solution Explorer, Properties Window, Toolbox and etc.

✓Start Page – It contains commands such as New Project,

Open Project and Quickly Create you First Application. It also
shows information about Visual Basic, Tutorials on how to
build applications and upgrade to Visual Studio 2010.

Visual Basic Screen Elements

Windows Form Designer – Where you create and design
your project.

Solution Explorer – Contains the project files and buttons

that allow you toggle between code view and design view.
It also show the project information and name.

Properties Window – Display the properties of the form or

control that you have selected.
Visual Basic Screen Elements
STARTING MICROSOFT VISUAL STUDIO 2010

Figure 1-2: How to start Visual Studio 2010 or Visual Basic 2010 Express Edition
Figure 1-3: Visual Studio 2010 Professional
13
startup screen
Figure 1-4: Visual Basic 2010 Express startup screen
How To Create A Visual Basic 2010 Windows
Application

15
Figure 1-5: How to create a Visual Basic 2010 Windows application
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.)
How To Create A Visual Basic 2010 Windows
Application (Cont’d.)

Figure 1-6: Options dialog box

How To Create A Visual Basic 2010 Windows
Application (Cont’d.)

Figure 1-7: Completed New Project dialog box

18
in Visual Studio 2010
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
How To Create A Visual Basic 2010 Windows
Application (Cont’d.)

Figure 1-9: Solution and Visual Basic Project

Managing The Windows In The IDE

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

 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]
The Windows Form Designer Window
(Cont’d.)

Figure 1-11: Windows Form Designer window

 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

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
 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
 The Properties Window (cont'd.)

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

The Properties Window (Cont'd.)
• 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
 Properties Of A Windows Form

Figure 1-14: Properties window showing a partial

29
listing of the form’s properties
Properties Of A Windows Form (Cont'd.)
• 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
Properties Of A Windows Form (Cont'd.)
• 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
• Start position 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
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
Toolbox Window in Visual Basic
The Toolbox Window (Cont'd.)

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

THE TOOLBOX WINDOW (CONT'D.)

Figure 1-17: How to manipulate the controls

35 on a form
The Label Control
• Label control:
oDisplays text that user cannot edit
oUsed as “prompts” to explain controls or display output
oName 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
The Label Control (Cont'd.)

Figure 1-18: Wizard application’s37user interface

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
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
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
• 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
The Code Editor Window (Cont'd.)

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

The Code Editor Window (Cont'd.)

Figure 1-20: Code Editor window

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
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
 THE CODE EDITOR WINDOW (CONT'D.)

Figure 1-21: Code template for the exitButton’s Click event procedure
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
THE ME.CLOSE() INSTRUCTION (CONT'D.)

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

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

STARTING AND ENDING AN APPLICATION
MICROSOFT VISUAL BASIC 2010: RELOADED, FOURTH
EDITION

• STARTUP FORM: THE FORM TO BE DISPLAYED WHEN THE APPLICATION STARTS

50
Figure 1-24: How to specify the startup form
 STARTING AND ENDING AN APPLICATION
(CONT'D.)

Figure 1-25: Project Designer window

MICROSOFT VISUAL BASIC 2010: RELOADED,

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

Figure 1-26: How to start an application

MICROSOFT VISUAL BASIC 2010: RELOADED,

52 FOURTH EDITION
STARTING AND ENDING AN APPLICATION (CONT'D.)

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

MICROSOFT VISUAL BASIC 2010: RELOADED,

53 FOURTH EDITION
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

MICROSOFT VISUAL BASIC 2010: RELOADED,

54 FOURTH EDITION
 STARTING AND ENDING AN APPLICATION
(CONT'D.)

Figure 1-25: How to end an application

MICROSOFT VISUAL BASIC 2010: RELOADED,

55 FOURTH EDITION
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
USING AN ASSIGNMENT STATEMENT (CONT'D.)

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

MICROSOFT VISUAL BASIC 2010: RELOADED,

57 FOURTH EDITION
PRINTING THE CODE AND USER INTERFACE

Figure 1-30: How to print the code and interface during design time

MICROSOFT VISUAL BASIC 2010: RELOADED,

58 FOURTH EDITION
 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

MICROSOFT VISUAL BASIC 2010: RELOADED,

59 FOURTH EDITION
 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

MICROSOFT VISUAL BASIC 2010: RELOADED, FOURTH EDITION 60

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

MICROSOFT VISUAL BASIC 2010: RELOADED,

61 FOURTH EDITION
 CODING ERRORS (CONT’D.)

FIGURE 1-33: SYNTAX ERROR IN THE EXITBUTTON’S CLICK EVENT PROCEDURE

MICROSOFT VISUAL BASIC 2010: RELOADED,

62 FOURTH EDITION
 CODING ERRORS (CONT’D.)

FIGURE 1-34: SYNTAX ERROR MESSAGE

MICROSOFT VISUAL BASIC 2010: RELOADED,

63 FOURTH EDITION
 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

MICROSOFT VISUAL BASIC 2010: RELOADED,

64 FOURTH EDITION
CODING ERRORS (CONT’D.)

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

MICROSOFT VISUAL BASIC 2010: RELOADED,

65 FOURTH EDITION
PROGRAMMING TUTORIAL 1

Figure 1-54: Result of starting the Wizard application

MICROSOFT VISUAL BASIC 2010: RELOADED,

66 FOURTH EDITION
 PROGRAMMING TUTORIAL 2

Figure 1-67: Result of clicking the Abby button

MICROSOFT VISUAL BASIC 2010: RELOADED,

67 FOURTH EDITION
 PROGRAMMING EXAMPLE

Figure 1-68: User interface

MICROSOFT VISUAL BASIC 2010: RELOADED,

68 FOURTH EDITION
 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

MICROSOFT VISUAL BASIC 2010: RELOADED,

69 FOURTH EDITION
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

MICROSOFT VISUAL BASIC 2010: RELOADED,

70 FOURTH EDITION
 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

MICROSOFT VISUAL BASIC 2010: RELOADED,

71 FOURTH EDITION
 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

MICROSOFT VISUAL BASIC 2010: RELOADED,

72 FOURTH EDITION
 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

MICROSOFT VISUAL BASIC 2010: RELOADED,

73 FOURTH EDITION
 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

MICROSOFT VISUAL BASIC 2010: RELOADED,

74 FOURTH EDITION