1. Chapter 2: Designing Applications
Programming with
Microsoft Visual Basic 2005, Third Edition

2. Planning an Object-Oriented (OO) Application in Visual Basic 2005 Lesson A Objectives
Plan an OO application in Visual Basic 2005
Complete a TOE (Task, Object, Event) chart
Follow the Windows standards regarding the layout and labeling of controls
Programming with Microsoft Visual Basic 2005, Third Edition

3. Solving the Problem Using a Procedure-Oriented Approach
Emphasis is on how to accomplish a task
Flowchart
Document representing program logic
Standardized symbols show problem-solving steps
Pseudocode
English phrases describing the required steps
User has little, if any, control over the program
Programming with Microsoft Visual Basic 2005, Third Edition

4. Solving the Problem Using an Object-Oriented (OO) Approach
Object-oriented programs
Include objects that respond to events; e.g., clicks
Examples of objects appearing on an interface
Buttons, picture boxes, list boxes, text boxes, labels
TOE (Task, Object, Event) chart
Used to plan your object-oriented programs
User has more control over program execution
Programming with Microsoft Visual Basic 2005, Third Edition

5. Solving the Problem Using an Object-Oriented (OO) Approach (continued)
Figure 2-4: Order screen created by the OO application
Programming with Microsoft Visual Basic 2005, Third Edition

6. Creating an OO 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 2005, Third Edition

7. Creating an OO Application (continued)
Figure 2-6: Processes used by a builder and a programmer
Programming with Microsoft Visual Basic 2005, Third Edition

8. Planning an OO Application
Actively involve the user in the planning phase
Steps involved in planning an OO application
Identify the tasks the application needs to perform
Identify objects to which tasks will be assigned
Identify events causing an object to perform tasks
Draw a sketch of the user interface
Use a TOE chart to record tasks, objects, events
Programming with Microsoft Visual Basic 2005, Third Edition

9. Identifying the Application’s Tasks
What information, if any, will the application need to display on the screen and/or print on the printer?
What information, if any, will the user need to enter into the user interface to display and/or print the desired information?
What information, if any, will the application need to calculate to display and/or print the desired information?
Programming with Microsoft Visual Basic 2005, Third Edition

10. Identifying the Application’s Tasks (continued)
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 2005, Third Edition

11. Identifying the Objects
Each task is assigned to an object in the interface
Objects 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 2005, Third Edition

12. Identifying the Events
Seven text boxes get and display order information
No special event is needed
Two label controls display quantity and total price
xCalcButton, xClearButton, and xExitButton
Have buttons perform assigned tasks when clicked
Programming with Microsoft Visual Basic 2005, Third Edition

13. Identifying the Events (continued)
Figure 2-11: Completed TOE chart ordered by object
Programming with Microsoft Visual Basic 2005, Third Edition

14. Drawing a Sketch of the User Interface
Organizing the user interface in Western countries
Information flows either vertically or horizontally
Vertical arrangement
Information flows from top to bottom
Essential information is located in the first column
Horizontal arrangement
The information flows from left to right
Essential information is placed in the first row
Programming with Microsoft Visual Basic 2005, Third Edition

15. Drawing a Sketch of the User Interface (continued)
Figure 2-12: Vertical arrangement of the Skate-Away Sales interface
Programming with Microsoft Visual Basic 2005, Third Edition

16. Drawing a Sketch of the User Interface (continued)
Figure 2-13: Horizontal arrangement of the Skate-Away Sales interface
Programming with Microsoft Visual Basic 2005, Third Edition

17. Drawing a Sketch of the User Interface (continued)
White space may be used to group related controls
Containers: objects used to group related controls
Examples: group box, panel, table layout panel
Interface elements should have meaningful labels
Example: “Name” identifies xNameTextBox
Follow other stylistic conventions in layout
Example: size buttons should be proportional
Programming with Microsoft Visual Basic 2005, Third Edition

18. Summary – Lesson A Steps to create an OO application
Meet with the client
Plan the application
Build the user interface
Code the application
Test and debug the application
Assemble the documentation
Programming with Microsoft Visual Basic 2005, Third Edition

19. Building the User Interface Lesson B Objectives
Build the user interface using your TOE chart and sketch
Follow the Windows standards regarding the use of graphics, color, and fonts
Set a control’s BorderStyle property
Add a text box to a form
Programming with Microsoft Visual Basic 2005, Third Edition

20. Building the User Interface Lesson B Objectives (continued)
Lock the controls on the form
Assign access keys to controls
Use the TabIndex property
Programming with Microsoft Visual Basic 2005, Third Edition

