Programming with
Microsoft Visual Basic 2010
5th 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
2
Programming with Microsoft Visual Basic 2010, 5th Edition
Previewing the Playtime Cellular
Application (cont’d.)
Figure 2-2 Completed order
3
Programming with Microsoft Visual Basic 2010, 5th Edition
Lesson A Objectives
After studying Lesson A, you should be able to:
 Plan an object-oriented application in Visual Basic 2010
 Complete a TOE (Task, Object, Event) chart
 Follow the Windows standards regarding the layout and
labeling of controls
4 Programming with Microsoft Visual Basic 2010, 5th Edition
Creating an Object-Oriented Application
 Developing an application is like building a home
 Role of programmer is analogous to that of builder
 Bugs
 Problems that affect application functions
5
Programming with Microsoft Visual Basic 2010, 5th Edition
Creating an Object-Oriented Application
(cont’d.)
Figure 2-3 Processes used by a builder and a programmer
6
Programming with Microsoft Visual Basic 2010, 5th Edition
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
7
Programming with Microsoft Visual Basic 2010, 5th Edition
Planning an Object-Oriented
Application (cont’d.)
Figure 2-4 Steps for planning an OO application
8
Programming with Microsoft Visual Basic 2010, 5th Edition
Planning an Object-Oriented
Application (cont’d.)
 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?
9
Programming with Microsoft Visual Basic 2010, 5th Edition
Figure 2-6 Tasks entered in a TOE chart
10 Programming with Microsoft Visual Basic 2010, 5th Edition
Planning an Object-Oriented
Application (cont’d.)
 Identifying the objects
 Assign each task to an object in user interface
 Objects used here
 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
11 Programming with Microsoft Visual Basic 2010, 5th Edition
Planning an Object-Oriented
Application (cont’d.)
 Identifying the events
 Determine which event (if any) must occur for an object to
carry out its assigned task
 Text boxes and label controls
 No special event is needed
 btnCalc, btnClear, and btnExit buttons
 Perform assigned tasks when clicked
12 Programming with Microsoft Visual Basic 2010, 5th Edition
Figure 2-9 Completed TOE chart ordered by object
13 Programming with Microsoft Visual Basic 2010, 5th Edition
Planning an Object-Oriented
Application (cont’d.)
 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
14 Programming with Microsoft Visual Basic 2010, 5th Edition
Planning an Object-Oriented
Application (cont’d.)
Figure 2-10 Vertical arrangement of the Playtime Cellular application
15 Programming with Microsoft Visual Basic 2010, 5th Edition
Planning an Object-Oriented
Application (cont’d.)
Figure 2-11 Horizontal arrangement of the Playtime Cellular application
16 Programming with Microsoft Visual Basic 2010, 5th Edition
Planning an Object-Oriented
Application (cont’d.)
 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:”
17 Programming with Microsoft Visual Basic 2010, 5th Edition
Planning an Object-Oriented
Application (cont’d.)
 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 aligned
 Also same height and width
 Group related controls close to each other
18 Programming with Microsoft Visual Basic 2010, 5th Edition
Lesson A Summary
 Steps to create an OO application
 Meet with client
 Plan application
 Identify needed tasks, objects, and events
 Identify information needed as input to produce desired result
 Build user interface
 Code application
 Test and debug application
 Assemble documentation
19 Programming with Microsoft Visual Basic 2010, 5th Edition
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
20 Programming with Microsoft Visual Basic 2010, 5th Edition
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
 Features of UI used in this lesson’s application
 Information arranged vertically
 Controls aligned and appropriately labeled
 Try to create an interface that no one notices
21 Programming with Microsoft Visual Basic 2010, 5th Edition
Building the User Interface (cont’d.)
Figure 2-12 Partially completed interface for the Playtime Cellular application
22 Programming with Microsoft Visual Basic 2010, 5th Edition
Building the User Interface (cont’d.)
 Including graphics in the user 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 graphics sparingly
 Graphics for aesthetic use should be small and positioned to
avoid distracting user
23 Programming with Microsoft Visual Basic 2010, 5th Edition
Building the User Interface (cont’d.)
 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 only one or two font sizes and one font type
 Avoid italics and underlining
 Limit bold text to titles, headings, and key items
24 Programming with Microsoft Visual Basic 2010, 5th Edition
Building the User Interface (cont’d.)
 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
 Avoid using dark color for background
 Limit colors to three, not including black, white, gray
 Colors added should be complementary
 Do not use color as only means of identification for an element in
