1. Programming with Microsoft Visual Basic 2008 Fourth Edition
Chapter Two
Designing Applications

2. Previewing the 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

3. Previewing the Playtime Cellular Application (continued)
Figure 2-2 Completed order form
Programming with Microsoft Visual Basic 2008, Fourth Edition

4. 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

5. 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

6. 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

7. 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

8. Planning an Object-Oriented Application (continued)
Figure 2-4: Steps for planning an OO application
Programming with Microsoft Visual Basic 2008, Fourth Edition

9. 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

10. Identifying the Application’s Tasks (continued)
Figure 2-6: Tasks entered in a TOE chart
Programming with Microsoft Visual Basic 2008, Fourth Edition

11. Identifying the Application’s Tasks (continued)
Figure 2-6: Tasks entered in a TOE chart (continued)
Programming with Microsoft Visual Basic 2008, Fourth Edition

12. 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

13. 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

14. Identifying the Events (continued)
Figure 2-9: Completed TOE chart ordered by object
Programming with Microsoft Visual Basic 2008, Fourth Edition

15. 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

16. 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

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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

23. Building the User Interface (continued)
Figure 2-12: Partially completed interface for the Playtime Cellular application
Programming with Microsoft Visual Basic 2008, Fourth Edition

24. 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

25. 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

26. 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

27. 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

28. Adding a Text Box Control to the Form
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

29. 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

30. 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

31. Assigning Access Keys Access key Each access key must be unique
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

32. 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

33. 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

34. Setting the TabIndex Property (continued)
Figure 2-15: TabIndex boxes showing the correct TabIndex values
Programming with Microsoft Visual Basic 2008, Fourth Edition

35. 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

36. 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

37. 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

38. Coding the Application (continued)
Figure 2-18: Playtime Cellular application’s interface
Programming with Microsoft Visual Basic 2008, Fourth Edition

39. Coding the Application (continued)
Figure 2-19: Playtime Cellular application’s TOE chart (ordered by object)
Programming with Microsoft Visual Basic 2008, Fourth Edition

40. 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

41. Planning a Procedure Using Pseudocode (continued)
Figure 2-20: Pseudocode for the Playtime Cellular application
Programming with Microsoft Visual Basic 2008, Fourth Edition

42. 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

43. 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

44. 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

45. 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

46. 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

47. 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

48. 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

49. Internally Documenting the Program Code (continued)
Figure 2-25: Comments entered in the General Declarations section
Programming with Microsoft Visual Basic 2008, Fourth Edition

50. 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

51. 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

52. 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

53. Writing Arithmetic Expressions (continued)
Figure 2-27: Expressions containing arithmetic operators
Programming with Microsoft Visual Basic 2008, Fourth Edition

54. 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

55. 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

56. 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

57. 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

58. 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

59. The Val Function (continued)
Figure 2-32: Examples of the Val function
Programming with Microsoft Visual Basic 2008, Fourth Edition

60. The Val Function (continued)
Figure 2-33: Val function entered in the assignment statements
Programming with Microsoft Visual Basic 2008, Fourth Edition

61. 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

62. 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

63. 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

64. 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

65. 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

66. 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

67. 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

68. 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

69. 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

70. 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