Microsoft Visual Basic 2010:
Reloaded
Fourth Edition
Chapter Two
Creating a User Interface
Objectives
After studying this chapter, you should be able to:
• Plan an application using a TOE chart
• Use a text box and table layout panel
• Follow the Windows standards regarding the layout
and labeling of controls
• Follow the Windows standards regarding the use of
graphics, fonts, and color
• Assign access keys to controls
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
2
Objectives (cont'd.)
•
•
•
•
•
•
Set the tab order
Add a splash screen to a project
Use the Font and Color dialog boxes
Designate a default button
Print the interface during run time
Play an audio file
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
3
Planning an Application
• Plan the application before creating the user
interface
• Work jointly with the user to ensure the success of
the application
• TOE (Task, Object, Event) chart:
– Shows application’s tasks, objects, and events
• Tasks, objects, and events should be identified in
the first three steps of planning
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
4
Planning an Application (cont'd.)
Figure 2-1: How to plan an application
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
5
Sunshine Cellular Company
• Sunshine Cellular Company:
– Takes orders by phone for cell phones priced at
$100 each
– Two colors: blue and silver
– Currently the salespeople calculate the order total
• Develop an order-taking application for this
company
• First, identify the application’s tasks
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
6
Identifying the Application’s Tasks
Figure 2-2: Current order form used by Sunshine Cellular
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
7
Identifying the Application’s Tasks
(cont'd.)
• First, review current user procedures and forms
• Ask these questions:
– What information must be displayed on screen
and/or printed on a printer?
– What information will the user need to enter into the
UI to produce the desired display or printout?
– What information will the program need to calculate
to produce the desired display or printout?
– How will the user end the application?
– Will previous information need to be cleared from the
screen before new information is entered?
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
8
Figure 2-3: Tasks entered in a TOE chart
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
9
Identifying the Objects
• Assign each task to an object in the user interface
• Text box: a control that allows the user to enter
data
• Use a button to initiate the calculations
• Use labels to guide the user
• Use buttons to clear the screen and to end the
application
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
10
Figure 2-4: Tasks and objects entered in a TOE chart
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
11
Identifying the Events
• Next, determine which objects need an event to
occur to allow the object to perform its task
• Text boxes: no special events needed for user to
enter the text
• Labels: no special events needed to display the
prompts
• Buttons: action must occur when each button is
clicked
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
12
Figure 2-5: Completed TOE chart ordered by task
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
13
Identifying the Events (cont'd.)
Figure 2-6: Completed TOE chart ordered by object
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
14
Designing the User Interface
• Next step is to design the user interface
• Follow Windows GUI guidelines for:
– Consistency with Windows standards
– Ease of use
– Familiar look and feel makes the application easier
to learn
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
15
Arranging the Controls on a Form
• Design guidelines:
– Information should flow either vertically or
horizontally
– Most important information should be in upper-left
corner of the screen
– Group related controls together using white space or
container controls
• Container controls include:
– Group box control
– Panel control
– Table layout panel control
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
16
Arranging the Controls (cont'd.)
Figure 2-7: Vertical arrangement of the Sunshine Cellular interface
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
17
Arranging the Controls (cont'd.)
Figure 2-8: Horizontal arrangement of the Sunshine Cellular interface
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
18
Arranging the Controls (cont'd.)
• Label guidelines:
– Use a label to identify each text box
– Left-align the label’s text
– Position label to left of or above the text box it
identifies
– Labels and button captions should be one to three
words only and appear on one line
– Labels and captions should be meaningful
– An identifying label should include a colon (:)
– Use sentence capitalization for identifying labels
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
19
Arranging the Controls (cont'd.)
• Sentence capitalization: capitalize first letter in first
word and any other words customarily capitalized
• Book title capitalization: capitalize first letter in each
word (except articles, conjunctions, and prepositions
that do not occur at the beginning or end of the
caption)
• Button guidelines:
–
–
–
–
Size buttons relative to each other: same height
If stacked horizontally, same width also
Most commonly used button should be first
Use book title capitalization for buttons
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
20
Arranging the Controls (cont'd.)
• Positioning guidelines:
– Maintain a consistent margin from all edges of the
form
– Related controls should be placed close to each
other
– Minimize the number of different margins by aligning
control borders where possible using snap lines or
Format menu
– Interface should not distract the user from doing the
work
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
21
Including Graphics
in the User Interface
• Human eye is drawn to pictures before text
• Include graphics only if necessary
– Use for aesthetic purposes
– Keep them small
– Use to clarify a portion of the screen
• Graphics can add a personal touch to a form
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
22
Including Different Fonts
in the User Interface
• Font property: used to change the type, style, and
size of the font
• Font guidelines:
–
–
–
–
Use only one font type for all text in the interface
Use Segoe UI font for Windows 7 or Windows Vista
Avoid italics and underlining
Limit bold text to titles, headings, and key items
• Change the form’s Font property before adding
controls
– Controls will default to the font that is set for the form
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
23
Including Color in the User Interface
• Human eye is drawn to color before B&W
• Color guidelines:
–
–
–
–
–
–
Use color sparingly
Some people have trouble distinguishing colors
What is “acceptable” in colors is subjective
Color may have specific meaning in certain cultures
Use black or dark text on a white or light background
Use maximum of three different colors that
complement each other
– Do not use color as the only means of identification
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
24
Borders and Sizing of Controls
• BorderStyle property: determines the style of a
control’s border
– Settings: None, FixedSingle, Fixed3D
• Identifying labels should be set to None
• Labels that display output should be set to
FixedSingle
• AutoSize property: determines if a label control
automatically sizes to fit its current contents
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
25
Assigning Access Keys
• Access key:
– Allows user to select an object using Alt + access key
– May or may not appear underlined on the control’s text
• Can display temporarily or hide by pressing the Alt key
– Is not case sensitive
• Access key guidelines:
– Assign access keys to each control that can accept
user input (exceptions: OK and Cancel buttons)
– Each access key should be unique
– Follow Windows standards for choice of access keys
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
26
Assigning Access Keys (cont'd.)
• Advantages of using access keys:
– User does not need mouse to navigate and activate
controls
– Allows fast typists to keep hands on keyboard
– Facilitates use of the application by people with
disabilities
• Include & in front of the character to be used as the
access key:
– &Calculate Order  Calculate Order
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
27
Controlling the Tab Order
• TabIndex property:
– Determines the order in which a control receives the
focus when the Tab key is pressed
– Starts at 0
– Assigned by default as the order in which controls
are added to the form at design time
– Should be set to the order in which the user will want
to access the controls
• Focus: the state of being able to accept user input
• Set TabIndex using the Properties window or the
Tab Order option on the View menu
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
28
Setting the TabIndex Property (cont'd.)
Figure 2-11: How to set the TabIndex property using the Tab Order option
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
29
Setting the TabIndex Property (cont'd.)
Figure 2-12: Correct TabIndex values
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
30
Splash Screens
• Splash screen: appears when an application is
started
• Used to introduce the application
• Used to hold the user’s attention while the program
is being loaded into memory
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
31
Splash Screens (cont’d.)
Figure 2-13: Visual Studio 2010 splash screen
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
32
Splash Screens (cont’d.)
Figure 2-14: How to add a splash screen to a project
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
33
Splash Screens (cont'd.)
Figure 2-15: Completed Add New Item dialog box
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
34
Splash Screens (cont'd.)
Figure 2-16: Splash screen created by the Splash Screen template
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
35
Splash Screens (cont'd.)
• Must specify the startup form to be shown first
when the application starts
• Use the Project Designer window to specify the
startup form’s name
• Can also specify a splash screen
• Use the Project Designer window to specify the
splash screen name
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
36
Splash Screens (cont'd.)
Figure 2-17: How to specify the splash screen
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
37
Splash Screens (cont'd.)
Figure 2-18: Project Designer window
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
38
Splash Screens (cont'd.)
Figure 2-19: SplashScreenForm during run time
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
39
Splash Screens (cont'd.)
Figure 2-20: Assembly Information dialog box
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
40
Dialog Boxes
• Primary window: a main window that can be
resized, minimized, maximized, and closed by the
user
• Primary window’s title bar includes:
– Minimize, Maximize, and Close buttons on the right
– Control menu on the left
• Dialog boxes can be closed only
• Dialog box’s title bar includes:
– Close button and optionally a Help button
– No control menu
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
41
Dialog Boxes (cont'd.)
Figure 2-21: Primary window and Font dialog box in Notepad
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
42
Dialog Boxes (cont'd.)
• Use the Dialog template, or use a form to create
dialog boxes
• FormBorderStyle property:
– Sets border style
– Use FixedDialog setting for dialog boxes
• MinimizeBox property and MaximizeBox property
control the existence of Minimize and Maximize
buttons
– Remove Minimize and Maximize buttons for dialog
boxes
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
43
Dialog Boxes (cont’d.)
• Use tools in the Dialogs section of the toolbox for
commonly used dialog boxes:
– Color
– Font
– Save As
• These controls do not appear on the form
– They are placed in the component tray in the IDE
• Component tray stores controls that do not appear
in the user interface during run time
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
44
Dialog Boxes (cont’d.)
Figure 2-22: Font and Color dialog box controls in the component tray
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
45
Dialog Boxes (cont’d.)
• Dialog boxes are modal
– They remain on the screen until the user closes the
dialog box
– No input from keyboard or mouse can occur in the
primary window until the dialog boxes is closed
• Write code to display the dialog box and to use
values selected in the dialog box by the user
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
46
Dialog Boxes (cont’d.)
Figure 2-23: Code entered in the Font button’s Click event procedure
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
47
Dialog Boxes (cont’d.)
Figure 2-24: Font dialog box created by the FontDialog tool
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
48
Dialog Boxes (cont’d.)
Figure 2-25: Code entered in the Color button’s Click event procedure
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
49
Dialog Boxes (cont’d.)
Figure 2-26: Color dialog box created by the ColorDialog tool
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
50
Dialog Boxes (cont’d.)
• Default button: activated when user presses Enter
key when the button does not have the focus
• Cancel button: activated when user presses Esc
key when the button does not have the focus
• Most dialog boxes have a default button and a
cancel button specified
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
51
Designating the Default Button
on a Form
• AcceptButton property:
– A form property that designates the name of the default
button
– Only one per form
– Should be the button that is most often selected by the
user (unless the tasks performed by this button are
both destructive and irreversible)
• Default button has a darkened border during design
time and run time
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
52
Designating the Default Button
on a Form
Figure 2-27: Default button during design time
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
53
Printing an Interface During Run Time
• PrintForm tool: prints an interface during run time
– Contained in the Visual Basic PowerPacks section of
the toolbox
– Control appears in the Component tray
• Print Preview button sends output to the Print
Preview window
• Print button sends output directly to the printer
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
54
Printing an Interface During Run Time
(cont’d.)
Figure 2-28: PrintForm Examples interface
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
55
Printing an Interface During Run Time
(cont’d.)
Figure 2-29: Code entered in the Click event procedures
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
56
Playing Audio Files
• My feature: exposes a set of commonly used
objects to the programmer
– Use the My keyword in code
• Computer object: represents your computer
– Provides access to other objects, such as the Audio
object
• Use the Play method of the Audio object to play
an audio file
• Arguments: information supplied to a method
when it is called
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
57
Playing Audio Files (cont’d.)
Figure 2-30: How to play an audio file
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
58
Programming Tutorial 1
Figure 2-40: Result of clicking each color buttons
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
59
Programming Tutorial 2
Figure 2-47: MainForm for the Music Sampler application
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
60
Programming Example
Figure 2-57: User interface
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
61
Summary
• Plan the application jointly with the user
• Identify tasks, objects, and events and then build
the interface
• Use a TOE chart to record an application’s tasks,
objects, and events
• Textbox control: allows user to enter data
• Align controls to flow horizontally or vertically
• Group related controls visually with white space or
container controls, and maintain consistent margins
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
62
Summary (cont'd.)
• Identifying labels should be left-aligned, positioned
above or to the left of the text box, and contain a
colon (:)
• Use meaningful labels with captions of one to three
words in sentence capitalization
• Button captions should use book title capitalization
• Buttons should be same height; if stacked
vertically, should be same width
• Align borders of controls horizontally and vertically
wherever possible
• Use graphics and colors sparingly
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
63
Summary (cont'd.)
• Avoid italics and underlining, and limit bold text to
titles, headings, and key items
• Use Segoe UI font type for applications running on
Windows Vista or Windows 7
• Identifying labels should have BorderStyle = None
and AutoSize = True
• Output labels should have BorderStyle =
FixedSingle and AutoSize = False
• Assign access keys to controls that accept input
• Use TabIndex property to control where the focus
goes when Tab key or an access key is used
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
64
Summary (cont'd.)
• Use Add New Item dialog box to add a splash
screen to an application
• Specify the splash screen as the startup form in the
Project Designer window
• Primary window: where the primary viewing and
editing of the application’s data takes place
• Dialog window: supports the primary window
• FormBorderStyle property: specifies border style of
a primary window or dialog box
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
65
Summary (cont'd.)
• Use MinimizeBox and MaximizeBox properties to
control whether Minimize and Maximize buttons
appear dimmed on a form
• AcceptButton property designates which button on
a form is activated with the Enter key
• Visual Basic PowerPacks section of the toolbox
provides the PrintForm tool for printing the interface
during run time
• Use the Play method of the My.Computer.Audio
object to play an audio file during run time
Microsoft Visual Basic 2010: Reloaded, Fourth Edition
66