the UI
25 Programming with Microsoft Visual Basic 2010, 5th Edition
Building the User Interface (cont’d.)
 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
26 Programming with Microsoft Visual Basic 2010, 5th Edition
Building the User Interface (cont’d.)
 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 used for vertical alignment
 Pink snap lines used for horizontal alignment
27 Programming with Microsoft Visual Basic 2010, 5th Edition
Adding a Text Box Control
to the Form (continued)
Figure 2-13 Snap lines shown in the interface
28 Programming with Microsoft Visual Basic 2010, 5th Edition
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 Lock Controls on the Format menu
 Follow same procedure to unlock controls
29 Programming with Microsoft Visual Basic 2010, 5th Edition
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
30 Programming with Microsoft Visual Basic 2010, 5th Edition
Assigning Access Keys (cont’d.)
 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
31 Programming with Microsoft Visual Basic 2010, 5th Edition
Controlling the Tab Order
 Focus: State in which a control is ready to accept user input
or action
 Pressing Tab key or access key shifts focus
 TabIndex property
 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
32 Programming with Microsoft Visual Basic 2010, 5th Edition
Controlling the Tab Order (cont’d.)
Figure 2-15 TabIndex boxes showing the correct TabIndex values
33 Programming with Microsoft Visual Basic 2010, 5th Edition
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 TabIndex property to number that represents order in which
you want the control to receive focus
34 Programming with Microsoft Visual Basic 2010, 5th Edition
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 during run time
 Include internal documentation in the code
 Write arithmetic expressions
 Use the Val and Format functions
 Locate and correct syntax errors
35 Programming with Microsoft Visual Basic 2010, 5th Edition
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
36 Programming with Microsoft Visual Basic 2010, 5th Edition
Coding the Application (cont’d.)
Figure 2-18 Playtime Cellular application’s interface
37 Programming with Microsoft Visual Basic 2010, 5th Edition
Coding the Application (cont’d.)
Figure 2-19 Playtime Cellular application’s TOE chart (ordered by object)
38 Programming with Microsoft Visual Basic 2010, 5th Edition
Coding the Application (cont’d.)
 Using pseudocode to plan a procedure
 Psuedocode: 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
 Calculates total phones ordered and total price
 Displays results
39 Programming with Microsoft Visual Basic 2010, 5th Edition
Coding the Application (cont’d.)
Figure 2-20 Pseudocode for the Playtime Cellular application
40 Programming with Microsoft Visual Basic 2010, 5th Edition
Coding the Application (cont’d.)
 Using a flowchart to plan a procedure
 A flowchart shows program logic using standardized symbols
 Oval: Start/stop symbol
 Rectangle: Process symbol; represents a task
 Parallelogram: Input/output symbol
 Flowlines connect the symbols
• Flowcharts depict same logic as pseudocode
41 Programming with Microsoft Visual Basic 2010, 5th Edition
Figure 2-21
Flowcharts for the Playtime
Cellular application
42 Programming with Microsoft Visual Basic 2010, 5th Edition
Coding the btnClear Control’s Click
Event Procedure
 btnClear control’s task: Clear screen for next order
 String: Zero or more 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 run time
 Assign zero-length string to control’s Text property
 Assign String.Empty to control’s Text property
43 Programming with Microsoft Visual Basic 2010, 5th Edition
Coding the btnClear Control’s Click
Event Procedure (cont’d.)
 Assigning a value to a property during run time
 Assignment statement: Instruction assigning a value to
object at run time
 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
44 Programming with Microsoft Visual Basic 2010, 5th Edition
Coding the btnClear Control’s Click
Event Procedure (cont’d.)
 Using the Focus method
 Allows you to move focus to specified control during run time
 Syntax: object.Focus()
 Object: Name of control that receives focus
45 Programming with Microsoft Visual Basic 2010, 5th Edition
Coding the btnClear Control’s Click
Event Procedure (cont’d.)
 Internally documenting the program code
 Comments: Internal documentation in program
 Used by programmers to document a procedure’s purpose or
explain sections of code
 Comments help make code readable
 To create comment, place an apostrophe (’) before a
statement
 Computer ignores all characters after apostrophe for rest of line
 Comments are color-coded in IDE
46 Programming with Microsoft Visual Basic 2010, 5th Edition
Coding the btnClear Control’s Click
Event Procedure (cont’d.)
Figure 2-24 Comments entered in the General Declarations section
47 Programming with Microsoft Visual Basic 2010, 5th Edition
Writing Arithmetic Expressions
 Arithmetic expression
 Contains one or more arithmetic operators
 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
