1

T U T O R I A L

Completing the
5
Inventory
Application
Introducing Programming

 2009 Pearson Education, Inc. All rights reserved.

 2

Outline

5.1 Test-Driving the Inventory Application

5.2 Introduction to Visual Basic Code
5.3 Inserting an Event Handler
5.4 Performing a Calculation and Displaying the
Result
5.5 Using the IDE to Eliminate Compilation Errors

 2009 Pearson Education, Inc. All rights reserved.

 3

Objectives

In this tutorial you will learn:

■ Add an event handler for a Button control.
■ Insert code into an event handler.
■ Access a property’s value by using Visual Basic
code.
■ Use the assignment and multiplication operators.
■ Use the Visual Basic IDE to fix compilation errors.

 2009 Pearson Education, Inc. All rights reserved.

 4

Introduction

■ You will add functionality to the Inventory

application that you designed in Tutorial 4.
■ The term functionality describes the actions an
application can execute.
■ GUI events, represent user actions, such as clicking
a Button or altering a value in a TextBox.
■ Event handlers are pieces of code that execute when
such events occur.
■ Events and event handlers are crucial to programming
Windows applications.

 2009 Pearson Education, Inc. All rights reserved.

 5

5.1 Test-Driving the Inventory Application

Application Requirements

A college bookstore receives cartons of textbooks.

In each shipment, all cartons contain the same number
of textbooks. The inventory manager wants to use a
computer to calculate the total number of textbooks
arriving at the bookstore for each shipment. The
inventory manager will enter the number of cartons
received and the fixed number of textbooks in each
carton for each shipment; then the application will
calculate the total number of textbooks in the shipment.

 2009 Pearson Education, Inc. All rights reserved.

 6

Test-Driving the Inventory Application

■ Open the directory C:\Examples\Tutorial05\

CompletedApplication\Inventory2. Double
click Inventory2.sln to open the application.
■ Select Debug > Start Debugging to run the
application (Fig. 5.1).

Figure 5.1 | Inventory application with quantities entered.

 2009 Pearson Education, Inc. All rights reserved.

 7

Test-Driving the Inventory Application (Cont.)

■ Click the Calculate Total button.

■ The application multiplies the two numbers you
entered and displays the result in the Label to the
right of Total: (Fig. 5.2).

Result of calculation

Figure 5.2 | Result of clicking the Calculate Total Button

in the Inventory application.

 2009 Pearson Education, Inc. All rights reserved.

 8

Customizing the IDE

■ Enable the IDE’s capability to show line numbers in your code:

– Select Tools > Options... (Fig. 5.3).
– In the Text Editor Basic category, select the Editor
category and locate the Interaction group of CheckBoxes.
– Make sure the CheckBox next to Line numbers is checked.

Text Editor Basic category

Show all settings CheckBox

Figure 5.3 | Options dialog.

 2009 Pearson Education, Inc. All rights reserved.
 9

Customizing the IDE (Cont.)

■ Use proper spacing when writing code.

■ Indenting code improves program readability.
■ In the Options dialog (Fig. 5.4), enter 3 for both the tab size
and indent size, or use the Smart indenting feature.

Text Editor Basic category

Editor Category

Smart indenting feature

Line numbers CheckBox

(checked)

Figure 5.4 | General settings page for Visual Basic text editor.

 2009 Pearson Education, Inc. All rights reserved.

 10

Customizing the IDE (Cont.)

■ In the Environment category, select the Fonts

and Colors category.
■ Click the Use Defaults Button (Fig. 5.5).
■ Click the OK Button to apply any changes.
Use Defaults Button

Fonts and Colors category

Figure 5.5 | Examining the Fonts and Colors page.

 2009 Pearson Education, Inc. All rights reserved.
 11

Common Programming Practice

You can change the font and color settings if you
prefer a different appearance for your code. To remain
consistent with this book, however, we recommend
that you not change the default font and color settings.

 2009 Pearson Education, Inc. All rights reserved.

 12

Introducing Visual Basic Code

■ Double click the Inventory.vb file in the Solution

Explorer window.
■ Switch to Code view (Fig. 5.6) by selecting
View > Code or pressing F7.

Inventory.vb tabbed window

Class definition

Figure 5.6 | IDE showing code for the Inventory application.

 2009 Pearson Education, Inc. All rights reserved.

 13

Introducing Visual Basic Code (Cont.)

■ Most Visual Basic programs consist of pieces called

classes, which simplify application organization.
■ Classes contain groups of code statements that
perform tasks and return information when the tasks
are completed.
– These lines collectively are called a class definition.
■ Most Visual Basic applications consist of a
combination of code written by programmers and
preexisting classes written and provided by Microsoft
in the .NET Framework Class Library.

 2009 Pearson Education, Inc. All rights reserved.

 14

