Microsoft Visual Basic 2010
Week Two
Designing Applications
1
Solving the Problem Using a
Procedure-Oriented Approach
 Emphasis of a program is on how to
accomplish a task
 A flowchart uses standardized symbols to
show the steps needed to solve a problem
 Pseudocode uses English phrases to
describe the required steps
 User has little, if any, control
2
Solving the Problem Using
an Object-Oriented/Event-Driven
(OOED) Approach
 Object-oriented/Event-driven
 Emphasis of a program is on the objects included
in the interface and the events that occur on those
objects
 You will use a TOE (Task, Object, Event) chart to
assist you in planning your object-oriented/eventdriven programs
 User has a lot of control
 Users can enter information in any order, change
what they entered at any time, and calculate a
subtotal whenever they like
3
Sample TOE Chart
Task
Object
Event
4
GUI Design Tips
 Organize the user interface so that the
information flows either vertically or
horizontally, with the most important
information always located in the upper-left
corner of the screen
 Group related controls together using either
white space or a frame
 Align controls to minimize number of margins
5
A Builder’s Process
vs. A Programmer’s Process
 Meet with the client
 Meet with the client
 Plan the home
(blueprint)
 Plan the application (TOE
chart)
 Build the frame
 Build the user interface
 Complete the home
 Code the application
 Inspect the home and fix
any problems
 Test and debug the
application
 Assemble the
documentation
 Assemble the documentation
6
Step 1 – Meet with client
 The client is the person you are building an
application for
 The client will provide
 Business rules: How calculations are to be
performed
 Standards
 Other requirements
7
Step 2 - Plan the Application
 Identify the tasks the application needs to
perform
 Identify the objects to which you will assign
those tasks
 Identify the events required to trigger an
object into performing its assigned task
 Draw a sketch of the user interface
8
Identify the Application’s Tasks
 What will the user need to enter?
 What will the application need to calculate?
 What will the application need to display
(screen) and/or print (printer)?
 How will the user end the application?
 Will previous information need to be cleared
from the screen?
9
Identifying the Objects
 After completing the Task column of the TOE chart, you
then assign each task to an object in the user interface
 You use a label control to display information that you
do not want the user to change while your application is
running, and you use a button control to perform an
action immediately after it is clicked by the user
 After defining the application’s tasks and assigning
those tasks to objects in the user interface, you then
determine which objects need an event (such as clicking
or double-clicking) to occur for the object to do its
assigned task
10
Identifying the Events
 Text boxes and Label controls display their contents
automatically, so no special event is necessary for
them to do their assigned task
 The remaining objects listed in the TOE chart are the
three buttons: CalcButton, ClearButton, and
ExitButton
 You will have the buttons perform their assigned
tasks when they are clicked by the user
 Then list the tasks you have assigned to each object
in the Task column, and list the event in the Event
column
11
Drawing a Sketch of the User Interface
 While the design of an interface is open to
creativity, there are some guidelines to which
you should adhere so that your application is
consistent with the Windows standards
 In Western countries, you should organize the
user interface so that the information flows
either vertically or horizontally, with the most
important information always located in the
upper-left corner of the screen
12
Drawing a Sketch of the User Interface
 In a vertical arrangement
 The information flows from top to bottom
 The essential information is located in the first
column of the screen
 Secondary information is placed in subsequent
columns
13
Drawing a Sketch of the User Interface
 In a horizontal arrangement
 The information flows from left to right
 The essential information is placed in the first row
of the screen
 Secondary information placed in subsequent rows
14
Drawing a Sketch of the User Interface
 You can use white space, a GroupBox control, or a Panel
control to group related controls together
 If buttons appear in the interface, they should be positioned
either in a row along the bottom of the screen, or stacked in
either the upper-right or lower-right corner
 Limit to six the number of buttons in the interface
 Place the most commonly used button first—either on
the left when the buttons are along the bottom of the
screen
 Or on the top when the buttons are stacked in either the