21. Preparing to Create the User Interface
TOE chart and sketch guide two major tasks
Placing the appropriate controls on forms
Setting applicable properties of the controls
Some features of the 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 2005, Third Edition

22. Preparing to Create the User Interface (continued)
Figure 2-14: Partially completed interface for the Skate-Away Sales application
Programming with Microsoft Visual Basic 2005, Third Edition

23. Including Graphics in the User Interface
Graphics: icons or pictures added to an interface
The human eye is attracted to pictures before text
Include a graphic only if it is necessary
Graphics for aesthetic use should be small
Avoid distracting the user
Programming with Microsoft Visual Basic 2005, Third Edition

24. Including Different Fonts in the User Interface
Font property: controls font type, style, and size
Recommendations for setting fonts
Use sans serif fonts (without strokes); e.g. Tahoma
Use point fonts for user interface elements
Use only one or two font sizes and one font type
Avoid italics and underlining, limit bold text
Objects added to a form inherit form’s font setting
Programming with Microsoft Visual Basic 2005, Third Edition

25. Including Color in the User Interface
The eye is drawn to color before black and white
Guidelines for adding colors
Use dark text against a light background
Add up to three, not including black, white, gray
Colors added should be complementary
Avoid using a dark color for the background
Use color to help identify interface elements
Programming with Microsoft Visual Basic 2005, Third Edition

26. The BorderStyle Property
Determines the style of a control’s border
Three ways to set the BorderStyle property
None: ensures control will not have a border
FixedSingle: surrounds control with a thin line
Fixed3D: gives control a 3-D appearance
Example: text box BorderStyle often set to Fixed3D
Programming with Microsoft Visual Basic 2005, Third Edition

27. Adding a Text Box Control to the Form
Provides an area in the form for data entry
Use the TextBox tool to add a text box control
Programming with Microsoft Visual Basic 2005, Third Edition

28. Adding a Text Box Control to the Form (continued)
Figure 2-16: Form showing the correct location of the City text box
Programming with Microsoft Visual Basic 2005, Third 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
One way to lock controls
Click the form (or any control on the form)
Click Format on the menu bar
Click Lock Controls
Follow the same procedure to unlock the controls
Programming with Microsoft Visual Basic 2005, Third Edition

30. 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
Assigning an access key
Include an ampersand (&) in the control’s caption
Example: &CalculateOrder assigns ‘C’ to button
Programming with Microsoft Visual Basic 2005, Third Edition

31. Setting the TabIndex Property
Focus: control state allowing a user to enter input
Pressing Tab or access key shifts focus
TabIndex property
Determines when a control receive will receive focus
Example: label with TabIndex of 0 receives focus first
Revise TabIndex using Properties or Tab Order
Make a list of objects to determine proper ordering
Programming with Microsoft Visual Basic 2005, Third Edition

32. Summary – Lesson B
To control the border around a label control, set the label control’s BorderStyle property
To assign an access key to a control, type an ampersand (&) in the Text property of the control’s caption or identifying label
To set the tab order, set each control’s TabIndex property to a number that represents the order in which you want the control to receive the focus
Programming with Microsoft Visual Basic 2005, Third Edition

33. Coding, Testing, Debugging, and Documenting the Application Lesson C Objectives
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
Programming with Microsoft Visual Basic 2005, Third Edition

34. Coding, Testing, Debugging, and Documenting the Application Lesson C Objectives (continued)
Include internal documentation in the code
Write arithmetic expressions
Use the Val and Format functions
Programming with Microsoft Visual Basic 2005, Third Edition

35. Coding the Application
Code: instructions added to an application
Coding follows planning and building of interface
TOE charts show which objects and events to code
Skate-Away Sales application code requirements
Three buttons associated with Click events
Use pseudocode or flowchart to design procedure
Programming with Microsoft Visual Basic 2005, Third Edition

36. Using Pseudocode to Plan a Procedure
Pseudocode: instructions in English syntax
Short phrases describe the steps of a procedure
Travel directions are a type of pseudocode
xExitButton Click Event Procedure (pseudocode)
End the application
Programming with Microsoft Visual Basic 2005, Third Edition

37. Using a Flowchart to Plan a Procedure
Uses standardized symbols to show program logic
Pseudocode can be used within symbols
Oval symbol: start/stop symbol
Rectangle symbol: process symbol
Parallelogram: input/output symbol
Flowlines: connect symbols
Programming with Microsoft Visual Basic 2005, Third Edition

38. Coding the Clear Screen Button
xClearButton’s task: clear screen for next order
String: group of characters in quote marks (“”)
Zero-length string (empty string)
Pair of quote 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 2005, Third Edition

