Chapter 2: Designing Applications
Programming with
Microsoft Visual Basic 2005, Third Edition
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
2
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
3
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
4
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
5
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
6
Creating an OO Application
(continued)
Figure 2-6: Processes used by a builder and a programmer
Programming with Microsoft Visual Basic 2005, Third Edition
7
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
8
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
9
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
10
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
11
Identifying the Events
• Seven text boxes get and display order information
– No special event is needed
• Two label controls display quantity and total price
– No special event is needed
• xCalcButton, xClearButton, and xExitButton
– Have buttons perform assigned tasks when clicked
Programming with Microsoft Visual Basic 2005, Third Edition
12
Identifying the Events (continued)
Figure 2-11: Completed TOE chart ordered by object
Programming with Microsoft Visual Basic 2005, Third Edition
13
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
14
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
15
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
16
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
17
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
18
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
19
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
20
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
21
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
22
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
23
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 8 - 12 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
24
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
25
The BorderStyle Property
• 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
26
Adding a Text Box Control
to the Form
• Text box control
– 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
27
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
28
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
29
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
•
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
30
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
31
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
32
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
33
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
34
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
35
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
36
Using a Flowchart to Plan a
Procedure
• Flowchart
– 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
37
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
38
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
39
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
40
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
41
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
42
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
43
Internally Documenting the
Program Code (continued)
Figure 2-33: Completed Click event procedure for
the xClearButton
Programming with Microsoft Visual Basic 2005, Third Edition
44
Writing Arithmetic Expressions
• Arithmetic expression
– 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
45
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
46
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
47
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
48
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
49
The Val Function
• Function: predefined procedure
– 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
50
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
51
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
52
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
53
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
54
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
55
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
56