Tutorial 2
Designing Applications
Tutorial 2: Designing Applications
1
Solving the Problem Using a
Procedure-Oriented Approach
 Emphasis of a program is on how to
accomplish a task – planned by
programmer not user
 A flowchart uses standardized symbols to
show the steps needed to solve a problem
 Pseudocode uses English phrases to
describe the required steps
Tutorial 2: Designing Applications
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
 You can use a TOE (Task, Object, Event) chart for
planning
 Users have a lot of control. For example, they can
enter information in any order, change what they
entered, and calculate a subtotal whenever they
like
Tutorial 2: Designing Applications
3
Sample TOE Chart
Task
Tutorial 2: Designing Applications
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
Tutorial 2: Designing Applications
5
Planning an OOED
Application in Visual Basic .NET
Lesson A Objectives
After completing this lesson, you will be able to:
 Plan an OOED application in Visual Basic
.NET
 Complete a TOE (Task, Object, Event) chart
 Follow the Windows standards regarding the
layout and labeling of controls
Tutorial 2: Designing Applications
6
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
Tutorial 2: Designing Applications
7
Step 1 – Meet with client
 The client (the person you are building an
application for) will provide:
 How calculations are to be performed
 Standards
 Other requirements
Tutorial 2: Designing Applications
8
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
Tutorial 2: Designing Applications
9
Identify the Application’s Tasks
(in the TOE chart)
 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?
Tutorial 2: Designing Applications
10
Identifying the Objects
(in the TOE chart)
 After completing the Task column of the TOE
chart, you then assign each task to an object in
the user interface
Tutorial 2: Designing Applications
11
Identifying the Events
(in the TOE chart)
 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 which will perform their assigned tasks
when they are clicked
 Then list the tasks you have assigned to each object
in the Task column, and list the event in the Event
column
Tutorial 2: Designing Applications
12
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
Tutorial 2: Designing Applications
13
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
Tutorial 2: Designing Applications
14
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
Tutorial 2: Designing Applications
15
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
Tutorial 2: Designing Applications
16
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. Use 1-3 words only.
 A button’s caption, on the other hand, should tell
the user what action the button will perform when
the button is clicked. Use 1-3 words only.
Tutorial 2: Designing Applications
17
Drawing a Sketch of the User Interface
 The colon (:) distinguishes an identifying label from other
text in the user interface
 Sentence capitalization means you capitalize only the first
letter in the first word and in any words that are customarily
capitalized. This is the Windows standard for labels.
 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
Tutorial 2: Designing Applications
18
Building the User Interface
Lesson B Objectives
After completing this lesson, you will be able to:
 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
Tutorial 2: Designing Applications
19
Step 3 - Build the User Interface
 Use the sketch you drew during the
Planning step
 Follow the GUI design guidelines
Tutorial 2: Designing Applications
20
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
Tutorial 2: Designing Applications
21
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
Tutorial 2: Designing Applications
22
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
Tutorial 2: Designing Applications
23
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 a sans serif (Tahoma)
font for the text.
 Use only one or two font sizes and 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
Tutorial 2: Designing Applications
24
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
Tutorial 2: Designing Applications
25
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
Tutorial 2: Designing Applications
26
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
Tutorial 2: Designing Applications
27
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
Tutorial 2: Designing Applications
28
Adding a Text Box Control to the Form
 A text box control provides an area in the
form where the user can enter data
 Add the missing text box control to the
form and then set its properties using the
procedures listed on pages 110 and 111 of
the textbook
Tutorial 2: Designing Applications
29
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
 Select object and right click to lock controls. Once the
controls are locked, you will not be able to move them
until you unlock them; you can, however, delete them
Tutorial 2: Designing Applications
30
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
Tutorial 2: Designing Applications
31
Assigning Access Keys
 Each access key must be unique
 You can assign an access key to any control that
has a Text 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
Tutorial 2: Designing Applications
32
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
Tutorial 2: Designing Applications
33
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
Tutorial 2: Designing Applications
34
Coding, Testing, Debugging,
and Documenting the Application
Lesson C Objectives
After completing this lesson, you will be able to:
 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
Tutorial 2: Designing Applications
35
Coding the Application



The instructions are called
code, and the process of
writing the instructions is
called coding
Print Order button
Use pseudocode to help you
plan the code
3. Display the 4 command buttons
Internally document the
code by placing an
apostrophe before the
comment in the Code
window. Visual Basic .NET
ignores everything that
appears after the
apostrophe on that line
Tutorial 2: Designing Applications
1. Hide the 4 command buttons
2. Print the form
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
36
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 this to the Text property of a control
removes the contents of the control
Tutorial 2: Designing Applications
37
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. Me refers to the current form. 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
 A method is a predefined Visual Basic .NET procedure
Tutorial 2: Designing Applications
38
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
Tutorial 2: Designing Applications
39
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
Tutorial 2: Designing Applications


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
40
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
Example:
total = val(txtNumTickets.text) * price
Tutorial 2: Designing Applications
41
Using the Format Function
 You can use the Format function to improve the
appearance of the numbers displayed in an interface
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 .NET
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
Example:
txtTotal.text = format (total, “currency”)
Tutorial 2: Designing Applications
42
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
Tutorial 2: Designing Applications
43
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
Tutorial 2: Designing Applications
44
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
Tutorial 2: Designing Applications
45
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
Tutorial 2: Designing Applications
46