Introducing Visual Basic Code (Cont.)

■ Line 1 begins the class definition.

■ The Class keyword introduces a class definition
in Visual Basic and is followed by the class name.
■ The name of the class is an identifier
– An identifier is a series of characters consisting of letters,
digits and underscores.
– Identifiers cannot begin with a digit and cannot contain
spaces.
■ The class definition ends at line 3 with the keywords
End Class.

 2009 Pearson Education, Inc. All rights reserved.

 15

Common Programming Practice

Capitalize the first letter of each class identifier, such
as the Form name.

 2009 Pearson Education, Inc. All rights reserved.

 16

Introducing Visual Basic Code (Cont.)

■ Keywords (or reserved words) are reserved for use

by Visual Basic.
■ Keywords appear in blue by default in the IDE.
■ A complete list of Visual Basic keywords can be found
in Appendix E, Keyword Chart.
■ Visual Basic keywords and identifiers are not case
sensitive.
■ The IDE applies the correct case to each letter of a
keyword and identifier, so when you type clasS, it
changes to Class when you press the Enter key.

 2009 Pearson Education, Inc. All rights reserved.

 17

Adding a Button’s Click Event Handler

■ Click the Inventory.vb [Design] tab to view the

Windows Form Designer. Then double click the
Calculate Total Button to enter Code view.
■ The code for the application, which now includes the
new event handler in lines 3–5 of Fig. 5.7, is
displayed.
Asterisks indicate unsaved
changes to application

Empty event handler

Figure 5.7 | Event handler calculateButton_Click

before you add your program code.

 2009 Pearson Education, Inc. All rights reserved.

 18

Adding a Button’s Click Event Handler (Cont.)

■ Double clicking the Calculate Total Button

caused the Visual Basic IDE to generate the
Button’s Click event handler.
– The event handler is the code that executes when the user
clicks the Calculate Total Button.
– When you double click a control, the IDE inserts an event
handler for that control.

 2009 Pearson Education, Inc. All rights reserved.

 19

Adding a Button’s Click Event Handler (Cont.)

■ At the end of each event handler’s first line, Visual

Basic inserts a Handles clause. Scroll to the right
in Code view to see the Handles clause for the
Calculate Total Button’s Click event
handler (line 3).
Handles calculateButton.Click
■ This Handles clause indicates that the event
handler is called when the calculateButton’s
Click event occurs.

 2009 Pearson Education, Inc. All rights reserved.

 20

Adding a Button’s Click Event Handler (Cont.)

■ In Visual Basic, event handlers follow the naming

scheme controlName_eventName.
■ This convention mimics the event handler’s
Handles clause.
■ The word controlName refers to the name of the
control provided in its Name property (in this case,
calculateButton).
■ The word eventName represents the name of the
event (in this case, Click) raised by the control.
– When event eventName occurs on the control
controlName, event handler controlName_eventName
executes.

 2009 Pearson Education, Inc. All rights reserved.

 21

Adding a Button’s Click Event Handler (Cont.)

■ Run the application (Fig. 5.8).

Close box

Figure 5.8 | Running the application without functionality.

 2009 Pearson Education, Inc. All rights reserved.

 22

Adding Code to an Empty Event Handler

■ Select View > Code to view the application’s

code (Fig. 5.9).

Event handler

Type this code

Figure 5.9 | Code added to the Calculate Total Button’s event handler.

 2009 Pearson Education, Inc. All rights reserved.

 23

Adding Code to an Empty Event Handler (Cont.)