upper-right or lower-right corner
15
Drawing a Sketch of the User Interface
 Notice that each text box and button control in
the interface is labeled so the user knows the
control’s purpose
 Labels that identify text boxes should be leftaligned and positioned either above or to the left
of the text box
 Labels and captions should be meaningful
 A button’s caption, on the other hand, should tell
the user what action the button will perform when
the button is clicked
16
Drawing a Sketch of the User Interface
 The colon (:) distinguishes an identifying label from other
text in the user interface
 The Windows standard is to use sentence capitalization for
identifying labels
 Sentence capitalization means you capitalize only the first
letter in the first word and in any words that are customarily
capitalized
 When using book title capitalization, you capitalize the first
letter in each word, except for articles, conjunctions, and
prepositions that do not occur at either the beginning or the
end of the caption
17
GUI Design Tips
 Either center the command buttons along the
bottom of the screen or stack them in either
the upper-right or lower-right corner
 Use no more than six command buttons on a
screen
 Place the most commonly used command
button first
18
GUI Design Tips
 Assign meaningful captions to command
buttons
 Place the caption on one line and use from
one to three words only
 Use book title capitalization for command
button captions
19
GUI Design Tips
 Label each control in the interface. The label
should be from one to three words only, and
it should be entered on one line
 Align each label on the left, and position
either above or to the left of the control it
identifies
 Follow the label with a colon (:) and use
sentence capitalization
20
Building the User Interface
Objectives
 Build the user interface using your TOE chart and
sketch
 Follow the Windows standards regarding the use
of graphics, color, and fonts
 Set the BorderStyle property
 Add a text box to a form
 Lock the controls on the form
 Assign access keys to controls
 Use the TabIndex property
21
Step 3 - Build the User Interface
 Use the sketch you drew during the
Planning step
 Follow the GUI design guidelines
22
Preparing to Create the User Interface
 Maintain a consistent margin of two or three
dots from the edge of the window
 Position related controls on succeeding dots.
Controls that are not part of any logical
grouping may be positioned from two to four
dots away from other controls
 Try to create an interface that no one notices
23
More GUI Design Tips
 Command buttons in the interface should be
sized relative to each other
 If the command buttons are centered on the
bottom of the screen, then each button should be
the same height; their widths, however, may vary
 If the command buttons are stacked in a corner,
then each should be the same height and the
same width
24
Including Graphics
in the User Interface
 The human eye is attracted to pictures before
text, so include a graphic only if it is necessary to
do so
 If you are including the graphic for aesthetics
only, use a small graphic and place it in a location
that will not distract the user
25
Including Different Fonts
in the User Interface
 Use 8, 10, or 12 point fonts for the elements in the user
interface
 A serif is a light cross stroke that appears at the top or
bottom of a character
 Use only one or two font sizes
 Use a sans serif (Tahoma) font for the text
 Use only one font type for all of the text
 Avoid italics and underlining
 Limit the use of bold text to titles, headings, and key items
26
Including Color in the User Interface
 The human eye is attracted to color before
black and white
 Build the interface using black, white, and gray
first, then add color only if you have a good
reason to do so
 Use either white, off-white, light gray, pale blue,
or pale yellow for an application’s background,
and use black for the text
27
Including Color in the User Interface
 Always use dark text on a light background
because it is the easiest to read
 Never use a dark color for the background or a
light color for the text
 Limit the number of colors (other than white,
black, and gray) to three
 Never use color as the only means of
identification for an interface element
28
The BorderStyle Property
 BorderStyle property determines the style of a
control’s border and can be set to None,
FixedSingle, or Fixed3D
 Text – the visible portion of an object
 Textbox – can be set to a default value
 Label – used for identification, information, or for
read-only data
 Button – used for identification
 Form – displays in the title bar
29
Setting the BorderStyle
Property of a Text Box and Label
 Set to Fixed3D (the default) the BorderStyle
property of text boxes
 Set to None (the default) the BorderStyle of
labels that identify other controls
 Set to FixedSingle the BorderStyle property
