Chapter
Microsoft Visual Basic .NET: Reloaded
Creating a User Interface
1
Objectives
• Plan an application
• Complete a TOE Chart
• Use a text box control
• Explain the difference between a primary
window and a dialog box
• Follow the Windows standards regarding the
layout and labeling of controls
Microsoft Visual Basic .NET: Reloaded
2
Objectives (continued)
• Align and size controls
• Follow the Windows standards regarding
the use of graphics, fonts, and color
• Assign access keys to controls
• Set the tab order
• Designate a default button and a cancel
button
Microsoft Visual Basic .NET: Reloaded
3
Planning an Application
Microsoft Visual Basic .NET: Reloaded
4
SKATE-AWAY Sales
• Overview of current processes
• Sells skateboards by phone
• Priced at $100 each
• Available in yellow and blue
• Salespeople record order info on a form
• Customer name, address, number ordered of
each color
• Manually calculates total number ordered, total
price including tax
• Very time consuming
Microsoft Visual Basic .NET: Reloaded
5
Creating a OE Chart
• TOE Chart (Task, Object, Event)
• Steps involved
• Identify the tasks
• Identify the objects
• Identify the events
Microsoft Visual Basic .NET: Reloaded
6
Identifying the Application’s Tasks
Microsoft Visual Basic .NET: Reloaded
7
Identifying the Application’s Tasks
(continued)
• What information, if any, does application
need for display on the screen and/or print on
the printer?
• Display on screen
• Customer’s name, street address, city, state Zip
Code, number of each color skateboards
ordered, total skateboards ordered, and total
price of the order
• Print to printer
• nothing
Microsoft Visual Basic .NET: Reloaded
8
Identifying the Application’s Tasks
(continued)
• What information, if any, will the user need to
enter into user interface to display and/or print
desired information?
•
•
•
•
•
•
Customer’s name
Street address
City
State
ZIP code
Number of blue and yellow skateboards
Microsoft Visual Basic .NET: Reloaded
9
Identifying the Application’s Tasks
(continued)
• What information, if any, will the application
need to calculate to display and/or print the
desired information?
• Total number of skateboards ordered
• Total price of each order
• How will the user end the application?
• Application will include an Exit button
• Will previous information need to be cleared
from the screen before new information is
entered?
• Order information will need to be cleared
Microsoft Visual Basic .NET: Reloaded
10
Identifying the Application’s Tasks
(continued)
Microsoft Visual Basic .NET: Reloaded
11
Identifying the Objects
• Text box control
• Gives user an area in which to enter data
• Instantiated using the Textbox tool
• Button control
• User clicks to terminate the application
• Label control
• Displays information you do not want user to
change while application is running
Microsoft Visual Basic .NET: Reloaded
12
How To…
Microsoft Visual Basic .NET: Reloaded
13
Identifying the Objects (continued)
• Assign appropriate object to each task
Microsoft Visual Basic .NET: Reloaded
14
Identifying the Events
• No special event is necessary for text boxes
• Events needed for buttons
Microsoft Visual Basic .NET: Reloaded
15
Completed TOE Chart by Object
Microsoft Visual Basic .NET: Reloaded
16
Designing the User Interface
• Primary Window
• Area where primary viewing and editing of your
application takes place
• Dialog boxes
• Used to support and supplement a user’s
activities in primary window
• Example: font dialog box allows specification of
font utilized in primary window
Microsoft Visual Basic .NET: Reloaded
17
Designing the User Interface (continued)
Microsoft Visual Basic .NET: Reloaded
18
Designing the User Interface (continued)
• Setting the border style of a form
Microsoft Visual Basic .NET: Reloaded
19
Arranging the controls
• Information should flow vertically, or
horizontally
• Most important information should be located
in top-left corner of screen
• Vertical flow should be top to bottom
• Horizontal flow should be left to right
• Essential information should be in first row
Microsoft Visual Basic .NET: Reloaded
20
Arranging the controls (continued)
• Vertical arrangement example
Microsoft Visual Basic .NET: Reloaded
21
Arranging the controls (continued)
• Horizontal arrangement example
Microsoft Visual Basic .NET: Reloaded
22
Arranging the controls (continued)
• Punctuation tips:
• Use Sentence capitalization for text boxes
• Capitalize only first word and any words
normally capitalized
• Use book title capitalization for buttons
• 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
• Sizing tips:
• Size controls relative to each other
Microsoft Visual Basic .NET: Reloaded
23
Aligning and Sizing Controls
• Format menu options
• Align
• Allows aligning 2 or more controls by left, right,
top, and bottom
• Make Same Size
• Allows 2 or more controls to be size to same
width and/or height
Microsoft Visual Basic .NET: Reloaded
24
Arranging the controls (continued)
• Selecting controls to align
Microsoft Visual Basic .NET: Reloaded
25
Arranging the controls (continued)
• Controls aligned by left border
Microsoft Visual Basic .NET: Reloaded
26
Including Graphics in the User Interface
• Only include graphics when necessary
• Use to emphasize or clarify
• Use for aesthetic purposes
• Use for a personal touch to application
• Be sure graphics are not a distraction
• Place in a corner
Microsoft Visual Basic .NET: Reloaded
27
Including Different Fonts in the User
Interface
• Font Property
• Use to change type, style, and size
• Font
• General shape of characters in the text
• Measured in points
• One point = 1/72 of an inch
• May be serif or sans serif
• Serif is a light cross stroke appearing at top or
bottom of a character
• Tahoma font recommended for Windows 2000
and Windows XP
Microsoft Visual Basic .NET: Reloaded
28
Including Color in the User Interface
• Use color sparingly
• Best to use black text on white or off-white
background - limit colors to no more than 3
• Points to keep in mind:
• Some users will have monochrome monitors
• Users may have varying degrees of colorblindness
• Color is subjective
• Pretty to you is hideous to someone else
• Colors have different meanings for different
cultures
Microsoft Visual Basic .NET: Reloaded
29
Designing Access Keys
• Access key
• Allows user to select object using Alt key in
combination with a letter or number
• Allows user to work with application even if
mouse becomes inoperative
• Allows fast typists to keep hands on the
keyboard
• Allows people with disabilities, which may
prevent them from using mouse, to use the
application
• Assign by including & (ampersand) in control’s
caption
Microsoft Visual Basic .NET: Reloaded
30
Designing Access Keys (continued)
Microsoft Visual Basic .NET: Reloaded
31
Setting the TabIndex Property
• TabIndex property determines order in which
a control receives focus
• A control with focus can accept user input
• Order in which controls added to form
originally determines order of TabIndex
• First control added to form has a TabIndex of
0, second control 1, third control 2, etc.
Microsoft Visual Basic .NET: Reloaded
32
Setting the TabIndex Property (continued)
• Steps to determine appropriate tab order:
• List controls which can accept user input
• List should reflect order the user will want to
access controls
• Assign each control in list with a TabIndex
value beginning with 0
Microsoft Visual Basic .NET: Reloaded
33
Setting the TabIndex Property (continued)
Microsoft Visual Basic .NET: Reloaded
34
Setting the TabIndex Property (continued)
• Setting tab order via Tab Order option of View
Menu
• Place mouse over first control you want in the
tab order and crosshairs appear
Microsoft Visual Basic .NET: Reloaded
35
Setting the TabIndex Property (continued)
• Click each control and tab order changes in
numerical order
Microsoft Visual Basic .NET: Reloaded
36
Designing Default and Cancel Buttons
• Default button
• Selected by clicking it or pressing Enter key
• Specify by setting AcceptButton property of
form
• Cancel button
• Selected by clicking or pressing the Esc key
• Specify by setting CancelButton property of
form
Microsoft Visual Basic .NET: Reloaded
37
Designing Default and Cancel Buttons
(continued)
Microsoft Visual Basic .NET: Reloaded
38
Programming Example - Moonbucks
Coffee
• Create a user interface that allows user to
enter the following customer information:
•
•
•
•
•
•
•
Name
Address
City
State
ZIP code
Pounds of regular coffee ordered
Pounds of decaffeinated coffee ordered
• The interface will need to display total pounds
of coffee ordered and the total order price
Microsoft Visual Basic .NET: Reloaded
39
TOE Chart
Microsoft Visual Basic .NET: Reloaded
40
User Interface
Microsoft Visual Basic .NET: Reloaded
41
Objects, Properties, and Settings
Microsoft Visual Basic .NET: Reloaded
42
Objects, Properties, and Settings
(continued)
Microsoft Visual Basic .NET: Reloaded
43
Tab Order
Microsoft Visual Basic .NET: Reloaded
44
Code
Microsoft Visual Basic .NET: Reloaded
45
Summary
• Plan application jointly with user
• Use TOE chart to identify tasks, objects, and
events
• Text box control allows user to enter data
• Primary window supports viewing and editing
of application’s data
• BorderStyle property sets borders of form and
dialog boxes
Microsoft Visual Basic .NET: Reloaded
46
Summary (continued)
• Organize information to flow vertically or
horizontally (top to bottom, left to right)
• Maintain consistent size, spacing, and
margins when placing controls on form
• Align borders of controls whenever possible
• Graphics and color should be used sparingly
Microsoft Visual Basic .NET: Reloaded
47
Summary (continued)
• Set TabIndex property to set tab order of user
input controls
• Assign access keys to controls
• AcceptButton property of form sets default
button (Enter key)
• CancelButton property of form sets cancel
button (Esc key)
Microsoft Visual Basic .NET: Reloaded
48