Programming with
Microsoft Visual Basic 2008
Fourth Edition
Chapter Two
Designing Applications
Previewing the Playtime Cellular
Application
• Playtime Cellular application:
– Allows salespeople to enter customer’s name,
address, and number of blue and pink phones
ordered
– Calculates and displays total number of phones
ordered and the total price of the order
Programming with Microsoft Visual Basic 2008, Fourth Edition
2
Previewing the Playtime Cellular
Application (continued)
Figure 2-2 Completed order form
Programming with Microsoft Visual Basic 2008, Fourth Edition
3
Lesson A Objectives
After studying Lesson A, you should be able to:
• Plan an object-oriented application in Visual
Basic 2008
• Complete a TOE (Task, Object, Event) chart
• Follow the Windows standards regarding the
layout and labeling of controls
Programming with Microsoft Visual Basic 2008, Fourth Edition
4
Creating an Object-Oriented
Application
• Developing an application is like building a home
• Role of programmer analogous to that of builder
• Bugs: Problems that affect application functions
Programming with Microsoft Visual Basic 2008, Fourth Edition
5
Creating an Object-Oriented
Application (continued)
Figure 2-3: Processes used by a builder and a programmer
Programming with Microsoft Visual Basic 2008, Fourth Edition
6
Planning an Object-Oriented
Application
• Actively involve user in planning phase
– End product should closely match the user’s
needs and wants
• TOE chart: Used to record tasks, objects, and
events required for the application
Programming with Microsoft Visual Basic 2008, Fourth Edition
7
Planning an Object-Oriented
Application (continued)
Figure 2-4: Steps for planning an OO application
Programming with Microsoft Visual Basic 2008, Fourth Edition
8
Identifying the Application’s Tasks
• What information will the application need to
display on the screen and/or print on the printer?
• What information will the user need to enter into
the user interface?
• What information will the application need to
calculate to produce the desired result?
• How will the user end the application?
• Will previous information need to be cleared from
the screen before new information is entered?
Programming with Microsoft Visual Basic 2008, Fourth Edition
9
Identifying the Application’s Tasks
(continued)
Figure 2-6: Tasks entered in a TOE chart
Programming with Microsoft Visual Basic 2008, Fourth Edition
10
Identifying the Application’s Tasks
(continued)
Figure 2-6: Tasks entered in a TOE chart (continued)
Programming with Microsoft Visual Basic 2008, Fourth Edition
11
Identifying the Objects
• Assign each task to an object in user interface
• Objects to be used: Label control, button control,
text box
• Label control: Displays information that user
should not change
• Button control: Performs an action immediately
after a click event
• Text box: Provides an area for user to enter data
Programming with Microsoft Visual Basic 2008, Fourth Edition
12
Identifying the Events
• Determine which event (if any) must occur for an
object to do its assigned task
• Text boxes: No special event is needed
• Label controls: No special event is needed
• btnCalc, btnClear, and btnExit buttons: Must
perform assigned tasks when clicked
Programming with Microsoft Visual Basic 2008, Fourth Edition
13
Identifying the Events (continued)
Figure 2-9: Completed TOE chart ordered by object
Programming with Microsoft Visual Basic 2008, Fourth Edition
14
Drawing a Sketch of the User Interface
• Follow Windows standards for designing the
interface
– In Western countries, information flows either
vertically or horizontally
• Vertical arrangement: Information flows from
top to bottom, with essential information located
in first column
• Horizontal arrangement: Information flows from
left to right, with essential information placed in
first row
Programming with Microsoft Visual Basic 2008, Fourth Edition
15
Drawing a Sketch of the
User Interface (continued)
Figure 2-10: Vertical arrangement of the Playtime Cellular application
Programming with Microsoft Visual Basic 2008, Fourth Edition
16
Drawing a Sketch of the
User Interface (continued)
Figure 2-11: Horizontal arrangement of the Playtime Cellular application
Programming with Microsoft Visual Basic 2008, Fourth Edition
17
Drawing a Sketch of the
User Interface (continued)
• White space or containers may be used to group
related controls
• Containers: Objects used to group related
controls
– Examples: GroupBox, Panel, TableLayoutPanel
• Label controls that display output should have
meaningful names
– Example: “Total Price” identifies lblTotalPrice label
• Identifying labels should end with colon (:)
– Example: “Total Price:”
Programming with Microsoft Visual Basic 2008, Fourth Edition
18
Drawing a Sketch of the
User Interface (continued)
• Sentence capitalization: Only first letter in the
first word is capitalized
– Use for identifying labels
• Book title capitalization: Capitalize first letter of
each word except articles, conjunctions, and
prepositions
– Use for button text
• Buttons should be same height and width, and
should be aligned
• Group related controls together, and keep margins
consistent
Programming with Microsoft Visual Basic 2008, Fourth Edition
19
Lesson A Summary
• Steps to create an OO application:
–
–
–
–
–
–
Meet with client
Plan application
Build user interface
Code application
Test and debug application
Assemble documentation
• To plan OO application, identify tasks, objects
and events that are needed
• Identify information needed as input to produce
desired result
Programming with Microsoft Visual Basic 2008, Fourth Edition
20
Lesson B Objectives
After studying Lesson B, you should be able to:
• Build the user interface using your TOE chart and
sketch
• Follow the Windows standards regarding the use
of graphics, fonts, and color
• Set a control’s BorderStyle property
• Add a text box to a form
• Lock the controls on the form
• Assign access keys to controls
• Use the TabIndex property
Programming with Microsoft Visual Basic 2008, Fourth Edition
21
Building the User Interface
• Use TOE chart and sketch as guides when
building user interface
– Place appropriate controls on forms
– Set applicable properties of controls
• Some features of user interface:
– Information is arranged vertically
– Controls are aligned and appropriately labeled
• Try to create an interface that no one notices
Programming with Microsoft Visual Basic 2008, Fourth Edition
22
Building the User Interface
(continued)
Figure 2-12: Partially completed interface for the
Playtime Cellular application
Programming with Microsoft Visual Basic 2008, Fourth Edition
23
Including Graphics in the Interface
• Graphics: Icons or pictures added to an interface
– Used to emphasize or clarify a portion of screen,
or for aesthetic purposes
• The human eye is attracted to pictures before
text
– Include graphic only if it is necessary
• Graphics for aesthetic use should be small and
positioned to avoid distracting user
Programming with Microsoft Visual Basic 2008, Fourth Edition
24
Selecting Fonts for the Interface
• Font property: Controls font type, style, and size
• Recommendations for fonts:
– Use sans serif fonts (without strokes)
• e.g., Segoe UI, Tahoma, Microsoft Sans Serif
–
–
–
–
Use 8-12 point size fonts for interface
Use only one or two font sizes and one font type
Avoid italics and underlining
Limit bold text to titles, headings, and key items
• Objects added to form inherit form’s font setting
Programming with Microsoft Visual Basic 2008, Fourth Edition
25
Adding Color to the Interface
• The eye is drawn to color before black and white
• Add color only if there is good reason
– Many people have trouble distinguishing color
• Guidelines for adding colors:
– Use dark text against light background
– Limit of three colors
• Not including black, white, gray
– Colors added should be complementary
– Avoid using dark color for background
– Use color to help identify interface elements, but
not as only means of identification
Programming with Microsoft Visual Basic 2008, Fourth Edition
26
The BorderStyle and AutoSize
Properties
• BorderStyle property: Determines style of
control’s border
– None: Ensures control will not have border
– FixedSingle: Surrounds control with thin line
– Fixed3D: Gives control a 3-D appearance
(default)
• AutoSize property: Determines whether label
control automatically sizes to fit its current
contents
– Use True for identifying labels, but use False for
output labels
Programming with Microsoft Visual Basic 2008, Fourth Edition
27
Adding a Text Box Control to the Form
• Text box control
– Provides an area in the form for data entry
• Use TextBox tool to add a text box control
• Make all text boxes same size and align them
using snap lines
• Blue snap lines: For vertical alignment
• Pink snap lines: For horizontal alignment
Programming with Microsoft Visual Basic 2008, Fourth Edition
28
Adding a Text Box Control
to the Form (continued)
Figure 2-13: Snap lines shown in the interface
Programming with Microsoft Visual Basic 2008, Fourth Edition
29
Locking the Controls on a Form
• Lock controls after they are properly placed
– Purpose: Avoid inadvertently moving controls
• A locked control is identified by a small-lock
• To lock controls:
– Click form (or any control on the form)
– Click Format on menu bar
– Click Lock Controls
• Follow same procedure to unlock controls
Programming with Microsoft Visual Basic 2008, Fourth Edition
30
Assigning Access Keys
• Access key
– Enables object to be selected using keyboard
– Key combination: Alt key + letter or number
• Each access key must be unique
• Shown in interface as underlined letter
• Assigning an access key:
– Include an ampersand (&) in the control’s caption
– Example: “&Calculate Order” assigns ‘C’ to button
Programming with Microsoft Visual Basic 2008, Fourth Edition
31
Assigning Access Keys (continued)
• Reasons to assign access keys:
– Allow user to work even if mouse does not
– Allow fast typists to keep hands on the keyboard
– Allow people with disabilities that prevent them
from using a mouse to be able to use application
• Follow Windows standards for assigning
commonly used access keys
Programming with Microsoft Visual Basic 2008, Fourth Edition
32
Setting the TabIndex Property
• Focus: State in which a control is ready to
accept user input or action
• Pressing Tab key or access key shifts focus
• TabIndex property: Contains number
representing order in which control will receive
focus when user presses Tab key
– Control with TabIndex of 0 receives focus first
• Set TabIndex using Properties window or Tab
Order option on View menu
– Make a list of objects to determine proper ordering
Programming with Microsoft Visual Basic 2008, Fourth Edition
33
Setting the TabIndex Property
(continued)
Figure 2-15: TabIndex boxes showing the correct TabIndex values
Programming with Microsoft Visual Basic 2008, Fourth Edition
34
Lesson B Summary
• To specify control’s border, set BorderStyle
property
• To lock/unlock controls on form, use Lock
Controls option on Format menu
• To assign an access key to control, type an
ampersand (&) in Text property of control or
identifying label
• To set tab order, set each control’s TabIndex
property to number that represents order in which
you want the control to receive focus
Programming with Microsoft Visual Basic 2008, Fourth Edition
35
Lesson C Objectives
After studying Lesson C, you should be able to:
• Code an application using its TOE chart
• Plan an object’s code using pseudocode or a
flowchart
• Write an assignment statement
• Send the focus to a control while an application is
running
• Include internal documentation in the code
• Write arithmetic expressions
• Use the Val and Format functions
Programming with Microsoft Visual Basic 2008, Fourth Edition
36
Coding the Application
• Code: Instructions added to an application
• Coding is done after planning and building
interface
• TOE charts show which objects and events need
to be coded
• Playtime Cellular application code requirements:
– Three buttons associated with Click events
Programming with Microsoft Visual Basic 2008, Fourth Edition
37
Coding the Application (continued)
Figure 2-18: Playtime Cellular application’s interface
Programming with Microsoft Visual Basic 2008, Fourth Edition
38
Coding the Application (continued)
Figure 2-19: Playtime Cellular application’s TOE chart (ordered by object)
Programming with Microsoft Visual Basic 2008, Fourth Edition
39
Planning a Procedure Using
Pseudocode
• Pseudocode: Short phrases used to describe
the steps a procedure must take to accomplish
its goal
– Travel directions are a type of pseudocode
• btnCalc Click event procedure: Must calculate
total phones ordered and total price, and then
display results
Programming with Microsoft Visual Basic 2008, Fourth Edition
40
Planning a Procedure Using
Pseudocode (continued)
Figure 2-20: Pseudocode for the Playtime Cellular application
Programming with Microsoft Visual Basic 2008, Fourth Edition
41
Planning a Procedure Using a
Flowchart
• Flowchart: Uses standardized symbols to show
program logic
–
–
–
–
Oval: Start/stop symbol
Rectangle: Process symbol; represents a task
Parallelogram: Input/output symbol
Flowlines: Connect the symbols
• Flowcharts depict same logic as pseudocode
• Programmers usually use either flowcharts or
pseudocode (but not both)
Programming with Microsoft Visual Basic 2008, Fourth Edition
42
Coding the btnClear Control’s Click
Event Procedure
• btnClear control’s task: Clear screen for next
order
• String: Group of characters enclosed in
quotation marks (“”)
• Zero-length string (or empty string): Pair of
quotation marks with nothing between them (“”)
• Two ways to remove control contents at runtime:
– Assign zero-length string to control’s Text property
– Assign String.Empty to control’s Text property
Programming with Microsoft Visual Basic 2008, Fourth Edition
43
Coding the btnClear Control’s Click
Event Procedure (continued)
Figure 2-22: Pseudocode for the btnClear control’s Click event procedure
Programming with Microsoft Visual Basic 2008, Fourth Edition
44
Assigning a Value to a Property
During Run Time
• Assignment statement: Instruction assigning a
value to object at runtime
• Syntax: object.property = expression
– object and property are object and property names
– expression contains the value to be assigned
• Assignment operator (=): Assigns value on right
side to the object on left side
Programming with Microsoft Visual Basic 2008, Fourth Edition
45
Using the Focus Method
• Method: Predefined procedure
• Focus method:
– Allows you to move focus to specified control
• Syntax: object.Focus()
– Object: Name of control that receives focus
Programming with Microsoft Visual Basic 2008, Fourth Edition
46
Internally Documenting the
Program Code
• Comments: Internal documentation in program
– Used by programmers to document a procedure’s
purpose or explain sections of code
• To create comment, place an apostrophe (’)
before a statement
– Compiler ignores all characters after apostrophe
for rest of line
• Comments are color-coded in IDE
• Comments help make code readable
Programming with Microsoft Visual Basic 2008, Fourth Edition
47
Internally Documenting the
Program Code (continued)
Figure 2-24: Completed Click event procedure for the btnClear control
Programming with Microsoft Visual Basic 2008, Fourth Edition
48
Internally Documenting the
Program Code (continued)
Figure 2-25: Comments entered in the General Declarations section
Programming with Microsoft Visual Basic 2008, Fourth Edition
49
Writing Arithmetic Expressions
• Arithmetic expression: Expression that
contains arithmetic operators and operands
• Precedence numbers: Indicate order of
operations in expression
– Performed from lower precedence numbers first to
higher number
– If two operations are at same level, they are
performed left to right
– Parentheses can be used to override default
precedence
Programming with Microsoft Visual Basic 2008, Fourth Edition
50
Writing Arithmetic Expressions
(continued)
Figure 2-26: Most commonly used arithmetic operators
and their order of precedence
Programming with Microsoft Visual Basic 2008, Fourth Edition
51
Writing Arithmetic Expressions
(continued)
• Unary operator: Requires one operand
– Example: -7 (the negation operator)
• Binary operator: Requires two operands
• Integer division operator (\):
– Divides two integers; returns an integer as a result
– Discards the remainder
• Modulus operator (Mod): Returns only
remainder in a division
Programming with Microsoft Visual Basic 2008, Fourth Edition
52
Writing Arithmetic Expressions
(continued)
Figure 2-27: Expressions containing arithmetic operators
Programming with Microsoft Visual Basic 2008, Fourth Edition
53
Coding the Calculate Order Button
• btnCalc control is responsible for:
– Calculating total number of skateboards ordered
– Calculating total price of the order
– Displaying results in two labels
• Must add instructions to button’s Click event
procedure
– Instructions are processed when user clicks button
• Observe one problem: Numbers were treated as
strings
– Values stored in the Text property are treated as
strings
Programming with Microsoft Visual Basic 2008, Fourth Edition
54
Coding the Calculate Order Button
(continued)
Figure 2-28: Pseudocode for the btnCalc control’s Click event procedure
Programming with Microsoft Visual Basic 2008, Fourth Edition
55
Coding the Calculate Order Button
(continued)
Figure 2-29: Illustration of the total phones ordered calculation
Figure 2-30: Illustration of the total price calculation
Programming with Microsoft Visual Basic 2008, Fourth Edition
56
Coding the Calculate Order Button
(continued)
Figure 2-31: Interface showing the incorrect results of the calculations
Programming with Microsoft Visual Basic 2008, Fourth Edition
57
The Val Function
• Function: Predefined procedure that performs a
specific task and returns a value
• Val function: Temporarily converts a string to a
number and returns the number
– Syntax: Val(string)
• Can use Val to correct calculations in btnCalc
control’s Click procedure
Programming with Microsoft Visual Basic 2008, Fourth Edition
58
The Val Function (continued)
Figure 2-32: Examples of the Val function
Programming with Microsoft Visual Basic 2008, Fourth Edition
59
The Val Function (continued)
Figure 2-33: Val function entered in the assignment statements
Programming with Microsoft Visual Basic 2008, Fourth Edition
60
Using the Format Function
to Format Numeric Output
• Format function: Improves numbers display
• Syntax: Format(expression, style)
– expression: specifies number, date, time, or
string
– style: predefined or user defined format style
• Currency: Example of format style that displays
number with dollar sign and two decimal places
Programming with Microsoft Visual Basic 2008, Fourth Edition
61
Using the Format Function
to Format Numeric Output
(continued)
Figure 2-34: Some of the predefined format styles in Visual Basic
Programming with Microsoft Visual Basic 2008, Fourth Edition
62
Using the Format Function
to Format Numeric Output
(continued)
Figure 2-35: Format function entered in the procedure
Programming with Microsoft Visual Basic 2008, Fourth Edition
63
Testing and Debugging the
Application
• Test an application using some sample data
– Use both valid and invalid data
• Valid data: Data that application is expecting
• Invalid data: Data that application is not
expecting
• Debugging: Process of locating and correcting
errors in a program
• Errors can be related to either syntax or logic
Programming with Microsoft Visual Basic 2008, Fourth Edition
64
Testing and Debugging the
Application (continued)
• Syntax error: Occurs when a rule of
programming language is broken
• Logic error: Occurs when syntax is correct, but
outcome is not what was desired
– Causes may include missing instructions,
instructions out of order, or wrong type of
instruction
• If build errors are indicated, do not run program –
fix errors first!
Programming with Microsoft Visual Basic 2008, Fourth Edition
65
Testing and Debugging the
Application (continued)
Figure 2-37: Jagged blue line and message indicate a syntax error
Figure 2-38: Message box indicates that the code contains errors
Programming with Microsoft Visual Basic 2008, Fourth Edition
66
Testing and Debugging the
Application (continued)
Figure 2-40: Thin red rectangle, message, and Error icon indicate a syntax error
Figure 2-41: The Error Correction window displays a way to correct
the syntax error
Programming with Microsoft Visual Basic 2008, Fourth Edition
67
Assembling the Documentation
• Important documentation includes:
– Planning tools
– Printout of application’s interface and code
• Your planning tools include:
– TOE chart
– Sketch of interface
– Flowcharts and/or pseudocode
Programming with Microsoft Visual Basic 2008, Fourth Edition
68
Lesson C Summary
• Use pseudocode or flowchart to plan an object’s
code
• To assign value to property of object while
application is running, use assignment statement
that follows syntax:
object.property = expression
• To create comment, begin comment text with an
apostrophe (’)
• Use integer division to divide and return an
integer result
Programming with Microsoft Visual Basic 2008, Fourth Edition
69
Lesson C Summary (continued)
• Use modulus operator to divide two numbers and
return the remainder
• To temporarily convert string to number, use the
Val function
• Use Format function to improve the appearance
of numbers
• Application should be tested with both valid and
invalid data
Programming with Microsoft Visual Basic 2008, Fourth Edition
70