of labels that display program output, such as
the result of a calculation
30
Adding a Text Box Control to the Form
 A text box control provides an area in the
form where the user can enter data
31
Locking the Controls on a Form
 Once you have placed all of the controls in
the desired locations on the form, it is a good
idea to lock the controls in their current
positions so you do not inadvertently move
them
 Once the controls are locked, you will not be
able to move them until you unlock them; you
can, however, delete them
32
Assigning Access Keys

An access key allows the user to select an object
using the Alt key in combination with a letter or
number.

It is important to assign access keys to these
controls for the following three reasons:
1.
Allows a user to work with the application even if the mouse
becomes inoperative
2.
Allows users who are fast typists to keep their hands on the
keyboard
3.
Allows people with disabilities, which may prevent them from
working with a mouse, to use the application
33
Assigning Access Keys
 Each access key must be unique
 You can assign an access key to any control that
has a Caption property
 Place an & to the left of the desired letter in the
Text property
 To give keyboard access to a text box, assign an
access key to its identifying label, then set the
label’s TabIndex value to one less than the text
box’s TabIndex value
34
Setting the TabIndex Property
 The TabIndex property determines the order in
which a control receives the focus when the user
presses either the Tab key or an access key while
the application is running
 When a control has the focus, it can accept user
input
 The TabIndex property for the first control added
to a form is 0 (zero), the TabIndex property for the
second control is 1, and so on
35
Setting the TabIndex Property
 To determine the appropriate TabIndex settings
for an application, you first make a list of the
controls (in the interface) that can accept user
input
 The list should reflect the order in which the user
will want to access the controls
 Notice that each text box in the list is associated
with an identifying label control, whose name
appears immediately above the text box name in
the list
36
Setting the TabIndex Property
 Also notice that the TabIndex value assigned to each
text box’s identifying label control is one number less
than the value assigned to the text box itself
 For a text box’s access key (which is defined in the
identifying label) to work appropriately, you must be
sure to set the identifying label control’s TabIndex
property to a value that is one number less than the
value stored in the text box’s TabIndex property
 You can use the Properties list to set the TabIndex
property for each control; or, you can use the Tab
Order option on the View menu
37
Rules for Assigning Access
Keys and Controlling the Focus
 When assigning an access key to a control, use the
first letter of the caption or identifying label, unless
another letter provides a more meaningful
association
 Access keys should be unique
 Assign a TabIndex value to each control in the
interface, except for controls that do not have a
TabIndex property
 The TabIndex values should reflect the order in
which the user will want to access the controls
38
Rules for Assigning Access
Keys and Controlling the Focus
 To give user’s keyboard access to text boxes,
assign an access key to the text box control’s
identifying label
 Set the TabIndex property of the label control
so that its value is one number less than the
value in the TabIndex property of the
corresponding text box
39
Coding, Testing, Debugging,
and Documenting the Application
Objectives
 Use the TOE chart to code the application
 Use pseudocode to plan an object’s code
 Write an assignment statement
 Use the Focus method
 Include internal documentation in the code
 Write arithmetic expressions
 Use the Val and Format functions
40
Coding the Application
 The instructions are
called code, and the
process of writing the
instructions is called
coding
 Use pseudocode to help
you plan the code
 Internally document the
code by placing an
apostrophe before the
comment in the Code
window
Print Order button
1. Hide the 4 command buttons
2. Print the form
3. Display the 4 command buttons
4. Send the focus to the Clear
Screen button
‘hide the command buttons
<code>
‘print the form
<code>
‘display the command buttons
<code>
‘set the focus
41
Coding the Clear Screen Button
 According to the TOE chart, the Clear Screen
button is assigned the task of clearing the screen
for the next order
 Following this logic, a zero-length string, also
called an empty string, is a set of quotation marks
with nothing between them, like this: “”
 Assigning a zero-length string to the Text
property of a control removes the contents of the
control
42
Coding the Clear Screen Button
 Notice that the list shown in Figure 2-25 is composed of