■ A single-quote character ('), indicates that the

remainder of the line is a comment.
– You insert comments in programs to improve the readability of
your code.
– Comments explain the code so that other programmers who
need to work with the application can understand it more easily.
By default, comments are displayed in green.
– Comments also help you read your own code.
■ Comments can be placed either on their own lines
(these are called “full-line comments”) or at the end of
a line of Visual Basic code.
■ Comments do not cause the computer to perform any
actions when your applications run.

 2009 Pearson Education, Inc. All rights reserved.

 24

Common Programming Practice

Comments written at the end of a line should be
preceded by a space, to enhance program readability.

 2009 Pearson Education, Inc. All rights reserved.

 25

Adding Code to an Empty Event Handler (Cont.)

■ A Visual Basic statement performs an action.

■ By default, statements end when the current line
ends.
■ In Visual Basic, properties are accessed in code
by placing a period between the control name.
– This period is called the member-access operator (.),
or the dot operator.

 2009 Pearson Education, Inc. All rights reserved.

 26

Adding Code to an Empty Event Handler (Cont.)

■ When the control name and member-access operator

are typed, a window appears listing that object’s
members (Fig. 5.10).
Description of selected member

Selected member

IntelliSense

Figure 5.10 | IntelliSense activating while entering code.

 2009 Pearson Education, Inc. All rights reserved.
 27

Adding Code to an Empty Event Handler (Cont.)

■ This feature, known as IntelliSense, displays items

that can be used in the current context.
– The IntelliSense window can also be opened by pressing
Ctrl + Space.
– Click the member name once to display a description of that
member; double click it to add the member’s name to your
application. You can also press Enter or Tab to insert the
member
– The Common tab shows the most commonly used members.
The All tab shows every member that can appear to the right of
the dot operator.

 2009 Pearson Education, Inc. All rights reserved.

 28

Adding Code to an Empty Event Handler (Cont.)

■ The “=” symbol is known as the assignment

operator.
■ The expressions on either side of the assignment
operator are referred to as its operands.
– This assignment operator assigns the value on the right of
the operator (the right operand) to the variable on the left
of the operator (the left operand).
■ The assignment operator is known as a binary
operator.

 2009 Pearson Education, Inc. All rights reserved.

 29

Adding Code to an Empty Event Handler (Cont.)

■ The entire statement is called an assignment

statement because it assigns a value to the left
operand.
■ Note that the right operand is unchanged by the
assignment statement.
■ Run the application and test its output (Fig. 5.11).

Result of clicking Calculate Total Button

Figure 5.11 | Running the application with the event handler.

 2009 Pearson Education, Inc. All rights reserved.

 30

Completing the Inventory Application

■ The underscore character used in Figure 5.12 is

known as the line-continuation character.
– At least one space character must precede each line-
continuation character.
■ A whitespace character is a space, tab or newline.

Modified Inventory
application code

Figure 5.12 | Using multiplication in the Inventory application.

 2009 Pearson Education, Inc. All rights reserved.

 31

Common Programming Practice

A lengthy statement may be spread over several lines.
If a single statement must be split across lines, choose
breaking points that make sense, such as after an
operator. If a statement is split across two or more
lines, indent all subsequent lines with one “level” of
indentation.

 2009 Pearson Education, Inc. All rights reserved.

 32

Common Programming Error

Splitting a statement over several lines without
including the line-continuation character is a
compilation error.

 2009 Pearson Education, Inc. All rights reserved.

 33

Common Programming Error

Placing non-whitespace characters, including
comments, to the right of a line-continuation character
is a compilation error.

 2009 Pearson Education, Inc. All rights reserved.

 34

Completing the Inventory Application (Cont.)

■ The asterisk (*) is known as the multiplication

operator.
– Its left and right operands are multiplied together.
■ The Val function prevents nonnumeric inputs from
terminating the application. A function is a piece of
code that performs a task when called and returns a
value.
– The values returned by Val become the values used in
the multiplication expression.

 2009 Pearson Education, Inc. All rights reserved.

 35

Completing the Inventory Application (Cont.)

■ Call functions by typing their name followed by

parentheses.
■ Any values inside the parentheses are known as
function arguments.
– Arguments are inputs to the function.
– In this case, the argument specifies which value you want
to send to function Val.

 2009 Pearson Education, Inc. All rights reserved.

 36

Completing the Inventory Application (Cont.)

■ Function Val obtains a value from a string of

characters.
■ Val reads its argument one character at a time
until it encounters a character that is not a
number.
■ Val recognizes the decimal point as a numeric
character, as well as the plus and minus signs
when they appear at the beginning of the string.

 2009 Pearson Education, Inc. All rights reserved.

 37

Completing the Inventory Application (Cont.)

■ Once a nonnumeric character is read, Val returns

the number it has read up to that point.
– Val ignores whitespace characters.
– Val does not recognize symbols such as commas and
dollar signs.
– If function Val receives an argument that cannot be
converted to a number, it returns 0.

 2009 Pearson Education, Inc. All rights reserved.

 38

Completing the Inventory Application (Cont.)

■ Be careful when using Val—although the value returned is

a number, it is not always the value the user intended (see
Fig. 5.13).
■ If incorrect data is entered by the user, Val makes no
indication of the error.

Val Function call examples Results

Val( "16" ) 16
Val( "–3" ) –3
Val( "1.5" ) 1.5
Val( "67a4" ) 67
Val( "8+5" ) 8
Val( "14 Main St." ) 14
Val( "+1 2 3 4 5" ) 12345
Val( "hello" ) 0

Figure 5.13 | Val function call examples.

 2009 Pearson Education, Inc. All rights reserved.

 39
Outline

■ Figure 5.14 presents the Inventory application’s code.

1 Public Class InventoryForm

2
3 Private Sub calculateButton_Click( _
4 ByVal sender As System.Object, ByVal e As System.EventArgs) _
5 Handles calculateButton.Click
6
7 ' multiply values input and display result in Label
8 totalResultLabel.Text = _
9 Val(cartonsTextBox.Text) * Val(itemsTextBox.Text)
10 End Sub ' calculateButton_Click
11 End Class ' InventoryForm

 2009 Pearson Education, Inc. All rights reserved.

 40

5.5 Using the IDE to Eliminate Compilation Errors

■ Debugging is the process of fixing errors in an

application.
■ There are two types of errors—compilation errors and
logic errors.
– Compilation errors occur when code statements violate
the grammatical rules of the programming language or
when code statements are simply incorrect in the current
context.
– Compilation errors include misspellings, failure to use the
line-continuation character when splitting a statement
across multiple lines or using an identifier in the wrong
context.

 2009 Pearson Education, Inc. All rights reserved.

 41
5.5 Using the IDE to Eliminate
Compilation Errors (Cont.)

– Syntax errors are compilation errors that are violations of

the grammatical rules of the programming language.
– Logic errors do not prevent the application from compiling
successfully, but do cause the application to produce
erroneous results.
■ The Visual Basic IDE contains a debugger that allows
you to analyze the behavior of your application.

 2009 Pearson Education, Inc. All rights reserved.

 42
5.5 Using the IDE to Eliminate
Compilation Errors (Cont.)

■ You can compile an application without executing it by

selecting Build > Build [Project Name].
■ The Output window (Fig. 5.15) displays the result of
the compilation.
– Select Debug > Windows > Output to view it while
debugging.

Figure 5.15 | Results of successful build in the Output window.

 2009 Pearson Education, Inc. All rights reserved.

 43
5.5 Using the IDE to Eliminate
Compilation Errors (Cont.)

■ Compilation errors appear in the Error List window along with

a description of each error.
■ Figure 5.16 displays the error that appears when the line-
continuation character is left out of a multiple-line statement.
■ Double click the error in the Error List window to go the
location of the error in the code.
■ For additional information on a compilation error, right click the
error statement in the Error List window and select Show
Error Help.

Figure 5.16 | Error List lists compilation errors.

 2009 Pearson Education, Inc. All rights reserved.

 44

Using the IDE to Eliminate Compilation Errors

■ The Visual Basic IDE provides real-time error

checking (Fig. 5.17).

Indicates compilation error

Figure 5.17 | IDE with compilation errors.

 2009 Pearson Education, Inc. All rights reserved.

 45

Using the IDE to Eliminate Compilation Errors (Cont.)

■ Open the Error List window (Fig. 5.18) by selecting

View > Error List.

Figure 5.18 | Error List displaying the compilation errors.

■ These features notify you of possible errors and give you a

chance to fix them before compiling the application.
■ The IDE refuses to run your modified application until all
compilation errors have been corrected.

 2009 Pearson Education, Inc. All rights reserved.

 46

Using the IDE to Eliminate Compilation Errors (Cont.)

■ Double clicking an error in the Error List window

selects the code containing that error.
■ Placing the cursor over the compilation error
displays the error message (Fig. 5.19).

Highlighted compilation error

Figure 5.19 | Highlighting the code where a compilation error occurs.

 2009 Pearson Education, Inc. All rights reserved.

 47

Using the IDE to Eliminate Compilation Errors (Cont.)

■ Additional help regarding the compilation error is

also available through the Error List item’s
context menu, which you can access by right
clicking an item (Fig. 5.20).

Context help

Figure 5.20 | Getting additional help.

 2009 Pearson Education, Inc. All rights reserved.

 48

Using the IDE to Eliminate Compilation Errors (Cont.)

■ This displays a helpful reference page (Fig. 5.21).

Suggested solutions to
misspelled identifier
(note that the debugger
interprets the misspelling
as a new, undeclared
identifier)

Figure 5.21 | Error Help window.

 2009 Pearson Education, Inc. All rights reserved.

 49

Using the IDE to Eliminate Compilation Errors (Cont.)

■ When you correct an error, note that the jagged

line does not disappear immediately.
■ When you move the cursor to another line, the
IDE rechecks the code for errors and removes the
jagged underline.

 2009 Pearson Education, Inc. All rights reserved.

 50

Using the IDE to Eliminate Compilation Errors (Cont.)

■ Hover over the small red rectangle located at a

compilation error.
– The Error Correction Options icon ( ) appears.
– Click this icon to open the Error Correction
Options window (Fig. 5.22).

Figure 5.22 | Using the Error Correction window to fix a compilation error.
 2009 Pearson Education, Inc. All rights reserved.