48 Programming with Microsoft Visual Basic 2010, 5th Edition
Writing Arithmetic Expressions
(cont’d.)
Figure 2-25 Most commonly used arithmetic operators
49 Programming with Microsoft Visual Basic 2010, 5th Edition
Writing Arithmetic Expressions
(cont’d.)
 Unary operator
 Requires one operand
 Example: -10 (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
50 Programming with Microsoft Visual Basic 2010, 5th Edition
Writing Arithmetic Expressions
(cont’d.)
Figure 2-26 Examples of the integer division and Mod operators
51 Programming with Microsoft Visual Basic 2010, 5th Edition
Writing Arithmetic Expressions
(cont’d.)
Figure 2-27 Expressions containing more than one
operator having the same precedence
52 Programming with Microsoft Visual Basic 2010, 5th Edition
Coding the Calculate Order Button
 btnCalc control is responsible for:
 Calculating total number of phones ordered
 Calculating total price of the order
 Displaying results in two controls
 Instructions placed in button’s Click event procedure
 Instructions processed when user clicks button
 Notice problem in text example
 Numbers were treated as strings
 Values stored in Text property treated as strings
53 Programming with Microsoft Visual Basic 2010, 5th Edition
Coding the Calculate Order Button
(cont’d.)
Figure 2-28 Pseudocode for the btnCalc control’s Click event procedure
54 Programming with Microsoft Visual Basic 2010, 5th Edition
Coding the Calculate Order Button
(cont’d.)
Figure 2-29 Illustration of the total phones ordered calculation
Figure 2-30 Illustration of the total price calculation
55 Programming with Microsoft Visual Basic 2010, 5th Edition
Coding the Calculate Order Button
(cont’d.)
Figure 2-31 Interface showing the incorrect results of the calculations
56 Programming with Microsoft Visual Basic 2010, 5th Edition
Coding the Calculate Order Button
(cont’d.)
 Function: Predefined procedure that performs a specific
task and returns a value
 TheVal 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
57 Programming with Microsoft Visual Basic 2010, 5th Edition
Coding the Calculate Order Button
(cont’d.)
Figure 2-32 Examples of the Val function
58 Programming with Microsoft Visual Basic 2010, 5th Edition
Coding the Calculate Order Button
(cont’d.)
Figure 2-33 Val function entered in the assignment statements
59 Programming with Microsoft Visual Basic 2010, 5th Edition
Coding the Calculate Order Button
(cont’d.)
 The Format function
 Improves appearance of numbers
 Syntax: Format(expression, style)
 Expression: Specifies number, date, time, or string to
format
 Style: predefined or user-defined format style
 Currency: Example of format style that displays number
with dollar sign and two decimal places
60 Programming with Microsoft Visual Basic 2010, 5th Edition
Coding the Calculate Order Button
(cont’d.)
Figure 2-34 Some of the predefined format styles in Visual Basic
61 Programming with Microsoft Visual Basic 2010, 5th Edition
Coding the Calculate Order Button
(cont’d.)
Figure 2-35 Format function entered in the procedure
62 Programming with Microsoft Visual Basic 2010, 5th Edition
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
63 Programming with Microsoft Visual Basic 2010, 5th Edition
Testing and Debugging the
Application (cont’d.)
 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
64 Programming with Microsoft Visual Basic 2010, 5th Edition
Figure 2-38 Suggestion for fixing the error
Figure 2-39 Message dialog box
65 Programming with Microsoft Visual Basic 2010, 5th Edition
Testing and Debugging the
Application (cont’d.)
Figure 2-40 Error list window in the IDE
66 Programming with Microsoft Visual Basic 2010, 5th Edition
Assembling the Documentation
 Important documentation
 Planning tools
 Printout of application’s interface and code
 Your planning tools include:
 TOE chart
 Sketch of interface
 Flowcharts and/or pseudocode
67 Programming with Microsoft Visual Basic 2010, 5th Edition
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 with syntax:
object.property = expression
 To create comment
 Begin comment text with an apostrophe (’)
 Use the integer division operator (\) to divide and return an
integer result
68 Programming with Microsoft Visual Basic 2010, 5th Edition
Lesson C Summary (cont’d.)
 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
69 Programming with Microsoft Visual Basic 2010, 5th Edition