short statements in English
 The statements represent the steps the Clear Screen button
needs to follow in order to prepare the screen for the next
order
 The programmer uses the pseudocode as a guide when
coding the application
 You use an assignment statement, which is simply a Visual
Basic .NET instruction, to set the value of a property while
an application is running
43
Steps for the Clear Screen Button
44
Assigning a Value to a
Property During Run Time
 You use the syntax
[Me.]object.property=expression to set the value
of an object’s property while an application is
running
 In the syntax, Me refers to the current form;
notice that Me. Is optional, as indicated by the
square brackets ([ ]) in the syntax
 When it appears in an assignment statement, the
equal sign (=) is often referred to as the
assignment operator
45
Assigning a Value to a
Property During Run Time
 When an assignment statement is encountered
in a program, the computer assigns the value of
the expression appearing on the right side of
the assignment operator (=) to the object and
property that appears on the left side of the
assignment operator
 A method is a predefined Visual Basic
procedure
46
Using the Focus Method
 The Focus method allows you to move the focus to
a specified control while the application is running
 The syntax of the Focus method is
[Me.]object.Focus(), where object is the name of the
object to which you want the focus sent
 It is a good practice to leave yourself some
comments as reminders in the Code editor window
 Programmers refer to this as internal
documentation
47
Internally Documenting
the Program Code
 Visual Basic provides an easy way to
document a program internally
 You simply place an apostrophe (‘) before
the statement you want treated as a
comment
 Visual Basic ignores everything that
appears after the apostrophe on that line
48
Writing Arithmetic Expressions
 The precedence numbers indicate the order in which
Visual Basic performs the operation in an expression
 Operations with a precedence number of 1 are
performed before operations with a precedence
number of 2, which are performed before operations
with a precedence number of 3, and so on
 However, you can use parentheses to override the
order of precedence, because operations within
parentheses are always performed before operations
outside of parentheses
49
Operator Order of Precedence
Operator
Operation
^
exponentiation
-
negation
*, /
\

multiplication
and division
integer division
Mod
modulus
arithmetic
+, -
addition and
subtraction
You can use parentheses to
override the order of
precedence


You use the integer division
operator (\) to divide two
integers (whole numbers),
and then return the result as
an integer
The modulus arithmetic
operator is also used to
divide two numbers, but the
numbers do not have to be
integers
After dividing the numbers,
the modulus arithmetic
operator returns the
remainder of the division
50
The Val Function
 Like a method, a function is a predefined
procedure that performs a specific task
 The Val function, for instance, temporarily
converts a string to a number, and then
returns the number
 The syntax of the Val function is Val(string),
where string is the string you want treated as
a number
51
Using the Format Function
 You can use the Format function to improve the
appearance of the numbers displayed in an interface
 Syntax: Format(expression, style)
 Expression specifies the number, date, time, or string
whose appearance you want to format
 Style is either the name of a predefined Visual Basic
format style or, if you want more control over the
appearance of the expression, a string containing
special symbols that indicate how you want the
expression displayed
52
Step 5 - Testing and Debugging
 You test an application by starting it and entering
some sample data
 You should use both valid and invalid test data
 Valid data is data that the application is expecting
 Invalid data is data that the application is not
expecting
 Debugging refers to the process of locating
errors in the program
53
Step 5 - Testing and Debugging
 Program errors can be either syntax errors or
logic errors
 Most syntax errors are simply typing errors
that occur when entering instructions
 You create a logic error when you enter an
instruction that does not give you the
expected results
54
Step 6 – Assembling
the Documentation
 Assembling the documentation refers to putting
in a safe place your planning tools and a printout
of the application’s interface and code, so you
can refer to them if you need to change the
application in the future
 Your planning tools include:
 The TOE chart
 Sketch of the interface
 Flowcharts and/or pseudocode
55
Summary
 You have completed the six steps
1. Meet with the client
2. Plan the application
3. Build the user interface
4. Code the application
5. Test and debug the application
6. Assemble the documentation
56