39. Coding the Clear Screen Button (continued)
Figure 2-28: Pseudocode for the xClearButton’s Click event procedure
Programming with Microsoft Visual Basic 2005, Third Edition

40. Assigning a Value to a Property During Run Time
Assignment statement
Instruction assigning a value to an object at runtime
Syntax: [Me.]object.property=expression
Me refers to the current form (optional)
object and property are object and property names
expression contains the value to be assigned
Assignment operator (=): assigns value (right to left)
Programming with Microsoft Visual Basic 2005, Third Edition

41. Assigning a Value to a Property During Run Time (continued)
Figure 2-32: Second assignment statement entered in the procedure
Programming with Microsoft Visual Basic 2005, Third Edition

42. Using the Focus Method Method: a predefined procedure Focus method
Allows you to move the focus to a specified control
Syntax: [Me.]object.Focus()
Object is the name of the control that receives focus
Programming with Microsoft Visual Basic 2005, Third Edition

43. Internally Documenting the Program Code
Comments: internal documentation
How to create a comment in Visual Basic 2005
Place an apostrophe (‘) before a statement
The compiler ignores characters after apostrophe
Color of comments is different than color of code
Comments help make code readable
Programming with Microsoft Visual Basic 2005, Third Edition

44. Internally Documenting the Program Code (continued)
Figure 2-33: Completed Click event procedure for the xClearButton
Programming with Microsoft Visual Basic 2005, Third Edition

45. Writing Arithmetic Expressions
Contains arithmetic operators and operands
Precedence numbers
Indicate the order of operations in an expression
Order that operations are performed
From lower precedence number to higher number
Parentheses override default precedence
Programming with Microsoft Visual Basic 2005, Third Edition

46. Writing Arithmetic Expressions (continued)
Figure 2-35: Most commonly used arithmetic operators and their order of precedence
Programming with Microsoft Visual Basic 2005, Third Edition

47. Writing Arithmetic Expressions (continued)
Unary operator: requires one operand; e.g., -7
Binary operator: requires two operands
Associativity: orders operations at same level
Left to right for operations with same precedence
Integer division operator (\):
Divides two integers, returns an integer as a result
Modulus operator: returns a remainder
Programming with Microsoft Visual Basic 2005, Third Edition

48. Coding the Calculate Order Button
The Calculate Order button is responsible for:
Calculating total number of skateboards ordered
The total price of the order
Displaying results in two labels
Add instructions to button’s Click event procedure
Instructions are processed when user clicks button
Observe one problem: numbers treated as strings
Programming with Microsoft Visual Basic 2005, Third Edition

49. Coding the Calculate Order Button (continued)
Figure 2-39: Code entered in the xCalcButton’s Click event procedure
Programming with Microsoft Visual Basic 2005, Third Edition

50. The Val Function Function: predefined procedure Val function
Performs a specific task and returns a value
Val function
Temporarily converts a string to a number
Returns the number
Syntax: Val(string): string will be treated as a number
Val corrects assignments in xCalcButton’s procedure
Programming with Microsoft Visual Basic 2005, Third Edition

51. The Val Function (continued)
Figure 2-42: Val function entered in the xCalcButton’s Click event procedure
Programming with Microsoft Visual Basic 2005, Third Edition

52. 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 a format style
Displays number with a dollar sign and two decimal places
Programming with Microsoft Visual Basic 2005, Third Edition

53. Aligning The Text Within A Control
TextAlign property
Specifies the position of the text within the control
Using the TextAlign property in the order form
Center text contained in the xTotalBoardsLabel and xTotalPriceLabel controls
Programming with Microsoft Visual Basic 2005, Third Edition

54. Testing and Debugging the Application
Test an application using some sample data
Use both valid and invalid data
Valid data: data that the application is expecting
Invalid data: data that the application is not expecting
Debugging: locating errors in the program
Errors can be related to either syntax or logic
Programming with Microsoft Visual Basic 2005, Third Edition

55. Assembling the Documentation
Important documentation
Planning tools
Printout of application’s interface and code
Your planning tools include:
The TOE chart
Sketch of the interface
Flowcharts and/or pseudocode
Programming with Microsoft Visual Basic 2005, Third Edition

56. Summary – Lesson C
To assign a value to the property of an object while an application is running, use an assignment statement that follows the syntax: [Me.]object.property = expression
To document Visual Basic code with comments, begin the comment with an apostrophe (’)
To temporarily convert a string to a number, use the Val function
Programming with Microsoft Visual Basic 2005, Third Edition